Thanh cuộn

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. Tiện ích này cho phép người dùng di chuyển đế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 cách chạm, quay con lăn hoặc bàn di chuột. 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à gia 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), thì chuyển động hất có thể tạo ra động lực cuộn ra xa hơn một trang. Bất kể cách cuộn là gì, chuyển động cuộn sẽ luôn bám theo một mục.


Giải phẫu

Thanh cuộn được tạo thành từ các thành phần cuộn lên và cuộn xuống và chỉ báo tiến trình cuộn. Chevron được sử dụng trong các thành phần cuộn để cho biết hướng cuộn. Chỉ báo tiến trình cuộn là 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.

1. affordance cuộn lên (trạng thái bị vô hiệu hoá)
2. Chỉ báo tiến trình cuộn
3. Cuộn xuống thành phần mở rộng

Thông số

Vị trí thanh cuộn với thanh điều hướng chính xếp chồng và thanh điều khiển thu nhỏ

Chỉ vị trí thanh cuộn với tiêu đề ứng dụng

Vị trí thanh cuộn với tiêu đề ứng dụng và thanh điều khiển

Vị trí thanh cuộn với tiêu đề ứng dụng và thanh điều khiển mở rộng

Vị trí thanh cuộn với thanh ứng dụng/tiêu đề và thanh điều khiển thu nhỏ

Chỉ vị trí thanh cuộn với thanh ứng dụng/tiêu đề

Vị trí thanh cuộn với tiêu đề ứng dụng và thanh điều khiển

Vị trí thanh cuộn với 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 tùy chọn


Kiểu

Màu

Phần tử Màu sắc(chế độ ngày) Màu sắc (chế độ ban đêm)
Biểu tượng chính – trạng thái 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 làm tròn (R4) Đầy

Ví dụ

Thanh cuộn trong chế độ xem nội dung lưới
Thanh cuộn trong chế độ xem nội dung danh sách có chỉ báo tiến trình cuộn
Thanh cuộn trong chế độ xem nội dung lưới
Thanh cuộn trong chế độ xem nội dung danh sách