จัดหน้าให้ดูโปร

หน้าสรุปข้อมูลที่ดี เรียงของตาม "ความสำคัญจากบนลงล่าง" — ตัวเลขสำคัญ (KPI) อยู่บนสุด เห็นก่อน, กราฟอยู่กลางบอกแนวโน้ม, ตาราง/รายการละเอียดอยู่ล่างไว้เจาะดู. เหมือนหน้าหนังสือพิมพ์ที่พาดหัวข่าวใหญ่อยู่บน รายละเอียดอยู่ล่าง

3 หลักที่ทำให้หน้า "อ่านง่ายขึ้นทันที": F-pattern ตาคนกวาดจากซ้าย-บนเป็นรูปตัว F → วางของสำคัญตรงนั้น · ตัวเลขใหญ่ คำอธิบายเล็ก เห็นปุ๊บรู้ปั๊บ · เว้นที่ว่าง (whitespace) อย่ายัดจนแน่น. ที่ว่างไม่ใช่ที่เสียเปล่า — มันคือ "ช่องหายใจ" ที่ทำให้ของสำคัญเด่นขึ้น

สีในระบบไม่ได้ใส่ "เพราะสวย" แต่ใส่เพราะ "มีหน้าที่" — แต่ละสีสื่อความหมายตายตัว ผู้ใช้จะเรียนรู้แล้วอ่านหน้าจอได้เร็วขึ้น. เหมือนไฟจราจร: เขียว=ไปได้ แดง=หยุด ไม่มีใครสับสน เพราะสีมีความหมายคงที่

สูตรแบ่งสัดส่วนสีให้หน้าจอดูสมดุล: 60% สีพื้น (มักขาว/เทาอ่อน) · 30% สีรอง (ตัวอักษร/พื้นการ์ด) · 10% สีเน้น (ปุ่ม/ไฮไลต์). เหมือนแต่งตัว: เสื้อผ้าโทนกลาง ๆ เป็นพื้น แล้วใส่ของชิ้นเด่นแค่นิดเดียว (เนกไท/กระเป๋า) ก็ดูดี — ถ้าใส่สีจัดทั้งตัวจะเลี่ยน

ไม่ต้องเลือกสีหลายสีให้ปวดหัว — เอาสีแบรนด์ 1 สี มาทำเฉดอ่อน-เข้มไล่กันเป็นชุด (เลข 50 = อ่อนสุด → 900 = เข้มสุด). เหมือนสีเดียวแต่ผสมขาวให้อ่อนลง/ผสมดำให้เข้มขึ้น ได้ทั้งครอบครัวสีที่เข้ากันแน่นอนเพราะมาจากต้นเดียวกัน

หน้าจอเดียวกันแสดงได้ทั้งพื้นสว่าง (Light) และพื้นมืด (Dark). เคล็ดลับคือ ออกแบบด้วย "ตัวแปรสี" (design tokens) ตั้งชื่อสีว่า --bg --text แทนการใส่โค้ดสีดิบทุกจุด → เวลาสลับโหมด แค่เปลี่ยนค่าตัวแปรชุดเดียว ทั้งเว็บเปลี่ยนตาม ไม่ต้องไล่แก้ทีละจุด

ตัวอักษรคือ 90% ของสิ่งที่ผู้ใช้เห็น จัดดี = ดูแพงทันที. 3 หลัก: ใช้ฟอนต์ 1–2 ตัวพอ (หัวข้อมีบุคลิก + เนื้อหาเรียบอ่านง่าย) · Type scale ขนาดไล่เป็นขั้น (32/24/18/16/14/12) วนใช้ซ้ำ ไม่สุ่ม · Hierarchy ใช้ขนาด+น้ำหนัก+สี แยกว่าอะไรสำคัญกว่ากัน. ภาษาไทยเลือกฟอนต์หัวกลม + เผื่อ line-height สูง (1.6–1.7)