Thanh cuộn cho biết vị trí của người dùng trong tài liệu lớn hơn không gian xem. Chúng cho phép người dùng điều hướng đến phần còn lại của tài liệu bằng cách di chuyển khu vực xem cửa sổ lên hoặc xuống.
Người dùng tương tác với thanh cuộn bằng thao tác chạm, con lăn hoặc bàn di chuột. Thao tác nhấn vào các mũi tên trong thanh cuộn sẽ di chuyển nội dung theo “trang”, tức là tăng tương đương với chiều cao của màn hình. Tuy nhiên, nếu người dùng nhanh chóng hất để cuộn (phụ thuộc vào độ nhạy của màn hình cảm ứng), chuyển động hất có thể tạo ra động lượng quán tính cuộn xa hơn một trang. Bất kể thao tác cuộn được bắt đầu như thế nào, chuyển động cuộn phải luôn bám theo một mục.
Phân tích
Thanh cuộn bao gồm các thành phần tương tác cuộn lên và cuộn xuống cùng chỉ báo tiến trình cuộn. Các Chevron được sử dụng trong các thành phần tương tác cuộn để cho biết hướng cuộn. Chỉ báo tiến trình cuộn là một phần tử không bắt buộc, cho biết nội dung hiển thị và vị trí cuộn tương quan với tổng lượng nội dung trên trang.
Lưu ý: Chỉ báo tiến trình cuộn không được thiết kế để có thể kéo.
2. Chỉ báo tiến trình cuộn
3. Thành phần tương tác cuộn xuống
Thông số
Vị trí thanh cuộn có thanh điều hướng chính xếp chồng và thanh điều khiển được thu nhỏ
Vị trí thanh cuộn chỉ có tiêu đề ứng dụng
Vị trí thanh cuộn có tiêu đề ứng dụng và thanh điều khiển
Vị trí thanh cuộn có tiêu đề ứng dụng và thanh điều khiển mở rộng
Vị trí thanh cuộn có thanh ứng dụng/tiêu đề và thanh điều khiển được thu nhỏ
Vị trí thanh cuộn chỉ có tiêu đề/thanh ứng dụng
Vị trí thanh cuộn có tiêu đề ứng dụng và thanh điều khiển
Vị trí thanh cuộn có tiêu đề ứng dụng và thanh điều khiển mở rộng
Vị trí thanh cuộn với chiều cao màn hình ngắn
Chỉ báo tiến trình cuộn (không bắt buộc)
Kiểu
Màu
| Phần tử | Màu(chế độ ban ngày) | Màu (chế độ ban đêm) |
|---|---|---|
| Biểu tượng chính – trạng thái đang hoạt động | Trắng | Trắng @ 88% |
| Biểu tượng chính – trạng thái không hoạt động | Trắng @ 56% | Trắng @ 50% |
| Chỉ báo tiến trình cuộn | Trắng @ 16% | Trắng @ 12% |
Kích thước
| Phần tử | Kích thước (dp) |
|---|---|
| Biểu tượng chính | 44 |
| Mục tiêu cảm ứng | 76 |
| Chiều rộng chỉ báo tiến trình cuộn | 6 |
| Bán kính góc bo tròn (R4) | Toàn quyền |
Ví dụ
