<>Lists (Danh sách) là cách tổ chức nội dung theo dạng dọc hoặc ngang, giúp người dùng dễ dàng quét (scan) và hiểu thông tin. Chúng được sử dụng rộng rãi trong menu, danh mục, bảng dữ liệu, danh sách sản phẩm, tin nhắn, v.v.
🚀 Mục tiêu chính:
✅ Cung cấp cấu trúc rõ ràng cho nội dung.
✅ Giúp người dùng tìm kiếm thông tin nhanh hơn.
✅ Tăng khả năng đọc và quét nội dung dễ dàng.
/Các loại Lists phổ biến
1. Ordered Lists (Danh sách có thứ tự) 1️⃣2️⃣3️⃣
👉 Các mục trong danh sách được đánh số thứ tự hoặc sử dụng ký hiệu phân cấp (1, 2, 3… / A, B, C…).
✅ Phù hợp với hướng dẫn, danh sách ưu tiên, quy trình có trình tự.
🔹 Ví dụ UI thực tế:
🛠️ Hướng dẫn cài đặt ứng dụng:
1️⃣ Tải xuống ứng dụng từ App Store.
2️⃣ Đăng nhập bằng tài khoản Google.
3️⃣ Hoàn tất hồ sơ cá nhân.
📊 Xếp hạng sản phẩm:
1️⃣ iPhone 15 Pro Max – 9.5 điểm.
2️⃣ Samsung Galaxy S24 Ultra – 9.2 điểm.
3️⃣ Google Pixel 8 Pro – 8.9 điểm.
2. Unordered Lists (Danh sách không thứ tự) 🔹🔸
👉 Các mục trong danh sách không có thứ tự cụ thể, thường dùng dấu chấm (•), gạch đầu dòng (-), dấu kiểm (✔).
✅ Phù hợp với tính năng sản phẩm, danh mục nội dung, danh sách công việc.
🔹 Ví dụ UI thực tế:
🎨 Các tính năng của Figma:
– Thiết kế giao diện UI/UX nhanh chóng.
– Hỗ trợ làm việc nhóm thời gian thực.
– Tích hợp plugin mở rộng.
✔ To-do list cá nhân:
– Hoàn thành bài tập UI/UX.
– Cập nhật portfolio Behance.
– Nghiên cứu thiết kế UX cho e-commerce.
3. Description Lists (Danh sách mô tả) 📝
👉 Gồm một thuật ngữ hoặc tiêu đề, kèm theo mô tả chi tiết bên dưới.
✅ Phù hợp với từ điển, bảng thông số kỹ thuật, hồ sơ người dùng.
🔹 Ví dụ UI thực tế:
📖 Từ điển thuật ngữ UX:
Wireframe → Bản phác thảo giao diện đơn giản để xác định bố cục nội dung.
Prototype → Mô hình tương tác mô phỏng trải nghiệm người dùng trước khi phát triển chính thức.
📊 Thông số kỹ thuật iPhone 15 Pro:
Màn hình: 6.1 inch Super Retina XDR.
Chip: Apple A17 Pro.
Camera: 48MP chính, 12MP ultra-wide.
4. Navigational Lists (Danh sách điều hướng) 🔗
👉 Danh sách được sử dụng trong menu hoặc sidebar để điều hướng giữa các trang hoặc danh mục.
✅ Phù hợp với menu website, ứng dụng mobile, dashboard admin.
🔹 Ví dụ UI thực tế:
🌐 Menu website:
– Trang chủ
– Dịch vụ
– Blog
– Liên hệ
📱 Sidebar ứng dụng quản lý tài chính:
– Dashboard
– Giao dịch
– Báo cáo
– Cài đặt
/Best Practices khi thiết kế Lists
✅ Sắp xếp hợp lý → Danh sách quan trọng nên để đầu hoặc cuối.
✅ Tăng khả năng quét mắt (scannability) → Dùng khoảng cách, icon, màu sắc để giúp người dùng dễ đọc.
✅ Không lạm dụng quá nhiều dấu đầu dòng → Khiến UI trở nên rối mắt.
✅ Sử dụng dấu hiệu trực quan → Ví dụ: 🔹 cho danh sách không thứ tự, 🔢 cho danh sách có số thứ tự.
✅ Cân nhắc danh sách có thể mở rộng (collapsible lists) → Khi danh sách quá dài.
