Нижняя панель вкладок (Bottom Tab Bar, также известная как панель навигации) — один из самых популярных типов навигации в мобильном дизайне. Она расположена снизу, что делает ее легко доступной для большого пальца пользователя. Несмотря на его относительную простоту, правильно спроектировать панель навигации может быть сложно.
В этой статье я расскажу о 7 главных вещах, которые следует помнить при разработке такой панели вкладок.
Анатомия Tab Bar навигации
Нижняя панель вкладок может содержать только значки навигации:
или иконки могут быть вместе с текстом:
Выбранный пункт в навигации обычно имеет другой визуальный стиль, который помогает пользователям сразу понять текущее местоположение.
Apple iOS Tab bar
Для iOS размер контейнера для навигации равен 390×49.
Размер иконок в контейнере:
- 25×25 pt для обычных панелей вкладок
- 18×18 pt для компактных панелей вкладок
Для квадратного глифа иконка должна быть:
- 23×23 pt для обычных панелей вкладок
- 17×17 pt для компактных панелей вкладок
Для текстовых меток Apple iOS использует размер шрифта SF 10 и Medium вес.
Дизайн Tab Bar
Вот краткое руководство по созданию анимированной панели вкладок для iOS в Figma:
7 НЕ в дизайне Tab Bar
1. Не размещайте на панели элементы, которые вызывают действия
Панель вкладок содержит пункты для навигации, а не для действий. Не помещайте элементы управления, которые запускают действия, такие как «Создать».
❌ «Создать» — это действие, а не вариант навигации
Единственным исключением из этого правила является использование визуально выделенного элемента с действием, как в примере ниже.
✅ Панель вкладок с конкретным объектом действия
2. Не добавляйте более 5 пунктов навигации
Tab Bar лучше всего подходит для 3–5 пунктов навигации верхнего уровня. Использование более пяти опций сделает пункты слишком близкими друг к другу и ухудшит удобство использования. Пользователи могут случайно активировать неправильную опцию.
❌ Слишком много вариантов навигации. Сенсорная цель (пункт навигации) слишком мала по сравнению с большим пальцем (красный кружок)
Что делать:
- Вы можете перейти к сегментам, если у вас есть только два уровня навигации верхнего уровня.
- Если у вас есть более пяти вариантов навигации, велика вероятность, что не все из них имеют наивысший приоритет. Вы можете заново оценить пункты навигации, но если у вас все еще есть более пяти пунктов, вы можете использовать другие элементы управления, такие как меню-гамбургер.
3. Не создавайте прокручиваемую панель вкладок
Прокручиваемая панель вкладок вредит обнаружению. Поскольку не все параметры навигации будут видны одновременно, пользователи могут легко пропустить важные пункты. Кроме того, текущее местоположение может исчезнуть из виду, когда пользователь прокручивает панель вкладок.
❌ Прокручиваемая панель вкладок
4. Не используйте незнакомые значки
Иконки, которые вы используете на панели вкладок, должны быть отчетливо понятны для вашей целевой аудитории. Если вы сомневаетесь, что значение значков ясно, вы всегда должны сопровождать иконки метками.
❌ Второй пункт в навигации может быть непонятен пользователям
5. Не используйте сочетания цветов «серый на сером».
Плохой цветовой контраст для иконок и маленький размер шрифта для меток — две распространенные проблемы дизайна панели вкладок.
- Всегда проверяйте цветовой контраст текста и иконок. 3 : 1 — минимальное соотношение для активных компонентов пользовательского интерфейса и графических объектов, таких как иконки и графики (согласно WCAG).
- Убедитесь, что текстовые метки разборчивы и читаемы.
❌ Плохая цветовая контрастность значков навигации
6. Не обрезайте метки
У вас не так много места на панели вкладок, поэтому, когда дело доходит до текстовых меток, каждый символ имеет значение. Никогда не обрезайте метки, потому что их значение становится неясным для пользователей. Вместо этого попробуйте написать короткие пояснения, которые четко сообщают о цели выбора.
❌ Вторая метка обрезана
7. Не используйте причудливые анимированные переходы
Причудливая анимация может выглядеть круто для начинающих пользователей, но быстро начинает раздражать, когда вы начинаете использовать приложение регулярно. Каждый объект, который требует слишком много действий, но не представляет практической ценности, становится визуальным шумом, который расстраивает пользователей. Вот почему старайтесь избегать использования причудливых переходов между вкладками.
❌ Избегайте использования причудливых анимированных эффектов для изменения навигации