เฟส 4 ประกอบ component จากเฟส 3 เป็นจอจริงข้าม Web · Mobile · Admin — ทุกจอใช้ token + component ชุดเดียว นี่คือหลักฐานว่า design system ทำงานจริง และเป็นที่มาของ KPI consistency = 0% inconsistency
ครอบ 3 surface ตาม requirements · ด้านล่างโชว์จอหลักแบบ hi-fi เป็นตัวแทน
รวม 20+ จอ · ★ = จอที่ทำ hi-fi เต็มเป็นตัวแทน · ที่เหลือใช้ pattern + component ชุดเดียวกันต่อยอดได้ทันที
ประกอบจาก sidebar nav + KPI card + Table + Badge + Button ชุดเดียวกับเฟส 3
| นักเรียน | ชั้น | ค่าเทอม |
|---|---|---|
| ด.ช. ภูมิ ใจดี | ม.4/1 | ชำระแล้ว |
| ด.ญ. แพร วงศ์ดี | ม.4/2 | ค้างชำระ |
| ด.ช. กฤต มั่นคง | ม.5/1 | รอตรวจ |
| วิชา | กลางภาค | เกรด |
|---|---|---|
| คณิตศาสตร์ | 38/40 | A |
| ภาษาอังกฤษ | 32/40 | B+ |
| วิทยาศาสตร์ | 35/40 | A |
token + component ชุดเดียวกัน ปรับขนาดสำหรับมือถือ (React Native parity)
บริบทใช้งานทั้งวัน — density สูงขึ้น แต่ยังเป็น component ชุดเดียวกัน
| โรงเรียน | ปัญหา | สถานะ | ความสำคัญ | |
|---|---|---|---|---|
| ร.ร.สาธิตนานาชาติ | นำเข้ารายชื่อไม่สำเร็จ | กำลังแก้ | ด่วน | เปิด |
| สถาบันติว BrightMinds | ตั้งค่าการชำระเงิน | รอข้อมูล | ปกติ | เปิด |
| ร.ร.อนุบาลรุ่งอรุณ | เพิ่มสิทธิ์ครูใหม่ | เสร็จ | ปกติ | ดู |
จอที่เหลือ (ที่ไม่ได้ทำ hi-fi เต็ม) ประกอบจาก pattern เหล่านี้ได้ทันที — เร็วและสม่ำเสมอ
ตารางรายการ → คลิกดูรายละเอียด (นักเรียน/เคส/การเงิน)
KPI cards + ตาราง + alert — ภาพรวมทุก role
label + field + validation + action — เพิ่ม/แก้ข้อมูล
มุมมองวัน/สัปดาห์ — ตารางเรียน/กิจกรรม
สถานะว่าง/กำลังโหลด/error — ครบทุกจอ
ค้นหา + กรอง — มาตรฐานเดียวทุกตาราง
ยืนยัน/ฟอร์มซ้อน — โต้ตอบสม่ำเสมอ
สรุป + กราฟ + export — ผู้บริหาร/admin
นี่คือ KPI ของลูกค้า — “UI inconsistency = 0%” พิสูจน์โดยจอทั้งหมดข้างบนใช้ของชุดเดียวกัน
แดง = ค้างชำระ ตรงกันทั้ง Web · Mobile · Admin · ปุ่ม primary หน้าตาเดียวกันทุกที่ · Table เดียวรองรับทั้ง density สบายตา (Web) และหนาแน่น (Admin). เปลี่ยน token ที่เดียว → ทุกจอเปลี่ยนตาม
เฟส 4 พิสูจน์แล้วว่า design system ใช้งานได้จริงข้าม 3 แพลตฟอร์ม จาก component ชุดเดียว. นี่คือ จุดแก้ครั้งที่ 4. เหลือเฟสสุดท้าย — เฟส 5: Documentation · Governance · Handoff (เอกสารใช้งาน · กติกาทีม · ส่ง token→code · publish Figma library · แผน adoption) เพื่อให้ทีม EduFlow “ใช้ต่อเองได้” ครบลูป Design System
รอ R4 จากคุณวิชญ์ (และ ICE) — ติตรงไหนปรับได้ แล้วลุยเฟส 5 ปิดโปรเจกต์ครับ