Макеты и шаблоны навигации

Если ваше приложение содержит несколько разделов, по которым пользователям предстоит перемещаться, мы рекомендуем использовать сочетания элементов компоновки и навигации, которые часто применяются в других приложениях. Поскольку многие пользователи уже обладают необходимыми для понимания этими сочетаниями, ваше приложение будет для них более интуитивно понятным.

Layout and navigation pairings

The navigation bar and modal navigation drawer are used as primary navigation patterns for parent layout views and primary navigation destinations.

Панель навигации может содержать от трех до пяти элементов навигации на одном уровне иерархии. Этот компонент преобразуется в навигационную панель для больших экранов.

Although the navigation drawer can hold more than five navigation destinations, the pattern isn't as ideal as the navigation bar. This is because users must reach for the top bar on compact sizes.

Material 3 Tabs and the bottom app bar are secondary navigation patterns that you can use to supplement primary navigation or appear on child views.

Here, tabs act as a secondary navigation layer to group sibling content.

Действия по компоновке

Предоставьте пользователям элементы управления для выполнения действий. Типичные шаблоны включают действия в верхней панели, плавающую кнопку действия (FAB) и меню.

For actions of the highest importance, a FAB provides a large and prominent button for the user. Provide only one action at a time at this level. A FAB can appear in multiple sizes and an expanded form, which includes a label. Use Scaffold to pin a FAB, to ensure it's always visible even when scrolling.

Плавающая кнопка действия (FAB), позволяющая пользователям добавлять растения в галерею растений.

You can place secondary actions within the top bar or, if it's grouped near related content, within the page.

Для любых дополнительных действий, которые не требуются немедленно или часто, добавьте их в меню дополнительных действий.

Адаптивная навигация

Используйте правильную компоновку для класса размера окна. Избегайте использования одной и той же нижней панели навигации для разных размеров.

check_circle

Делать

Adjust your navigation to use a nav rail on large screens. The navigation rail is more ergonomic and visually balanced due to hand placement on larger devices and large spacing between nav items.

cancel

Не

Use a bottom navigation bar on large screen sizes.

Для размеров среднего уровня можно использовать навигационную панель или горизонтальные элементы навигации.

Несмотря на компактность, навигационная панель может быть более эргономичной на внешнем экране. На больших экранах можно использовать оба варианта ориентации навигации. Подумайте, как пользователь будет взаимодействовать с контентом.