Bố cục và mẫu điều hướng

Nếu ứng dụng của bạn có nhiều đích đến để người dùng di chuyển, bạn nên sử dụng các cặp bố cục và điều hướng thường được các ứng dụng khác sử dụng. Vì nhiều người dùng đã có mô hình tinh thần cho những cặp này, nên ứng dụng của bạn sẽ trực quan hơn đối với họ.

Các cặp bố cục và điều hướng

Thanh điều hướng và ngăn điều hướng phương thức được dùng làm mẫu điều hướng chính cho các khung hiển thị bố cục mẹ và đích đến điều hướng chính.

Giao diện người dùng điều hướng chính

Thanh điều hướng có thể chứa từ 3 đến 5 đích đến điều hướng trên cùng một cấp độ phân cấp. Thành phần này chuyển thành thanh điều hướng cho màn hình lớn.

Mặc dù ngăn điều hướng có thể chứa hơn 5 đích đến điều hướng, nhưng mẫu này không lý tưởng bằng thanh điều hướng. Điều này là do người dùng phải với tay lên thanh trên cùng trên các kích thước nhỏ gọn.

Thẻ điều hướng phụ

Thẻ Material 3 và thanh ứng dụng dưới cùng là các mẫu điều hướng phụ mà bạn có thể dùng để bổ sung cho chế độ điều hướng chính hoặc xuất hiện trên các khung hiển thị con.

Ở đây, các thẻ đóng vai trò là một lớp điều hướng phụ để nhóm nội dung ngang hàng.

Thao tác về bố cục

Cung cấp các chế độ kiểm soát để cho phép người dùng hoàn thành các hành động. Các mẫu phổ biến bao gồm thao tác trên thanh trên cùng, nút hành động nổi (FAB) và trình đơn.

Đối với những hành động có mức độ quan trọng cao nhất, FAB cung cấp một nút lớn và nổi bật cho người dùng. Tại cấp độ này, mỗi lần bạn chỉ được cung cấp một hành động. FAB có thể xuất hiện ở nhiều kích thước và ở dạng mở rộng, bao gồm cả nhãn. Sử dụng Scaffold để ghim một FAB, nhằm đảm bảo FAB luôn hiển thị ngay cả khi cuộn.

Bố cục có FAB

Nút hành động nổi (FAB) cho phép người dùng thêm cây vào thư viện cây

Bạn có thể đặt các thao tác phụ trong thanh trên cùng hoặc trong trang nếu các thao tác đó được nhóm gần nội dung có liên quan.

Thao tác cảnh báo trong thanh trên cùng khi hiện chi tiết (bên trái) và biểu tượng tràn nằm trong dòng của mục trong danh sách (bên phải)

Đối với mọi thao tác bổ sung không cần thiết ngay lập tức hoặc thường xuyên, hãy thêm những thao tác đó vào trình đơn mục bổ sung.

Điều hướng thích ứng

Sử dụng bố cục phù hợp cho lớp kích thước cửa sổ. Tránh sử dụng cùng một thanh điều hướng dưới cùng cho nhiều kích thước.

Nên

Điều chỉnh chế độ điều hướng để sử dụng thanh điều hướng trên màn hình lớn. Dải điều hướng có tính công thái học cao hơn và cân bằng về mặt thị giác do vị trí đặt tay trên các thiết bị lớn và khoảng cách lớn giữa các mục điều hướng.

Không nên

Sử dụng thanh điều hướng dưới cùng trên các kích thước màn hình lớn.

Chế độ điều hướng ở hướng ngang Các kích thước trung bình có thể sử dụng thanh điều hướng hoặc các mục điều hướng ngang.

Thao tác điều hướng trên màn hình ngoài Mặc dù có kích thước nhỏ gọn, nhưng thanh điều hướng có thể mang lại trải nghiệm thoải mái hơn trên màn hình ngoài. Bìa lớn hơn có thể tận dụng một trong hai hướng điều hướng. Hãy cân nhắc cách người dùng có thể tương tác với nội dung.