nuttadech.
หน้าแรกบทความ
ประเมิน

บริการ

  • ปรึกษา UX
  • ออกแบบครบจบ
  • เวิร์คช็อป
  • บรรยาย

เนื้อหา

  • บทความ
  • คู่มือ Component
  • Design System Generator
  • ผลงาน

เกี่ยวกับ

  • ประวัติ
  • LinkedIn

ติดต่อ

© 2026 Nuttadech Junlawan

รับออกแบบ UI/UX · ที่ปรึกษา UX · UX Audit

Shop

คู่มือ UX & AI Knowledge

Web Access

฿150

46 UI/UX components, design patterns และ AI prompt templates ใน 11 หมวดหมู่

สิ่งที่ได้รับ

  • คู่มือ UI/UX component 46 หัวข้อ
  • AI prompt template สำหรับแต่ละหัวข้อ
  • Best practices & สิ่งที่ควรหลีกเลี่ยง
  • สองภาษา EN/TH

ตัวอย่างเนื้อหา

47 หัวข้อ ใน 11 หมวดหมู่ — ดูตัวอย่างเนื้อหาจริงด้านล่าง

1

ปุ่ม

การกระทำ

กดเพื่อทำอะไรบางอย่าง เป็น element สำคัญที่สุดในทุก interface

ใช้เมื่อไหร่
  • ส่งฟอร์ม (สมัคร, เข้าสู่ระบบ, ชำระเงิน)
  • ทำ action (บันทึก, ลบ, แชร์)
  • นำทางไปหน้าอื่น (CTA)
Best Practices
  • ปุ่มหลัก = ไม่เกิน 1 ปุ่มต่อส่วน
  • ใช้คำกริยา: 'บันทึก' ไม่ใช่ 'ตกลง'
AI Prompt ตัวอย่าง

สร้างปุ่มหลักเขียนว่า 'เริ่มต้นใช้งาน' มีไอคอนลูกศรขวา กดแล้วไปหน้า /signup มี hover และ loading state

2

ช่องกรอกข้อความ

กรอกข้อมูล

ให้ผู้ใช้พิมพ์ข้อความ — ชื่อ, อีเมล, คำค้นหา ฯลฯ

ใช้เมื่อไหร่
  • เก็บข้อมูลผู้ใช้ (ชื่อ, อีเมล, เบอร์โทร)
  • ฟังก์ชันค้นหา
  • ตอบข้อความสั้น
Best Practices
  • แสดง label เหนือ input เสมอ
  • ใช้ placeholder เป็นคำแนะนำ ไม่ใช่ label
AI Prompt ตัวอย่าง

สร้าง input อีเมล มี label 'อีเมล' placeholder 'you@example.com' validate รูปแบบอีเมล แสดง error ใต้ input เมื่อไม่ถูกต้อง

3

ดรอปดาวน์เลือก

กรอกข้อมูล

เลือก 1 ตัวเลือกจากรายการ เหมาะเมื่อมี 4-15 ตัวเลือก

ใช้เมื่อไหร่
  • เลือกประเทศหรือภาษา
  • ฟิลเตอร์หมวดหมู่
  • ตั้งค่าที่มีค่าตายตัว
Best Practices
  • ใช้ radio button ถ้า < 4 ตัวเลือก
  • เพิ่มช่องค้นหาเมื่อ 10+ ตัวเลือก
AI Prompt ตัวอย่าง

สร้าง dropdown สำหรับ 'ตำแหน่ง' มีตัวเลือก: Designer, Developer, PM, อื่นๆ default เป็นว่าง placeholder 'เลือกตำแหน่ง' มี label ด้านบน

เช็คบ็อกซ์ & สวิตช์กรอกข้อมูล
การ์ดแสดงผล
ป้ายกำกับ / แท็กแสดงผล
ตารางข้อมูลแสดงผล
หน้าต่างป๊อปอัพการตอบกลับ
+ อีก 39 หัวข้อ — ปลดล็อคเมื่อซื้อ