ก่อนจำชื่อ component ต้องเข้าใจ "หลักคิด" ก่อน — 5 ข้อนี้ใช้ได้กับทุกหน้าจอ. ซ้ายอธิบาย ขวากดเล่นได้จริง
แต่ละหลักการ: ฝั่งซ้ายอธิบาย + ตัวอย่างจริง + ใช้เมื่อไหร่ (เขียว) ระวัง (แดง) · ฝั่งขวาเป็นของจริงกดลองได้. อยากรู้จัก component แต่ละตัว → เปิด คัมภีร์ UI(ลิงก์ท้ายหน้า)
ในหน้านึง ควรมี "ปุ่มหลัก" (เด่นสุด สีเข้ม) อันเดียวเพื่อบอกผู้ใช้ว่า "สิ่งที่ควรทำคืออะไร" ที่เหลือทำให้เบาลง. ถ้าทุกปุ่มเด่นเท่ากัน = ผู้ใช้ลังเล ไม่รู้จะกดอะไร
คนอ่าน "สี" ก่อนอ่านตัวหนังสือ — ใช้สีให้สื่อความหมายตรงกัน: เข้ม/น้ำเงิน = หลัก· เทา = รอง· เหลือง = เตือน· แดง = อันตราย/ลบ. อย่าใช้สีมั่ว เดี๋ยวผู้ใช้ตีความผิด
ทุกการกระทำต้องมี "ฟีดแบ็ก" บอกว่าระบบรับรู้แล้ว — ห้ามกดแล้วเงียบ เพราะผู้ใช้จะไม่รู้ว่าสำเร็จไหม แล้วกดซ้ำ. สำเร็จ→Toast· กำลังทำ→หมุน/ปิดปุ่ม· พลาด→บอก error
การกระทำที่ "ทำแล้วกู้คืนไม่ได้" — ลบ · จ่ายเงิน · ส่งออก — ต้องมีจังหวะให้ผู้ใช้คิดอีกที โดยเด้ง Modal ยืนยันก่อนทำจริง กันพลาดจากการกดเร็ว/กดผิด
หน้าที่ยังไม่มีข้อมูล หรือกำลังโหลด ก็ต้องสื่อสาร — Empty stateบอกว่าทำไมว่าง + ปุ่มให้เริ่ม · Skeletonโชว์โครงเทา ๆ ระหว่างโหลด. ปล่อยหน้าโล่ง = ผู้ใช้นึกว่าเว็บเสีย
หลักการพวกนี้มัก "ทำงานร่วมกัน" เป็นลำดับ. ตัวอย่างคลาสสิกคือการลบ — ใช้ครบ 3 หลักการ: สีแดง (หลัก 2)→ ยืนยัน (หลัก 4)→ ฟีดแบ็ก (หลัก 3)
หลักการพวกนี้ไม่ใช่ทฤษฎี — ระบบจริงอย่าง HomeOffice(ระบบจัดการสำนักงาน) ใช้ครบทุกข้อ: badge สีบอกสถานะ · banner เตือนค้างไว้ · toast บอกผลการส่ง · สีแบรนด์ navy/ฟ้า แดงเฉพาะลบ
เวลาสั่ง AI สร้างหน้าจอ วางบรรทัดพวกนี้ต่อท้าย กันงานออกมาดิบ:
ปุ่ม · Toast · Modal · Alert · ฟอร์ม · ตาราง 30+ ตัว พร้อมตัวอย่างกดเล่นได้