Light Mode และ Dark Mode ในงานออกแบบ UI — เลือกใช้สียังไงให้ใช้งานได้จริง
ปกติแล้วงานออกแบบ UI ส่วนใหญ่ที่เราเห็นในโปรเจกต์ทั่วไปมักเริ่มจาก Light Mode หรือธีมสีพื้นสว่าง เพราะเป็นรูปแบบที่คนทั่วไปคุ้นเคย ใช้งานง่าย และเหมาะกับการใช้งานในเวลากลางวัน
แต่ในช่วงไม่กี่ปีที่ผ่านมา Dark Mode ก็กลายเป็นฟีเจอร์มาตรฐานที่ผู้ใช้งานคาดหวัง โดยเฉพาะในแอปพลิเคชันที่ใช้ต่อเนื่องนาน ๆ หรือใช้งานในที่แสงน้อย เช่น ปิดไฟเล่นมือถือก่อนนอน
แล้วถ้าต้องออกแบบทั้ง 2 โหมด ควรทำยังไง?
หลายคนอาจคิดว่าเราควรออกแบบ Light Mode ให้เสร็จก่อน แล้วค่อย “ออกแบบใหม่ทั้งหมด” สำหรับ Dark Mode — แต่จริง ๆ แล้ว นี่คือกับดักที่ทำให้โปรเจกต์ล่าช้าและดูแลรักษายากมากในระยะยาว
.
แนวทางที่แนะนำคือ:
.
ควร “ออกแบบระบบสี (Color System)” ให้สามารถทำงานได้กับทั้ง Light และ Dark Mode ตั้งแต่ต้น โดยใช้หลักการ Mapping สีจากแหล่งเดียวกัน จะไม่มีการสร้างสีเฉพาะ Light หรือ Dark นั่นเอง
ทำไมต้องใช้แนวทางนี้?
ลดภาระในการดูแล Design Systemถ้าแยกชุดสีใหม่ทั้งหมด เวลามีการอัปเดตจะต้องดูแลทั้ง 2 ชุดแยกกัน ทำให้เกิดโอกาสผิดพลาดสูงมาก
.
เพิ่มความต่อเนื่องของแบรนด์ (Brand Consistency)ใช้โทนสีเดียวกันทำให้ผู้ใช้งานรับรู้ถึงอัตลักษณ์ของแบรนด์ ไม่ว่าใช้โหมดไหน
.
พัฒนาและทดสอบได้ง่ายขึ้นDev สามารถใช้ Token เดียวกัน แล้วเปลี่ยนค่าจาก Theme ได้เลย ไม่ต้องเขียน CSS หรือ Style แยกมากมาย
.
อย่ามองว่า Light Mode และ Dark Mode คือการออกแบบคนละชุด
ให้มองว่าเรากำลังออกแบบ “ระบบเดียว” ที่แสดงผลได้ 2 แบบ
ด้วยชุดสีที่ควบคุมได้จากแกนกลางเดียวกัน
