Панель навигации

Чтобы лучше понимать как устроены приложения, буду тут собирать основные требования от операционных систем.

iOS

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

Кнопка «Назад» подписывается названием предыдущего экрана. Когда отображается новый экран, кнопка «Назад», часто помеченная заголовком предыдущего экрана, появляется с левой стороны панели.

Содержит не только навигацию, но и управление. Иногда правая часть панели навигации содержит элемент управления, например кнопку «Изменить» или «Готово», для управления содержимым в активном экране.

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

Заголовок может быть, а может и не быть. В большинстве случаев название помогает людям понять, на что они смотрят. Однако, если заголовок панели навигации кажется излишним, вы можете оставить заголовок пустым.

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

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

Используйте стандартную кнопку возврата. Люди знают, что стандартная кнопка «назад» позволяет им отслеживать шаги в иерархии информации. Однако, если вы реализуете пользовательскую кнопку «Назад», убедитесь, что она по-прежнему выглядит как кнопка «Назад», ведет себя интуитивно, соответствует остальному интерфейсу и последовательно реализована в вашем приложении.

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

Android

Панели отображаются вверху и могу пропадать при прокрутке:

Вот так выглядит стандартная:

Навигация в крайнем левом положении. Бургер-меню не обязательно. Заголовок правее навигации. Разместите контекстные действия справа от навигации. Поместите меню переполнения, если используется, в крайнее правое положение.

А вот так контекстная панель:

У контекстной панели используйте другой цвет

Панели могут быть двух видов: стандартная и крупная.

Используйте крупную, когда заголовки большие:


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Поделиться
Отправить
Запинить
15 сентября   ios vs android
Популярное