Blue · การลงมือ
#2563EBPHASE 4 · DESIGN SYSTEM
ออกแบบครั้งเดียว ใช้ได้อย่างสม่ำเสมอ
ระบบสี ตัวอักษร ระยะห่าง และส่วนประกอบกลางที่รักษาบุคลิก Human, evidence-informed, calm, practical และ inclusive ในทุกหน้า
สีมีหน้าที่ ระยะห่างมีจังหวะ
ทุกสีต้องมีข้อความหรือสัญลักษณ์ร่วม ไม่ใช้สีเป็นช่องทางสื่อสารเพียงอย่างเดียว และทุกหน้าใช้ฐานระยะห่าง 8px
Teal · การเติบโต
#0F766EViolet · AI/สะท้อนคิด
#7C3AEDInk · เนื้อหาหลัก
#13213CMist · พื้นที่พักสายตา
#F4F8FDPaper · พื้นผิว
#FFFFFFเข้าใจผู้เรียนออกแบบโอกาสที่ดีกว่าเนื้อหาหลักอ่านง่าย มีบรรทัดและความกว้างที่เหมาะสมคำอธิบายและข้อมูลกำกับ
8px16px24px32px48px8121824
ACTIONS & STATUS
ส่วนประกอบพื้นฐาน
สถานะ Hover, Focus, Disabled และขนาดพื้นที่กดถูกกำหนดจากกติกากลาง
Button
Badge
ความรู้เติบโตAI / Reflectionข้อควรระวังต้องส่งต่อ
Progress
ความก้าวหน้า Learning Path68%
การเก็บหลักฐาน42%
Range
Modal
กดเพื่อดูหน้าต่างที่รองรับ Escape, ปิดจากพื้นหลัง และย้าย Focus ไปยังปุ่มปิด
Checklist
- เป้าหมายการเรียนรู้ชัดเจน
- ทางเลือกสัมพันธ์กับอุปสรรค
- มีหลักฐานติดตามผล
ส่วนประกอบที่เป็นเอกลักษณ์ของ LearnerLens
Learner Snapshot
ผู้เรียน Aประถมปลาย · ใช้รหัสแทนชื่อจริง
กำลังเติบโตหลักฐานที่รวบรวมแล้ว72%
✦ สนใจธรรมชาติ✦ อธิบายด้วยภาพ
Coach Composer
AI Coach Composerเริ่มจากหลักฐาน ไม่เริ่มจากฉลาก
LOCAL DEMOไม่ใส่ชื่อจริงหรือข้อมูลที่ระบุตัวเด็กได้
บล็อกเนื้อหาที่คงคุณภาพทุกบท
บทความฉบับเต็มประกอบจากรูปแบบกลาง ทำให้โครงสร้าง ภาษา และการใช้งานสม่ำเสมอเมื่อคลังความรู้ขยายตัว
ตัวอย่างในห้องเรียน
- บริบท
- ผู้เรียนอธิบายปากเปล่าได้ แต่ติดเมื่อเขียนคำตอบยาว
- สิ่งที่ครูลอง
- คงเป้าหมายเนื้อหาและเปิดทางตอบด้วยแผนภาพพร้อมคำอธิบาย
- หลักฐานที่ติดตาม
- ใช้เกณฑ์เนื้อหาเดียวกันเปรียบเทียบคุณภาพหลักฐาน
ACCESSIBILITY CONTRACT
กติกาที่ทุกส่วนประกอบต้องผ่าน
- เป้าหมาย Contrast ระดับ WCAG AA
- พื้นที่กดบนมือถือไม่น้อยกว่า 44×44px
- Focus state มองเห็นได้และใช้งานด้วย Keyboard
- Label และข้อความสถานะอ่านได้ด้วย Screen Reader
- รองรับ prefers-reduced-motion
- ไม่ใช้สีเป็นวิธีสื่อความหมายเพียงอย่างเดียว