Danh sách

Danh sách là hình ảnh đại diện cho một hoặc nhiều mục có liên quan. Các nút này thường được dùng để hiển thị một tập hợp các tuỳ chọn.

Tài nguyên

Điểm nổi bật

• Danh sách là một tập hợp liên tục gồm văn bản hoặc hình ảnh.
• Danh sách phải tạo cảm giác tự nhiên và dễ quét.
• Danh sách được tạo thành từ các mục chứa thao tác chính và bổ sung được biểu thị bằng 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 để thông báo từng mục. Thiết kế đơn giản này đảm bảo mỗi mục khác biệt rõ ràng với mục khác.
2. Danh sách hai dòng: Sử dụng hai dòng song song để truyền đạt 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 cao về hình ảnh.

Phân tích

1. Biểu tượng: Một hình ảnh đồ hoạ nhỏ đại diện cho một đối tượng hoặc hành động cụ thể, thường được dùng để truyền đạt một ý tưởng hoặc khái niệm một cách trực quan.
2. Dòng gạch trên: Một dòng văn bản ngắn xuất hiện phía trên tiêu đề hoặc phụ đề, thường được dùng để cung cấp thêm ngữ cảnh hoặc nhấn mạnh.
3. Tiêu đề: Dòng văn bản lớn, in đậm đóng vai trò là tiêu đề chính của một phần tử thiết kế hoặc trang.
4. Phụ đề: Một 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. Chế độ điều khiển: Một phần tử 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, danh sách bao gồm một cột liên tục duy nhất 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 danh sách sẽ không được chọn và không được lấy tiêu điểm.

warning

Cảnh báo

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

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. Bạn có thể căn chỉnh các mục này với cạnh trước hoặc cạnh sau 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 chính xác một mục trong danh sách.
3. Công tắc: Bật hoặc tắt một chế độ đ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 mục họ đã chọn và cải thiện trải nghiệm tổng thể của người dùng.

cancel

Không nên

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

cancel

Không nên

Tránh đặt nút bên trong mục danh sách vì điều này có thể gây nhầm lẫn về phần tử nào hiện đang được lấy làm 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 sự lộn xộn về 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 chúng không có mục đích và không cung cấp thêm thông tin.

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. Điều này có thể gây rối mắt và gây nhầm lẫn cho người dùng. Thay vào đó, chỉ sử dụng biểu tượng khi chúng mang lại giá trị hoặc cung cấp thêm thông tin.

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 được cắt theo hình tròn để đại diện cho một người hoặc pháp nhân.