design
1.0.0
3.1 อย่าใช้แบบอักษรมากกว่าสามตัวบนหน้าหนึ่งในครั้งเดียว
ทำไม ช่วงของแบบอักษรที่ใช้ในหน้าเดียวแสดงให้เห็นถึงแบรนด์ที่กำหนดไม่ดีและอาจดูขี้เกียจและยุ่งเหยิง อย่างน้อยที่สุดอาจใช้แบบอักษรสามแบบที่แตกต่างกันในครั้งเดียว (โลโก้, ส่วนหัว, เนื้อหาของร่างกาย)
3.3 รักษาลำดับชั้นประเภทที่สอดคล้องกัน คุณควรใช้ขนาดตัวอักษรเพียงไม่กี่ตัวและน้ำหนักตัวอักษรหนึ่งหรือสองตัวเพื่อพัฒนาลำดับชั้นประเภท ลองนึกถึงแท็กส่วนหัว HTML H1, H2, H3 ฯลฯ คุณควรมีรูปแบบการมองเห็นที่แตกต่างกันอย่างน้อยสี่ของพวกเขาโดยใช้การเปลี่ยนแปลงในความสว่างขนาดและน้ำหนักเพื่อแสดงถึงความสำคัญของข้อความ สำหรับตัวอย่างที่ยอดเยี่ยมของลำดับชั้นประเภทให้ตรวจสอบแนวทางการเชื่อมต่อของมนุษย์ของ Apple
[3.4] ให้ร่างกายของคุณมีน้ำหนักปกติและเว้นระยะ ข้อความควรอ่านง่ายเสมอดังนั้นสำรองแสงหรือแบบอักษรตัวหนาสำหรับส่วนหัวขนาดใหญ่หรือกรณีที่น้ำหนักตัวอักษรจะมีผลกระทบเพียงเล็กน้อยต่อความชัดเจนของข้อความ นอกจากนี้ให้รักษาระยะห่างของข้อความร่างกายของคุณไว้ที่ 1.15 ถึง 1.5 (ขึ้นอยู่กับขนาด) เพื่อเพิ่มความชัดเจนสูงสุด ตัวอย่างเช่นบทความนี้มีระยะห่างประมาณ 1.5 REM การให้เหตุผลว่าย่อหน้าร่างกายของคุณก็ไม่เจ็บเช่นกัน
3.1 พื้นหลังของร่างกายควรเป็นสีเทาเสมอ
ทำไม พื้นหลังสีแม้กระทั่งสีเทาที่มืดมากสามารถสร้างความเครียดบนดวงตาได้อย่างง่ายดาย สำหรับเนื้อหาที่สำคัญเช่นเนื้อหาข้อความของหน้าเว็บหรือแอปพลิเคชันมันเป็นสิ่งสำคัญผู้ใช้สามารถอ่านและป้อนหน้าเว็บได้อย่างง่ายดาย
3.3 ในกรณีส่วนใหญ่ให้ใช้ข้อความสีขาวบนพื้นหลังภาพสีหรือการไล่ระดับสี หากจำเป็นให้ใช้เงาที่ลดลงมาก (<= 10% ความทึบ) กับข้อความ
ทำไม White-on-Dark มักจะดึงดูดและสร้างความหลากหลายได้ง่ายขึ้น การตัดสินใจเลือกสีเข้มที่จะใช้กับพื้นหลังสีมักจะท้าทาย อย่างไรก็ตามตรวจสอบให้แน่ใจว่าคำสั่งผสมสีใด ๆ ที่คุณเลือกก็สามารถเข้าถึงได้เช่นกัน
3.4 อย่าใช้คนผิวดำสัมบูรณ์
ทำไม สีดำที่บริสุทธิ์ทึบแสง (#000) มักจะรุนแรงเกินไปสำหรับหน้าเว็บส่วนใหญ่ แม้แต่สีตัวอักษรร่างกายของ GitHub ก็คือ #24292E ไม่ใช่ #000 เมื่อมีข้อสงสัยคุณสามารถใช้รหัสสีเทาแบบเว็บที่ปลอดภัยได้ ( #111, #222 ... #AAA, #BBB และอื่น ๆ )
3.5 ตรวจสอบให้แน่ใจว่าส่วนประกอบสีไม่ได้อยู่ติดกัน
ทำไม หากสีนั้นเต็มไปด้วยสีที่แข็งแกร่งมากบ่อยครั้งที่ความแตกต่างของสองสีใกล้เคียงสามารถสร้างความรู้สึกของโพลาไรซ์และการแบ่งแยกที่ทำลายการไหลของหน้าของคุณ ในกรณีที่แถบนำทางอาจสัมผัสฮีโร่สีให้เลือกพื้นหลัง Navbar ที่โปร่งใสแทน
ตรวจสอบให้แน่ใจว่ามีความสอดคล้องในทุกองค์ประกอบ เมื่อคุณกำหนดแหล่งกำเนิดแสงสำหรับหน้าของคุณแล้วให้แน่ใจว่าเงาทั้งหมดเป็นไปตามทิศทาง หากแสง "กดปุ่ม" หน้าของคุณที่ 135 องศาแล้วทุกเงาและการไล่ระดับสีควรอยู่ที่ 135 องศา ใช้เงาเป็นเครื่องมือในการนำเสนอลำดับชั้นหรือสถานะ เงาควรใช้เพื่อเน้นส่วนประกอบหน้าจัดทำโครงสร้างหน้าหรือแสดงสถานะ ตัวอย่างเช่นคุณสามารถแสดงให้เห็นว่าปุ่มถูกกดโดยการลดระดับความสูงเมื่อเทียบกับการเปลี่ยนสี เงามากเกินไปสามารถนำเสนอมิติที่มากเกินไปดังนั้นโปรดระวัง (เช่นอย่าสร้างไซต์ที่มีระดับความสูง 18 ระดับ) ชดเชยของเงาของคุณควรเท่ากับครึ่งหนึ่งของรัศมีเบลอ ตัวอย่างเช่นเงาที่มีการชดเชย x / y ของ 10px ควรมีรัศมีเบลอประมาณ 20px วิธีการนี้ทำให้เงาที่แท้จริงที่สุด รักษาความทึบของเงาให้ต่ำกว่า 25% ทำผิดที่ด้านข้างของความละเอียดอ่อนเพื่อไม่ให้เบี่ยงเบนจากการออกแบบของคุณ หากคุณใช้พื้นหลังมืดในบางกรณีคุณอาจต้องชนความทึบแสงของเงาของคุณเพื่อให้แน่ใจว่าการมองเห็น เงาไม่จำเป็นต้องเป็นสีดำเสมอไป เมื่อใช้เงาบนพื้นผิวสีมันมักจะเป็นประโยชน์ในการใช้สีพื้นหลังที่มืดหรือหมองคล้ำเพื่อปรับปรุงการผสมผสานของเงา
