Bottom sheet trên mobile (panel trượt từ đáy lên)

Khi bạn bấm nút “Chia sẻ” trong một ứng dụng và một tấm chứa danh sách lựa chọn trượt lên từ cạnh dưới, đó chính là bottom sheet. Đây là thành phần giao diện rất quen thuộc trên mobile, nhưng nhiều người dựng web hay nhầm nó với dialog (hộp thoại nổi giữa màn hình) hoặc trang riêng. Bài này tách bạch từng kiểu bottom sheet, chỉ rõ khi nào nên dùng, và những điểm dễ làm sai.

Hai kiểu bottom sheet cần phân biệt

Theo tài liệu Material Design 3 của Google, bottom sheet có hai biến thể chính, khác nhau ở chỗ chúng có chặn nội dung phía sau hay không.

Modal bottom sheet (chặn nền)

Loại modal (chặn — buộc xử lý xong mới quay lại) phủ một lớp scrim (lớp tối mờ che nền) lên nội dung bên dưới. Người dùng phải chọn một mục hoặc đóng tấm này lại trước khi chạm được vào phần còn lại của màn hình. Nó nằm ở độ cao (elevation — lớp nổi) cao hơn nội dung app, có bóng đổ để báo rằng đang ở chế độ chặn. Đây là loại thay thế trực tiếp cho dialog.

Persistent bottom sheet (đứng cùng nội dung)

Loại persistent (thường trực — còn gọi standard) nằm cùng độ cao với nội dung chính và không chặn thao tác. Người dùng vẫn cuộn, kéo, tương tác với màn hình nền trong khi tấm này hiện ra. Material Design dùng nó để giữ một tính năng phụ luôn thấy trên màn hình khi nội dung chính bị cuộn nhiều, ví dụ một tấm thông tin địa điểm bám đáy trong khi bản đồ vẫn kéo được phía trên.

Khi nào dùng bottom sheet thay vì dialog hay trang mới

Ranh giới giữa ba lựa chọn này quyết định trải nghiệm mượt hay rối:

• Dùng modal bottom sheet thay dialog khi danh sách lựa chọn có thể dài, cần cuộn, hoặc khi bạn muốn người dùng vẫn liếc thấy ngữ cảnh nội dung gốc. Nielsen Norman Group lưu ý dialog truyền thống xử lý nội dung cuộn rất tệ, còn bottom sheet cuộn lại tự nhiên vì nó bám cạnh dưới và tận dụng cả chiều ngang màn hình.
• Dùng dialog khi cần một quyết định dứt khoát ngắn gọn, ít lựa chọn, kiểu xác nhận xoá hay cảnh báo. Dialog nằm giữa màn hình, kéo sự chú ý mạnh hơn.
• Dùng trang mới khi tác vụ dài, nhiều bước, hoặc cần điều hướng sâu. NN/g khuyến cáo bottom sheet chỉ nên dành cho tương tác NGẮN, tạm thời; nhồi một luồng dài vào đó sẽ phá vỡ thói quen điều hướng quen thuộc.

Đây là chỗ một bottom sheet khác hẳn việc thiết kế điều hướng tổng thể: bottom sheet là một thành phần cho một tác vụ cụ thể, không phải khung điều hướng của cả app.

Vùng ngón cái — sự thật khác với lời đồn

Nhiều người nghĩ bottom sheet luôn tốt cho khả năng với tới (reachability) vì nó nằm gần ngón cái. Thực tế tinh tế hơn. NN/g chỉ ra rằng người dùng cầm điện thoại theo nhiều kiểu khác nhau, và vùng dễ chạm nhất với phần lớn cách cầm lại là GIỮA màn hình, không phải mép dưới cùng.

Bài học thực chiến khi dựng giao diện thật là: các nút hành động (CTA) chính trong bottom sheet nên đặt ở phần dưới của tấm, nơi ngón cái với tới thoải mái một tay trên máy màn hình lớn. Đừng dồn nút quan trọng lên sát mép trên cùng của tấm, vì đó là vùng khó với khi cầm một tay.

Thành phần và những điểm dễ làm sai

Một bottom sheet đúng chuẩn thường gồm: tay kéo (drag handle — vạch ngang nhỏ ở đỉnh tấm báo hiệu kéo được), phần tiêu đề, vùng nội dung cuộn được, và nút đóng. Một số tấm còn có chiều cao “peek” (ló — phần nhô lên ban đầu để gợi ý kéo lên xem thêm).

Theo hướng dẫn của NN/g, hãy tránh các lỗi sau:

1. Chỉ dựa vào cử chỉ vuốt để đóng. Luôn thêm một nút đóng (X) rõ ràng. Tay kéo không đủ, và người dùng trình đọc màn hình (screen reader) cần một nút thật để đóng.
2. Bỏ qua nút Back. Vì bottom sheet trông như một trang, người dùng hay bấm nút Back để đóng. Hãy cho nút Back đóng tấm thay vì rời màn hình.
3. Xếp chồng nhiều sheet lên nhau. Mở sheet này từ sheet kia khiến người dùng mất phương hướng, không rõ thao tác đóng nào ứng với tấm nào.

Về kích thước chạm, hãy theo WCAG 2.2 AA với mục tiêu chạm tối thiểu khoảng 24px, còn khuyến nghị thoải mái hơn là 44pt theo Apple Human Interface Guidelines và 48dp theo Material Design. Các mục trong bottom sheet không được nhỏ hơn ngưỡng này.

Câu hỏi thường gặp

Bottom sheet có dùng được trên web không, hay chỉ mobile app?

Dùng được cho web mobile, và nhiều thư viện component web có sẵn mẫu này. Nó hợp nhất với màn hình hẹp; trên desktop thì dialog hoặc panel bên thường phù hợp hơn.

Bottom sheet khác snackbar và dialog ra sao?

Snackbar là thông báo ngắn tự biến mất, không cần thao tác. Dialog chặn nền và đòi quyết định ngay. Bottom sheet đứng giữa — đủ chỗ cho lựa chọn hoặc nội dung phụ mà vẫn giữ thấy ngữ cảnh.

Nếu bạn cần dựng các thành phần như bottom sheet đúng chuẩn ngay từ bản thiết kế tới mã nguồn, tham khảo thiết kế giao diện ứng dụng mobile của Web22.