Навигация в мобильном приложении: таббар, бургер и другие

Короткий ответ

Навигация должна соответствовать тому, как часто люди заходят в каждую часть приложения:

• 3–5 основных разделов, которыми пользуются регулярно — нижний таббар.
• Много второстепенных пунктов (настройки, помощь, документы) — меню: выдвижная панель, вкладка «Ещё» или «Профиль».
• Несколько представлений внутри одного раздела («Все / Непрочитанные», «Неделя / Месяц») — верхние вкладки или сегментированный переключатель.
• Жесты — только ускорители поверх видимых элементов, а не единственный путь.

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

Нижний таббар

Плюсы:

• Всегда на виду: пользователь видит, где находится и что ещё есть.
• Переключение раздела в одно касание.
• Расположен внизу экрана, в удобной зоне большого пальца.

Минусы:

• Помещается только 3–5 пунктов.
• Занимает место по вертикали на каждом экране.

Правила:

• Используйте иконку и короткую подпись: одни иконки часто читаются двусмысленно.
• Явно выделяйте активную вкладку.
• Вкладки — это разделы, а не действия. «Выйти» или «Поделиться» там не место. Центральная кнопка «Создать» — допустимое исключение, если создание контента и есть суть продукта.
• Сохраняйте состояние каждой вкладки: если пользователь ушёл вглубь каталога, переключился в корзину и вернулся, он должен оказаться там же.
• Не меняйте набор вкладок в зависимости от контекста.

Бургер-меню и выдвижная панель

Плюсы: вмещает много пунктов и оставляет экран чистым.

Минусы:

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

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

Верхние вкладки

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

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

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

Жесты

Свайп назад, свайп между вкладками, потянуть для обновления, смахнуть строку для удаления — жесты быстрые, но невидимые. Пользователь не знает о них, пока ему не покажут. Ещё они могут конфликтовать с системными жестами: и iOS, и Android используют свайп от края экрана для возврата назад.

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

Сравнение

Рядом с ними вы будете использовать и другие паттерны: стековую навигацию (переход вглубь с кнопкой «Назад»), bottom sheet для коротких задач, навигацию через поиск для больших каталогов и navigation rail на планшетах и широких экранах.

Как выбрать для своего приложения

1. Выпишите все разделы и оцените, как часто каждый используется: по аналитике, интервью или хотя бы честной оценке.
2. Выберите 3–5 самых частых для таббара.
3. Остальное перенесите во вкладку «Профиль» / «Ещё» или в выдвижную панель.
4. Большие разделы разделите верхними вкладками или сегментированным переключателем.
5. Добавьте жесты только как ускорители.
6. Проверьте на кликабельном прототипе: дайте задачи вроде «найдите историю заказов» и посмотрите, найдут ли с первой попытки.

Частые ошибки

• Таббар и бургер-меню дублируют одни и те же пункты.
• Иконки без подписей.
• Действия перемешаны с разделами в таббаре.
• Глубокая иерархия, в которой пользователь теряет, где находится.
• Важные функции доступны только через жест.