UXUI Game Challenge !! - มาจับคู่ UI Components กัน

ถ้าใครกำลังฝึกจำ “UI elements” แล้วรู้สึกว่าอ่านลิสต์อย่างเดียวไม่ค่อยเข้าหัว วิธีที่ช่วยได้มากคือ “ฝึกแบบเรียกชื่อจากภาพ” เพราะเวลาเราทำงานจริงหรือคุยกับทีม เราเห็นหน้าจอก่อน แล้วค่อยต้องนึกชื่อคอมโพเนนต์ให้ถูก เกมแนวจับคู่ภาพกับชื่อเลยตอบโจทย์มาก โดยเฉพาะตอนมีตัวจับเวลา คะแนน และความคืบหน้า มันทำให้เราโฟกัสและรู้ทันทีว่าเรายังพลาดตรงไหน ทริคที่ฉันใช้ตอนเล่น/ฝึกจำชื่อ UI Components ให้เร็วขึ้น: 1) แยกหมวดก่อนจำ: แนะนำให้แบ่ง UI elements เป็นกลุ่ม ๆ เช่น Navigation (Navbar, Tab bar, Breadcrumb), Input (Text field, Dropdown, Checkbox, Radio, Toggle/Switch), Feedback (Toast, Snackbar, Alert, Modal/Dialog), Actions (Button, Icon button, FAB), Data display (Card, List, Table, Badge, Chip/Tag), และ Progress (Loader/Spinner, Progress bar). เวลาเจอภาพจะเดาหมวดได้ก่อน แล้วค่อยล็อกคำเรียกให้ตรง 2) สังเกตความต่างของคำที่ชอบสับสน: เช่น Modal vs Dialog (หลายทีมใช้แทนกัน แต่บาง design system แยกชัด), Toast/Snackbar (แจ้งเตือนชั่วคราว), Tooltip vs Popover (Tooltip สั้น ๆ ชี้นำ, Popover มักมีเนื้อหา/แอ็กชันมากกว่า), Tabs vs Segmented control (หน้าตาคล้ายกันแต่บริบทต่าง) 3) จำ “ชื่อ + หน้าที่ + ตัวอย่างประโยคที่ใช้คุยงาน”: เช่น “เปลี่ยนปุ่มนี้เป็น Primary button”, “เพิ่ม helper text ใต้ text field”, “เปิดเป็น modal เพื่อยืนยัน”, “แสดงเป็น toast หลังบันทึกสำเร็จ” การมีประโยคติดหัวช่วยให้เวลาเจอภาพนึกชื่อได้ไวขึ้น 4) เล่นซ้ำแบบตั้งเป้า: รอบแรกเล่นเพื่อรู้จักคำศัพท์ให้ครบก่อน รอบถัดไปค่อยเน้นสปีด ลองตั้งเป้าลดเวลาลงทีละนิด แต่ยังรักษาความถูกต้องไว้ เพราะความเร็วที่แลกด้วยการทายมั่วจะไม่ช่วยเวลาใช้งานจริง 5) เอาไปต่อยอดใน Figma: หลังเล่นจบ ลองเปิดไฟล์งานแล้วแท็กชื่อคอมโพเนนต์ให้ถูก เช่นตั้งชื่อเลเยอร์เป็น Button/Dropdown/Stepper ฯลฯ หรือถ้าใช้ Design System ก็พยายามเรียกตามชื่อในระบบนั้น จะช่วยให้สื่อสารกับ dev และทีมดีไซน์ลื่นขึ้นมาก สุดท้าย ถ้ากำลังเตรียมสัมภาษณ์งาน UX/UI การเรียกชื่อ UI elements ได้ตรง ๆ เป็นจุดเล็ก ๆ ที่ทำให้ดูโปรขึ้นจริง แนะนำให้ฝึกจนชินกับภาพ ไม่ใช่แค่จำจากตัวหนังสือ แล้วค่อยมาแชร์คะแนน/เวลาที่ทำได้กันเพื่อชวนกันเก่งขึ้น