Элемент интерфейса

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

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

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

Около 1920 года слово widget (элемент интерфейса) вошло в американский английский как обобщённое обозначение любого полезного устройства, особенно промышленного изделия; аналог по смыслу слова «гаджет».

В 1988 году термин элемент интерфейса впервые был зафиксирован в контексте Project Athena и X Window System. В статье «An Overview of the X Toolkit» Джоэла МакКормака и Пола Асенте приводится следующее определение:^[2]

Инструментарий предоставляет библиотеку компонентов пользовательского интерфейса («виджетов»), таких как текстовые метки, полосы прокрутки, командные кнопки, меню; позволяет программистам создавать новые виджеты и предоставляет инструменты для объединения виджетов в полноценный интерфейс.

В том же 1988 году в руководстве «X Toolkit Widgets — C Language X Interface» авторы Ральф Р. Суик и Терри Вайсман отмечают:^[3]

В X Toolkit виджет представляет собой сочетание X-окна или подокна и соответствующей ему входной и выходной семантики.

Также в тот же год Ральф Р. Суик и Марк С. Акерман объяснили происхождение термина так:^[4]

Мы выбрали этот термин, поскольку все остальные были уже перегружены нежелательными ассоциациями. Для скептиков замечаем, что ключевая реализация виджета — это связанное с ним X-окно, и совпадение их начальных букв — не случайно.

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

Элементы графического интерфейса реализуются как программные компоненты. Инструментарии и фреймворки, такие как GTK+ и Qt, поставляются в виде библиотек, чтобы облегчить сборку интерфейсов для новых программ.

Типовой набор переиспользуемых элементов был выделен на основе исследований Исследовательского центра Xerox (PARC) и интерфейса Xerox Alto. Различные реализации таких стандартных элементов обычно объединяются в наборы средств разработки интерфейса (widget toolkit), применяемые для создания графических интерфейсов приложений. Большинство операционных систем включает готовые элементы интерфейса, которые программист может вставлять в приложение, указывая их поведение^[5]. Обычный подход к определению элемента — создание класса в терминах объектно-ориентированного программирования, поэтому многие элементы наследуются друг от друга по иерархии классов.

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

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

В ряде случаев элементы интерфейса называют «виртуальными», чтобы подчеркнуть отличие от физических аналогов (например, виртуальные кнопки, нажимаемые указателем мыши, в отличие от физических кнопок клавиатуры или мыши).

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

• Кнопка — элемент, который можно нажать для выполнения действия. Аналогичная физическим или электронным кнопкам.
  • Переключатель (Radio button) — позволяет выбрать только один вариант из группы. При выборе нового варианта текущий сбрасывается.
  • Флажок (Check box) — позволяет включить или выключить опцию (индикатор состояния — галочка ☑ или крестик ☒). Может иметь промежуточное состояние (например, при множественном выделении объектов с разными значениями). В отличие от переключателей, можно выбрать несколько флажков в группе.
  • Переключатель-тумблер (Toggle switch) — как флажок, но обычно оказывает немедленный эффект и выглядит как тумблер.
  • Кнопка-переключатель — аналог флажка, оформленная как кнопка. Может быть включена или выключена.
  • Кнопка-сплиттер (Split button) — сочетает кнопку для основного действия и выпадающий список для дополнительных.
  • Кнопка-циклер (Cycle button) — при каждом нажатии перебирает два или более значений, позволяя выбирать из набора.
• Ползунок (Slider) — позволяет перемещать ползунок по полосе для выбора значения или диапазона.
• Список (List box) — множественная или одиночная выборка из списка значений.
• Спиннер (Spinner) — регулятор со стрелками вверх/вниз для перебора значений.
• Выпадающий список (Drop-down list) — список для выбора значения; содержимое появляется при нажатии на индикатор.
• Меню — содержит список доступных для выбора действий.
  • Контекстное меню — зависит от места или состояния, в котором оно вызвано.
  • Пицца-меню (Pie menu) — круглое меню, команда выбирается по направлению.
• Меню-бар (Menu bar) — строка меню с выпадающими списками.
• Панель инструментов (Toolbar) — располагает кнопки, значки, меню и другие элементы для оперативного доступа.
  • Лента (Ribbon) (Риббон) — гибрид панели инструментов и меню: множество команд через вкладочный интерфейс.
• Комбинированный список (Combo box) — совмещает однострочное текстовое поле и список для выбора; можно вводить значения с клавиатуры или выбирать из списка.
• Значок (Icon) — символ инструмента, функции или файла.
• Дерево (Tree view) — иерархическое представление структуры и данных.
• Табличный вид (Grid view, DataGrid) — табличное отображение данных (ввод текста/чисел по строкам и столбцам).

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

• Текстовое поле — поле для ввода/изменения текста пользователем.

• Метка — текстовое описание к другому элементу интерфейса.
• Всплывающая подсказка — информационное окно при наведении указателя на элемент.
• Balloon help — всплывающие окна с пояснением функциональности элемента.
• Строка состояния — информационная панель (обычно снизу окна).
• Индикатор выполнения — визуализация стадии выполнения операции (например, скачивания, копирования файлов, установки).
• Инфопанель — отображает несущественные уведомления для пользователя.

• Окно — область, содержащая элементы интерфейса приложения.
• Сворачиваемая панель — панель с содержимым, которое можно скрывать/раскрывать по клику.
  • Drawer — выдвижная/раздвижная боковая панель, прикрепляемая к краю экрана и скрывающая дополнительное содержимое^[6].
• Аккордеон (Accordion) — вертикальный список элементов (например, меток или миниатюр), раскрываемых по отдельности.
• Модальное окно (Modal window) — окно-подчинённое, при наличии которого основное окно приложения становится недоступным.
• Диалоговое окно — небольшое окно для взаимодействия/сообщения или запроса ввода от пользователя.
• Палитра — «служебное» окно, всегда поверх остальных, содержит инструменты или информацию для текущего приложения.
  • Окно инспектора — диалог, отображающий параметры выбранного объекта с возможностью их изменения на лету.
• Рамка (Frame) — контейнер для группировки элементов интерфейса как визуально связанных.
• Холст — универсальный графический элемент для отображения визуальной информации.
• Cover Flow — трёхмерная анимация для поиска по документации, закладкам, обложкам альбомов и фото.
• Bubble Flow — двумерная анимированная визуализация для просмотра взаимосвязанных тем/дискуссий.
• Карусель — графический элемент для быстрого просмотра карточек/изображений на сайте или в мобильном приложении.