Segment control (Сегментированная кнопка) — это компонент, который позволяет пользователям выбрать один вариант из нескольких взаимосвязанных. Обычно представлен в виде группы кнопок, где каждая кнопка соответствует одному из вариантов.
Компонент используется для переключения между различными фильтрами, режимами отображения, или для выбора параметров, которые связаны по смыслу.
Пользователи могут выбрать только один вариант из группы. При выборе, компонент сразу применяет действие, соответствующее выбранному варианту.
При выборе нового значения обновления в интерфейсе происходят без дополнительных подтверждений.
Segment имеет 2 основных размера M и L
В длину может растягиваться на весь экран или оставаться под размер текста, в зависимости от контекста:
Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.
Используйте короткий и легко воспринимаемый текст. Это помогает пользователям быстро понять смысл и взаимодействовать с элементами интерфейса без лишних усилий.
В зависимости от контекста можно включать иконки через параметр «Leading?». Или убрать текст и оставить только иконку, чтобы сэкономить место и сделать компонент более компактным.
Однако, если используются только иконки , важно убедиться, что они интуитивно понятны для пользователя и не требуют дополнительного текстового пояснения.
Не рекомендуется комбинировать сегменты с иконками и без иконок, так как это может сбить пользователя с толку и нарушить единообразие интерфейса. Для лучшего восприятия все сегменты в Segmented control должны быть оформлены одинаково — либо все с иконками, либо все без них. Это обеспечивает четкость выбора и улучшает пользовательский опыт.