ตัวอย่างใช้งานจริง
Guideline ที่มองเห็นและทดลองได้
ตัวอย่างนี้แสดงองค์ประกอบในบริบทของ CheckHealthNow เพื่อเชื่อมกฎการใช้งานกับหน้าจอจริง
การตัดสินใจ
ใช้เมื่อไร
เลือกจากเป้าหมายและบริบท ไม่ใช่จากรูปลักษณ์เพียงอย่างเดียว
- ส่ง ยืนยัน สร้าง บันทึก หรือดำเนินการต่อ
- ไปยังหน้าอื่น ให้ใช้ลิงก์
- การเลือกเปิด–ปิด ให้ใช้ switch
โครงสร้าง
ส่วนประกอบสำคัญ
แต่ละส่วนมีหน้าที่ชัดเจนและทำงานร่วมกันเป็นระบบ
Container
กำหนดบทบาท สถานะ และพื้นที่กด
Label
คำกริยาสั้นที่บอกผลลัพธ์
Icon
ใช้เมื่อช่วยจดจำ ไม่ใช้แทน label
การใช้งานจริง
พฤติกรรมและการจัดวาง
กฎเหล่านี้ช่วยให้การใช้งานคงที่ในทุกขนาดหน้าจอ
ลำดับ
Primary, secondary, subtle และ danger เลือกตามความสำคัญ
กำลังทำงาน
คงความกว้างเดิม ป้องกันการกดซ้ำ และประกาศสถานะ
Responsive
เต็มความกว้างเฉพาะ primary action บนหน้าจอแคบหรือ flow ที่ต้องการ
Guidance
Do / Don’t
ตัวอย่างต้องอธิบายเหตุผลและผลกระทบ ไม่ใช่แค่แสดงว่าถูกหรือผิด
- ใช้ “บันทึกผลตรวจ” เพื่อบอกผลลัพธ์
- ใช้ความสูง 44px เป็นค่าเริ่มต้น
- ใช้ “ตกลง” เมื่อผลลัพธ์ไม่ชัด
- ใช้ปุ่ม 36px ในผลิตภัณฑ์สุขภาพ
Accessibility
ใช้งานได้กับทุกคน
ข้อกำหนดการเข้าถึงเป็นส่วนหนึ่งของคุณภาพ ไม่ใช่ส่วนเสริม
- ใช้โครงสร้าง HTML ที่สื่อความหมายและลำดับโฟกัสตามการอ่าน
- รองรับการซูม 200% คีย์บอร์ด และ reduced motion
- ไม่ใช้สี ไอคอน หรือตำแหน่งเพียงอย่างเดียวเพื่อสื่อความหมาย
ข้อมูลอ้างอิง
สเปกที่สนับสนุน Guideline
ใช้สเปกหลังจากเข้าใจบริบทและกฎการใช้งานแล้ว
- มาตรฐาน
- 44px
- เด่น/มือถือ
- 52px
- พื้นที่กด
- ≥ 44×44px