Danh sách
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
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
Đ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.
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 đố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.
check_circle
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.
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ì 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
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 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.
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. 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.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2024-08-19 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Thiếu thông tin tôi cần"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Quá phức tạp/quá nhiều bước"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Đã lỗi thời"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Vấn đề về bản dịch"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Vấn đề về mẫu/mã"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Khác"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Dễ hiểu"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Giúp tôi giải quyết được vấn đề"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Khác"
}]
{"lastModified": "C\u1eadp nh\u1eadt l\u1ea7n g\u1ea7n \u0111\u00e2y nh\u1ea5t: 2024-08-19 UTC."}
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2024-08-19 UTC."]]