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
| 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 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.
- 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.
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
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.
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.
- 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 chính xác một mục trong danh sách.
- Công tắc: Bật hoặc tắt một chế độ điều khiển.
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.
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.
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
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.
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.
