Справочник/Программные элементы управления/

Экранная кнопка

Эволюция кнопок основных операционных систем

Кнопка (англ. button)— базовый элемент управления, без которого невозможно представить ни один графический пользовательский интерфейс.

Также можно сказать, что многие другие элементы интерфейсов являются специализированными производными кнопок (например, чекбоксы, переключатели), либо содержат кнопки (выпадающие списки и т.п.).

Составляющие кнопки

• Прямоугольная область (рамка). Может быть подчеркнуто «выпуклой», что повышает её узнаваемость. Некоторые экосистемы (например, Material Design) убирают рамку, но это решение резко снижает её распознавание.
• Текстовая подпись. Описывает действие или текущее состояние кнопки. Использование обоих подходов в пределах одной системы без визуального различия кнопок и дополнительных индикаторов — может привести к ошибкам оператора/пользователя.
• Иконка. Обычно располагается слева или над подписью и служит для быстрого распознавания назначения кнопки.

Дополнительные индикаторы:

• Состояние (Вкл/Выкл) — если кнопка включает или выключает действие.
• Текущий выбор — для кнопок последовательного выбора, позволяет оценить количество вариантов выбора и дифференцировать текущий.

Состояния

Кнопка может находиться в следующих состояниях:

• Нормальное состояние (normal) — кнопка отжата и доступна для использования.
• Состояние наведения (hovered) — дополнительная подсветка при наведении курсора над кнопкой чтобы подчеркнуть интерактивность элемента.
• Нажатое состояние (pressed) — курсор расположен над кнопкой и левая кнопка мыши нажата, либо в текущий момент происходит касание к кнопке пальцем. В некоторых случаях после отпускания кнопка остается нажатой (см. варианты поведения ниже).
• Неактивное состояние (disabled) — кнопка в данный момент недоступна для нажатия.

Параллельно с этими состояниями (за исключением disabled) у кнопки клавиатурно-мышевого интерфейса может быть состояние фокуса — индикация, что в данный момент кнопка чувствительна к нажатиями клавиатуры (пробела или Enter). Обычно это состояние подсвечивается рамкой в точку или яркой цветной рамкой (в Windows, например, сине-голубой).

Статусы кнопок

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

• Обычная кнопка — все кнопки, не имеющие специального статуса.
• Основная кнопка / Кнопка по умолчанию — визуально акцентированная кнопка, подчеркивающая основное или предпочтительное действие. Часто при нажатии клавиатурной клавиши Enter в пределах заданной для неё зоны действия (например, в форме заполнения), происходит её нажатие. Такая кнопка может быть только одна на зону.
• Второстепенная кнопка — кнопка, имеющая менее акцентный дизайн, благодаря чему подчеркивается её смысловая второстепенность в рамках решаемой задачи. В некоторых дизайн-системах такая кнопка упрощается до ссылки (подписи), т.е. лишается рамки.
• Кнопка отмены — аналогично кнопке по умолчанию, но реагирует на нажатие клавиши Esc. Обычно это связано с действием отмены или сброса начатой операции. По виду такая кнопка, как правило, ничем не отличается от прочих обычных или второстепенных.

Цветовое кодирование

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

1. Красный цвет — кнопка означает потенциально опасное действие либо, реже, действие кнопки невозможно из-за программной или аппаратной ошибки.
2. Оранжевый или желтый цвет — в редких случаях может нести статус неполадок, возможных ошибок, связанных с исполнением или возможностью исполнения действия.
3. Зеленый цвет — кнопка означает подтверждающее или позитивное действие
4. Синий или голубой цвет (особенно для фона кнопки) — действие или состояние, запускаемое кнопкой, в настоящий момент активно.

Мигание фона кнопки

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

Варианты поведения

1. Кнопка при нажатии инициализирует действие. Стандартный вариант реализации кнопки. При последовательном нажатии и отпускании мыши или пальца внутри области кнопки происходит записи действия кнопки — например, операция записи документа, переход в другой режим, включение двигателя. При этом кнопка возвращается в исходное состояние и пользователь может заново совершить данное действие (если это применимо), либо кнопка становится неактивной, либо действие прерывается и запускается с начала. Противоположные действия, при их наличии, в таких случаях часто делают другой кнопкой.
2. Кнопка при нажатии инициализирует действие и меняет свое назначение на отмену действия или на противоположное по смыслу. Ведёт себя аналогично первому случаю, однако после нажатия меняется текст (и, если имеется, то и иконка) кнопки.
3. Кнопка при нажатии инициализирует действие и остается в состоянии pressed. Последующие нажатие на кнопку возвращает её в нормальное состояние. Команда кнопки отменяется/прекращается.
4. Кнопка действует пока нажата. Типичное поведение для интерфейсов управления механизмами. Пока пользователь нажимает на кнопку, действие выполняется. Если пользователь отпускает клавишу мышь или (опционально) покидает зону кнопки, действие (например, команда поворота колёс) останавливается.

Редкие варианты реализации кнопок

Также иногда встречаются кнопки, которые ведут себя специфическим образом:

1. Кнопка последовательного выбора. Аналогично кнопке номер 2 из предыдущего списка, но состояний кнопки может быть несколько. Вариант достаточно нежелательный, т.к. не содержит никаких визуальных подсказок этой логики работы.
2. Кнопка отложенного пуска. Эти кнопки предназначены для предотвращения случайных нажатий. Для запуска действия пользователь должен удерживать её в течение некоторого времени (обычно нескольких секунд). Тогда при нажатии часто отображают небольшой прогресс-бар или обратный отсчёт времени, после чего действие запускается, а кнопка, например, меняет свой дизайн на обычное состояние pressed но с цветовой подсветкой (зеленый или красный фон).
3. Кнопка-таймер. Эта кнопка запускает процесс, который будет длиться в течение ограниченного времени (и, например, позволять делать другие действия). Тогда на ней, как и на кнопке отложенного пуска, отображается таймер или прогресс бар с обратным отсчётом, но в отличие от предыдущей, после истечения времени кнопка отжимается и действие прекращается, а не запускается. Часто такие кнопки используются в интерфейсах оборудования для операции разблокировки потенциально опасных действий (например, доступности подачи рентгеновского излучения с помощью аппаратных педалей).