Website UI Design Patterns giúp designer và developer tham khảo cách các sản phẩm giải quyết những vấn đề giao diện lặp lại như onboarding, navigation, search, checkout, form, empty state và error recovery. Tuy nhiên, một screenshot đẹp không chứng minh pattern đó phù hợp với người dùng, nền tảng hoặc mục tiêu sản phẩm của bạn.
Danh sách dưới đây được rà soát ngày 27/07/2026 và phân loại theo nhiệm vụ: tìm pattern có giải thích, nghiên cứu flow thực tế, lấy visual inspiration, đối chiếu platform guideline và tham khảo design system. Trạng thái truy cập, tính năng và gói sử dụng có thể thay đổi; nguồn chính thức tại thời điểm sử dụng vẫn là source of truth.
Gợi ý nhanh
Dùng UI Patterns khi cần hiểu cấu trúc giải pháp; Mobbin và Page Flows khi cần xem sequence từ sản phẩm thật; Material, Apple HIG, Carbon, Fluent và GOV.UK Design System khi cần guideline/component có tài liệu; Awwwards, Dribbble và Collect UI khi cần visual direction. Không copy nguyên màn hình. Hãy chuyển ví dụ thành giả thuyết, thiết kế đủ state rồi kiểm tra bằng usability và accessibility.
UI Design Pattern là gì?
UI Design Pattern là giải pháp có cấu trúc cho một vấn đề giao diện thường lặp lại trong một bối cảnh nhất định. Pattern nên mô tả vấn đề, điều kiện áp dụng, cấu trúc tương tác, trade-off, state và cách kiểm chứng; nó không phải template bắt buộc phải sao chép nguyên bản.
| Loại nguồn | Cung cấp gì? | Dùng khi | Không chứng minh |
|---|---|---|---|
| Pattern library | Vấn đề, giải pháp, biến thể và rationale | Cần hiểu logic của form, navigation hoặc onboarding | Pattern chắc chắn phù hợp audience của bạn |
| Flow library | Màn hình và sequence từ sản phẩm thật | Nghiên cứu entry point, state, microcopy và recovery | Flow đã được test hoặc tạo conversion tốt |
| Design system | Token, component, guideline, code và accessibility | Cần triển khai nhất quán trên sản phẩm | Có thể copy nguyên hệ thống mà không điều chỉnh |
| Research/guideline | Nguyên tắc, bằng chứng và tiêu chuẩn | Cần hiểu vì sao pattern có thể hiệu quả hoặc gây lỗi | Guideline thay thế research của sản phẩm |
| Inspiration gallery | Concept và visual direction | Khám phá composition, typography và motion | Thiết kế production-ready, accessible hoặc performant |
Một pattern quen thuộc vẫn có thể không phù hợp khi task, thiết bị, mức rủi ro hoặc khả năng người dùng khác nhau. Ví dụ, carousel có thể hữu ích cho ảnh sản phẩm nhưng không nên giấu thông tin bắt buộc; xem thêm khi nào nên dùng Image Carousel.
Cách chọn nguồn tham khảo theo nhiệm vụ
| Nhiệm vụ | Nguồn ưu tiên | Điều cần trích xuất | Rủi ro |
|---|---|---|---|
| Thiết kế một flow hoàn chỉnh | Mobbin, Page Flows, sản phẩm cạnh tranh trực tiếp | Entry, sequence, permission, error, success, exit | Chỉ lưu màn hình đẹp và bỏ qua state |
| Giải quyết vấn đề lặp lại | UI Patterns, research và guideline | Problem, context, rationale, trade-off, anti-pattern | Áp dụng ngoài bối cảnh |
| Thiết kế theo nền tảng | Apple HIG, Material, Fluent | Convention, navigation, component behavior | Trộn convention khiến hành vi khó đoán |
| Xây Design System | Carbon, Fluent, Material, GOV.UK | Token, component anatomy, governance, contribution | Copy component nhưng thiếu owner và versioning |
| Tìm visual direction | Awwwards, Dribbble, Collect UI | Typography, composition, color, motion | Nhầm concept với sản phẩm thực tế |
| Đánh giá usability | NN/g, W3C/WAI, product research | Task, success criteria, limitation, method | Dùng một guideline làm bằng chứng tuyệt đối |
Để hiểu cách pattern trở thành một phần của hệ thống giao diện, đọc thêm Design System là gì, Interaction Design và State-Based Design.
11 nguồn UI Design Patterns được xác minh năm 2026
1. UI Patterns
UI Patterns mô tả recurring design problems, categories và ví dụ. Nguồn này phù hợp khi cần hiểu logic của form, navigation, onboarding, social hoặc data patterns. Hãy dùng ví dụ làm điểm bắt đầu và kiểm tra lại context, accessibility cùng nội dung thật.
2. Mobbin
Mobbin cung cấp màn hình và flow từ sản phẩm mobile/web thực tế. Nó hữu ích cho competitive research, sequence, microcopy và benchmark flow. Một số tính năng cần tài khoản hoặc gói trả phí; kho dữ liệu thay đổi theo thời gian.
3. Page Flows
Page Flows tập trung vào user flow, screen và recording cho web/mobile. Phù hợp để nghiên cứu onboarding, checkout, upgrade, cancellation và lifecycle flow. Việc một thương hiệu lớn dùng flow nào đó không chứng minh flow ấy phù hợp với sản phẩm của bạn.
4. Collect UI
Collect UI phân loại ảnh giao diện theo màn hình và thành phần. Dùng tốt cho moodboard và visual variation, nhưng thường thiếu sequence, state và bằng chứng usability.
5. Awwwards
Awwwards phù hợp để khám phá storytelling, art direction, motion và web interaction. Một website đoạt giải vẫn có thể không phù hợp với task, performance hoặc accessibility của dự án doanh nghiệp.
6. Dribbble
Dribbble là cộng đồng chia sẻ concept, shot, UI kit và portfolio. Dùng để tìm visual direction hoặc designer; không dùng một shot tĩnh để suy ra flow, responsive behavior hoặc khả năng triển khai.
7. Nielsen Norman Group
Nielsen Norman Group cung cấp nghiên cứu và hướng dẫn usability. Nguồn này phù hợp khi cần rationale, phương pháp hoặc giới hạn; vẫn phải kiểm tra lại với audience và task của sản phẩm.
8. Material Design
Material Design là hệ thống của Google với component, token và guideline. Phù hợp khi sản phẩm dùng hệ sinh thái Material hoặc cần tham khảo behavior có tài liệu; không bắt buộc mọi thương hiệu phải dùng cùng visual language.
9. Apple Human Interface Guidelines
Apple HIG cung cấp platform guidance cho hệ sinh thái Apple. Dùng khi thiết kế iOS, iPadOS, macOS, watchOS hoặc visionOS và cần tuân theo convention người dùng đã quen.
10. Carbon Design System
Carbon là design system mã nguồn mở của IBM, hữu ích để tham khảo enterprise UI, sản phẩm nhiều dữ liệu, component anatomy và governance.
11. Fluent 2 và GOV.UK Design System
Fluent 2 cung cấp token, component và guidance đa nền tảng của Microsoft. GOV.UK Design System Patterns định nghĩa pattern theo user-focused task và page type, thường kèm written guidance cùng coded example. Đây là hai nguồn tốt để nghiên cứu cách tài liệu hóa pattern và vận hành hệ thống.
Quy trình dùng UI pattern mà không sao chép
- Định nghĩa task: người dùng làm gì, thành công là gì và failure nào có rủi ro.
- Thu thập nhiều ví dụ: lấy flow từ sản phẩm cùng task, platform và mức rủi ro.
- Tách cấu trúc khỏi trang trí: xác định sequence, information, control và state cốt lõi.
- Đối chiếu guideline: kiểm tra semantics, keyboard, focus, contrast, target size, error và motion.
- Thiết kế đủ state: default, hover, focus, loading, empty, error, offline, permission và success.
- Prototype với nội dung thật: dùng label, dữ liệu dài và edge case gần sản phẩm.
- Test theo task: đo task success, error, recovery và comprehension.
- Ghi decision record: lưu source, rationale, trade-off, evidence, owner và ngày review.
Khi đánh giá pattern, dùng Usability để kiểm tra task, Visual Hierarchy để kiểm soát mức ưu tiên và CTA Button để nghiệm thu hành động chính.
Guardrail về accessibility và dark pattern
| Không nên làm | Rủi ro | Thay bằng |
|---|---|---|
| Copy nguyên screenshot hoặc visual identity | Bản quyền, thương hiệu và lệch context | Trừu tượng hóa interaction structure |
| “Sản phẩm lớn cũng làm vậy” | Không biết mục tiêu, experiment hoặc audience phía sau | Dùng như hypothesis và test lại |
| Chỉ thiết kế happy path | Thiếu error, offline, permission và recovery | State map và edge-case checklist |
| Scarcity hoặc opt-out khó thấy | Deceptive pattern và mất trust | Thông tin, giá, consent và lựa chọn rõ |
| Đánh giá bằng click tăng đơn lẻ | Click có thể tăng do hiểu nhầm | Đo task completion, error và qualified outcome |
Công cụ chỉ hỗ trợ việc tìm và mô phỏng pattern. Đọc cách chọn công cụ UX/UI theo workflow để tránh mua nhiều tool trùng chức năng.
Checklist evidence board
- Task và outcome cần hỗ trợ.
- Platform, thiết bị và input method.
- Nguồn pattern và ngày kiểm tra.
- State, edge case và recovery.
- Accessibility risk và acceptance criteria.
- Prototype result và counterexample.
- Decision, owner và ngày review.
Kết luận
Website UI Design Patterns giúp tăng tốc nghiên cứu, nhưng mỗi nguồn trả lời một câu hỏi khác nhau. Flow library cho thấy sequence; inspiration gallery gợi ý visual; research và platform guideline giúp đánh giá rationale; design system cho thấy cách component được tài liệu hóa và vận hành.
Thay vì chỉ xây moodboard, hãy xây evidence board gồm task, pattern, state, source, rationale, accessibility risk, test result và decision. Danh sách được rà soát ngày 27/07/2026; cần kiểm tra lại trạng thái, tính năng và quyền sử dụng trước mỗi dự án.
Đoàn Trình Dục là Giảng viên Khoa Công nghệ Thông tin tại Đại học Công nghệ Sài Gòn (STU), với hơn 10 năm kinh nghiệm thực chiến trong các lĩnh vực Mạng máy tính, Marketing Online, SEO và Bảo mật hệ thống.
Với nền tảng sư phạm và kinh nghiệm tư vấn cho nhiều doanh nghiệp, thầy chuyên sâu vào việc xây dựng các giải pháp kỹ thuật số toàn diện và hiệu quả.
