Danh sách là vùng chứa của các phần tử có chức 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 chế độ xem ứng dụng.
Sử dụng lớp phủ để 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 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ể sử dụng tiêu đề tĩnh hoặc tiêu đề cố định trong danh sách để cho 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
Làm nổi bật nút điều khiển sẽ được kích hoạt khi nhấn, ngay cả khi bạn có thể cuộn một nội dung khác. Nếu một danh sách hoặc thẻ có thể được cuộn ra sau một phần tử khác, thì chỉ tập trung vào mục phản hồi thao tác nhấn.
Nên
Không nên
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 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
Tùy 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 | Tùy chỉnh | Mặc định |
|---|---|---|
| Mục trong danh sách: Hình dạng | Có | 40 dp |
| Mục danh sách: Biểu tượng đầu và cuối | Có | Biểu tượng ký hiệu trung bình |
| Mục trong danh sách: Giá trị khoảng đệm | Có | 2 dp, 20 dp |
| Mục trong danh sách: Nội dung | Có | 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 | Có | 20 dp |