Có nút trước và sau
Vuốt có thể là cách bổ sung, không nên là cách duy nhất để chuyển mục.
Carousel Design system
Cho duyệt nội dung theo lượt mà vẫn kiểm soát được vị trí.
Nội dung checklist
Tiến độ kiểm tra
01
Cấu trúc và ý nghĩa
Đối chiếu thông tin và cách trình bày trong ngữ cảnh sử dụng.
02
Tương tác và khả năng sử dụng
Thử thao tác, thay đổi trạng thái và đường tiếp tục công việc.
03
Hoàn thiện trải nghiệm
Kiểm tra những chi tiết dễ bỏ sót khi đưa thiết kế vào sử dụng.
Tiến độ được lưu tự động trên trình duyệt này.
HƯỚNG DẪN
Cách kiểm tra
VÍ DỤ
Ví dụ áp dụng
Có nút trước và sau
Ảnh sản phẩm có nút “Ảnh trước”, “Ảnh tiếp theo” và nhãn 2/5.
Các biến thể và tình huống
Cách chuyển nội dung
Hỗ trợ nút trước/sau và thao tác chạm phù hợp; tránh buộc mọi người phải vuốt.
Thử chỉ dùng bàn phím rồi thử touch; cả hai cách đi tới cùng các mục.
Ví dụ Nút “Ảnh tiếp theo” hoạt động cùng thao tác vuốt ngang.
Vị trí trong bộ nội dung
Cho biết đang xem mục nào và tổng số mục bằng nhãn đủ rõ.
Chuyển bằng nút và vuốt; bộ đếm phải cập nhật cùng ảnh đang xem.
Ví dụ Hiện “Ảnh 2 / 5” thay vì năm chấm không có tên.
Chuyển động có kiểm soát
Nếu tự chuyển, cho dừng và tôn trọng lựa chọn giảm chuyển động của thiết bị.
Bật reduced motion và đưa focus vào carousel; không tự đổi nội dung đang đọc.
Ví dụ Carousel dừng tự chạy khi người dùng bắt đầu tương tác.
Mục đang được xem
Giữ nội dung và hành động của mục hiện tại rõ, không cho focus vào slide bị ẩn.
Tab qua carousel có nhiều slide; các link ngoài slide hiện tại không nhận focus.
Ví dụ Chỉ nút chi tiết của sản phẩm đang hiện nằm trong thứ tự Tab.