Danh sách là vùng chứa của các phần tử có tính năng cuộn và lấy tiêu điểm tích hợp.
Nguyên tắc
Sắp xếp rõ ràng: Danh sách phải trình bày thông tin theo bố cục dọc rõ ràng và dễ quét.
Trình bày nhất quán các mục: Các mục trong danh sách phải tuân theo một cấu trúc hình ảnh nhất quán.
Khả năng lấy tiêu điểm và điều hướng: Trong các giao diện dựa vào chế độ điều hướng theo hướng, danh sách phải cho biết rõ mục được lấy tiêu điểm.
Tính tương tác: Các mục trong danh sách thường đại diện cho các phần tử có thể chọn hoặc có thể thực hiện hành động.
Cách sử dụng và vị trí
Danh sách có thể chứa nhiều nội dung ngang hàng với các phần tử có thể lặp lại. Không giống như ngăn xếp, danh sách sẽ lấp đầy vùng chứa khung hiển thị ứng dụng.
Sử dụng lớp phủ mờ để cho biết nội dung tràn
Khi một danh sách chứa nhiều mục hơn số lượng mục vừa với một khung hiển thị, một lớp phủ màu đen sẽ được dùng gần ranh giới của danh sách.
Danh sách có thể sử dụng tiêu đề nếu cần
Bạn có thể dùng tiêu đề tĩnh hoặc tiêu đề cố định trong danh sách để đảm bảo rõ ràng.
Không nên
Sử dụng độ sâu để cho biết tiêu điểm
Các mục trong danh sách di chuyển giữa độ sâu 0 và +4 cho trạng thái không được lấy tiêu điểm và được lấy tiêu điểm.
Các mục trong danh sách có thể thực hiện được
Các mục trong danh sách có thể đóng vai trò là hành động. Giữ thao tác cho mục trong danh sách
Phân tích
Danh sách bao gồm một vùng chứa có thể cuộn và các mục trong danh sách có khoảng cách nhất quán. Danh sách phải cuộn theo chiều dọc, với mức vượt quá tối thiểu, khi số lượng mục vượt quá khung hiển thị.
A. Vùng chứa – vùng có thể cuộn
B. Mục trong danh sách
C. Thanh hệ thống
List
Item: Mỗi phần tử riêng lẻ trong danh sách.
A. Hình dạng
B. Đường viền
C. Biểu tượng hàng đầu
D. Nội dung văn bản
E. Chỉ báo theo sau
Tuỳ chỉnh
Phần lớn hoạt động tuỳ chỉnh diễn ra với các mục trong danh sách.
| Thuộc tính | Tuỳ chỉnh | Mặc định |
|---|---|---|
| Mục trong danh sách: Hình dạng | Rồi | 40 dp |
| Mục danh sách: Biểu tượng đầu và cuối | Rồi | Biểu tượng ký hiệu nội dung nghe nhìn |
| Mục trong danh sách: Giá trị khoảng đệm | Rồi | 2 dp, 20 dp |
| Mục trong danh sách: Nội dung | Rồi | Một dòng: Một thành phần kết hợp Văn bản cho nhãn chính bằng cách sử dụng Nội dung nhỏ Hai dòng: Một Cột chứa hai thành phần kết hợp Văn bản cho nhãn chính và nhãn phụ Chính: Tiêu đề nhỏ Phụ: Nội dung nhỏ |
| Danh sách: verticalArrangement | Rồi | 20 dp |