Элементы пользовательского интерфейса: Основные элементы пользовательского интерфейса—ArcMap | Документация

Элементы пользовательского интерфейса — Finance & Operations | Dynamics 365

Twitter LinkedIn Facebook Адрес электронной почты

• Статья
• 03/21/2023

Важно

Функции, перечисленные в этой статье, в настоящее время доступны в изолированном приложении Dynamics 365 Human Resources и в объединенной инфраструктуре Finance.

Навигация может отличаться от указанной после обновлений. Если требуется найти определенную страницу, можно воспользоваться поиском.

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

Обзор

• Панель действий — панель, расположенная под панелью навигации. Здесь можно выбирать вкладки для изменения записей, отображаемых на странице. Здесь можно редактировать и сохранять записи.
• Информационное поле — можно просмотреть информацию и выполнить действия с определенными записями в этой области.
• Область информационного поля — здесь можно прокручивать через различные аспекты записи для просмотра в информационном поле.
• Панель фильтра — на некоторых страницах можно выбрать Показать фильтры, чтобы открыть эту область. Она позволяет уточнить результаты, отображаемые на странице.
• Панель навигации — панель в верхней части интерфейса. Она содержит следующее: Портал Dynamics 365, Поиск, средство выбора компании, Центр действий, Параметры, Справка и поддержка и профиль пользователя.
• Список переходов — на некоторых страницах можно прокручивать эту область, чтобы найти конкретную запись. Если выбрано, на странице будут отображаться сведения о записи.
• Область переходов — самая левая область. Отсюда можно найти любую страницу в продукте.
• Страница — центральный фокус интерфейса. Параметры, выбранные в других компонентах пользовательского интерфейса, будут влиять на отображаемые здесь записи.
• Область — самая правая область. В некоторых случаях она будет открываться в том случае, когда аспекты записи необходимо изменить и сохранить.
• Вкладка — при ссылке на панель операций это меню параметров, которое появляется при выборе данного параметра на панели операций.

Вкладки, поля и разделы

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

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

Раздел аналогичен вкладке. Слово «раздел» часто используется для описания любой области страницы, которая организует определенную категорию сведений. На следующем рисунке «Сводка», «Заказы», «Избранное» и «Ссылки» все являются примерами разделов.

Диалоговое окно представляет собой область, которая открывается, когда выбраны определенные параметры для изменения или создания записи. В диалоговых окнах содержатся поля, позволяющие вводить данные с клавиатуры. В некоторых случаях определенное поле позволяет выбрать стрелку вниз, которая открывает список возможных вариантов выбора. Это называется раскрывающимся меню. На следующем рисунке поля Тип и Группа клиентов содержат параметр, позволяющий открыть раскрывающееся меню.

В некоторых случаях диалоговое окно открывается рядом с определенной кнопкой при ее выборе. Это называется раскрывающееся диалоговое окно. На следующем рисунке была выбрана кнопка По состоянию на, которая открыла раскрывающееся диалоговое окно.

Уведомления

Некоторые изменения объектов, которые вы контролируете, будут отображаться как уведомления. Уведомления могут уведомлять пользователя об изменении определенных данных клиента или оповещать пользователя, когда система не может принять данные, введенные в определенные поля. Можно узнать, как настроить, о чем требуется получать уведомления в разделе Обзор оповещений.

Уведомления отображаются различными способами.

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

На следующем рисунке показаны примеры этих типов уведомлений.

• Окно сообщения — оно будет отображаться поверх интерфейса и в нем необходимо выполнить действие, прежде чем можно будет продолжать использовать продукт.

Панели инструментов, сетки и списки

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

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

Элементы интерфейса сайта и их названия

1. Главная
/
2. Блог
/
3. Элементы интерфейса сайта

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

Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.

Radiobutton — позволяет пользователю выбрать одну опцию.

Checkbox — позволяет выбрать несколько опций.

Select — позволяет пользователю выбрать одну опцию из выпадающего списка.

Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента. 

Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную.

Контент — текст, изображения, видео, то есть наполнение сайта.

Popup — небольшое всплывающее окно в углу экрана.

Модальное окно — разновидность всплывающего окна. Оно появляется на большую часть экрана и блокирует работу с остальным сайтом. Это может быть форма обратной связи, или просмотр фотографий в вк и фейсбуке.

Блок (Экран) — смысловой элемент включающий в себя информацию только об одной сущности. Обычно блок начинается с заголовка и отделен от следующего каким-либо визуальным решением, цветом, линией, тенью.

Раздел — страница сайта. Тут все просто.

Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е. она перемещается вместе с перемещением пользователя по странице.

Подвал (футер / footer) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта.

Галерея — набор из нескольких изображений.

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

Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками).

Тултип (tooltip) — подсказка, всплывающая при наведении на элемент.

Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку.

Курсор Текст (Text) — тип курсора, стандартный для редактирования текста.

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

Пагинация — нумерация страниц, обычно отображенная как навигация в конце страницы.

Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами), маркированные списки (точки, квадратики, кружки, черточки) и списки определений.

Стрелочки — вид навигации.

Поисковая строка — строка для ввода поискового запроса.

Плеер — элемент воспроизводящий аудио и видеофайлы.

Ползунок — предназначен для ввода чисел в указанном диапазоне.

Текстовое поле — поле для ввода текстовых значений.

Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.

Маска — это значения, указывающие формат допустимых значений входных данных в поле.

 

Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.

Состояние ссылок и кнопок: Hover (Ховер) — состояние выбранного элемента при наведении на него курсора мыши (важно знать — в мобильных устройствах нет этого состояния)

Состояние ссылок и кнопок: Focus (Фокус) — состояние выбранного элемента при переключении между элементами клавишей tab (чаще всего это синяя обводка вокруг элемента)

Состояние ссылок и кнопок: Active (Эктив) — состояние выбранного элемента в момент нажатия на него.

Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем.

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

Строка загрузки — элемент, показывающий степень загрузки контента или исполняемой функции.

Переключатель (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл.

Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером.

Прелоадер (Preloader) — анимированный элемент, воспроизводящийся в процессе загрузки сайта, видео, изображений и другого контента.

Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку.

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

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

 

Почитать о нас можно тут

Узнать какие мы предоставляем услуги здесь

Больше статей — https://borodaboroda.com/blog

Ознакомьтесь с нашими работами — https://borodaboroda.com/works/ и https://www. instagram.com/boroda_studio/

Тэги: интерфейс сайта | разработка сайтов

32 Элементы пользовательского интерфейса, которые необходимо знать дизайнерам: руководство 2023 г.

Элементы пользовательского интерфейса (UI) — это части, которые мы используем для создания приложений или веб-сайтов. Они добавляют интерактивности в пользовательский интерфейс, предоставляя пользователю точки соприкосновения, когда он перемещается по нему; подумайте о кнопках, полосах прокрутки, пунктах меню и флажках.

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

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

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

Готов? Пойдем.

Элементы пользовательского интерфейса: полный глоссарий

Элементы пользовательского интерфейса обычно относятся к одной из следующих четырех категорий:

• Элементы управления вводом позволяют пользователям вводить информацию в систему. Например, если вам нужно, чтобы пользователи сообщали вам, в какой стране они находятся, вы будете использовать элемент управления вводом, чтобы позволить им это сделать.
• Компоненты навигации помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню-гамбургер на Android.
• Информационные компоненты обмениваются информацией с пользователями.
• Контейнеры содержат связанное содержимое вместе.

Вот наш список наиболее распространенных и важных элементов пользовательского интерфейса:

1. Аккордеон

Аккордеон позволяет пользователям разворачивать и сворачивать разделы контента. Они помогают пользователям быстро перемещаться по материалу и позволяют дизайнеру пользовательского интерфейса включать большие объемы информации в ограниченном пространстве.

Меню бенто, названное в честь коробок для бенто, представляет собой меню с элементами сетки. По мере чтения вы начнете замечать, что дизайнер пользовательского интерфейса — это просто еще одно слово для гурмана — мы любим называть наши элементы пользовательского интерфейса в честь еды.

Изображение Алекса Локвуда

3. Хлебные крошки

Эти маленькие цепочки ссылок помогают пользователям понять, где они находятся на веб-сайте. Хлебные крошки, часто расположенные в верхней части сайта, позволяют пользователям видеть свое текущее местоположение и продолжающиеся страницы. Пользователи также могут нажимать на них для перехода между шагами.

Изображение от Sharon Olorunniwo

4. Кнопка

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

Изображение от Gal Shir

5. Карточка

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

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

Изображение от Crank

6. Карусель

Карусели позволяют пользователям просматривать наборы контента, такие как изображения или карточки, часто гиперссылки на другой контент или источники. Самым большим преимуществом использования каруселей в дизайне пользовательского интерфейса является то, что они позволяют нескольким элементам контента занимать одну и ту же область пространства на странице или экране. Если вы решите использовать карусели, обязательно следуйте этим рекомендациям, изложенным Nielsen Norman Group.

7. Флажок

В дизайне пользовательского интерфейса флажок отображается точно так, как следует из названия: маленький квадрат на экране, который пользователь может установить или снять. Флажок позволяет пользователям выбирать один из нескольких вариантов из списка, при этом каждый флажок работает отдельно. Установка флажка помечает его маленькой галочкой! Некоторые распространенные варианты использования этого элемента включают формы и базы данных.

Изображение от Shakuro

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

Дёнер-меню — это разновидность более известного гамбургер-меню. В то время как меню гамбургера состоит из трех строк одинаковой длины, расположенных одна над другой, меню донера состоит из вертикальной стопки из трех строк разной длины: длинной строки, более короткой строки под ней и еще более короткой строки под ней. что! Этот элемент пользовательского интерфейса представляет собой группу фильтров.

10. Выпадающий список

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

Изображение от Shakuro

11. Feed

Вот неизбежный! Ленты отображают действия пользователей в хронологическом порядке. Содержание варьируется и может варьироваться от простого текста до изображений и видео. Подумайте о Твиттере!

12. Форма

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

Изображение от girithaara

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

14. Иконка

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

Изображение Эдди Лобановского

15. Поле ввода

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

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

17. Погрузчик

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

Изображение от Kickass

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

19. Модал

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

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

Изображение Джошуа Крона

20. Уведомление

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

Однако уведомления не просто сообщают нам, что кому-то понравился один из наших постов, они могут сообщать нам об ошибке или об успешном завершении процесса.

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

22. Средство выбора

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

Изображение Эдоардо Меркати

23. Индикатор выполнения

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

24. Радиокнопки

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

Изображение Олега Фролова

25. Поле поиска

Обычно представленное в виде поля ввода с небольшим увеличительным стеклом внутри, поля поиска позволяют пользователям вводить информацию для поиска в системе.

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

27. Ползунки

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

28. Степпер

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

29. Тег

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

30. Панель вкладок

Панели вкладок появляются в нижней части мобильного приложения и позволяют пользователям быстро перемещаться между основными разделами приложения.

Изображение от Hoang Nguyen

31. Подсказка

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

32. Тумблер

Думайте о тумблере как о переключателях включения и выключения. Они позволяют нам делать именно это: включать или выключать что-то.

Заключительные мысли

Вот и закончился наш глоссарий самых важных элементов пользовательского интерфейса!

Если вы хотите узнать больше о дизайне пользовательского интерфейса, посмотрите это видео:

Если вам понравилась эта статья, вам также могут быть интересны следующие статьи:

• Что такое гештальт Принципы? Руководство для дизайнеров пользовательского интерфейса и пользовательского интерфейса
• 8 Веб-сайты с действительно потрясающим дизайном пользовательского интерфейса
• 5 Общие вопросы, которые мне задают как дизайнеру пользовательского интерфейса

Часто задаваемые вопросы

1. Что такое элементы пользовательского интерфейса?

Элементы пользовательского интерфейса (UI) — это части, которые мы используем для создания приложений или веб-сайтов. Они добавляют интерактивности в пользовательский интерфейс, предоставляя пользователю точки соприкосновения, когда он перемещается по нему; подумайте о кнопках, полосах прокрутки, пунктах меню и флажках.

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

2. Какие примеры элементов пользовательского интерфейса можно привести?

Общие элементы пользовательского интерфейса включают:

хлебные крошки
флажки
раскрывающиеся списки
формы
значки
поля ввода
уведомления

и многое другое.

3. Каковы ключевые элементы дизайна пользовательского интерфейса?

Элементы пользовательского интерфейса обычно относятся к одной из следующих четырех категорий:

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

Компоненты навигации помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню-гамбургер на Android.

Информационные компоненты обмениваются информацией с пользователями.

Контейнеры содержат связанное содержимое вместе.

Элементы пользовательского интерфейса, которые должен знать каждый дизайнер

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

Для дизайнера пользовательского интерфейса или веб-разработчика крайне важно иметь глубокое понимание элементов пользовательского интерфейса и того, как пользователи взаимодействуют с ними. Это поможет вам создать лучшую структуру приложения/веб-сайта.

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

UXPin Merge позволяет переносить эти компоненты в редактор дизайна UXPin и создавать полнофункциональные пользовательские интерфейсы за считанные минуты, а не часы, тем самым оптимизируя рабочий процесс всей группы разработчиков. Узнайте больше о слиянии UXPin.

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

Создавайте интерактивные компоненты из системы дизайна вашей команды.

Что такое элементы пользовательского интерфейса?

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

Элементы пользовательского интерфейса — это то, что обеспечивает удобный пользовательский интерфейс и хорошо продуманные функции.

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

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

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

• Список: Позволяет выбрать несколько стран.
• Раскрывающийся список: Обычно позволяет выбрать один элемент.
• Флажок: Альтернативный способ выбора ни одной, одной или нескольких стран.
• Радио: Позволяет выбрать один элемент.

Итак, что бы вы выбрали?

Есть ли что-нибудь еще более ценное? Можете ли вы использовать свои собственные радиокнопки?

Чтобы ответить на эти вопросы, вам необходимо правильно понимать различные элементы пользовательского интерфейса.

Заинтересованы? Давайте начнем!

3 типа элементов пользовательского интерфейса

В идеале мы можем сгруппировать элементы пользовательского интерфейса в 3 основные категории.

1. Элементы ввода
2. Выходные элементы
3. Вспомогательные элементы

Элементы ввода

Элементы ввода отвечают за обработку различных пользовательских данных. Иногда они также являются частью процесса проверки ввода. Некоторые из наиболее часто используемых элементов ввода включают в себя:

• Выпадающие списки
• Комбинированные блоки
• Кнопки
• Тумблеры
• Поля текста/пароля
• Выбор даты
• Флажки
• Радиокнопки
• Диалоги подтверждения

Источник: Dribbble.com

Элементы вывода

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

Источник: Google Doc

Вспомогательные элементы

Все остальные элементы попадают в эту категорию. К наиболее широко используемым вспомогательным элементам относятся:

• Уведомления
• Панировочные сухари
• Иконки
• Слайдеры
• Уведомления
• Индикаторы выполнения
• Подсказки

Мы также можем сгруппировать вспомогательные элементы в 3 категории.

Навигационные элементы пользовательского интерфейса

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

Источник: UXPin

Информационные элементы пользовательского интерфейса

Отвечают за представление информации. К ним относятся, например, всплывающие подсказки, значки и индикаторы выполнения.

Источник: Toptal

Группы или контейнеры Элементы пользовательского интерфейса

Отвечают за объединение различных компонентов. Виджеты, контейнеры и боковые панели для части этой категории. Виджет подписки на рассылку новостей блога UXPin также является хорошим примером контейнера.

9 Общие элементы пользовательского интерфейса ввода

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

Флажки

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

Источник: Github.com

Раскрывающиеся списки

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

Источник: Stackoverflow

Поля со списком

Поля со списком позволяют пользователям либо напрямую вводить пользовательское значение, либо выбирать значение из списка. Это комбинация раскрывающегося списка или списка и однострочного поля ввода.

Источник: mdbootstrap

Кнопки

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

Источник: Evergreen UI

5. Переключатели

Переключатели позволяют пользователю изменять вид/значение/настройку между двумя состояниями. Они полезны для переключения между включенным и выключенным состоянием или переключения между представлением списка и представлением сетки.

Источник: Youtube

Текстовые поля и поля для пароля

Текстовые поля и поля для пароля позволяют пользователям вводить текст и пароль соответственно. Текстовые поля допускают как однострочный, так и многострочный ввод. Многострочные поля ввода также известны как «текстовое поле». Поля пароля обычно позволяют использовать одну строку для пароля.

Источник: Shopify.com

Средства выбора даты

Средство выбора даты позволяет пользователям выбирать дату и/или время. С помощью встроенного средства выбора даты на платформе в систему отправляется согласованное значение даты.

Источник: Material Design

Радиокнопки

Радиокнопки позволяют пользователям выбирать только один из предопределенного набора взаимоисключающих вариантов. Обычный вариант использования переключателей — выбор пола в формах регистрации.

Источник: UXPin

9. Диалоги подтверждения

Диалоги подтверждения отвечают за сбор согласия пользователя на определенное действие. Например, сбор согласия пользователя на действие удаления.

4 Общие элементы вывода

Предупреждение Элемент пользовательского интерфейса

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

Источник: material-ui.com

Элемент пользовательского интерфейса Toast

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

Разница между «Предупреждением» и «Тостом» заключается в том, что первое не отключается, а второе — через определенное время.

Источник: Evergreen UI

Значок

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

Диаграммы

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

Тип диаграммы, используемой в пользовательском интерфейсе, зависит главным образом от двух вещей: данных, которые мы хотим сообщить, и того, что мы хотим сообщить об этих данных.

Различные типы диаграмм. Источник: material.io

Общие вспомогательные элементы пользовательского интерфейса

Навигационные Элементы пользовательского интерфейса

Эти элементы помогают навигации. Это

• Меню навигации
• Список ссылок
• Панировочные сухари
• Поля поиска
• Пагинация

Меню навигации

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

Источник: UXPin

Список ссылок

Как следует из названия, список ссылок состоит из ссылок. Боковая панель со списком категорий — хороший пример этого. Ссылки могут быть как внутренними, так и внешними.

Хлебные крошки

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

Поля поиска

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

Источник: Браузер Google Chrome

Разбиение на страницы

Эта функция разделяет содержимое между страницами и позволяет пользователям перемещаться между ними.

Информационные Элементы пользовательского интерфейса

Эта категория элементов пользовательского интерфейса передает информацию. Он состоит из:

• Подсказки
• Иконки
• Индикаторы выполнения
• Уведомления
• Ящики сообщений
• Модальные окна

Подсказки

Всплывающая подсказка показывает пользователям подсказки, когда они наводят курсор на элемент, указывая имя или назначение элемента.

Значки

Это упрощенный символ, который помогает пользователям ориентироваться в системе, предоставляя информацию и указывая уставы.

Источник: Dribbble

Индикаторы выполнения

Индикатор выполнения показывает ход выполнения процесса. Как правило, индикаторы выполнения не кликабельны.

Источник: Tenor

Уведомления

Это индикатор обновления, который объявляет пользователю что-то новое для проверки. Обычно показывает завершение задачи, новые элементы для проверки и т. д.

Окна сообщений

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

Источник: Evergreen UI

Модальные окна

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

Источник: Evergreen UI

Группы и контейнеры

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

Виджеты

Это элемент взаимодействия, такой как окно чата, компоненты панели мониторинга или встраивания других сервисов.

Источник: Dribbble.com

Контейнеры пользовательского интерфейса

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

Источник: Material.io

Боковые панели

Боковые панели также содержат другие группы элементов и компонентов. Но это можно переключать между коллапсом и видимым состоянием.

Источник: Semantic-UI

Панель поиска

Панель поиска содержит поле поиска и параметры поиска. Как правило, панель поиска имеет поле поиска и опцию фильтрации. Расширенный поиск Twitter — отличный пример.

Источник: Twitter

Прототип с интерактивными элементами пользовательского интерфейса в UXPin

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

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

Используйте единый источник достоверной информации для проектирования и разработки. Откройте для себя слияние

Нашли это полезным? Поделиться с

от UXPin 13 декабря 2022 г.

UXPin — это веб-инструмент для совместной работы над дизайном. Мы рады поделиться своими знаниями здесь.

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

Начните бесплатный пробный период

Определите возможности и вызовы для увеличения влияния систем проектирования и DesignOps на предприятия.

Скачать электронную книгу бесплатно

Подписывайтесь на нашу новостную рассылку

• Бесплатно Электронные книги
• Бесплатные комплекты пользовательского интерфейса
• Дизайнерские изделия

Мы бережно защищаем ваши данные — как описано в Политике конфиденциальности.