Интерактивные элементы пользовательского интерфейса создают основу мощных и удобных цифровых продуктов. Внимательный подход к деталям помогает создать положительный опыт взаимодействия с продуктом в целом. Сегодня мы рассмотрим примеры применения самых распространенных элементов пользовательского интерфейса, рассмотрим их функции и роль.
Публикация: 19.04.2018 21.11.2018 Kirill Lipovoy
Кнопка
Кнопка является одним из самых распространенных элементов любого интерфейса. Этот элемент существовал задолго до цифровых интерфейсов и выполнял ту же роль. Кнопки — это простые механизмы переключения, позволяющие управлять процессом или машиной. Кнопка фактически позволяет отправлять сигнал на устройство о том, что пользователь хочет сделать.
#9 Ссылки и Кнопки: a и button [Курс по Верстке от AROKEN]
Будучи явным элементом взаимодействия, кнопки были успешно перенесены на цифровые пользовательские интерфейсы. В пользовательском интерфейсе кнопка представляет собой интерактивный элемент, который позволяет пользователю отправлять определенную команду системе.
В основном, этот элемент взаимодействия напрямую связывается с веб-сайтом или приложением и передает необходимые команды для достижения определенной цели: включить плеер, отправить электронное письмо, купить продукт, загрузить данные, добавьте предметы в корзину и множество других возможных взаимодействий. Кнопки чрезвычайно популярны как элементы дружественных интерфейсов, потому что они успешно имитируют взаимодействия с физическими кнопками, поэтому их функциональность понятна даже для пользователей с низким уровнем технологической грамотности.
Сегодня различные кнопки пользовательского интерфейса выполняют множество задач. Все интерактивные элементы пользовательского интерфейса должны быть легко заметными: дизайнеры применяют контрастные цвета, формы и даже анимацию, чтобы сделать кнопки заметными в макете.
Кнопки часто поддерживаются текстом, который объясняет выполняемое действие. Дизайнеры должны применять значительное время и усилия для создания эффективных кнопок, которые выглядят в соответствии с общей стилистической концепцией, но достаточно контрастны, чтобы выделяться в макете. Существует несколько часто используемых типов кнопок с дополнительной функциональностью.
Кнопка «Гамбургер» — открывает меню. После нажатия на него меню расширяется. Она называется гамбургер из-за своей формы, состоящей из трех горизонтальных линий. Хотя на сегодняшний день это довольно типичный элемент взаимодействия, меню гамбургер по-прежнему очень спорно из-за ряда преимуществ и недостатков.
Создание GUI приложения Python tkinter. Виджет Button. Кнопка tkinter
Большинство пользователей, использующих веб-сайты и приложения на регулярной основе, знают, что гамбургер скрывает ссылки на основные категории контента, поэтому им не нужны дополнительные объяснения и подсказки. Существенным преимуществом является то, что гамбургер меню освобождает пространство: таким образом интерфейс становится минималистичным и воздушным, а также предоставляет место для других важных элементов макета.
Кроме того, он обеспечивает дополнительные преимущества для гибкого и адаптивного дизайна, скрывающего навигационные элементы и позволяющего использовать макет на разных устройствах. Аргументы против меню гамбургеров основаны на том факте, что этот элемент дизайна может ввести в заблуждение пользователей, имеющих небольшой опыт работы с веб-сайтами.
Таким образом, решение о применении кнопки гамбургера должно основываться на исследовании пользователей, определении возможностей целевой аудитории и тщательном тестировании. Кнопка-плюс позволяет добавлять новый контент, например, контакт, сообщение, заметку, позицию в списке и т. п. Иногда, нажимая эту кнопку, пользователи напрямую переносятся в модальное окно создания контента, в других случаях также есть средний этап, когда им предоставляется дополнительная возможность выбора и добавление конкретной части данных.
В этом случае кнопка-плюс также является расширяемой кнопкой. Пустая кнопка — прозрачная кнопка — поэтому ее также называют «пустой», «полой» или даже «голой». Чтобы подчеркнуть, что это все-таки кнопка она подчеркивается тонкой обводкой и формой. Такие кнопки помогают установить визуальную иерархию в случае наличия нескольких элементов призывов к действию: ядро призыва отображается в заполненной кнопке, а вспомогательное — в призрачной кнопке. 
Панель / bar
Панель является основой, на которой расположены другие интерактивные элементы пользовательского интерфейса, позволяющая пользователю быстро выполнять основные шаги взаимодействия с продуктом. Кроме того, он может информировать пользователя о текущем этапе процесса. Среди основных типов баров давайте рассмотрим следующее.
Панель вкладок — в мобильных приложениях отображается в нижней части экрана и обеспечивает возможность быстрого переключения между основными разделами содержимого. Панель загрузки — это элемент управления, который информирует пользователя о текущем этапе действия или процесса. В большинстве случаев пользователи могут видеть поток с указанием времени или процента. Индикатор выполнения обеспечивает обратную связь по результатам текущего процесса, например, показывая, сколько запланированной деятельности было выполнено. Например, часто применяется в музыкальных проигрывателях.
Переключатели
Переключатели — это элемент управления, который позволяет пользователям включать или выключать отдельные опции. Как и кнопки, он эффективно применяется в современных интерфейсах, поскольку он представляет собой непосредственную имитацию реальных переключателей, к которым люди привыкли в реальной жизни. Важным моментом является то, что состояния переключателя должны быть явно четкими и легко различимыми, чтобы пользователь мог легко понять, активен этот параметр или нет. Контрастность и небольшая анимация помогут сделать этот процесс простым и удобным.
Пикер / Picker
Пикер позволяет выбрать точку из ряда опций. Он обычно включает один или несколько прокручиваемых списков различных значений, например, часы, минуты, даты, измерения, валюты и т. д. Прокручивая список, пользователи выбирают и устанавливают необходимое значение. Этот тип интерактивного элемента широко используется в интерфейсах, которые имеют функциональность установки времени и дат.
Чекбокс / Checkbox
Чекбокс — это графический элемент пользовательского интерфейса, который отмечает определенный фрагмент контента, обычно устанавливающий выбор для двоичных опций. Это еще один элемент, взятый из реального мира, поскольку он похож на процесс заполнения тестов, вопросников и других вещей такого рода, когда вам нужно поставить галочку, чтобы отметить вариант. Чекбоксы и переключатели можно найти в пользовательских интерфейсах любого типа, особенно в настройках. Кроме того, чекбоксы представляют собой общую часть навигации в приложениях и веб-сайтах с функциональностью менеджеров задач, списков дел, таймеров и т. п.
Иконка
Иконка — это символическое изображение, используемое для связи. Они являются информативными признаками, поддерживающими обмен данными между информатором и адресатом вместе с текстом, часто отображая живописное сходство с объектом физического мира. В цифровом дизайне иконка — это пиктограммы или идеограммы, используемые в веб-интерфейсе или мобильном, для обеспечения его удобства использования и успешного взаимодействия человека и компьютера. Одним из самых ценных преимуществ значков среди них является способность эффективно заменять текст. Эта функция способна повысить удобство использования и упростить навигацию, поскольку большинство пользователей склонны воспринимать и декодировать изображения быстрее, чем слова. Однако даже малейшее неправильное восприятие или двойное значение могут стать причиной плохого UX, поэтому решения по типу иконок должны быть тщательно проверены, чтобы достичь хорошего баланса для определенной целевой аудитории. Одним из эффективных вариантов является использование как текста, так и иконок, так что разные категории пользователей могут чувствовать себя хорошо: этот подход особенно популярен в различных каталогах, веб-сайтов электронной коммерции, где разные позиции представлены как словами, так и изображениями, дающими пользователю двойную поддержка быстрой и четкой навигации. На основе функций, который выполняют иконки их можно классифицировать как:
- Интерактивные иконки, непосредственно участвующие в процессе взаимодействия. Они являются кликабельными или настраиваемыми и отвечают на запрос пользователей, выполняя символическое действие. Они информируют пользователей о функциях, элементов управления и других элементов взаимодействия. Во многих случаях они очевидны и не нуждаются в поддержке текстом.
- Разъясняющие иконки, предназначенные для объяснения, визуальные маркеры, объясняющие особенности или маркирующие категории контента. Они не обязательно должны быть интерактивными. Кроме того, они часто встречаются в сочетании с текстом, поддерживающем их значение.
- Развлекательные и декоративные иконки, направленные на эстетическую привлекательность, а не на функциональность, часто используемую для представления сезонных функций и специальных предложений. Они представляют эффективный способ привлечения внимания пользователя и повышения общей стилистической концепции цифрового продукта.
- Значки приложений: интерактивные знаки бренда, которые представляют приложение на разных платформах, поддерживающих оригинальную идентичность цифрового продукта.
- Фавикон представляет продукт или бренд в URL-строке браузера, а также на вкладке закладок. Это позволяет пользователям получать быстро узнавать нужные адреса.
Поле поиска
Поле поиска, или панель поиска, представляет элемент интерфейса, позволяющий пользователю вводить ключевые слова и таким образом находить нужные фрагменты контента. Это один из основных элементов навигации для веб-сайтов или приложений с большим количеством контента, в частности, в блогах, в электронной коммерции и новостных веб-сайтах. Хорошо спроектированное поле поиска позволяет пользователю перейти к нужной точке не просматривая многочисленные страницы и меню: поскольку этот подход учитывает время и усилия пользователя, он востребован в удобных для пользователя интерфейсах.
С точки зрения дизайна этот элемент может быть представлен по-разному: от вкладки с рамкой до интерактивной строки ввода. В подавляющем большинстве случаев поле поиска помечено иконкой с лупой. Этот символ распознается широким кругом пользователей, поэтому он эффективно зарекомендовал себя для установки интуитивной навигации. Поток взаимодействия также может поддерживаться выпадающим меню, предлагающим возможные варианты или функции автоматического заполнения.
В веб-дизайне поле поиска часто можно найти в заголовке веб-сайта: это зона максимальной видимости, поэтому такое размещение поля поиска позволяет пользователям быстро переходить на страницы, которые им действительно нужны, без блуждания по веб-сайту и прокрутки. Например, оно хорошо работает для крупных веб-сайтов электронной коммерции, которые часто посещают пользователи, у которых есть конкретная цель, конкретный предмет, который они ищут. Кроме того, следует учитывать и силу привычки: поскольку многочисленные веб-сайты включают поиск в свои шапки, пользователи привыкли искать его там.
Говоря о поле поиска в мобильных интерфейсах, ситуация отличается тем, что разработчик гораздо более ограничен в используемом пространстве. Если приложение основано на большом количестве контента, и поиск является одним из центральных элементов взаимодействия, его можно найти в панели вкладок или в заголовке. Если поиск не имеет решающего значения для целей пользователя и удобства использования приложения, он может быть скрыт в меню или показан только на экране, где это потенциально необходимо.
Тэг
Тег — это интерактивный элемент, представленный ключевым словом или фразой, который позволяет пользователю быстро перемещаться по элементам, отмеченным текстом. Теги — это кусочки метаданных, которые обеспечивают быстрый доступ к определенным категориям контента, поэтому они поддерживают навигацию с дополнительным способом классификации контента. Кроме того, теги часто являются элементами, которые пользователи создают сами по себе.
Теги широко используются на платформах, основанных на пользовательском контенте: когда вы загружаете фотографию на сайт, публикуете в социальных сетях или пишите в блоге, вы можете пометить свой контент конкретными ключевыми словами, которые затем объединяют все части контента, помеченного тегом. Что касается взаимодействия, нажатие на тег, перемещает пользователя на веб-страницу, где собрано все содержимое, помеченное этим тегом.
Лоадер / Loader
Loader — это анимированный интерактивный элемент, информирующий пользователя о процессе загрузки контента. Поскольку процесс занимает некоторое время, таким образом система показывает, что работает. Он играет важную роль для удобства использования. Более того, стильная анимация и графика могут добавить красоту и удовольствие в процесс.
Фильтр
Фильтры — это графические элементы управления, позволяющие выставлять необходимые настройки. Они эффективны в аспекте персонализации для лучшего UX: пользователи выбирают и настраивают необходимые им параметры.
Планирование информационной архитектуры и навигации в интерфейсах — непростая задача, которая требует хорошего знания психологии и моделей взаимодействия, тестирования пользователей и серьезного анализа с самых ранних этапов разработки приложения или веб-сайта. Тем не менее, это становится прочной основой для положительного пользовательского опыта, который позволит решить проблемы пользователей и побудить их снова и снова возвращаться к продукту. Маленькие интерактивные элементы пользовательского интерфейса становятся основой, делая взаимодействие гладким и легким.
Источник: cloudmakers.ru
Типы кнопок
Существует несколько типов кнопок и один или несколько стилей кнопок для различения кнопок одного типа.
В этом документе рассматриваются следующие темы.
Типы и стили кнопок
Кнопка относится к типу и может иметь дополнительные стили, влияющие на ее внешний вид и поведение. Таблицу стилей кнопок см. в разделе Стили кнопки.
На следующем снимке экрана показаны различные типы кнопок.
На снимке экрана показано, как могут отображаться кнопки в Windows Vista. Внешний вид зависит от разных версий операционной системы и темы, заданной пользователем.
Обратите внимание на следующие моменты, касаемо иллюстрации:
- Поле проверка с тремя состояниями отображается в неопределенном состоянии. Если флажок установлен или снят, это выглядит как обычный проверка поле.
- Большая кнопка нажатия была настроена в состояние нажатия программно (путем отправки сообщения BM_SETSTATE ), чтобы она сохраняла свой внешний вид, даже если она не была нажата.
- В визуальном стиле фон кнопки нажатия по умолчанию (или другой кнопки с фокусом ввода) циклически переключается между синим и серым.
Флажки
Поле проверка состоит из квадратной рамки и метки, значка или растрового изображения, определяемой приложением, которая указывает на выбор, который пользователь может сделать, нажав кнопку. Приложения обычно отображают проверка поля, позволяющие пользователю выбрать один или несколько вариантов, которые не являются взаимоисключающими.
Поле проверка может быть одним из четырех стилей: стандартный, автоматический, трехэтапный и автоматический три состояния, как определено константами BS_CHECKBOX, BS_AUTOCHECKBOX, BS_3STATE и BS_AUTO3STATE соответственно. Каждый стиль может принимать два проверка состояния: флажок (проверка метка внутри поля) или снятый (нет проверка метки). Кроме того, поле проверка с тремя состояниями может предполагать неопределенное состояние (затенение поля внутри поля проверка), которое может означать, что пользователь не сделал выбор. При повторном щелчке стандартного или автоматического проверка поле переключается с флажка на снятый и обратно. При повторном щелчке поля с тремя состояниями проверка переключение с флажка с флажка на «Снято» для неопределенного состояния, а затем повторяется цикл.
Когда пользователь щелкает проверка поле (любого стиля), проверка поле получает фокус клавиатуры. Система отправляет родительскому окну проверка сообщение WM_COMMAND, содержащее код уведомления BN_CLICKED. Родительскому окну не нужно обрабатывать это сообщение, если оно поступает из поля автоматического проверка или автоматического проверка с тремя состояниями, так как система автоматически задает состояние проверка для этих стилей. Но родительское окно должно обрабатывать сообщение, если оно поступает из неавтоматический проверка или трех состояний проверка, так как родительское окно отвечает за настройку состояния проверка для этих стилей. Независимо от стиля проверка прямоугольник, система автоматически перерисовывая поле проверка после изменения его состояния.
Приложение может определить состояние поля проверка с помощью функции IsDlgButtonChecked.
Поля группы
Поле группы — это прямоугольник, который окружает набор элементов управления, таких как проверка прямоугольники или переключатели, с текстовой меткой, определенной приложением, в левом верхнем углу. Единственной целью поля группы является организация элементов управления, связанных с общей целью (обычно обозначается меткой). Поле группы имеет только один стиль, определенный константой BS_GROUPBOX. Так как поле группы не может быть выбрано, оно не имеет состояния проверка, состояния фокуса или состояния отправки.
Кнопки
Кнопка нажатия — это прямоугольник, содержащий определяемую приложением текстовую метку, значок или растровое изображение, указывающее, что делает кнопка, когда пользователь выбирает ее.
Кнопка нажатия может быть одним из двух стилей, стандартных или стандартных, как определено константами BS_PUSHBUTTON и BS_DEFPUSHBUTTON. Стандартная кнопка нажатия обычно используется для запуска операции. Он получает фокус клавиатуры, когда пользователь щелкает его. Кнопка нажатия по умолчанию обычно используется для указания наиболее распространенного или стандартного варианта, например закрытия диалогового окна. Это кнопка, которую пользователь может выбрать, просто нажав клавишу ВВОД, если ни у другой кнопки в диалоговом окне нет фокуса ввода.
Когда пользователь нажимает кнопку, он получает фокус клавиатуры. Система отправляет родительскому окну кнопки WM_COMMAND сообщение, содержащее код уведомления BN_CLICKED .
Разбиение кнопки — это специальный тип кнопки, появившиеся в Windows Vista и версии 6.00. Разделенная кнопка делится на две части. Часть main работает как обычная кнопка или кнопка нажатия по умолчанию. Вторая часть имеет стрелку, указывающую вниз. Обычно меню отображается при щелчке стрелки.
Разделенная кнопка имеет стиль BS_SPLITBUTTON или стиль BS_DEFSPLITBUTTON , если она является кнопкой по умолчанию в диалоговом окне. Внешний вид кнопки можно изменить с помощью сообщения BCM_SETSPLITINFO или соответствующего макроса Button_SetSplitInfo .
Когда пользователь щелкает main часть кнопки разделения, он отправляет BN_CLICKED уведомление так же, как обычная кнопка. Но когда пользователь щелкает стрелку вниз, он отправляет BCN_DROPDOWN уведомление. Приложение отвечает за отображение меню в ответ на BCN_DROPDOWN.
В Windows Vista и версии 6.00 также появился еще один вид кнопки, ссылка на команды. Визуально командная ссылка сильно отличается от обычной кнопки нажатия, но она имеет те же функции. Ссылка на команду обычно отображает значок со стрелкой, строку текста и дополнительный текст шрифтом меньшего размера.
Переключатели
Переключатель (также называемый переключателем) состоит из круглой кнопки и определяемой приложением метки, значка или растрового изображения, указывающего выбор, который пользователь может сделать, нажав кнопку. Приложение обычно использует переключатели в поле группы, чтобы пользователь мог выбрать один из наборов связанных, но взаимоисключающих параметров.
Переключатель может иметь один из двух стилей: стандартный или автоматический, как определено константами стиля BS_RADIOBUTTON и BS_AUTORADIOBUTTON. Каждый стиль может предполагать два проверка состояния: флажок (точка на кнопке) или снятый (без точки в кнопке).
Когда пользователь выбирает любое из состояний, переключатель получает фокус клавиатуры. Система отправляет родительскому окну кнопки WM_COMMAND сообщение, содержащее код уведомления BN_CLICKED . Родительскому окну не нужно обрабатывать это сообщение, если оно поступает от автоматической переключатели, так как система автоматически задает состояние проверка для этого стиля. Но родительское окно должно обрабатывать сообщение, если оно поступает от неавтоматический переключатель, так как родительское окно отвечает за настройку состояния проверка для этого стиля. Независимо от стиля переключателя, система автоматически перерисовывая кнопку при изменении ее состояния.
Переключатели расположены в группах, и только одна кнопка в группе может быть проверена в любое время. Если флаг WS_GROUP установлен для любого переключателя, эта кнопка является первой кнопкой в группе, и все кнопки, которые следуют за ней сразу в порядке табуляции (но сами по себе не имеют флага WS_GROUP ), входят в ее группу. Если переключатели не имеют флаг WS_GROUP , все переключатели в диалоговом окне обрабатываются как одна группа.
Приложение может определить, проверяется ли переключатель, с помощью функции IsDlgButtonChecked .
Связанные темы
Reference
Основные понятия
Источник: learn.microsoft.com
Основные виды кнопок пользовательского интерфейса на сайтах и в приложениях
Кнопки – это один из наиболее известных интерактивных элементов пользовательского интерфейса. Они играют очень важную роль в организации взаимодействия с пользователем и формировании у него позитивного опыта. Продолжая серию постов, посвященных тематике UI/UX дизайна, в этой статье были собраны понятия и примеры, касающиеся наиболее часто используемых типов кнопок, что встречаются на веб-сайтах и в мобильных приложениях.
Раньше мы публиковали заметку про историю изменения дизайна кнопок на сайтах и в интерфейсах (начиная с 2009г.), а сейчас рассмотрим этот элемент с точки зрения функциональности, назначения и способа его реализации (срабатывания). Эта информация станет полезным дополнением к советам по созданию эффективного дизайна кнопок в интерфейсах.
