Таббар – элемент интерфейса, упрощающий навигацию в приложении. Причем достаточно популярный: для этой статьи я скачал 500 аппов и лишь в 14 его не было.

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

Сегодня будет много анти-примеров – все для того, чтобы вы не наступали на грабли, на которые кто-то уже наступил.

И, как всегда, подписывайтесь на канал и делитесь с коллегами – я это очень ценю.

Структура статьи

Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.

• Наличие и расположение

• Состав элементов таббара

• Иконки разделов

• Названия разделов

• Бейджи и маркеры

• Переключение разделов

• Highlight активного раздела

• Пара интересных идей

1. Наличие и расположение

Таббар используется

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

Если таббар, то без меню

Решили использовать таббар? Отказывайтесь от бургер-меню вверху экрана, иначе они начнут конкурировать за внимание пользователя.

Не слишком большой

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

Не слишком мелкий

При этом не стоит перегибать палку и делать его слишком мелким – иначе может возникнуть риск промахов при нажатии на элементы.

Не сливается с экраном

Спроектируйте таббар так, чтобы он воспринимался, как отдельный элемент и не сливался с остальными элементами интерфейса.

Выделение тенью

Часто можно встретить выделение таббара ненавязчивой тенью, которая не привлекает к себе внимания, но дает понять, что таббар – отдельный элемент.

Выделение линией

В качестве менее броской альтернативы тени таббар на фоне остальных элементов экрана можно выделить за счет тонкой разделительной линии.

Объект поверх контента

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

Выделение цветом?

Чаще всего цвет фона таббара нейтральный. Но если вы решили выделить таббар цветом, убедитесь, что это не будет смотреться слишком «кричаще».

Таббар с эффектом размытия?

Такое исполнение может смотреться достаточно интересно. Но важно отработать риск, что из-за полупрозрачного фона текст элементов не всегда будет легко считываться.

2. Состав элементов таббара

Элементов не слишком много

Не стоит перегружать таббар большим числом элементов, иначе они начнут смотреться слишком скомкано. Порог в 5 элементов лучше не превышать.

Элементов не слишком мало

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

Ключевые разделы

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

Раздел «Ещё»

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

Привязка к контексту

Элементы таббара могут быть динамическими: например, если пользователь еще не авторизовался, вместо элемента «Профиль» его может встретить элемент «Войти».

3. Иконки разделов

Репрезентативны

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

Понятны

Даже если иконка отражает суть раздела, убедитесь, что сама по себе она понятна пользователям. Например, здесь сразу не догадаешься, что имел в виду автор.

Подстраиваются под контекст

Некоторые специально обновляют иконки таббара под контекст. Например, под праздники. Главное, чтобы новый дизайн не затруднял восприятие.

В едином стиле

Как и в случае с быстрыми действиями, иконки в таббаре отображаются в 1 ряд, и лучше, если они будут реализованы в едином стиле.

Контрастны

Хоть серые иконки разделов – это частая практика, не стоит делать их слишком блеклыми, иначе у клиента может возникнуть ощущение, что они неактивны.

Единая толщина

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

В хорошем качестве

Гигиенический момент: иконки должны быть загружены в хорошем качестве, не должны пикселить или размываться. В идеале – в векторном формате.

Без мелких деталей

Задача иконки – облегчить восприятие раздела. Добавляя в нее мелкие и трудно различимые детали, мы можем достичь противоположного эффекта.

Не слишком крупные

Опять же, везде важна золотая середина. Слишком крупные иконки могут смотреться неэстетично. Анти-пример, разумеется, есть в наличии:

Без разделителей

Разделители между иконками в таббаре – крайне редкая практика. Вероятно, этому есть причина. Но я просто не мог обойти такое исполнение стороной:

Реализованы с отступами

Таббар должен «дышать»: иконки не должны прилипать к его границам. Поэтому лучше снабдить элементы отступами.

4. Названия разделов

Добавлены

Особенно если в таббаре есть нестандартные разделы, снабдите иконки подписями, чтобы облегчить их восприятие.

Контрастны

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

Размер шрифта не мелкий

Из-за ограничений размера самого таббара размер шрифта в нем будет небольшим. Но не стоит уходить в крайности и делать его нечитаемым:

Толщина шрифта достаточна

Из-за ограничений размера самого таббара размер шрифта в нем будет небольшим. Поэтому лучше не воздержаться от слишком тонких начертаний шрифта.

Краткие

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

Понятные

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

С отступами

Будет лучше, если тексты разделов не будут прилипать вплотную к иконкам и между ними будут отступы.

Выровнены

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

Видны полностью

Разместите тексты в таббаре так, чтобы они не перекрывались системной полоской iOS. От такого исполнения лучше воздержаться:

Локализованы

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

Локализация корректна

Лучше не ограничиваться Google Translate и привлечь к переводу носителей языка / сервисы локализации. Иначе тексты могут быть не совсем понятны аудитории:

Единый размер шрифта

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

Тексты не обрезаются

А некоторые открывают для себя волшебные возможности обрезания текста, если он не впишется. Аудитория и в этом случае будет разработчикам «благодарна»:

5. Бейджи и маркеры

Используются

Размещение бейджей и маркеров поверх иконок таббара позволяет привлечь внимание к разделу или целевому действию.

Визуализация стандартна

Используйте стандартную визуализацию бейджей. Лучше если они будут схожи по дизайну со стандартными бейджами на иконках приложений в iOS.

Не перекрывают иконки

Хоть бейджи и созданы для привлечения внимания, они не должны визуально «кричать» – в том числе слишком сильно перекрывать собой иконки таббара.

Осторожнее со знаком «!»

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

Число в бейдже корректно

Базовый момент: число в бейдже должно соответствовать числу уведомлений или «задач», стоящих перед пользователем.

Изначальное число минимально

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

Точка vs. бейдж

Если вам требуется лишь привлечь внимание к разделу без фокуса на количестве уведомлений, бейдж можно заменить точкой – смотреться будет более лаконично.

6. Переключение разделов

Моментально

Спроектируйте подгрузку данных так, чтобы переключение между разделами при тапе было моментальным и не возникало никаких значимых задержек.

Реакция на касание

Добавление незначительной реакции элементов таббара на касание при переключении разделов может сделать интерфейс более отзывчивым.

Микро-анимация

С помощью микро-анимации можно сделать переключение между разделами более явным и визуально приятным.

Переход из быстрых действий

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

Тактильная обратная связь

Также при переключении разделов таббара можно добавить незначительную вибрацию, дополнительно подтверждающую это действие.

7. Highlight активного раздела

Активный раздел подсвечен

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

Без визуальной конкуренции

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

Изменение цвета иконки

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

Заливка vs. контур

Можно пойти дальше и добавить к иконке активного раздела заливку, в то время как остальные будут отображаться лишь в контуре:

Градиентная заливка

Интересный пример выделения элемента – это заливка иконки не одним цветом, а градиентом в соответствии с корпоративными цветами:

Разноцветные иконки?

Иногда иконки можно встретить в 2 и более цветах. Что думаете по этому поводу? Хорошо или не очень? Что стоит учесть? Напишите в комментариях.

Фоновая подсветка

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

Текст виден

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

Форматирование текста

Также в активном разделе часто можно встретить изменение цвета текста по аналогии с цветом иконки и незначительное увеличение толщины шрифта.

Цвет текста vs. иконки

Возможно, это вкусовщина. Но делать подпись в другом цвете по отношению и к иконке, и к неактивному состоянию – перебор. Что думаете по этому поводу?

Подчеркивание?

Также спорная практика: активный элемент становится менее заметен, а полоска подчеркивания начинает перекликаться с системной полоской внизу.

Без выделения фона

Выделение фона активного элемента встречается очень редко, и высоки шансы, что такой способ подсветки активного раздела будет выглядеть «не очень» изящно:

Выделение заметно

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

Легко воспринимается

Выделяя активный раздел на фоне остальных, убедитесь, что он будет визуально легко восприниматься и не будет «резать глаз»:

8. Пара интересных идей

Контекстное меню

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

Настройка таббара

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

---

To be continued...

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

Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать базу знаний по UX/UI мобильных приложений.

Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.