Semantic Colors
สีตามความหมายบอกสถานะ สำเร็จ เตือน หรือผิดพลาด ให้ผู้ใช้เข้าใจตรงกันทั้งระบบ
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
Semantic Colors คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่เริ่มลงมือทำแล้ว
ใช้เมื่อไหร่
ตอนคุณแสดงสถานะของรายการ เช่น ผ่าน/รอ/ไม่ผ่าน
อ่านแล้วทำอะไรต่อ
ใช้เขียวกับยอดที่ถึงเป้า เหลืองกับยอดที่ใกล้ตก และแดงกับยอดที่หลุดเป้า เพื่อให้เห็นปัญหาได้ในแวบเดียว
เห็นภาพ: ทริคนี้เป็นยังไง
สำเร็จ
#7DB041 · success
เตือน
#E0A800 · warning
ผิดพลาด
#D9342B · danger
ข้อมูล
#0084BD · info
ใช้ตอนไหน?
- ตอนคุณแสดงสถานะของรายการ เช่น ผ่าน/รอ/ไม่ผ่าน
- ตอนคุณทำ KPI หรือไฟสถานะบน dashboard
- ตอนคุณออกแบบข้อความแจ้งเตือนหรือ error
ความหมาย
semantic color (สีตามความหมาย) คือสีที่ผูกกับความหมายไม่ใช่ความสวยงาม เช่น เขียว = สำเร็จ (success) เหลือง = เตือน (warning) แดง = ผิดพลาด (danger) การตั้งสีตามความหมายทำให้ผู้ใช้เดาสถานะได้โดยไม่ต้องอ่าน
จับคู่สีกับความหมาย
กำหนดสีกลางหนึ่งชุดต่อหนึ่งความหมาย แล้วใช้ซ้ำทุกที่
success -> #00843D (สำเร็จ)
warning -> #C77700 (เตือน)
danger -> #C62828 (ผิดพลาด)
info -> #1565C0 (ข้อมูล)ตัวอย่างการใช้
ไฟสถานะบน dashboard
ใช้เขียวกับยอดที่ถึงเป้า เหลืองกับยอดที่ใกล้ตก และแดงกับยอดที่หลุดเป้า เพื่อให้เห็นปัญหาได้ในแวบเดียว