UXUI Game Challenge!! - Let's Match UI Components
🥹 Don't you remember the name of UI Components?
.
I saw the UI and couldn't call the name... slow down with the team and the "unthinkable" job interview.
.
So I made a short game MVP called UXUI Challenge to try. 🎮
It's a UI Element name recognition training game through matching images with simple toponyms.
.
👉 Let's play: https://uxuistudio.moneyspace.co
.
✅ Match 50 UI Elements
⏱️ Test both accuracy + speed + accuracy
Play over and remember the name of the UI. Components have added unknowingly.
.
♥️ Fun + Knowledge Let's play.
.
If you like, don't forget to comment. Score / time can be done. Let's show off.
And if you have an idea to add something to the next version, you can comment.
.
🙏 P.S. If you find Bug or something weird, I'm sorry in advance.
Nong AI has been "stubborn + eating a lot," so there may be some bent, haha. 😅
.
.
🔥 Read UXUI Model 47 Details [Near Full]
/
.
👉 You can find the UXUI course here. https://m.me/uxuistudio9
.
📥 for organizations or companies interested in training seminars on-site / online or Consult Project.
You can contact it by IB: https://m.me/uxuistudio9.
.
# Unlock Skill UX / UI - Because we understand what "newbies" want.
# uxui # uxuidesign # uxdesign # uidesign # Figma# uxuidesigner # graphicdesign # uxuiworkshop # uiworkshop # UXUI # WebDesign # ProductDesign # uxuistudio
ถ้าใครกำลังฝึกจำ “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 ได้ตรง ๆ เป็นจุดเล็ก ๆ ที่ทำให้ดูโปรขึ้นจริง แนะนำให้ฝึกจนชินกับภาพ ไม่ใช่แค่จำจากตัวหนังสือ แล้วค่อยมาแชร์คะแนน/เวลาที่ทำได้กันเพื่อชวนกันเก่งขึ้น
