Wireframes — 6 หน้าสำคัญ
โครงร่างความละเอียดต่ำเพื่อตรวจ UX ก่อนลงมือทำ UI จริง แต่ละหน้ามี Primary Action เพียงหนึ่งเดียว และระบุพฤติกรรมบนมือถือตั้งแต่ 375px
1. Teacher Home
ครู
Primary: สร้างห้องเรียน
┌──────────┬──────────────────────────────────────────────┐ │ SIDEBAR │ ค้นหา สลับบทบาท แจ้งเตือน โปรไฟล์ │ │ หน้าแรก ├──────────────────────────────────────────────┤ │ ห้องเรียน│ สวัสดีครูสมทรง วันนี้มี 2 เรื่องที่ควรจัดการ │ │ คลัง │ [ + สร้างห้องเรียน ] ← Primary เดียวของหน้า │ │ งาน │ ┌──────────┬──────────┬──────────┐ │ │ นักเรียน │ │ ต้องตรวจ │ ส่งแล้ว │ ค่าเฉลี่ย│ │ │ สถิติ │ │ 12 │ 78% │ 72 คะแนน│ │ │ แจ้งเตือน│ └──────────┴──────────┴──────────┘ │ │ ตั้งค่า │ ห้องเรียนของฉัน (การ์ด มีแถบสีประจำวิชา) │ │ │ [ฟิสิกส์ ม.5] [ชีววิทยา ม.4] [เคมี ม.6] │ │ │ นักเรียนที่ต้องการความช่วยเหลือ + เหตุผล │ │ │ • ปาล์ม — คะแนนลด 2 ครั้งติด [ ส่งข้อความ ] │ └──────────┴──────────────────────────────────────────────┘
┌──────────────┐ │ LearnSpace ⌄ │ │ วันนี้ 2 เรื่อง│ │ [ สร้างห้องฯ ]│ │ ─ สถิติ 3 การ์ด (เลื่อนแนวนอน) │ ─ ห้องเรียน (รายการ) │ ─ ต้องช่วยเหลือ ├──────────────┤ │ 🏠 📚 📝 👥 ⚙ │ ← bottom nav 5 เมนู └──────────────┘
- สถิติทุกตัวคลิกได้และพาไปหน้าที่ลงมือทำต่อได้
- “นักเรียนที่ต้องการความช่วยเหลือ” ต้องระบุเหตุผลเสมอ
- สถานะว่าง: อธิบายว่าห้องเรียนคืออะไร + ปุ่มสร้างห้องแรก
2. Classroom Overview
ครู
Primary: เพิ่มเนื้อหา
┌──────────┬──────────────────────────────────────────────┐ │ SIDEBAR │ ฟิสิกส์ ม.5/2 · ภาคเรียน 1 · รหัสเข้าห้อง 8K4M2P│ │ │ [ภาพรวม][เนื้อหา][งาน][นักเรียน][สถิติ][ตั้งค่า]│ │ │ ─────────────────────────────────────────────│ │ │ [ + เพิ่มเนื้อหา ] [คัดลอกลิงก์เชิญ] │ │ │ ┌─────────────┬─────────────┬──────────────┐ │ │ │ │ นักเรียน 32 │ ส่งงาน 78% │ เฉลี่ย 72 │ │ │ │ └─────────────┴─────────────┴──────────────┘ │ │ │ เนื้อหาล่าสุด สถานะ │ │ │ • แรงและการเคลื่อนที่ [เผยแพร่แล้ว] │ │ │ • คลื่นกล [ฉบับร่าง] │ │ │ กำลังจะครบกำหนด: ควิซบทที่ 3 — พรุ่งนี้ 23:59 │ └──────────┴──────────────────────────────────────────────┘
┌──────────────┐ │ ← ฟิสิกส์ ม.5│ │ รหัส 8K4M2P 📋│ │ แท็บเลื่อนแนวนอน │ สถิติ 3 การ์ด │ │ เนื้อหาล่าสุด │ │ [ + เพิ่มเนื้อหา ] ← ลอยใน thumb zone └──────────────┘
- Join Code ต้องคัดลอกได้ในแตะเดียว และมีปุ่มสร้างรหัสใหม่ในหน้าตั้งค่า
- ป้ายสถานะใช้ทั้งสีและข้อความ (ฉบับร่าง / เผยแพร่แล้ว / กำลังประมวลผล)
- ปุ่มลบห้องอยู่ในแท็บตั้งค่าเท่านั้น แยกจากปุ่มทั่วไป
3. AI Content Studio
ครู
Primary: เผยแพร่
┌────────────┬─────────────────────────┬───────────────┐ │ 1 เลือกแหล่ง│ 2 ฉบับร่างที่แก้ไขได้ │ 3 ตรวจสอบ │ │ ☑ บทที่3.pdf│ หัวข้อบทเรียน │ ที่มา: บทที่3 │ │ ☑ สไลด์.pptx│ • จุดประสงค์การเรียนรู้ │ หน้า 12-14 │ │ ☐ ลิงก์ สสวท│ • แนวคิดสำคัญ │ [เปิดต้นฉบับ] │ │ │ • คำอธิบาย + ตัวอย่าง │ ความมั่นใจ 82%│ │ สร้างอะไร: │ • Quick Check 3 ข้อ │ ⚠ AI อาจผิด │ │ ⦿ บทเรียน │ [สร้างใหม่เฉพาะส่วนนี้] │ โปรดตรวจสอบ │ │ ○ ควิซ │ │ │ │ ○ แฟลชการ์ด│ บันทึกอัตโนมัติ ✓ 12:04 │ │ ├────────────┴─────────────────────────┴───────────────┤ │ [ดูมุมนักเรียน] [บันทึกฉบับร่าง] [ เผยแพร่ ] │ └──────────────────────────────────────────────────────┘
┌──────────────┐ │ ขั้นที่ 2/3 ▓▓░│ │ ฉบับร่าง (แก้ได้) │ [สร้างใหม่ส่วนนี้] │ ที่มา → bottom sheet │ [ ดูมุมนักเรียน ] │ [ เผยแพร่ ] │ └──────────────┘
- ทุกผลลัพธ์จาก AI เกิดเป็น “ฉบับร่าง” เสมอ ห้ามเผยแพร่อัตโนมัติ
- มีประวัติเวอร์ชันและเลิกทำ (undo) ระดับส่วนย่อย
- สถานะ AI: กำลังคิด / กำลังพิมพ์ / ไม่พบข้อมูลพอ / ผิดพลาด — ครบทุกสถานะ
4. Student Home
นักเรียน
Primary: เรียนต่อ
┌──────────┬──────────────────────────────────────────────┐ │ SIDEBAR │ สวัสดีพลอย · ทบทวนต่อเนื่อง 5 วัน 🔥 │ │ หน้าแรก │ [ เรียนต่อ: คลื่นกล — เหลือ 4 นาที ] │ │ ห้องเรียน│ วันนี้ควรทำ (สูงสุด 3 รายการ) │ │ งาน │ 1) ควิซบทที่ 3 · ครบกำหนด 23:59 · ~10 นาที │ │ การเรียน │ 2) ทบทวนแฟลชการ์ด 12 ใบ · ~6 นาที │ │ ฝึกฝน │ 3) อ่านสรุปเรื่องแรงเสียดทาน · ~5 นาที │ │ ก้าวหน้า │ ─────────────────────────────────────────────│ │ ตั้งค่า │ ความก้าวหน้ารายวิชา (แถบ + ตัวเลข) │ └──────────┴──────────────────────────────────────────────┘
┌──────────────┐ │ สวัสดีพลอย 🔥5│ │ [ เรียนต่อ ] │ ← Primary ใน thumb zone │ วันนี้ควรทำ 3 │ │ □ ควิซบท 3 │ │ □ แฟลชการ์ด 12│ │ □ อ่านสรุป │ ├──────────────┤ │ 🏠 📚 📝 ✨ 📈 │ └──────────────┘
- ไม่แสดงงานเกิน 3 รายการ ที่เหลือซ่อนใต้ “ดูงานทั้งหมด”
- ใช้ภาษาให้กำลังใจ ไม่ใช้คำว่า ล้มเหลว/ตก
- สถานะว่าง: “ยังไม่ได้เข้าร่วมห้องเรียน” + ช่องกรอกรหัส 6 หลัก
5. Lesson Player + AI Tutor
นักเรียน
Primary: ทำ Quick Check
┌───────────────────────────────┬──────────────────────┐ │ ▓▓▓▓▓▓░░░░ 60% บันทึกตำแหน่ง │ ถาม AI │ │ (ความกว้างอ่านสบาย ≤760px) │ ─────────────────────│ │ จุดประสงค์การเรียนรู้ │ นร: แรงเสียดทานคือ? │ │ แนวคิดสำคัญ │ AI: ... │ │ คำอธิบาย + ตัวอย่าง + ตาราง │ [บทที่3.pdf น.12] │ │ │ ↳ คลิกเปิดต้นฉบับ │ │ ── Quick Check ── │ [อธิบายง่ายขึ้น] │ │ ( ) ตัวเลือก ก │ [ยกตัวอย่าง] │ │ ( ) ตัวเลือก ข │ [ถามฉันกลับ] │ │ [ ตรวจคำตอบ ] │ [สร้างโจทย์ฝึก] │ │ สรุปสิ่งที่ได้เรียนรู้ │ ⚠ ตรวจสอบการอ้างอิง │ └───────────────────────────────┴──────────────────────┘
┌──────────────┐ │ ▓▓▓▓░░ 60% │ │ เนื้อหาบทเรียน│ │ Quick Check │ │ [ ตรวจคำตอบ ] │ │ ปุ่มลอย 💬 ถาม AI │ → เปิด bottom sheet │ อ้างอิง → sheet ต้นฉบับ └──────────────┘
- ทุกข้อเท็จจริงจาก AI ต้องมีการอ้างอิงที่คลิกเปิดต้นฉบับตรงตำแหน่งได้
- ถ้าไม่มีข้อมูลในเอกสาร ต้องตอบว่ายังไม่พบข้อมูลเพียงพอ ห้ามเดา
- บันทึกตำแหน่งล่าสุดอัตโนมัติเพื่อกลับมาเรียนต่อในคลิกเดียว
6. Quiz Results + สิ่งที่ควรทำต่อ
นักเรียน
Primary: ฝึกหัวข้อที่ยังอ่อน
┌──────────────────────────────────────────────────────┐ │ ควิซบทที่ 3 · ทำครั้งที่ 1 จาก 2 │ │ 8 / 10 คะแนน ผ่านเกณฑ์ ✓ ใช้เวลา 9 นาที │ │ ─────────────────────────────────────────────────────│ │ สิ่งที่ควรทำต่อ │ │ 1) ทบทวน “แรงเสียดทานจลน์” — ผิด 2 ข้อ [ ฝึกต่อ ] │ │ 2) ทบทวนแฟลชการ์ด 6 ใบของหัวข้อนี้ │ │ ─────────────────────────────────────────────────────│ │ ทบทวนรายข้อ │ │ ข้อ 4 ✗ คำตอบของคุณ: ข · คำตอบที่ถูก: ค │ │ เพราะ ... (คำอธิบาย) [บทที่3.pdf น.14] │ │ ข้อ 7 ✓ │ └──────────────────────────────────────────────────────┘
┌──────────────┐ │ 8/10 ผ่าน ✓ │ │ สิ่งที่ควรทำต่อ │ [ ฝึกหัวข้อนี้ ] ← Primary │ ทบทวนรายข้อ ⌄ │ │ อ้างอิง → sheet │ └──────────────┘
- แสดงคำอธิบายตามนโยบายที่ครูกำหนด (ทันที / หลังปิดรับ / ไม่แสดง)
- ใช้ภาษาสนับสนุน เช่น “ยังไม่ผ่านรอบนี้ ลองอีกครั้งได้”
- ผลลัพธ์อัปเดตทั้ง Progress ของนักเรียนและ Analytics ของครู