ตัวอย่างใช้งานจริง
Guideline ที่มองเห็นและทดลองได้
ตัวอย่างนี้แสดงองค์ประกอบในบริบทของ CheckHealthNow เพื่อเชื่อมกฎการใช้งานกับหน้าจอจริง
Brand#098CFF
Success#20A45A
Warning#D97706
Danger#D95B65
การตัดสินใจ
ใช้เมื่อไร
เลือกจากเป้าหมายและบริบท ไม่ใช่จากรูปลักษณ์เพียงอย่างเดียว
- แยกลำดับชั้น สถานะ และ feedback
- ใช้สีแดงเพื่อเรียกความสนใจทั่วไป
- ใช้สีแทนข้อความสถานะ
โครงสร้าง
ส่วนประกอบสำคัญ
แต่ละส่วนมีหน้าที่ชัดเจนและทำงานร่วมกันเป็นระบบ
Brand
การกระทำหลักและจุดเน้นของแบรนด์
Neutral
ข้อความ พื้นผิว และเส้นแบ่ง
Semantic
Success, warning, danger และ information
การใช้งานจริง
พฤติกรรมและการจัดวาง
กฎเหล่านี้ช่วยให้การใช้งานคงที่ในทุกขนาดหน้าจอ
สีกับพื้นผิว
เลือกคู่สีจาก token ตามพื้นผิว ไม่ใช้ค่า hex ตรง
โหมดมืด
รักษาความหมายและ contrast ไม่ใช่กลับสีตรง ๆ
Guidance
Do / Don’t
ตัวอย่างต้องอธิบายเหตุผลและผลกระทบ ไม่ใช่แค่แสดงว่าถูกหรือผิด
- ใช้ไอคอนและข้อความกำกับสีสถานะ
- ใช้สีเขียวแทนคำว่า “ปกติ” โดยไม่มีฉลาก
Accessibility
ใช้งานได้กับทุกคน
ข้อกำหนดการเข้าถึงเป็นส่วนหนึ่งของคุณภาพ ไม่ใช่ส่วนเสริม
- ใช้โครงสร้าง HTML ที่สื่อความหมายและลำดับโฟกัสตามการอ่าน
- รองรับการซูม 200% คีย์บอร์ด และ reduced motion
- ไม่ใช้สี ไอคอน หรือตำแหน่งเพียงอย่างเดียวเพื่อสื่อความหมาย
ข้อมูลอ้างอิง
สเปกที่สนับสนุน Guideline
ใช้สเปกหลังจากเข้าใจบริบทและกฎการใช้งานแล้ว
- ข้อความทั่วไป
- ≥ 4.5:1
- องค์ประกอบ UI
- ≥ 3:1