Словарь‑справочник проектировщика пользовательского интерфейса
Редакторы: Александра Озкан, Настасья Тулаева
Выключатель, тогл, свитч, тумблер, toggle, switch. I. Физический элемент управления, клавиша или рычаг, предназначенный для включения и выключения электрического тока или переключения соединения с одной цепи на другую:
Словарь‑справочник проектировщика пользовательского интерфейса
Редакторы: Александра Озкан, Настасья Тулаева
Реализации выключателя разнообразны: клавишный переключатель (качающаяся клавиша, которую нажимают с одной или другой стороны), ползунковый переключатель (небольшой рычаг, который передвигают из одного положения в другое), тумблер (небольшой рычаг с пружинным механизмом: когда рычаг двигается, пружина проходит «мёртвую точку» и перебрасывает контакт со щелчком), поворотный переключатель (ручка, которую поворачивают между фиксированными положениями). Автоматический выключатель или «автомат» размыкает цепь при перегрузке сети или коротком замыкании. Встречаются выключатели с ключом: чтобы изменить положение, нужно вставить и повернуть специальный ключ.
Положения выключателя иногда обозначают как «вкл.‑выкл.» или
Выключатель может быть реализован как кнопка, которая западает при нажатии и возвращается в исходное положение при повторном нажатии. Два его положения могут быть внешне неотличимыми. Встречаются выключатели с тремя положениями; такие требуют маркировки, например
При установке выключателя стремятся повысить удобство (например, размещают: со стороны ручки двери, чтобы открытая дверь не мешала включать свет при входе в помещение; на высоте около метра от пола), снизить число случайных нажатий.
Если несколько выключателей расположены в ряд, их порядок связывают с расположением объектов, которыми они управляют.
II. Элемент графического интерфейса, предназначенный для включения или выключения определённого поведения. Выглядит как небольшой бегунок, который перемещают из одного положения в другое; во включённом положении дополнительно изменяют цвет на акцентный:
Положение выключателя меняется кликом, тапом или пробелом. В хороших реализациях выключатель даёт непрерывную обратную связь при перетаскивании, после чего примагничивается к одному из крайних положений.
Выключатель синтаксически близок к чекбоксу и возник как его аналог в тач‑интерфейсе. В отличие от чекбокса, выключатель обычно подписывают слева. Сегодня оба элемента используются в разных интерфейсах. При этом для выключателя ожидаемо быть элементом мгновенного действия, чекбокс же привычнее использовать как элемент формы (для наступления последствий выбора нужно дать отдельную команду «Отправить», «Применить» и пр.).
Слайдер, ползунок, slider. Элемент графического интерфейса для выбора значения из диапазона, обычно в виде бегунка, который перетаскивают по шкале (шахте):
Слайдер даёт мгновенную и непрерывную обратную связь по мере изменения значения, поэтому ожидаемое его применение — изменение ощутимых параметров в реальном времени (громкость, яркость, размер, сила эффекта), то есть в качестве элемента мгновенного действия. Если мгновенное изменение самого объекта управления невозможно, то он обновляется настолько часто, насколько технически возможно, но сам слайдер продолжает реагировать непрерывно.
Если использовать слайдер как элемент формы, он теряет это своё главное свойство, что непривычно и потому дискомфортно.
Встречаются реализации, где рядом со слайдером отображается числовое значение:
Слайдер подходит для плавной настройки, но не для указания точного значения. Идеальное прицеливание само мучительно, но и его может быть недостаточно, когда диапазон настройки больше, чем число различаемых системой точек самого слайдера. При этом желанию попасть в конкретное число способствует отображение значения. Особенную фрустрацию вызывают реализации, когда соседним положениям соответствует значения, скажем, 79 и 81, а в круглое 80 попасть не удаётся никак. Если достаточно прицелиться на глазок, точное значение лучше просто скрыть.
Для ввода точного значения слайдер дополняют числовым полем ввода. Слайдер остаётся для обратной связи, поле — для точности. Отображение стрелок, типичных для числового поля ввода, здесь избыточно, но управление стрелками клавиатуры поддерживается:
Непрерывный слайдер синтаксически тождественен числовому полю ввода.
Слайдер можно ограничить набором дискретных допустимых значений. Их отмечают рисками:
Бегунок либо перескакивает между допустимыми значениям по мере перетаскивания, либо примагничивается к ближайшему после отпускания кнопки мыши или убирания пальца. Сами риски полезно подписать, если шкала нелинейная:
Пример из документации Эпла
Дискретный слайдер синтаксически тождественен радиогруппе, переключателю, выпадающему списку, то есть элементу выбора одного из нескольких взаимоисключающих значений. Это подсказывает, что слайдер можно использовать на их месте, если их возможные значения разместить в некоторой логичной последовательности:
Для управления аудио и видео используют слайдер, бегунок которого (головка воспроизведения) движется по таймлайну сам по себе с течением времени, но его можно и перетаскивать вручную. Реализация такого управления требует особой внимательности, чтобы движение пользователя и естественное движение записи не конфликтовали. Например, воспроизведение можно приостанавливать на время перетаскивания, как бы уступая управление пользователю.
При реализации слайдера важно упростить прицеливание. Бегунок маленький, прицеливаться к нему сложно. Поэтому хоть метафора и состоит в перемещении бегунка, область прицеливания расширяют на весь слайдер и даже больше; нажатие в любую точку шкалы мгновенно перемещает бегунок туда, после чего перетаскивание начинается уже оттуда.
Слайдер с двумя бегунками задаёт два значения, нижнее и верхнее некоторого диапазона. Положение каждого бегунка ограничено положением другого, поэтому они не меняются местами:
Встречаются ещё более сложные слайдеры, например такой, где нижнюю и верхнюю границы можно дополнительно «расщепить», чтобы размыть границы диапазона:
Настройка смешивания слоя в Фотошопе
В этом примере шкала одновременно изображает настраиваемое значение градиентом. Бегунки располагают за пределами шкалы, чтобы не закрывать её.
Слайдер следует отличать от полосы прокрутки: он изменяет значение параметра, а полоса прокрутки перемещает область просмотра по содержимому.
Уважаемые советчики! Что бы вы исправили или дополнили?