Материальный дизайн — понимание навигации

Навигация помогает пользователям перемещаться по приложению.

Виды навигации

Основываясь на информационной архитектуре приложения, пользователь может двигаться в одном из трёх направлений навигации:

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

Боковая навигация позволяет перемещаться между экранами верхнего уровня этого приложения.

Прямая навигация даёт доступ к песне одним из двух способов:

  • иерархический переход;
  • переход напрямую с помощью поиска.

Обратная навигация позволяет перемещаться:

  • вверх по иерархии;
  • или хронологически, возвращая пользователя на последний посещенный экран.

Горизонтальная навигация

ТипНаправлениеКоличество пунктов и применение
Навигационная панель
верхний уровень иерархии

+5 (все устройства)

Нижняя панель
верхний уровень иерархии

2-5 (мобильные устройства)

Вкладки
любой уровень иерархии

+2 (все устройства)

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

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

Вкладки должны содержать минимум два элемента для перемещения на любой уровень иерархии приложения. Применяются на всех видах устройств.

Вкладки (2) могут содержать дополнительную навигацию связанную с основной (1).

Прямая навигация

Прямая навигация относится к одному из трёх типов перемещения между экранами со следующими методами:

  • Перемещение вниз по иерархии от родительского экрана к дочерному.
  • Последовательное перемещение через поток или упорядоченную последовательность, такую как оформление заказа.
  • Прямое перемещение с одного экрана на другой.

Прямая навигация реализуется с помощью:

  • Контейнеров: карточки, списки…
  • Кнопок для перехода на другой экран.
  • Функции поиска.
  • Ссылок внутри контента.

Карточки на домашнем экране (родительский) могут использоваться для перехода к полной заметки (дочерный).

Кнопки наглядно показывают навигацию по потоку.

Поиск позволяет переместится в любую точку приложения.

Обратная навигация

Этот тип навигации обычно реализуется с помощью операционной системы.

Кнопка «Назад» позволяет перемещаться по экранам в обратном хронологическом порядке.

  1. Кнопка «Назад» (A) на панели навигации Android
  2. Кнопка «Назад» (B) в веб-браузере
  1. Навигация вверх в Android и веб-приложениях с помощью действия Up (A)
  2. Навигация вверх на iOS через кнопку «назад» (B) на панели навигации iOS