UI pattern
⚔️ ⚔️ ⚔️

UI pattern

UI pattern

July 11, 2025

Definition

UI Pattern mang nghĩa cần chuẩn hoá cách trình bày thông tin và thành phần giao diện (bố cục, phân cấp và hiển thị) — giúp người dùng dễ nhìn – hiểu – thao tác một cách nhất quán và quen thuộc. Nó giống như “Từ điển thiết kế” chung cho các bên giao tiếp hiệu quả giữa các thành viên trong team design và dev.

Lấy ví dụ:

Khi cần trình bày một nội dung, dựa trên lượng thông tin và ngữ cảnh flow ta có thể quyết định nên layout nó trên modal (bottom sheet-nhanh & gọn) hay trang riêng (page-nhiều & tập trung).
Infinity scroll (phù hợp user cần xem thông tin mang tính khám phá) vs Pagination (phù hợp hơn khi user tìm thông tin).

Vài loại UI patterns:

Cách phân bổ thông tin như: page, tabs, segment control, infinite scroll vs pagination
Các cách layout như: list, grid, bento, vertical vs horizontal direction,…
Cách hiển thị thông tin như: section, card, accordion, modal, tooltips, slider / carousel, table,…
Cách định hình vị trí hiển thị như: sticky, stop at top, floating, appear / disappear in view,…
Cách điều hướng nhìn: F pattern, Z pattern, visual weights, direction,…
Các navigation pattern như: breadcrumb, header, sidebar / drawer, footer, link,…
Các signal & information như: red dot, transition, animation, status, color, icon,…

Reference

Relevant Item

UX pattern
⚔️ ⚔️ ⚔️

UX pattern

Interaction Pattern
⚔️ ⚔️ ⚔️

Interaction Pattern