ตัวอย่างใช้งานจริง
Guideline ที่มองเห็นและทดลองได้
ตัวอย่างนี้แสดงองค์ประกอบในบริบทของ CheckHealthNow เพื่อเชื่อมกฎการใช้งานกับหน้าจอจริง
DISPLAY · 56 / 1.15
สุขภาพที่เข้าใจง่าย
HEADING · 32 / 1.3ผลตรวจของคุณ
BODY · 16 / 1.65ข้อมูลสุขภาพควรอ่านง่าย มีบริบท และบอกขั้นตอนถัดไปอย่างชัดเจน
การตัดสินใจ
ใช้เมื่อไร
เลือกจากเป้าหมายและบริบท ไม่ใช่จากรูปลักษณ์เพียงอย่างเดียว
- กำหนดหัวเรื่อง เนื้อหา label และข้อมูลตัวเลข
- สร้างขนาดหรือน้ำหนักใหม่เฉพาะหน้า
โครงสร้าง
ส่วนประกอบสำคัญ
แต่ละส่วนมีหน้าที่ชัดเจนและทำงานร่วมกันเป็นระบบ
Display
ข้อความนำสั้น ๆ บนหน้าสำคัญ
Heading
แบ่งโครงสร้างและช่วยการสแกน
Body & label
เนื้อหา คำอธิบาย และป้ายควบคุม
การใช้งานจริง
พฤติกรรมและการจัดวาง
กฎเหล่านี้ช่วยให้การใช้งานคงที่ในทุกขนาดหน้าจอ
ไทยและอังกฤษ
ใช้ scale เดียวกัน แต่ให้ line-height ภาษาไทยมีพื้นที่สระและวรรณยุกต์
ข้อมูลคลินิก
วางค่า หน่วย ช่วงอ้างอิง และเวลาให้สัมพันธ์กัน
Guidance
Do / Don’t
ตัวอย่างต้องอธิบายเหตุผลและผลกระทบ ไม่ใช่แค่แสดงว่าถูกหรือผิด
- ใช้ body 16px และ line-height อย่างน้อย 1.6 สำหรับเนื้อหาหลัก
- ใช้ monospace หรือ uppercase กับคำอธิบายยาว
Accessibility
ใช้งานได้กับทุกคน
ข้อกำหนดการเข้าถึงเป็นส่วนหนึ่งของคุณภาพ ไม่ใช่ส่วนเสริม
- ใช้โครงสร้าง HTML ที่สื่อความหมายและลำดับโฟกัสตามการอ่าน
- รองรับการซูม 200% คีย์บอร์ด และ reduced motion
- ไม่ใช้สี ไอคอน หรือตำแหน่งเพียงอย่างเดียวเพื่อสื่อความหมาย
ข้อมูลอ้างอิง
สเปกที่สนับสนุน Guideline
ใช้สเปกหลังจากเข้าใจบริบทและกฎการใช้งานแล้ว
- แบบอักษรหลัก
- Noto Sans Thai
- น้ำหนัก
- 400 · 500 · 600 · 700