ตัวอย่างใช้งานจริง
Guideline ที่มองเห็นและทดลองได้
ตัวอย่างนี้แสดงองค์ประกอบในบริบทของ CheckHealthNow เพื่อเชื่อมกฎการใช้งานกับหน้าจอจริง
เริ่มจากเป้าหมายของผู้ใช้
เลือกส่วนประกอบที่รับรองแล้ว
ตรวจใน flow และบริบทจริง
การตัดสินใจ
ใช้เมื่อไร
เลือกจากเป้าหมายและบริบท ไม่ใช่จากรูปลักษณ์เพียงอย่างเดียว
- เริ่มออกแบบหรือพัฒนาฟีเจอร์ใหม่
- ตรวจความสอดคล้องก่อนส่งงาน
- คัดลอกตัวอย่างโดยไม่ตรวจบริบทผู้ใช้
- ใช้ guideline แทนการทดสอบกับผู้ใช้จริง
โครงสร้าง
ส่วนประกอบสำคัญ
แต่ละส่วนมีหน้าที่ชัดเจนและทำงานร่วมกันเป็นระบบ
Foundations
กฎพื้นฐานด้านสี ตัวอักษร ระยะ และไอคอน
Components
ส่วนประกอบที่มีพฤติกรรมและสถานะชัดเจน
Patterns
วิธีประกอบประสบการณ์สำหรับงานสุขภาพ
การใช้งานจริง
พฤติกรรมและการจัดวาง
กฎเหล่านี้ช่วยให้การใช้งานคงที่ในทุกขนาดหน้าจอ
เริ่มจาก Guideline
เข้าใจเหตุผลและข้อจำกัดก่อนเลือกคอมโพเนนต์
ใช้ของเดิมก่อน
เลือก token และ pattern ที่รับรองแล้วก่อนสร้างใหม่
Guidance
Do / Don’t
ตัวอย่างต้องอธิบายเหตุผลและผลกระทบ ไม่ใช่แค่แสดงว่าถูกหรือผิด
- อ้างอิง guideline ในงานออกแบบและ acceptance criteria
- ใช้ภาพตัวอย่างเป็นสเปกโดยไม่อ่านเหตุผล
Accessibility
ใช้งานได้กับทุกคน
ข้อกำหนดการเข้าถึงเป็นส่วนหนึ่งของคุณภาพ ไม่ใช่ส่วนเสริม
- ใช้โครงสร้าง HTML ที่สื่อความหมายและลำดับโฟกัสตามการอ่าน
- รองรับการซูม 200% คีย์บอร์ด และ reduced motion
- ไม่ใช้สี ไอคอน หรือตำแหน่งเพียงอย่างเดียวเพื่อสื่อความหมาย
ข้อมูลอ้างอิง
สเปกที่สนับสนุน Guideline
ใช้สเปกหลังจากเข้าใจบริบทและกฎการใช้งานแล้ว
- สถานะระบบ
- Alpha · v0.3
- แบบอักษร
- Noto Sans Thai