Подписи нижней навигации в приложении: коротко и понятно

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

Нижняя панель обычно содержит постоянные разделы верхнего уровня: например, «Главная», «Поиск», «Заказы» и «Профиль». Человек должен иметь возможность переходить между ними и сохранять контекст каждого раздела. Кнопки «Добавить», «Оплатить» или «Фильтр» выполняют действие внутри текущего экрана — их место обычно в панели инструментов или в самом содержимом, а не рядом с навигационными пунктами.

Это различие влияет и на слова. Название раздела отвечает «куда я попаду?», а команда — «что произойдёт после нажатия?». Если пункт навигации подписан глаголом вроде «Оформить», пользователь может ожидать немедленного действия. Для пространства заказов яснее «Заказы», а для команды создания — «Новый заказ».

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

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

Проверьте каждую метку на трёх вопросах:

Сравните «Сохранённое», «Избранное» и «Закладки». Любое может быть уместно, но только если соответствует привычной модели продукта и тексту внутри экрана. Если кнопки на карточках называются «В избранное», подпись «Избранное» образует предсказуемую связь. Если в приложении сохраняют статьи и маршруты, слово «Сохранённое» может быть шире и честнее.

Для проверки соберите варианты на бумаге или в кликабельном прототипе и дайте нескольким людям выполнить конкретный сценарий: «Где вы продолжите незавершённый заказ?» Не подсказывайте название. Важно увидеть, какую метку они ищут, а не услышать оценку «нравится — не нравится». Если люди объясняют один пункт разными словами, уточните содержание экрана или подпись.

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

Не превращайте каждую метку в телеграфный обрубок. «Сообщ.» экономит место, но выглядит как внутренняя пометка; «Чаты» обычно короче и яснее. «Мои» без существительного не объясняет назначение. Сокращение уместно лишь тогда, когда оно общеупотребительно для аудитории и однозначно в контексте приложения. Если оно требует расшифровки, выигрыш в ширине не оправдан.

Задайте для всех пунктов общие правила: один язык, одна грамматическая форма, похожая длина, одинаковый регистр и единое начертание. Не чередуйте существительные «Поиск», глагол «Открыть» и фразу «Мой профиль» без смысловой причины. Такая последовательность читается как случайная, даже если каждый пункт по отдельности помещается.

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

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

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

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

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

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

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

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

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

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

В руководстве Apple нижняя панель предназначена для перехода между основными разделами; рекомендации советуют использовать подписи и короткие слова. Руководство Android для Compose описывает Navigation Bar как способ переключения между несколькими равнозначными направлениями на компактном экране и показывает отдельные параметры метки и иконки. Эти документы помогают понять роль компонента, но точные размеры, поведение переноса и доступные состояния зависят от используемой реализации и версии интерфейсной библиотеки. Сверяйтесь с документацией выбранной платформы и тестируйте экран на целевых устройствах.

Представим приложение, где можно найти машину, следить за активной поездкой и увидеть завершённые. Варианты «Такси», «Мои поездки», «Заказы» и «Аккаунт» смешивают разные модели. Пользователь не понимает, где текущая поездка и чем «заказы» отличаются от «поездок».

Сначала определите содержимое каждого места: экран выбора автомобиля, список всех поездок с текущей сверху, и настройки профиля. Затем подберите параллельные названия: «Заказать», «Поездки», «Профиль». Но первое слово может восприниматься как действие, а не раздел. Если первая вкладка показывает только форму заказа, испытайте «Поиск» или «Маршрут» — что точнее описывает сам экран. Проверьте вариант с реальными пользователями, особенно если в продукте есть доставка или разные типы поездок.

Затем проверьте макет с длинным локализованным названием вроде «Предстоящие поездки». Если оно не влезает, короткая подпись «Поездки» может оставаться точной, а содержание категории раскрываться уже на экране. Так навигация остаётся краткой, а важные подробности доступны после перехода.

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

**Сжимать текст до микроскопического размера.** Сначала проверьте термин и число вкладок, затем ширину и перенос. Не делайте одну подпись тоньше или меньше остальных, чтобы «спасти» макет.

**Использовать внутренние названия продукта.** «Медиатека» может быть понятна команде, но «Музыка» или «Книги» точнее для содержимого. Оценивайте слово со стороны человека, который впервые открыл приложение.

**Обозначать активность только цветом.** Проверьте форму, насыщенность, контраст и объявление состояния вспомогательной технологией. Смысл должен сохраняться при разных способах восприятия цвета.

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

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

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

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

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

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

Включите максимальные настройки размера текста и повышенной контрастности на реальном устройстве или системном симуляторе. Проверьте высоту панели, перенос строк, возможность нажать на пункты, отсутствие перекрытий и объявления VoiceOver или TalkBack. Просмотрите основные экраны после перехода между вкладками.

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

Хорошая подпись нижней навигации короткая, точная и одинаково читается во всех состояниях. Начните с ясных названий и устойчивой структуры, затем проверьте шрифт, переносы, локализацию и доступность на устройстве. Если вы разрабатываете собственную гарнитуру, протестируйте её на реальных коротких метках интерфейса в Fontgenerator и оцените читаемость до сборки набора.

Apple Human Interface Guidelines: Tab bars и Typography. Android Developers: Navigation bar in Jetpack Compose и Support user-scalable content.