- ไม่จำเป็นต้องทำตามทั้งหมด แต่กฎเหล่านี้มักนำไปใช้ตรง ๆ ได้เสมอ
ใช้สีที่เกือบดำ/เกือบขาว แทนสีดำหรือขาวล้วน
- สีดำล้วนดูไม่เป็นธรรมชาติบนหน้าจอ และสีขาวล้วนสว่างเกินไป
- ใช้ #222222 และ #F2F2F2 แทน #000000 และ #FFFFFF
- จากนี้ไปเมื่อพูดถึงสีดำ/ขาว จะหมายถึงสีเหล่านี้
เติมโทนสีลงในสีกลาง (neutral)
- สีกลางโดยทั่วไปคือ ดำ/ขาว/เทา
- ถ้าจะใช้สี ให้เติมสีลงในสีกลางเพียงเล็กน้อย (เช่น light red แทน grey, dark blue แทน black)
- วิธีนี้ทำให้ชุดสีรู้สึกสอดคล้องกันมากขึ้น
- หากใช้ HSB ก็เพียงเพิ่ม saturation ประมาณไม่เกิน 5%
ใช้ความต่างสูง (high contrast) กับองค์ประกอบสำคัญ
- กับทุกสิ่งที่ผู้ใช้ควรสังเกต เช่น ปุ่ม, เนื้อหา ฯลฯ
- ส่วนเส้นคั่น, drop shadow ฯลฯ ให้ใช้ความต่างให้น้อยที่สุด
ทุกองค์ประกอบในงานออกแบบต้องผ่านการคิดมาแล้ว
- รวมถึงพื้นที่ว่าง, การจัดแนว, ขนาด, ระยะห่าง, สี, เงา ทุกอย่าง
- ถ้ามีใครถามถึงส่วนใดส่วนหนึ่งของดีไซน์ คุณควรอธิบายได้ว่าทำไมจึงทำแบบนั้น
การจัดแนวแบบ Optical มักดีกว่าการจัดแนวแบบคณิตศาสตร์
- รูปทรงบางแบบเมื่อมองด้วยตาแล้วให้ดูตรงแนว จะดีกว่าการจัดให้ตรงตามตัวเลข
- การจัดแนวด้วยสายตาต้องอาศัยการฝึก แต่ถ้าทำเป็นประจำจะจับจุดได้เร็ว
ตัวอักษรใหญ่ให้ลดระยะห่างตัวอักษรและความสูงบรรทัด ส่วนตัวอักษรเล็กให้เพิ่ม
- ใช้กับข้อความทุกประเภท
- ยิ่งตัวอักษรใหญ่ ก็ยิ่งต้องการช่องว่างระหว่างตัวอักษรและระหว่างบรรทัดน้อยลงเล็กน้อย และกลับกันก็เช่นกัน
เส้นขอบของคอนเทนเนอร์ควรตัดกับทั้งคอนเทนเนอร์และพื้นหลัง
- เส้นขอบควรใช้สีที่เข้มกว่าพื้นหลัง ไม่ใช่เป็นสีที่อยู่กึ่งกลางระหว่างด้านในคอนเทนเนอร์กับสีพื้นหลัง
ทุกสิ่งควรถูกจัดแนวกับสิ่งอื่น
- การจัดแนวบอกว่าสิ่งต่าง ๆ มีความเกี่ยวข้องกัน
- ถ้ามีอะไรไม่จัดแนวกับสิ่งอื่น มันจะดูเหมือนไม่ได้เป็นส่วนหนึ่งของงานออกแบบ
- ตามอุดมคติแล้ว แต่ละองค์ประกอบควรถูกจัดแนวกับองค์ประกอบอื่นตามตรรกะบางอย่าง
สีในพาเลตควรมีค่าความสว่างเฉพาะตัว
- เมื่อค่าความสว่างของแต่ละสีต่างกัน สีแต่ละสีจะมีลุคแอนด์ฟีลเฉพาะตัวได้ ไม่ใช่แค่ต่างกันที่ hue
- วิธีนี้ทำให้แต่ละสีไม่แย่งความเด่นกันมากเกินไป จึงได้พาเลตที่ดีกว่า
ถ้าจะเติมสีลงในสีกลาง ให้เลือกใช้โทน Warm หรือ Cool อย่างใดอย่างหนึ่ง อย่าใช้ทั้งคู่
- ถ้าใช้สีโทน warm/cool ปนกันในสีกลาง พาเลตสีจะรู้สึกไม่สอดคล้องกัน
ขนาดต่าง ๆ ควรมีความสัมพันธ์กันทางคณิตศาสตร์
- ระยะห่างหรือขนาดขององค์ประกอบควรถูกกำหนดโดยสเกลบางอย่าง เพื่อช่วยให้งานออกแบบดูสม่ำเสมอ
- ในตัวอย่าง ใช้ทุกองค์ประกอบเป็นจำนวนเท่าของ 8 เช่น spacing เป็น 8/16/24/32, line-height เป็น 48/40/24, ขนาดตัวอักษรเป็น 40/32/16
จัดวางองค์ประกอบตามลำดับของน้ำหนักเชิงภาพ
- ถ้าในหนึ่งแถวหรือคอลัมน์มีหลายองค์ประกอบ และบางส่วนดูมีน้ำหนักมากกว่าส่วนอื่นในเชิงสายตา (เช่น ปุ่ม 2 ปุ่มกับลิงก์ 3 อัน)
องค์ประกอบที่หนักที่สุดควรมาก่อน และองค์ประกอบที่เบากว่าค่อยเรียงตามลำดับไปจนท้ายสุด
- สิ่งที่ต้องระวังคือ องค์ประกอบที่หนักที่สุดในเชิงสายตาควรอยู่ด้านนอกสุด
หากใช้กริดแนวนอน ให้ใช้ 12 คอลัมน์
- ถ้าแบ่งเป็นหน่วยคอลัมน์ การใช้ 12 คอลัมน์จะเปิดโอกาสให้ใช้ 1, 2, 3, 4 คอลัมน์ได้ จึงยืดหยุ่นมาก
เว้นระยะระหว่างจุดที่มีความต่างสูง
- ดวงตาของเรามองหาขอบขององค์ประกอบจากความต่าง ดังนั้นจึงคาดหวังว่าจะมีช่องว่างระหว่างจุดที่ตัดกันชัดเจน
องค์ประกอบที่อยู่ใกล้กว่าควรสว่างกว่า
- ยิ่งองค์ประกอบบนหน้าจอดูเหมือนอยู่ใกล้ผู้ใช้มากขึ้น (อยู่ด้านหน้ามากขึ้น) ก็ยิ่งควรสว่างขึ้น
- ใช้ได้ทั้งกับ light/dark mode เช่นกัน เพราะโลกจริงก็ทำงานแบบนี้
ตั้งค่า Blur ของ drop shadow ให้เป็น 2 เท่าของค่าระยะ
- ถ้าตั้งเงาให้ขยับตามแกน Y 4 พิกเซล ก็ควรตั้งค่า blur เป็น 8 พิกเซล
- เมื่อองค์ประกอบ "เข้าใกล้" ผู้มองมากขึ้น ก็ควรลด opacity ของเงาด้วย
วางสิ่งเรียบง่ายบนสิ่งซับซ้อน หรือวางสิ่งซับซ้อนบนสิ่งเรียบง่าย
- พื้นหลังที่ซับซ้อน (เช่น gradient ที่ฉูดฉาด) จะดูดีที่สุดเมื่อส่วนหน้า (เช่น ข้อความ) เรียบง่าย
- ถ้าส่วนหน้าซับซ้อน พื้นหลังเรียบง่ายจะเหมาะที่สุด
- จะวางของเรียบง่ายบนของเรียบง่ายก็ได้ แต่จะดูจืดไป
- ควรหลีกเลี่ยงการวางของซับซ้อนบนของซับซ้อน เพราะทำให้เกิดความสับสนทางสายตา
รักษาสีของคอนเทนเนอร์ให้อยู่ในขีดจำกัดของความสว่าง
- ความต่างของความสว่างระหว่างพื้นหลังกับคอนเทนเนอร์ควรไม่เกิน 12% ในอินเทอร์เฟซมืด และไม่เกิน 7% ในอินเทอร์เฟซสว่าง (อิงตามค่า brightness ในระบบสี HSB)
- เป็นข้อสรุปจากการศึกษาที่ตรวจสอบเว็บไซต์ที่ออกแบบมาดีราว 100 แห่ง โดยเปรียบเทียบความสว่างของคอนเทนเนอร์กับพื้นหลัง
ทำ padding ด้านนอกให้เท่ากับหรือมากกว่า padding ด้านใน
- padding ด้านในของคอนเทนเนอร์คือพื้นที่ระหว่างองค์ประกอบภายในคอนเทนเนอร์ ส่วน padding ด้านนอกคือพื้นที่ระหว่างองค์ประกอบกับขอบคอนเทนเนอร์
- padding ด้านนอกควรเท่ากับหรือมากกว่าด้านใน
รักษาขนาดข้อความเนื้อหาให้ไม่น้อยกว่า 16px
- 16px คือขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์ส่วนใหญ่
- ข้อความที่เล็กกว่านี้จะอ่านยาก จึงปลอดภัยกว่าที่จะไม่ใช้กับเนื้อหาหลัก
ใช้ความยาวบรรทัดประมาณ 70 ตัวอักษร
- จะเป็น 60 หรือ 80 ก็ไม่ได้ต่างกันมาก แต่ถ้าไกลจากช่วงนี้มากเกินไปอาจทำให้อ่านยาก
ตั้งค่า padding แนวนอนของปุ่มให้เป็น 2 เท่าของ padding แนวตั้ง
- รูปแบบมาตรฐานของปุ่มคือกว้างกว่าสูง
- ถ้าอยากให้คนรับรู้ว่าเป็นปุ่ม ก็ควรยึดตามแพตเทิร์นนี้
ใช้แบบอักษรไม่เกิน 2 แบบ
- แบบอักษรที่สองเป็นโอกาสในการเสริมคอนเซปต์เบื้องหลังงานออกแบบ
- และยังช่วยเพิ่มความหลากหลายให้ดีไซน์ด้วย
- แทบไม่มีความจำเป็นต้องใช้มากกว่า 2 แบบ และอาจทำให้งานดูสับสนทางสายตา
จัดการมุมซ้อนกันให้ถูกต้อง
- บางครั้งมีมุมโค้งมากกว่าหนึ่งชั้นซ้อนกัน
- ถ้าต้องการให้ดูถูกต้อง ให้ตั้งรัศมีมุมด้านในเป็นค่ารัศมีมุมด้านนอกลบด้วยระยะห่างระหว่างสองมุมนั้น
- ตัวอย่าง) ถ้ารัศมีมุมด้านนอกเป็น 30px และอยู่ห่างจากมุมด้านใน 20px รัศมีมุมด้านในก็ควรเป็น 10px
อย่าวางเส้นคั่นสองเส้นติดกัน
- การเปลี่ยนพื้นหลัง, ขอบคอนเทนเนอร์, เส้นแบ่งส่วน เป็นสิ่งที่แยกความต่างทางสายตาได้ยาก
- อย่าให้มีเส้นคั่นมากกว่าหนึ่งเส้นวางชิดติดกัน
6 ความคิดเห็น
@xguru
ผมตั้งค่าสไตล์สำหรับอ่านแบบด้านล่างเพื่อให้ GeekNews อ่านง่ายขึ้นครับ ;-)
https://userstyles.org/styles/179148#comments-section-wrapper
ขอบคุณครับ
อันนี้ดีมากเลยครับ..ปกติผมกังวลเรื่องการออกแบบอยู่เสมอ แต่ถ้ามีไกด์แบบนี้ก็น่าจะช่วยเพิ่มประสิทธิภาพการทำงานได้มากครับ
ขอบคุณสำหรับคำแปลมากครับ! ช่วยได้มากเลย
ดีมากเลย!
@xguru
ขอแจ้งว่ามีการแปลผิดครับ
"องค์ประกอบที่อยู่ใกล้กันมากขึ้นควรมีน้ำหนักเบากว่า" -> "องค์ประกอบที่อยู่ใกล้กันมากขึ้นควรสว่างกว่า"
อ๋อ จริงด้วย ขอบคุณครับ~!