Сегментированный переключатель в приложении: подписи и состояния

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

Начните с поведения, а не с формы капсулы. Такой контрол объединяет тесно связанные варианты, которые меняют один объект или представление: «День / Неделя / Месяц» для графика, «Список / Карта» для одного набора записей, «Все / Непрочитанные» для фильтра. Выбор должен быть понятен по самим названиям, а результат — виден сразу после нажатия.

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

Компонент также не подходит для длинного меню, редких настроек или последовательных шагов. Если названий больше, чем можно спокойно просканировать, используйте список, меню выбора или отдельный экран. В рекомендациях Apple сегментированный контрол описан как набор связанных вариантов; для iPhone советуют ограничивать число сегментов примерно пятью. Это ориентир для выбора компонента, а не обязательное число для каждой платформы. См. Apple Human Interface Guidelines: Segmented controls.

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

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

Для понятной группы используйте одинаковую грамматическую форму и одинаковый уровень детализации. Сочетание «День», «По неделям», «Месяц» выглядит несогласованно; лучше «День / Неделя / Месяц». Проверяйте подписи в паре: слово может быть ясным само по себе, но двусмысленным рядом с другими вариантами.

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

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

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

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

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

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

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

У выбранного сегмента есть семантическое состояние, которое должно быть доступно технологиям помощи, а не только нарисовано. На Android Material 3 предоставляет отдельные single-choice и multi-choice варианты компонентной строки; это подчёркивает, что визуально похожая группа может означать один выбор или несколько. Перед сборкой зафиксируйте, допускается ли ровно один активный вариант, можно ли вернуть первоначальное состояние и меняет ли переключение данные или только способ их показа. См. документацию Android для Segmented buttons.

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

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

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

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

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

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

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

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

**Не тестировать длинный текст и динамический размер.** Макет с короткими русскими словами может пройти проверку, а перевод или крупный системный текст переполнит сегмент. Включите такие строки в тестовые данные до выпуска.

Используйте только столько вариантов, сколько можно быстро прочитать на целевом экране. Apple в рекомендациях для iPhone предлагает ориентироваться примерно на пять сегментов; если названий или условий больше, проверьте список, меню или отдельную панель выбора. Главное — сохранить полные понятные подписи.

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

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

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

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

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

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