กลับไปหน้า Design
ทริคDesign

Color in Charts

การเลือกสีในกราฟช่วยให้แยกชุดข้อมูลออก ไม่ใช้สีเกินจำเป็น และคนตาบอดสีก็อ่านได้

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

Color in Charts คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่เริ่มลงมือทำแล้ว

ใช้เมื่อไหร่

ตอนคุณทำกราฟเปรียบเทียบหลายชุดข้อมูล

อ่านแล้วทำอะไรต่อ

ทำเส้นอื่นเป็นสีเทาทั้งหมด แล้วใส่สีแบรนด์เฉพาะเส้นที่ต้องการเล่าเรื่อง คนดูจะโฟกัสถูกจุดทันที

เห็นภาพ: ทริคนี้เป็นยังไง

สีเยอะเกิน

ทุกเส้นคนละสี สายตาไม่รู้จะมองไหน เส้นแข่งกันเด่น

เน้นจุดเดียว

เส้นอื่นเทาจาง เส้นสำคัญสีเขียวเด่น สายตาไปถูกที่

ใช้สีรุ้งทุกเส้น เทียบกับ เน้นเส้นเดียวด้วยเทา + 1 สี

ใช้ตอนไหน?

  • ตอนคุณทำกราฟเปรียบเทียบหลายชุดข้อมูล
  • ตอนคุณต้องเน้นชุดข้อมูลหนึ่งให้เด่นกว่าชุดอื่น
  • ตอนคุณเลือกสีให้ตารางและกราฟบน dashboard

ความหมาย

การใช้สีในกราฟคือการเลือกชุดสี (color palette) ให้แต่ละเส้นหรือแท่งข้อมูลแยกออกจากกันได้ชัด ควรใช้สีน้อยที่สุดที่จำเป็น และเลือกสีที่ผู้มีภาวะ color blindness (ตาบอดสี) ยังแยกออกได้

หลักเลือกสีกราฟ

ใช้สีเทากับชุดข้อมูลพื้น แล้วใช้สีเน้นกับชุดที่อยากให้คนมอง

1 ชุดเด่น -> สีแบรนด์, ที่เหลือ -> สีเทา
หลายชุด -> palette ตาบอดสีปลอดภัย (เช่น Okabe-Ito)
ลำดับค่า -> ไล่เฉดสีเดียว (sequential)

ตัวอย่างการใช้

เน้นเส้นเดียวด้วยสีเทา

ทำเส้นอื่นเป็นสีเทาทั้งหมด แล้วใส่สีแบรนด์เฉพาะเส้นที่ต้องการเล่าเรื่อง คนดูจะโฟกัสถูกจุดทันที