Dựng design system bằng shadcn/ui (hướng dẫn cho dự án React)
shadcn/ui là bộ component React được copy thẳng mã nguồn vào dự án thay vì cài như thư viện, dựng trên Radix UI và Tailwind CSS. Vì bạn sở hữu code, nó…
Danh mục: UI/UX Design
Nguyên lý Gestalt và cách mắt người nhóm thông tin trên giao diện
Nguyên lý Gestalt là tập hợp các quy luật tri giác thị giác mô tả việc mắt người tự nhóm các phần tử rời rạc thành cụm có nghĩa, dựa trên đặc…
Thiết kế dark mode đúng cách (không phải chỉ đảo màu)
Thiết kế dark mode là cách dựng phiên bản giao diện nền tối: chọn nền xám đậm thay vì đen tuyền, giảm độ bão hoà màu nhấn, giữ tương phản chữ đủ…
Phân cấp thị giác trong thiết kế giao diện (cách dẫn mắt người đọc)
Phân cấp thị giác (visual hierarchy — sắp xếp các phần tử theo thứ tự ưu tiên) là cách bố trí cỡ chữ, đậm nhạt, màu, khoảng cách và vị trí sao…
White space trong thiết kế (khoảng thở giữa các phần tử)
White space (khoảng trắng — vùng trống quanh và giữa các phần tử giao diện) là phần nền không chứa nội dung trên một trang. Nó không cần màu trắng, mà là…
UI UX là gì (hiểu đúng phần nhìn và phần cảm nhận)
UI (giao diện người dùng) là lớp hình ảnh mà người dùng nhìn và chạm vào: màu sắc, chữ, nút bấm, bố cục. UX (trải nghiệm người dùng) là toàn bộ cảm…
Onboarding mobile app (dẫn người dùng mới nhanh gọn, ít bỏ app)
Onboarding mobile app (giới thiệu lần đầu) là chuỗi màn hình và gợi ý dẫn người dùng mới hiểu giá trị của app rồi thực hiện hành động đầu tiên có ý…
Vùng chạm bao nhiêu là đủ (kích thước touch target tối thiểu)
Touch target (vùng chạm — phần màn hình phản hồi khi ngón tay nhấn) tối thiểu nên đạt 24×24 px theo WCAG 2.2 mức AA. Apple khuyến nghị 44pt, Material Design 48dp.…
Bottom sheet trên mobile (panel trượt từ đáy lên)
Bottom sheet là một tấm nội dung (panel) neo ở cạnh dưới màn hình mobile, trượt từ đáy lên để hiện thêm lựa chọn hoặc hành động, trong khi vẫn giữ thấy…
Chọn mẫu điều hướng mobile app cho đúng (tab bar, drawer hay gesture)
Điều hướng mobile app là hệ thống giúp người dùng di chuyển giữa các màn hình chính của ứng dụng. Các mẫu phổ biến gồm tab bar (thanh tab dưới), navigation drawer…