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

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

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

Используйте сегменты для короткого набора связанных вариантов

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

В рекомендациях Fluent для iOS сегментированный переключатель описан как взаимно исключающие варианты в одном контексте. Однако соглашения платформ шире: руководство Apple также рассматривает элементы macOS с множественным выбором и кратковременными действиями. Здесь мы намеренно разбираем выбор одного периода.

Скруглённая рамка сама по себе не определяет поведение. Если ряд переключает самостоятельные панели «Продажи», «Остатки» и «Клиенты», стоит рассмотреть вкладки. Для множества сохранённых отчётных периодов удобнее выпадающий список с подписью или поиск. Если каждому варианту требуется пояснение, лучше оставить видимые радиокнопки с текстом.

Уточните, что означают день, неделя и месяц

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

В нашем примере отчётная дата — 14 мая. Три варианта выбирают календарные периоды в часовом поясе, по которому магазин ведёт отчётность. Вместе с переключением обновляются подпись дат и сам график:

Выбранный сегмент	Подпись дат	Группировка графика
День	14 мая	Продажи по часам
Неделя	11–17 мая	Продажи по дням
Месяц	1–31 мая	Продажи по дням

Подпись делает период однозначным и позволяет не удлинять названия сегментов. Если читатели работают в разных часовых поясах, рядом с графиком можно указать «Время отчёта: Лондон». Отдельно определите первый день недели: перевод слова «Неделя» сам по себе не задаёт местные календарные правила.

Поскольку 14 мая ещё не закончилось, для будущих часов и дат результатов нет. Оставляйте соответствующие позиции незаполненными, а не изображайте нулевые продажи. Итог подпишите «Продажи на текущий момент», чтобы незавершённый месяц не приняли за полный. Это важнее того, скользит выделение сегмента или плавно меняет прозрачность.

Разделяйте смену периода и сохранение настройки

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

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

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

Показывайте выбор и клавиатурный фокус по-разному

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

Для веб-реализации одиночного выбора обсудите с разработчиком нативные радиокнопки. Паттерн группы радиокнопок WAI-ARIA описывает именованную группу, в которой отмечен не более чем один вариант. В стандартном поведении вне панели инструментов стрелки перемещают фокус и выбор, а Tab вводит фокус в группу или выводит из неё. Не копируйте реализацию вкладок только ради скруглённого оформления.

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

Согласуйте выбранный период с данными графика

Допустим, открыт день, а пользователь нажал «Месяц». Сразу выделите этот сегмент, замените подпись на «1–31 мая» и покажите в области графика «Загружаем продажи за месяц». Высота области остаётся прежней. Дневные значения под месячной подписью выглядели бы правдоподобно, но сообщали бы неверный результат.

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

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

Сохраните читаемость на узком экране

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

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

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

Спроектируйте выбор периода вместе с графиком в Pixso

Начните в Pixso с одной карточки: заголовок графика, подпись дат, итог и три сегмента. Используйте Auto Layout для проверки расстояний и длины подписей, а повторно используемые компоненты — для одинакового устройства сегментов. Оставьте в примере настоящие календарные даты: «Вариант 1» скроет неоднозначность, которую нужно решить.

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

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

Спроектировать переключатель периода в Pixso →