Arrow_down_24.svgchevron-right-s-16icon-bars1-72icon-bars10-72icon-bars11-72icon-bars12-72icon-bars13-72icon-bars2-72icon-bars3-72icon-bars4-72icon-bars5-72icon-bars6-72icon-bars7-72icon-bars8-72icon-bars9-72storybook-16-solid

Определение

Segment control (Сегментированная кнопка) — это компонент, который позволяет пользователям выбрать один вариант из нескольких взаимосвязанных. Обычно представлен в виде группы кнопок, где каждая кнопка соответствует одному из вариантов.

Функциональность

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

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

При выборе нового значения обновления в интерфейсе происходят без дополнительных подтверждений.

Дизайн и Стиль

Размер и Форма

Segment имеет 2 основных размера M и L

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

  • Content – Ширина каждого сегмента зависит от длины текста внутри него.
  • Container – Сегменты равномерно распределяются по доступному пространству, независимо от длины текста.

Цвет и Контраст

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Текст и иконки

Краткость текста

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

Иконки (по необходимости)

В зависимости от контекста можно включать иконки через параметр «Leading?». Или убрать текст и оставить только иконку, чтобы сэкономить место и сделать компонент более компактным.

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

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

Правильно
Неправильно

Параметры

Анатомия