Панель навигации отображается в верхней части экрана приложения, под панелью состояния приложения (status bar), и позволяет осуществлять навигацию по экранам, которые расположены иерархически. Когда отображается новый экран, в левой части панели появляется кнопка "Назад", текст которой может содержать название предыдущего экрана. Иногда в правой части панели может находиться какой-либо контрол, например кнопки "Готово" или "Редактировать", чтобы юзер мог манипулировать контентом на экране. В режиме многозадачности панель навигации может отображаться на одной из панелей режима. Панель навигации полупрозрачна и может иметь оттенок фона, а также может быть спрятана тогда, когда клавиатура появляется на экране, происходит какой-либо жест или изменяется размер вьюшки.

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

Заголовки в панели навигации

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

Используйте большой заголовок, если вы хотите сделать дополнительный акцент. Большие заголовки не должны соперничать с контентом, но в некоторых приложениях большой жирный заголовок может помочь направить людей во время просмотра и поиска контента. Например, если экран содержит Tab bar (панель вкладок) большие заголовки могут помочь понять на какой активной вкладке юзер находится и явно на это указать при скроле вверх. Такое решение применяется в приложении "Телефон", а вот в Apple Music используются большие заголовки для разграничения контента: альбомы, исполнители, плейлисты и радио.

Слева стандартный заголовок, а справа большой заголовок

Рассмотрите возможность удалить нижнюю обводку у панели навигации с большим заголовком. В iOS 13 и более поздних версиях вы можете скрыть нижнюю обводку у панели навигации, так как граница автоматически появляется, когда люди прокручивают контент. Такой стиль без полей хорошо работает на панелях навигации с большими заголовками, потому что он усиливает ощущение связи между заголовком и контентом. Однако стиль без полей может не работать так же хорошо на панелях навигации со стандартными заголовками, поскольку заголовок и кнопки возможно будет сложнее различить. Исключением из этого является режим многозадачности на iPad.

Элементы управления в панели навигации

Избегайте переполнения панели навигации большим количеством контролов. Как правило, панель навигации должна содержать всего лишь заголовок, кнопку "Назад" и один контрол, который будет управлять контентом. Если вы используете сегментированные вкладки (segment control) на панели навигации, то панель не должна содержать заголовок или какие-либо другие контролы, кроме сегментированных вкладок.

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

Используйте стандартную кнопку "Назад". Люди знают, что стандартная кнопка "Назад" позволяет им проследить путь по иерархии в приложении. Однако, если вы реализуете кастомный (свой собственный) стиль для кнопки "Назад", то убедитесь, что она по-прежнему выглядит как кнопка "Назад", ведет себя так, как ожидают люди, соответствует остальной части интерфейса и консистентно реализована во всем приложении. Если же вы замените стандартную иконку у кнопки "Назад" на кастомную иконку (свою собственную), то убедитесь также что передали в разработку в том числе маску для этой иконки. iOS использует дополнительно изображение-маску для анимации текста у кнопки во время переходов.

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

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

Рассмотрите возможность использования сегментированных-вкладок (segment control) на панели навигации, чтобы расположить контент приложения иерархически более плоско. Если вы используете сегментированные-вкладки на панели навигации, делайте это только на верхнем уровне в иерархии и обязательно выбирайте точные и понятные названия для кнопок "Назад" на уровнях ниже.