Кнопка как элемент интерфейса¶

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

¶Физическая кнопка

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

По типу фиксации различают кнопки без фиксации (тактовые, возвращающиеся в исходное положение после отпускания) и с фиксацией (остающиеся в нажатом состоянии до повторного нажатия). Примером первых служат клавиши клавиатуры, примером вторых — клавиша Caps Lock.

По способу переключения контактов выделяют кнопки с замыкающими, размыкающими и переключающими контактами. В современной электронике широко распространены тактовые кнопки (tact switch), имеющие малый ход и характерный щелчок при срабатывании, что обеспечивает тактильный отклик.

Конструктивно кнопка может быть выполнена в виде отдельного элемента для пайки на печатную плату, в составе клавиатурных модулей, мембранных панелей или герконовых сборок. Для защиты от внешней среды применяются герметичные кнопки с резиновыми или силиконовыми манжетами.

История физической кнопки восходит к электрическим звонкам и телеграфным ключам XIX века. Массовое распространение кнопки получили с развитием бытовой электроники: радиоприёмников, телевизоров, стиральных машин. В начале XX века кнопки стали стандартом для вызова лифта и управления промышленным оборудованием.

¶Графическая кнопка

Графическая кнопка — элемент графического интерфейса пользователя, имитирующий поведение физической кнопки. Отображается в виде прямоугольной или скруглённой области с текстовой подписью, пиктограммой или их комбинацией. При наведении курсора, нажатии и отпускании кнопка меняет визуальное состояние, обеспечивая обратную связь с пользователем.

Основные состояния графической кнопки: обычное (default), при наведении (hover), при нажатии (active), неактивное (disabled) и сфокусированное (focus). Визуальная индикация состояний достигается изменением цвета, тени, яркости или границы элемента.

¶Типы графических кнопок

По назначению и поведению выделяют следующие разновидности:

• Обычная кнопка — выполняет однократное действие при клике (например, «Сохранить», «Отправить»).
• Переключатель (toggle button) — сохраняет состояние «включено/выключено» между нажатиями.
• Радиокнопка (radio button) — элемент выбора одного варианта из группы; в отличие от обычной кнопки, не требует нажатия для активации действия.
• Кнопка-меню — раскрывает выпадающий список параметров или команд.
• Кнопка-ссылка — внешне напоминает гиперссылку, но выполняет действие внутри приложения.

По стилю исполнения кнопки делятся на основные (primary), привлекающие главное внимание, и второстепенные (secondary), обычно менее контрастные. В веб-дизайне также выделяют текстовые кнопки, кнопки с рамкой и заливкой, а также кнопки-иконки без текстовой подписи.

¶Стандарты и доступность

Рекомендации по проектированию кнопок закреплены в руководствах по доступности, в частности WCAG (Web Content Accessibility Guidelines). Минимальная рекомендуемая область нажатия для сенсорных устройств составляет 44×44 пикселя. Кнопки должны иметь различимый цветовой контраст с фоном и поддерживать управление с клавиатуры — активацию клавишей Enter или пробелом.

В русскоязычной локализации интерфейсов принято использовать инфинитив глагола («Сохранить», «Удалить») или краткое существительное («Поиск»). Стандартные тексты кнопок, такие как «OK» и «Отмена», закреплены в соглашениях операционных систем.

¶Кнопка в веб-технологиях

В языке HTML кнопка создаётся элементом <button> или <input type="submit">. Элемент <button> поддерживает вложенное содержимое — текст, изображения, иконки. Атрибут type определяет поведение: submit — отправка формы, reset — сброс полей, button — произвольное действие через JavaScript.

В каскадных таблицах стилей (CSS) для оформления кнопок используются свойства background, border, border-radius, box-shadow и псевдоклассы :hover, :active, :focus, :disabled. Современные фреймворки, такие как Bootstrap, Tailwind CSS и Material UI, предоставляют готовые наборы стилей и состояний кнопок.

В JavaScript обработка нажатия выполняется через событие click. Существует также событие pointerdown, срабатывающее раньше клика. Для защиты от множественных срабатываний применяется блокировка кнопки на время выполнения асинхронной операции.

¶Применение

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

Графические кнопки являются одним из самых распространённых элементов интерфейса. Они применяются в мобильных приложениях, веб-сайтах, настольных программах, банкоматах, терминалах самообслуживания и кассовых аппаратах. Кнопка «Купить» в интернет-магазинах и «Отправить» в формах обратной связи — ключевые элементы конверсии в электронной коммерции.

¶Интересные факты

• Самая большая физическая кнопка в мире, по данным Книги рекордов Гиннесса, установлена в качестве аттракциона в городе Сомерсет (США) и имеет диаметр около 1,8 метра.
• В операционной системе Windows кнопка «Пуск» появилась в 1995 году и стала одним из самых узнаваемых элементов интерфейса.
• В японской культуре существует понятие «кнопка закрытия дверей» в лифтах, которая часто является декоративной и не влияет на скорость закрытия — это сделано для психологического комфорта пассажиров.
• Кнопка «Я чувствую удачу» в поисковике Google была добавлена в 1998 году и, по заявлению компании, стоила ей около 110 миллионов долларов годовой выручки, поскольку пользователи пропускали страницу с рекламой.

¶Источники

1. Норман Д. «Дизайн привычных вещей» — М.: Вильямс, 2006.
2. Купер А., Рейман Р., Кронин Д. «Интерфейс: основы проектирования взаимодействия» — СПб.: Питер, 2009.
3. Спецификация HTML Living Standard, WHATWG.
4. Руководство WCAG 2.1, W3C.
5. ГОСТ 14254-2015 «Степени защиты, обеспечиваемые оболочками».