ตัวอย่างใช้งานจริง
Guideline ที่มองเห็นและทดลองได้
ตัวอย่างนี้แสดงองค์ประกอบในบริบทของ CheckHealthNow เพื่อเชื่อมกฎการใช้งานกับหน้าจอจริง
8
16
24
32
48
การตัดสินใจ
ใช้เมื่อไร
เลือกจากเป้าหมายและบริบท ไม่ใช่จากรูปลักษณ์เพียงอย่างเดียว
- จัด stack, inline, inset และระยะระหว่าง section
- ใช้ค่าระยะเฉพาะกิจโดยไม่มีเหตุผล
โครงสร้าง
ส่วนประกอบสำคัญ
แต่ละส่วนมีหน้าที่ชัดเจนและทำงานร่วมกันเป็นระบบ
Inset
ระยะจากขอบ container ถึงเนื้อหา
Stack
ระยะแนวตั้งตามความสัมพันธ์
Grid
แนวจัดวางและขอบเขตเนื้อหา
การใช้งานจริง
พฤติกรรมและการจัดวาง
กฎเหล่านี้ช่วยให้การใช้งานคงที่ในทุกขนาดหน้าจอ
Responsive
ลดจำนวนคอลัมน์ก่อนบีบเนื้อหา
Radius
เลือกตามบทบาท ไม่ผสมหลายระดับในกลุ่มเดียว
Guidance
Do / Don’t
ตัวอย่างต้องอธิบายเหตุผลและผลกระทบ ไม่ใช่แค่แสดงว่าถูกหรือผิด
- ใช้ token ใกล้ที่สุดจากระบบ 4px
- สร้าง 17px หรือ 29px เพื่อแก้ layout ชั่วคราว
Accessibility
ใช้งานได้กับทุกคน
ข้อกำหนดการเข้าถึงเป็นส่วนหนึ่งของคุณภาพ ไม่ใช่ส่วนเสริม
- ใช้โครงสร้าง HTML ที่สื่อความหมายและลำดับโฟกัสตามการอ่าน
- รองรับการซูม 200% คีย์บอร์ด และ reduced motion
- ไม่ใช้สี ไอคอน หรือตำแหน่งเพียงอย่างเดียวเพื่อสื่อความหมาย
ข้อมูลอ้างอิง
สเปกที่สนับสนุน Guideline
ใช้สเปกหลังจากเข้าใจบริบทและกฎการใช้งานแล้ว
- ฐาน
- 4px
- สเกล
- 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64