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. Các mã này thường được dùng để hiển thị một tập hợp lựa chọn.
Tài nguyên
| Loại | Đường liên kết | Trạng thái |
|---|---|---|
| Thiết kế | Nguồn thiết kế (Figma) | Có |
| Triển khai | Jetpack Compose | Có |
Điểm nổi bật
- Danh sách là một tập hợp liên tục gồm các văn bản hoặc hình ảnh.
- Danh sách phải tự nhiên và có thể đọc được.
- Danh sách bao gồm các mục chứa chính và bổ sung hành động đượ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 gồm 3 dòng.
- Danh sách một dòng: Một dòng duy nhất để truyền đạt từng mục. Đơn giản này đảm bảo mỗi mục phân biệt rõ ràng với nhau.
- 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 tính dễ đọc tự nhiên và tránh gây khó hiểu quá tải.
- Danh sách ba dòng: Sử dụng 3 dòng song song để biểu thị từng mục. Kiểu 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
- Biểu tượng: Một đồ hoạ nhỏ đại diện cho một đối tượng hoặc hành động cụ thể, thường dùng để truyền đạt một ý tưởng hoặc khái niệm bằng hình ảnh.
- 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 phụ đề, thường dùng để cung cấp thêm ngữ cảnh hoặc điểm nhấn.
- 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ế.
- Tiêu đề 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.
- Kiểm soát: Một phần tử có tính 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. Danh sách này được tối ưu hoá cho khả năng đọc hiểu, trong đó có một nội dung duy nhất cột mục liên tục. Mục danh sách có thể chứa các hành động chính và bổ sung được trình bày theo biểu tượng và văn bản.
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.
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 đối với các mục trong danh sách. Chúng có thể được căn chỉnh vào cạnh đầu hoặc cuối của mục danh sách.
- Hộp đánh dấu: Chọn một hoặc nhiều mục trong danh sách.
- Nút chọn: Chọn đúng một nút mục trong danh sách.
- Nút chuyển: Bật hoặc tắt một chế độ điều khiển.
Nên
Sử dụng chỉ báo chọn biểu tượng để hiển thị rõ 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ặt hàng họ đã chọn và cải thiện trải nghiệm tổng thể của người dùng.
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.
Không nên
Tránh đặt các nút bên trong một mục danh sách vì việc này có thể gây nhầm lẫn cho phần tử nào đang được lấy tiêu điểm.
Biểu tượng
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 các biểu tượng trong một danh sách khi các biểu tượng đó không phục vụ mục đích nào và không cung cấp thêm thông tin.
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. Việc này có thể gây choáng ngợp và nhầm lẫn cho người dùng. Thay vào đó, chỉ sử dụng các biểu tượng khi chúng bổ sung 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 ở dạng cắt hình tròn để thể hiện cá nhân hoặc pháp nhân.
