Переключатель — это элемент интерфейса, предназначенный для быстрого переключения между двумя состояниями. По сути, он отражает некоторое изменение состояния системы, например, включение/выключение функции или изменение настройки.Основными частями переключателя являются трек (основание) и движущийся по нему ползунок, вместе имитирующие физический переключатель, который можно увидеть, например, в диджейских пультах.
Базовая анатомия
Трек служит направляющей для ползунка и визуально отображает текущее состояние. Важно учитывать, что ползунок должен быть достаточно крупным для удобного касания и контрастировать с треком, чтобы его было видно. Пропорции также очень важны, ширина трека должна быть примерно вдвое больше его высоты.
Анатомия с подписями
Рядом с переключателем обычно размещается поясняющий текст, который описывает контролируемую функцию. Анимация движения ползунка должна быть плавной, но быстрой, создавая ощущение мгновенной реакции. Дополнительно можно использовать индикаторы состояний, такие как изменяющиеся иконки или цветовые акценты.
Состояние данного элемента напрямую отражает статус управляемой функции, ведь это — его главная задача.
Default
В исходном состоянии переключатель показывает текущий статус функции через положение ползунка и цвет трека. Включённое состояние обычно имеет более контрастный цвет.
Hover
При наведении курсора может появиться лёгкий эффект интерактивности, например, мягкое свечение или едва заметная тень. Однако, необходимо проследить, чтобы этот эффект не мешал восприятию текущего состояния.
Active
В момент переключения происходит плавная анимация движения ползунка и изменение цвета трека.
Disabled
Неактивный переключатель должен сохранять своё положение, но одновременно с этим визуально демонстрировать недоступность взаимодействия за счет понижения контрастности всех элементов.
