เริ่มจากสีโทนกลาง
พื้นหลัง พื้นผิว และข้อความกินพื้นที่เกือบทั้งหน้าจอ จึงควรเลือกเป็นอันดับแรก สีเทาที่เจือสีหลักเล็กน้อยดูประณีตกว่าสีเทาล้วน และปล่อยให้สีของแบรนด์โดดเด่นเฉพาะจุดที่สำคัญ
กำหนดสีสถานะตั้งแต่ต้น
ทุกแอปต้องมีสีสำหรับข้อผิดพลาด สำเร็จ คำเตือน และข้อมูล เลือกเฉดที่เข้ากับพาเลต และอย่าใช้สีข้อผิดพลาดกับสิ่งอื่น เช่น ปุ่มของแบรนด์ เสริมสีด้วยไอคอนหรือข้อความ เพื่อให้ข้อความไม่ได้พึ่งสีเพียงอย่างเดียว
ออกแบบโหมดมืดด้วย
โทรศัพท์ส่วนใหญ่รองรับโหมดมืด และผู้ใช้จำนวนมากก็เปิดใช้อยู่ การกลับสีอย่างเดียวไม่พอ ให้ใช้สีเทาเข้มมากแทนสีดำล้วน และลดความสดของสีเน้นลงเล็กน้อยเพื่อไม่ให้ดูสั่นบนพื้นหลัง
ตรวจสอบคอนทราสต์และพื้นที่สัมผัส
ตาม WCAG ข้อความควรมีคอนทราสต์กับพื้นหลังอย่างน้อย 4.5:1 ปุ่มต้องดูแตกต่างกันเมื่อแอ็กทีฟ ถูกกด หรือปิดใช้งาน ลองใช้แอปกลางแจ้งและในความสว่างหน้าจอต่ำ เพราะผู้คนจำนวนมากใช้งานแบบนั้น
คำถามที่พบบ่อย
แอปหนึ่งควรมีกี่สี
โดยทั่วไปคือสีหลักหนึ่งสี สีเน้นที่จะมีหรือไม่ก็ได้ สีโทนกลางสำหรับพื้นหลัง พื้นผิว และข้อความ และสีสถานะสี่สี: ข้อผิดพลาด สำเร็จ คำเตือน และข้อมูล
ปุ่มหลักของแอปควรใช้สีอะไร
สีหลักของแบรนด์คุณ หากตัดกับพื้นหลังได้ดี ใช้เฉพาะกับการกระทำที่สำคัญที่สุดในแต่ละหน้าจอ
จะสร้างพาเลตโหมดมืดได้อย่างไร
พื้นหลังเปลี่ยนเป็นสีเทาเข้มมากที่เจือสีของแบรนด์เล็กน้อย พื้นผิวสว่างกว่าพื้นหลังเล็กน้อย และสีเน้นจะสว่างขึ้นและนุ่มลง ข้อความเปลี่ยนเป็นสีขาวนวล ดูได้ในทุกตัวอย่างเมื่อคลิกปุ่ม “มืด”
แอปแบบมินิมอลควรเลือกพาเลตแบบไหน
พื้นฐานเป็นโทนเทา (พื้นหลังเกือบขาว พื้นผิวเทาอ่อนมาก และข้อความเกือบดำ) กับสีเน้นเพียงสีเดียวสำหรับสิ่งสำคัญ พาเลตในหมวด “มินิมอล” ใช้แนวคิดนี้
จะนำพาเลตไปใช้ใน Figma, Flutter หรือ SwiftUI ได้อย่างไร
คลิก “ส่งออก” ที่พาเลต แล้วเลือกรูปแบบ: โทเค็น JSON สำหรับ Figma, ColorScheme สำหรับ Flutter, สีพร้อมโหมดสว่างและมืดสำหรับ SwiftUI, Tailwind หรือตัวแปร CSS คัดลอกโค้ดได้ในแตะเดียว
