Панели вкладок и нижняя навигация: правила проектирования, которые работают
Как спроектировать панели вкладок и нижнюю навигацию на iOS и Android: от 3 до 5 пунктов назначения, навигация вместо действий, метки, значки, видимость и анимированные активные состояния.
Главное
Используйте панель вкладок или нижнюю навигацию для трех-пяти пунктов назначения верхнего уровня, а не для действий. Присвойте каждой вкладке значок и метку, держите панель видимой, когда люди перемещаются между разделами, избегайте переполнения вкладок «Дополнительно», где это возможно, и экономно используйте значки. Тонко анимируйте активное состояние, чтобы люди видели, где они находятся.
Что говорят платформы
В Material Design 3 говорится, что панели навигации обеспечивают доступ к трем-пяти пунктам назначения, каждый из которых имеет значок и метку, и один пункт назначения всегда активен. В рекомендациях Apple говорится, что панель вкладок следует использовать для навигации, а не для выполнения действий, чтобы она оставалась видимой при перемещении людей между разделами (за исключением случаев, когда ее закрывает модальное окно), а также избегать вкладок переполнения.
Выбор вкладок
Вкладки представляют структуру приложения:
- Выбирайте разделы, которые люди используют чаще всего, а не каждый раздел, который у вас есть.
- Используйте существительные для обозначения пунктов назначения («Библиотека»), а не глаголы для обозначения действий («Загрузить»).
- Размещайте действия на самом экране, на панели инструментов или в плавающей кнопке действия.
- Если вам нужно больше пяти, пересмотрите свою структуру, прежде чем добавлять вкладку «Еще».
Этикетки и значки
Вкладки, содержащие только значки, экономят место, но заставляют людей гадать. Ярлыки делают навигацию более понятной, особенно для менее распространенных значков. Значки должны сигнализировать о том, что людям необходимо действовать; значок, который всегда присутствует, перестает быть замеченным.
Сохранять состояние на вкладке
Apple отмечает, что панели вкладок позволяют людям переключаться между разделами, сохраняя при этом текущее состояние навигации внутри каждого раздела. Возврат на вкладку должен показывать, где они остановились, а не возвращаться к началу.
Движение
Небольшой переход на активном индикаторе, например скользящая таблетка или заполняющийся значок, помогает людям отслеживать, где они находятся. Делайте это быстро, примерно за 250 миллисекунд, избегайте подпрыгивания каждого значка при каждом касании и упрощайте его, когда включено ограниченное движение.
Ключевые принципы
- Три-пять направлений высшего уровня
- Навигация, а не действия
- Значок и метка для каждой вкладки
- Держите его видимым и сохраняйте состояние каждой вкладки.
- Тонкое, быстрое движение в активном состоянии
Частые вопросы
Источники
- Navigation bar guidelines — Material Design 3
- Tab bars — Рекомендации Apple по пользовательскому интерфейсу