หลักออกแบบหน้าจอ + รู้จัก component (ปุ่ม · Toast · Modal · Alert) พร้อมตัวอย่างหน้าจอจริงทุกสไลด์ — รู้แล้วสั่ง AI/คุยงานรู้เรื่อง
ซ้าย = หลักการ · ขวา = หน้าจอจริง
ผู้ใช้ต้องรู้ทันทีว่า "ต้องกดอะไร"
เด่น = หลัก · จาง = รอง · อย่ามีปุ่มเด่นแย่งกัน
ผู้ใช้อ่านสีก่อนอ่านตัวหนังสือ
ทุกการกระทำต้องมี feedback — ห้ามเงียบ
สำเร็จ → Toast · กำลังทำ → หมุน · พลาด → error
ลบ · จ่ายเงิน · ส่งออก — ต้องมีจังหวะคิด
ปุ่มแดง → Modal ยืนยัน → Toast
หน้าว่าง/กำลังโหลด ก็ต้องสื่อสาร
Empty บอกทำไมว่าง + ทางไป · Skeleton ระหว่างโหลด
ชิ้นส่วน + ใช้เมื่อไหร่ + หน้าจอจริง
เด้งสั้น ๆ แล้วหายเอง ไม่ขวางงาน
เด้งกลางจอ — ให้ตอบ/ทำก่อนไปต่อ
คาอยู่ในหน้า ไม่หายเอง
| อยากทำอะไร | ใช้ |
|---|---|
| บอกว่าสำเร็จ แล้วจบ | Toast |
| ให้ผู้ใช้ยืนยัน/กรอกก่อนไปต่อ | Modal |
| สถานะที่ต้องเห็นค้างไว้ | Alert / Banner |
Checkbox หลายอัน · Radio อันเดียว · Toggle เปิดปิดทันที
Tabs สลับมุมมองในที่เดียว · Card รวมข้อมูล 1 ชิ้นเป็นกล่อง
หัวใจที่มือใหม่ลืม — ผู้ใช้หาทางในเว็บได้ยังไง
จอแคบ ซ่อนเมนูไว้ใต้ปุ่ม ☰
บอกว่า "ตอนนี้อยู่ตรงไหน" ของเว็บ + กดย้อนได้
แถบเมนูล่างจอ — สลับหน้าหลัก ๆ ด้วยนิ้วโป้ง
HomeOffice — ระบบจัดการสำนักงาน
ระบบจริงใช้ของพื้นฐานพวกนี้ — แค่ถูกที่ ถูกเวลา