Danh sách

Danh sách là cách trình bày trực quan một hoặc nhiều mục có liên quan. Chúng thường được dùng để hiển thị một tập hợp các tuỳ chọn.

Tài nguyên

Tiêu điểm

• Danh sách là một tập hợp liên tục các văn bản hoặc hình ảnh.
• Danh sách phải tự nhiên và dễ đọc được.
• Danh sách bao gồm các mục chứa các thao tác chính và bổ sung được biểu thị bằng các biểu tượng và văn bản.

Biến thể

Có ba loại danh sách: danh sách một dòng, danh sách hai dòng và danh sách ba dòng.

1. Danh sách một dòng: Một dòng duy nhất để giao tiếp từng mục. Kiểu thiết kế đơn giản này đảm bảo các mục đều khác biệt rõ ràng với các mục khác.
2. Danh sách hai dòng: Sử dụng hai đường thẳng song song để giao tiếp từng mục. Thiết kế có cấu trúc này đảm bảo khả năng đọc tự nhiên và tránh tình trạng quá tải nhận thức.
3. Danh sách ba dòng: Sử dụng ba đường song song để biểu thị từng mục. Thiết kế trang trí này tạo ra mức độ nổi bật trực quan cao.

Phân tích

1. Biểu tượng: Một hình ảnh nhỏ đại diện cho một đối tượng hoặc hành động cụ thể, thường dùng để truyền đạt ý tưởng hoặc khái niệm một cách trực quan.
2. Dòng chữ gạch đầu: Một dòng văn bản ngắn xuất hiện phía trên tiêu đề hoặc tiêu đề phụ, thường dùng để cung cấp thêm ngữ cảnh hoặc điểm nhấn.
3. Tiêu đề: Một dòng văn bản lớn, in đậm đóng vai trò là tiêu đề chính của trang hoặc phần tử thiết kế.
4. Tiêu đề phụ: Dòng văn bản nhỏ hơn, cung cấp thêm thông tin hoặc ngữ cảnh bên dưới tiêu đề chính.
5. Control: Một thành phần tương tác cho phép người dùng nhập quyết định.

Các trạng thái

Thông số kỹ thuật

Cách sử dụng

Danh sách là các nhóm văn bản và hình ảnh được sắp xếp theo chiều dọc. Được tối ưu hoá để đọc hiểu nội dung, danh sách sẽ bao gồm một cột liên tục gồm các mục. Các mục trong danh sách có thể chứa các thao tác chính và bổ sung được biểu thị bằng biểu tượng và văn bản.

check_circle

Nên

Các mục trong danh sách không phải là nút. Các mục không có vùng chứa. Theo mặc định, các mục trong danh sách được bỏ chọn và không có tiêu điểm.

warning

Thận trọng

Chỉ sử dụng nền vùng chứa cho các mục trong danh sách khi cần thiết.

Bộ điều khiển lựa chọn

Kiểm soát thông tin hiển thị và thao tác cho các mục trong danh sách. Các thành phần này có thể được căn chỉnh theo cạnh trên cùng hoặc cạnh cuối của mục danh sách.

1. Hộp đánh dấu: Chọn một hoặc nhiều mục trong danh sách.
2. Nút chọn: Chọn đúng một mục trong danh sách.
3. Nút chuyển: Bật hoặc tắt một nút điều khiển.

check_circle

Nên

Sử dụng chỉ báo lựa chọn biểu tượng để hiển thị rõ ràng mục đã chọn trong danh sách. Điều này sẽ giúp người dùng dễ dàng xác định được mặt hàng mà họ đã chọn, từ đó cải thiện trải nghiệm tổng thể cho người dùng.

cancel

Không nên

Tránh chỉ dựa vào màu nền để biểu thị lựa chọn trong danh sách.

cancel

Không nên

Tránh đặt các nút bên trong một mục danh sách vì điều này có thể gây nhầm lẫn về phần tử nào đang được lấy tiêu điểm.

Biểu tượng

check_circle

Nên

Nếu bạn đang hiển thị cùng một loại nội dung trong danh sách, hãy bỏ qua các biểu tượng để giảm nhiễu hình ảnh và cải thiện trải nghiệm người dùng. Tránh sử dụng biểu tượng trong danh sách khi biểu tượng không phục vụ mục đích nào và không cung cấp thông tin bổ sung.

cancel

Không nên

Tránh sử dụng cùng một biểu tượng cho tất cả các mục trong danh sách. Thông tin này có thể gây choáng ngợp và khó hiểu cho người dùng. Thay vào đó, chỉ sử dụng biểu tượng khi chúng bổ sung giá trị hoặc cung cấp thông tin bổ sung.

Hình đại diện và hình ảnh

Các mục trong danh sách có thể bao gồm hình ảnh trong một đường cắt hình tròn để đại diện cho một người hoặc thực thể.