ตัวอย่างใช้งานจริง
Guideline ที่มองเห็นและทดลองได้
ตัวอย่างนี้แสดงองค์ประกอบในบริบทของ CheckHealthNow เพื่อเชื่อมกฎการใช้งานกับหน้าจอจริง
การตัดสินใจ
ใช้เมื่อไร
เลือกจากเป้าหมายและบริบท ไม่ใช่จากรูปลักษณ์เพียงอย่างเดียว
- แสดงหลายกลุ่มข้อมูลที่มีโครงสร้างซ้ำกัน
- เนื้อหาต่อเนื่องแบบบทความ
- ต้องซ้อนการ์ดหลายชั้น
โครงสร้าง
ส่วนประกอบสำคัญ
แต่ละส่วนมีหน้าที่ชัดเจนและทำงานร่วมกันเป็นระบบ
Header
หัวเรื่อง สถานะ และ metadata
Content
ข้อมูลหลักที่จัดลำดับแล้ว
Action
การกระทำหลักไม่เกินหนึ่งรายการ
การใช้งานจริง
พฤติกรรมและการจัดวาง
กฎเหล่านี้ช่วยให้การใช้งานคงที่ในทุกขนาดหน้าจอ
Clickable card
ทั้งการ์ดเป็นลิงก์ได้เมื่อไม่มี control ซ้อน
Responsive
เปลี่ยนจำนวนคอลัมน์โดยไม่บีบเนื้อหา
Guidance
Do / Don’t
ตัวอย่างต้องอธิบายเหตุผลและผลกระทบ ไม่ใช่แค่แสดงว่าถูกหรือผิด
- ให้หัวเรื่องบอกเนื้อหาของการ์ดได้ด้วยตัวเอง
- ซ้อนการ์ดหรือวางหลาย primary actions
Accessibility
ใช้งานได้กับทุกคน
ข้อกำหนดการเข้าถึงเป็นส่วนหนึ่งของคุณภาพ ไม่ใช่ส่วนเสริม
- ใช้โครงสร้าง HTML ที่สื่อความหมายและลำดับโฟกัสตามการอ่าน
- รองรับการซูม 200% คีย์บอร์ด และ reduced motion
- ไม่ใช้สี ไอคอน หรือตำแหน่งเพียงอย่างเดียวเพื่อสื่อความหมาย
ข้อมูลอ้างอิง
สเปกที่สนับสนุน Guideline
ใช้สเปกหลังจากเข้าใจบริบทและกฎการใช้งานแล้ว
- Padding
- 16 · 20 · 24px