UI/UX là gì — định nghĩa, 5 layer UX và 6 thành phần UI cốt lõi

UX là kỷ luật nghiên cứu hành vi và thiết kế dòng tương tác — research, persona, user flow, wireframe, usability test — để giảm friction cho từng task. UI là layer visual cuối cùng — typography, color, spacing, component, motion — convert flow đó thành interface render được trên browser.

Vì sao team sản phẩm cần phân biệt UI và UX rõ ràng

Hai khái niệm bị dùng lẫn lộn vì cùng nằm dưới ô “design”, nhưng thực tế chúng là hai vai trò khác nhau về output, tool và metric đo lường. Đội tuyển nhầm UI designer kỳ vọng làm UX research dẫn tới sai khâu phỏng vấn user và sai hướng cải tiến sản phẩm.

Tại thị trường Việt 2026, gói UI/UX trung bình 15-30 triệu cho website 8-15 page với tiến độ 4-6 tuần. Gói cơ bản 5-8 triệu chỉ skin template Figma sẵn có; gói cấp doanh nghiệp 50-80 triệu kèm design system + component library bàn giao Figma editable.

3 trade-off hay gặp khi gộp UI và UX

• Đo UI bằng metric UX: sau redesign chỉ thay visual, KPI vẫn yêu cầu conversion tăng đáng kể. Thực tế conversion phụ thuộc flow + copy + payment, UI chỉ chiếm 5-10%.
• Tuyển 1 người làm cả hai: danh mục dự án Figma đẹp nên được tuyển, nhưng sau 3 tháng phát hiện không biết viết user interview script. Cần phỏng vấn 2 vòng tách bạch.
• Nhảy thẳng vào hi-fi: bỏ qua wireframe lo-fi để “khách thấy đẹp ngay” — kết quả là 2 tuần sau phải redo vì flow sai.

Mục tiêu UX và mục tiêu UI khác nhau ở đâu

UX trả lời “user gặp khó ở step nào và làm sao giảm friction”. Metric đo bằng task success rate, time on task, drop-off ở từng step trong phễu, NPS sau hoàn thành task.

UI trả lời “flow đó hiển thị trên màn hình ra sao để vừa rõ ràng vừa nhất quán brand”. Metric đo bằng aesthetic score, brand consistency audit, contrast ratio pass WCAG, mức độ tuân thủ design system.

UX gồm 5 layer của Garrett — khung tham chiếu chuẩn 2026

Jesse James Garrett đề xuất mô hình 5 layer trong cuốn “The Elements of User Experience” năm 2002. Tới 2026 vẫn là khung được dạy trong mọi UX bootcamp và sử dụng tại Google, Meta, Spotify khi onboard product designer.

Mỗi layer xây trên layer trước. Layer dưới sai thì layer trên có hoàn thiện cách mấy cũng không cứu được trải nghiệm tổng thể — đó là pattern thường thấy ở project đơn vị outsource bỏ qua giai đoạn chiến lược.

Layer nền — Chiến lược và Phạm vi

• Layer 1 — Chiến lược: business goal (KPI cần đạt) + user need (problem user thực sự cần giải quyết). Output là document 2-3 trang trả lời “vì sao xây sản phẩm này, cho ai, đo thành công bằng metric gì”.
• Layer 2 — Phạm vi: feature yêu cầu + content yêu cầu. Output là feature list ưu tiên (Must / Should / Could / Won’t) và content matrix mapping mỗi page với data nguồn.

Layer Phạm vi thường bị skip ở đơn vị outsource. Designer vẽ wireframe trước khi biết content thực sẽ vào page là gì, dẫn tới 80% wireframe phải làm lại sau khi content rõ.

Layer cấu trúc — Structure, Skeleton, Surface

• Layer 3 — Structure: information architecture (sitemap + tree) và interaction design (state machine cho mỗi flow). Output là sitemap hierarchical, flow diagram FigJam, state diagram cho checkout hoặc multi-step form.
• Layer 4 — Skeleton: wireframe lo-fi grayscale, navigation pattern, information design (cách hiển thị data dạng table / card / list). Output là 50-100 frame cho website 8-15 page, không màu, không ảnh thật.
• Layer 5 — Surface: visual layer — UI bắt đầu từ đây. Apply color, typography, grid, ảnh thật, motion. Output là mockup hi-fi và prototype tương tác.

Layer 5 thuộc về UI designer. UX researcher hiếm khi can thiệp ở layer này trừ khi visual quá khác wireframe gây nhầm flow.

6 thành phần cốt lõi của UI — checklist cho design system

UI là layer surface, gồm 6 thành phần đan xen. Mỗi thành phần có chuẩn riêng và phải nhất quán xuyên suốt mọi screen để form thành design system mạch lạc.

Bỏ một thành phần đồng nghĩa với inconsistent. User nhận ra ngay dù không gọi tên được cụ thể nguyên nhân khó chịu là gì.

Typography và color system

• Typography: hệ font + scale + line-height + measure. Một sản phẩm dùng 1-2 font family, 6-8 size theo modular scale 1.25 hoặc 1.333, line-height 1.5-1.7 cho body và 1.1-1.3 cho heading.
• Color system: brand color + neutral + semantic (success / warning / error / info). Mỗi role có 9-11 step (50-950 theo Tailwind convention) tạo độ tương phản cho hover, active, disabled state.

Mọi cặp text/background phải pass WCAG 2.2 AA contrast 4.5:1. Detail về thiết lập palette xem bài màu sắc trong thiết kế UI.

Spacing, grid và component library

• Spacing và grid: scale 4px hoặc 8px (Tailwind 0 / 0,5 / 1 / 1,5 / 2 / 3 / 4…), grid 12 cột với gutter 16-32px theo breakpoint. Mọi padding, margin, gap đều dùng giá trị từ scale.
• Component library: button (primary / secondary / ghost), input (text / email / select / checkbox), modal, drawer, tooltip, toast, card, table, breadcrumb, tabs. Mỗi component có 4-6 variant kèm state (default / hover / active / disabled / loading / error).

Library đóng gói qua Figma component + variant. Bài grid system cơ bản 12 cột hướng dẫn chi tiết cách dựng grid từ design Figma tới CSS implement.

Motion và iconography

• Motion + Microinteraction: transition 150-300ms ease-out cho mọi state change, transform thay vì width/height để GPU accelerate. Loading spinner, skeleton screen, success checkmark — đây là “polish” 5% nhưng tạo perceived quality lớn nhất.
• Iconography: bộ icon đồng nhất stroke-width (1,5px hoặc 2px), corner radius, filled vs outline. Mặc định 2026 dùng Lucide, Heroicons hoặc Phosphor — bộ ~1000 icon đủ mọi UI thông dụng.

Custom icon brand chỉ vẽ thêm khi không có sẵn trong bộ open source. Tự vẽ từng icon tốn thời gian và phá consistency stroke-width nếu thiếu kỷ luật.

Quy trình UI/UX 6 giai đoạn — từ research tới handoff dev

Quy trình end-to-end của Web22 cho website 8-15 page mất 4-6 tuần, chia 6 giai đoạn rõ ràng để khách review từng mốc trước khi tiêu thêm thời gian. Khách phải approve mốc N trước khi designer vào giai đoạn N+1.

Cách tách giai đoạn này tránh rework lớn ở giai đoạn sau. Một flow sai phát hiện ở giai đoạn 5 (prototype test) tốn gấp 10 lần fix so với phát hiện ở giai đoạn 2 (information architecture).

Giai đoạn 1-3 — Research, IA và Wireframe lo-fi

• Giai đoạn 1 — Research và Discovery (4-6 ngày): phỏng vấn 3-5 stakeholder phía khách, audit 3-5 đối thủ cùng ngành, khảo sát 8-15 user thực qua Hotjar form hoặc Maze remote test. Output là research deck 15-25 slide kèm 2-3 persona.
• Giai đoạn 2 — Information architecture (3-5 ngày): sitemap hierarchical tối đa 3 level, content matrix mapping page với content nguồn, user flow chính (register / browse / checkout / account). Output là sitemap + flow diagram trong FigJam.
• Giai đoạn 3 — Wireframe lo-fi (5-7 ngày): vẽ wireframe grayscale toàn site, focus layout + hierarchy + nav. Không màu, không ảnh thật, chỉ placeholder lorem. Test layout với khách + 5-8 user qua remote test trước khi đầu tư visual.

Giai đoạn 4-6 — Hi-fi, Prototype test và Handoff

• Giai đoạn 4 — Visual design hi-fi (8-12 ngày): apply color, typography, ảnh thật, motion concept. Đồng thời xây mini design system với color token, typography scale, 8-12 component cốt lõi theo phương pháp atomic design.
• Giai đoạn 5 — Prototype + usability test (3-5 ngày): link mọi screen thành prototype tương tác trong Figma, test với 5-8 user qua Maze hoặc onsite. Iterate 1-2 vòng nhỏ. Mục tiêu là 80% user hoàn thành 3 task cơ bản dưới 2 phút mỗi task.
• Giai đoạn 6 — Handoff to dev (2-3 ngày): export asset (SVG icon, WebP image), generate design token JSON cho color/spacing/typography, viết spec document mỗi component. Bàn giao Figma file editable kèm 1 buổi đào tạo 2-3 giờ cho khách.

5 sai lầm phân biệt UI và UX khi tuyển dụng và đo lường

Lẫn lộn UI và UX dẫn tới sai lầm tốn cả tiền lẫn thời gian khi outsource hoặc tuyển in-house. Năm pattern dưới đây xuất hiện nhiều nhất ở các project Web22 đã làm phần audit, kèm cách phòng tránh cụ thể.

Sai lầm về tuyển dụng và đo lường

• Sai lầm 1 — Tuyển UI designer mong làm UX research: job description ghi “UI/UX designer”, phỏng vấn xem mockup đẹp là tuyển. Phòng tránh: phỏng vấn riêng 2 vòng — vòng UX hỏi về method, vòng UI hỏi về design system + component variant.
• Sai lầm 2 — Đo UI bằng metric UX: redesign chỉ visual nhưng kỳ vọng conversion tăng đáng kể. Phòng: tách metric — UI đo bằng aesthetic + brand consistency, UX đo bằng task success rate + NPS.

Sai lầm về quy trình và phương pháp

• Sai lầm 3 — Đầu tư UI hi-fi trước khi UX flow chốt: designer nhảy thẳng vào Figma vẽ mockup. 2 tuần sau khách review nhận ra flow sai, redo. Phòng: bắt buộc 1 giai đoạn wireframe lo-fi grayscale trước.
• Sai lầm 4 — Skip wireframe lo-fi: khách áp lực “muốn thấy đẹp ngay” hoặc designer thiếu kỷ luật. Phòng: present cùng buổi cả lo-fi 5 frame + hi-fi 1 frame, dùng lo-fi để chốt flow trước.
• Sai lầm 5 — Coi A/B test thay UX research: “cứ launch rồi A/B test, không cần research”. A/B test chỉ trả lời “biến A hay B tốt hơn” giữa 2 giải pháp đã có. Phòng: research định lượng + định tính trước, A/B test sau khi có hypothesis cụ thể.

Khi nào ưu tiên UX research, khi nào ưu tiên UI redesign

Hai hoạt động này có trigger khác nhau và phải xử lý theo thứ tự đúng. Sai thứ tự đồng nghĩa với chi 30-50 triệu cho redesign mà không giải quyết được vấn đề gốc.

Trigger ưu tiên UX research

• Drop-off cụ thể trong phễu: 60% bỏ checkout ở step điền địa chỉ — cần research lý do trước khi đụng visual.
• NPS hoặc CSAT giảm đột ngột: so với 3 tháng trước, score tụt 10 điểm trở lên cần phỏng vấn 5-8 user để hiểu thay đổi.
• User phản hồi tăng đột biến cùng chủ đề: nhiều phản hồi “không tìm thấy nút đặt hàng” → vấn đề flow chứ không phải visual.
• Ra mắt feature mới hoặc thị trường mới: chưa có data hành vi user, research định tính giúp tránh design dựa trên giả định.

Trigger ưu tiên UI redesign

• Brand identity mới: logo, color, typography đổi — phải redesign visual theo brand book mới mà không cần đụng flow.
• Audit visual fail consistency: cùng button có 4 style khác nhau, cùng card có 3 padding khác nhau. Cần rebuild design system.
• Accessibility audit fail: contrast dưới 4,5:1, missing alt, focus ring biến mất. Pass WCAG 2.2 AA là tối thiểu cho website doanh nghiệp 2026.
• Responsive vỡ trên mobile: code cũ không có breakpoint, button dài hơn viewport. Cần áp grid system mobile-first chuẩn.

Khi cả hai loại metric đều có vấn đề, làm research trước (1-2 tuần) rồi mới quyết phạm vi redesign. Đôi khi research cho thấy không cần đụng UI nhiều — chỉ cần fix flow checkout là conversion phục hồi.

Câu hỏi thường gặp về UI và UX

Tài nguyên và bước tiếp theo

Phân biệt UI và UX rõ là bước nền — sau đó cần đi sâu vào từng thành phần để xây design system production. Các bài liên quan trong cụm UI/UX cơ bản:

• 7 nguyên tắc thiết kế UI — checklist mỗi screen cần verify trước handoff — hierarchy, consistency, phản hồi, proximity, alignment, affordance, simplicity.
• Màu sắc trong thiết kế UI — 60-30-10, WCAG contrast và xây palette 2026 — color model, WCAG audit, color psychology theo ngành.
• Typography cho web 2026 — modular scale, variable font và woff2 self-host — type scale, line-height, performance font.
• Grid system cơ bản — 12 cột, CSS Grid vs Flexbox và breakpoint mobile-first — từ design Figma tới CSS implement.
• Dịch vụ thiết kế UI/UX chuẩn doanh nghiệp tại Web22 — gói trọn gói research + wireframe + hi-fi + handoff Figma.

Cần đội Web22 thiết kế UI/UX cho website doanh nghiệp 8-15 page với research + design system + handoff Figma trọn gói, tiến độ 4-6 tuần? Xem dịch vụ thiết kế UI/UX chuẩn doanh nghiệp tại Web22 — báo giá rõ ràng theo phạm vi, không phát sinh sau khi ký hợp đồng.