รู้จักชิ้นส่วนหน้าจอ

ปุ่มมีหลายระดับ ใช้สีและน้ำหนักบอกว่าอันไหนสำคัญกว่า. ปุ่มเด่นสุด (เข้ม) = การกระทำหลัก, ที่เหลือเบาลงตามความสำคัญ

ข้อความเล็ก ๆ เด้งขึ้นมุมจอแล้วหายเอง ไม่ขวางการทำงาน — เหมือนป้ายบอก "เรียบร้อยแล้ว" แวบเดียว

หน้าต่างเด้งกลางจอ พื้นหลังมืดลง — บังคับให้ผู้ใช้ทำหรือตอบก่อนถึงจะไปต่อได้

กล่องข้อความที่คาอยู่ในหน้า (ไม่หายเอง) — ใช้แจ้งสถานะหรือเตือนที่ต้องเห็นตลอด

Badge = ป้ายบอกสถานะของรายการ (มีสีตามความหมาย). Chip = แท็กจัดหมวด/กรอง มักลบได้

Input = ช่องพิมพ์ข้อความ. Select/Dropdown = เลือกจากรายการที่มี (กันพิมพ์ผิด)

3 แบบที่ต่างกันชัด: Checkbox เลือกได้หลายอัน · Radio เลือกได้อันเดียว · Toggle เปิด/ปิดทันที (ไม่ต้องกดบันทึก)

สลับเนื้อหาหลายชุดในพื้นที่เดียว โดยไม่ต้องเปลี่ยนหน้า — กดแท็บไหน เห็นเนื้อหานั้น

Breadcrumb = บอกว่าตอนนี้อยู่ตรงไหนของเว็บ กดย้อนได้. Pagination = แบ่งข้อมูลเยอะ ๆ เป็นหน้า ๆ

Table = หลายแถวหลายคอลัมน์ เทียบค่ากันได้ (เหมาะจอคอม). Card = รวมข้อมูล 1 ชิ้นเป็นกล่อง (เหมาะมือถือ/มีรูป)

เมื่อยังไม่มีข้อมูล อย่าปล่อยหน้าโล่ง ๆ — บอกว่าทำไมว่าง + ปุ่มให้เริ่มต้น

Spinner = วงหมุนสั้น ๆ. Skeleton = โครงเทา ๆ แทนเนื้อหาที่กำลังโหลด (รู้สึกเร็วกว่า). Progress = แถบบอก % เมื่อรู้ความคืบหน้า