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

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

Слева у панели вкладок есть фон, который отделяет контент от вкладок. Когда контент не под панелью вкладок, тогда фон убирается как показано на картинке справа.

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

<aside> 💡 Фишка iOS: Хотя панели инструментов и панель вкладок отображаются в нижней части экрана, каждая из них имеет свое назначение. Панель инструментов содержит кнопки для выполнения действий, связанных с экраном, таких как создание элемента, фильтрация элементов или разметка контента. Панель вкладок позволяет пользователям перемещаться между различными областями приложения, такими как вкладки "Будильник", "Секундомер" и "Таймер" в приложении "Часы". Панели инструментов и панели вкладок не отображаются вместе на одном экране.

</aside>

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

Используйте минимальное количество вкладок необходимое для ясности иерархии информации и помощи пользователям в навигации по приложению. Большое количество вкладок уменьшает область нажатия каждой вкладки и может усложнить ваш интерфейс. Слишком малое количество вкладок может привести к слишком обширным категориям, которые не будут полезны. Они просто будут принуждать юзеров больше и дольше тыкать по иерархии, чтобы узнать, что за контент лежит внутри вкладки. Хотя на вкладке "Больше" (троеточие) отображаются дополнительные вкладки, для их отображения требуется дополнительное нажатие, и это может привести к неэффективному использованию пространства. Как правило, используйте от трех до пяти вкладок на iPhone; при необходимости используйте еще несколько на iPad.

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

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

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

Убедитесь, что вкладки действуют на экраны, в соответствии с панелью, а не на экраны где-то в других местах. Например, выбор вкладки в левой части в режиме многозадачности (split view) не должен приводить к изменению правой части разделенного представления. Аналогично, выбор вкладки во всплывающем окне не должен изменять экран под всплывающим окном.

Используйте бэйдж уведомления для ненавязчивого оповещения. Вы можете показать бэйджик — это красный овал с белым текстом или цифрой, или восклицательным знаком — на вкладке, чтобы сообщить, что доступна новая информация, связанная с этим экраном/категорией/вьюшкой или режимом.

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

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

Круговые иконки

Квадратные иконки