Элементы ui: 32 User interface элементов для UI дизайнеров — bool.dev

32 User interface элементов для UI дизайнеров — bool.dev

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

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

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

UI элементы:

UI элементы обычно делятся на одну из следующих четырех категорий:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input Controls

Input Controls

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

Navigation Components

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

Informational Components

Informational Components делятся информацией с пользователями.

Containers

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

Словарь UI элементов:

Аккордеоны (Accordion)

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

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball

Типы иконок меню, которые названы в честь блюд. Используются очень часто в качестве отображения меню.

Хлебные крошки (Breadcrumb)

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

Кнопка (Button)

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Комментарий (Comment)

Dropdown

Лента (Feed)

Сложно представить соц сети такие как Facebook, twitter и т.п без ленты. Содержание ленты варьируется от простого текста до изображений и видео. 

Форма (Form)

Иконки (Icon)

Поле ввода (Input Field)

Loader

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

Модальное окно (popup)

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

Уведомления

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

Пагинация (Pagination)

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

Picker

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

Progress Bar

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

Radio Buttons

Radio Buttons похожи на чекбоксы, но отличаются тем, что можно 1 из нескольких вариантов. 

Поле поиска (Search Field)

Боковая панель (Sidebar)

Sidebar нужен для отображения дополнительного контента, который не предназначен для основного блока

Ползунок (Slider Controls)

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

Stepper

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

Тэг (Tag)

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

Tab Bar

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

Tooltip

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

Toggle

Toggle это флаг который позволяет выбрать между Да или Нет.

Источник: https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Почитать о нас можно тут Узнать какие мы предоставляем услуги здесь Тэги: интерфейс сайта | разработка сайтов

UI-элементы и жесты в мобильных приложениях / Блог компании Юла / Хабр

Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.

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

Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.

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

Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:

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

Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.

Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.

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

Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).

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

AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.

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

Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.

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

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

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

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

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

Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).

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

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

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

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

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

Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.

Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае — расстоянием от указанного адреса):

Жесты

Тап

— касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.

Double tap — два коротких касания, двойной тап.

Мультитап — три и более тапов подряд по одному элементу.

Лонгтап — нажатие с удержанием на несколько секунд. Позволяет открыть дополнительные опции там, где они есть.

Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.

Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.

Pull to refresh (p2r) — дословный перевод: «потяни для обновления».

Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название — «тащи и бросай»!

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

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

Элементы пользовательского интерфейса (UI) | Данил Фимушкин

Пользовательский интерфейс (на англ. user interface, UI) коротко говорят ЮИ — это среда взаимодействия пользователя с компьютером. Это кнопки, меню, радиокнопки, чек-боксы и многое другое. Сейчас не понятно, ниже все заумные словечки объясню. Если человек пользуется мобильным телефоном, то приложения или браузер — это пользовательский интерфейс.

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

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

Тексты (заголовки)

Когда человек в вебе первое, с чем он сталкивается, это тексты и заголовки. Поэтому, нам как дизайнерам, важно прорабатывать сразу все заголовки в одном макете. Заголовки, обычно, называются h2, h3 … Hn, потому что так они называются в тегах html. В данном случае первый заголовок — это h2, далее h3 и так далее. Первый — это наиболее значимый заголовок. В лендинге это может быть на первом экране, дальше по низсходящей. В макетах нужно показывать все зголовки, чтобы верстальщик понимал, где какой тег ставить.

Ссылки

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

Кнопки

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

Радиобаттон и чек-боксы

Слева радиобаттон (по-русски радиокнопка, но буду называть ее радиобаттон поскольку у дизайнеров так принято), справа чек-бокс. В радиобаттоне можно выбрать только 1 вариант, у нас выбран енот. В чек-боксе возможность множественного выбора, у нас выбран тюлень и енот.

Формы

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

Попап

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

Пагинация

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

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

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

Прелоадер

Штука, которая показывает, что что-то загружается. Они бывают очень разные. Можно нагуглить «прелоадер гиф» и посмотреть разнообразие и использовать понравившиеся. Есть специальный прелоад генератор, где можно выбрать как он будет выглядеть, какого цвета, в каком формате его сохранять  и так далее. Советую использовать стандартные вещи, такие как кружки и полосочки, для особых проектов можно ипользовать что-то необычное, а можно нарисовать самому в фотошопе и сделать гиф анимацию. Не переусердствуй, это конечно важный элемент, но сильно много времени на него тратить все же не стоит.

Таблицы

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

Меню

Меню — это навигация по всему сайту. В данном случае показал, что есть всплывающее меню при наведении курсора. Это нужно прорисовывать. Обрати внимание как я показал наведение и интерактивность. Просто скачал курсор png и поставил его на место. Если у тебя большой макет, поставь много курсоров. Например, чтобы показать как работает меню, как выглядят кнопка и ссылка при наведении. При этом не забывай про обычное состояние. Таким образом в статичном макете можно легко показывать как ведут себя элементы юзер интерфейса в интерактивном состоянии.
Помни, что курсоры бывают разные: для PC и для мака.
Гуглятся легко «курсор png». Если показываешь сайт на маке (используешь mock-up c макбуком), то нужно использовать правый курсор, если в PC (например, mock-up с inernet explorer), то левый.

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

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

Илья Бирман, арт-директор «Дизайн-бюро Артёма Горбунова», в «Советах», а затем и своей книге «Пользовательский интерфейс» очень доходчиво сформулировал принципы, которым стоит следовать при написании текста для любого интерфейса. Поскольку я постоянно сталкиваюсь с ужасно написанными формами, нелогичными кнопками и другими интерфейсными ошибками, я решил сделать выжимку из этих принципов, о том, какие должны быть элементы пользовательского интерфейса.

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

Кнопка

Функция	Часть речи	Отвечает на вопрос
Передача команды	Глагол совершенного вида в начальной форме	Что сделать?

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

Функция	Часть речи	Отвечает на вопрос
Смена статуса	Существительное Прилагательное Причастие Наречие Глагол в личной форме	Это что? какое? как?

Примеры хороших кнопок для смены статуса

Функция	Часть речи	Отвечает на вопрос
Навигация	Обычно существительное в именительном падеже	Что?

Примеры хороших кнопок навигации

Кнопки, связанные с направлением, — «Назад — Вперёд», «Ранее — Позднее» — лучше заменить стрелками ← →. А лучше — написать, куда именно «вперёд» или «назад».

Не используйте «Дополнительно» или «Ещё» в качестве названий для кнопок. Они не несут информации о том, что произойдёт после нажатия.

Ссылка

Функция	Часть речи	Отвечает на вопрос
Навигация	Любая, но должна отвечать на вопрос	Что?

Если текст ссылки не отвечает на вопрос «Что?», то есть не показывает, что будет открыто при клике, у пользователя могут сформироваться неправильные ожидания.

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

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

Лучше, если в ссылке будет два-три слова. Если ссылкой хочется сделать больше слов, нужно отредактировать текст так, чтобы слова были рядом.

Иконка

Функция	Часть речи	Отвечает на вопрос
Навигация	Существительное в именительном падеже	Что?

Подпись иконки должна отвечать на вопрос «Что?» — то, что будет открыто, показано, запущено.

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

Вкладка

Функция	Часть речи	Отвечает на вопрос
Навигация	Существительное в именительном падеже	Что?

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

Распространённая ошибка — использовать вкладки в качестве элемента выбора. Вкладка — это элемент только навигации. Если на экране несколько вкладок, значит, на нём одновременно есть всё их содержимое. Только сейчас вы видите что-то одно, в зависимости от выбранной вкладки. Поэтому в качестве элемента выбора лучше использовать радиокнопки или горизонтальный переключатель.

Чек-бокс

Действие	Часть речи	Отвечает на вопросы
Выбор объекта	Существительное Местоимение Причастие	Использовать что? Сделать с чем? кому?

Действие	Часть речи	Отвечает на вопросы
Выбор свойства	Существительное Местоимение Прилагательное Наречие Числительное Глагол в начальной форме	Какой, чей, который? Кто или что именно?

Действие	Часть речи	Отвечает на вопросы
Уточнение действия	Наречие Деепричастие Существительное в творительном падеже Существительное в косвенном падеже с предлогом	Сделать как? где? когда? Использовать что? Сделать с чем? кому?

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

Радиокнопка, переключатель, выпадающий список

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

Действие	Часть речи	Отвечает на вопросы
Выбор объекта	Существительное Местоимение Причастие	Использовать что? Сделать с чем? кому? Кто именно?

Действие	Часть речи	Отвечает на вопросы
Выбор свойства	Существительное Местоимение Прилагательное Наречие Числительное Глагол в начальной форме	Какой? чей? который? Кто или что именно?

В отличие от чек-боксов, радиокнопки всегда образуют группы — выбор из единственного варианта не имеет смысла.

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

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

Действие	Часть речи	Отвечает на вопросы
Уточнение действия	Наречие Деепричастие Существительное в творительном падеже Существительное в косвенном падеже с предлогом	Сделать как? где? когда? Использовать что? Сделать с чем? кому?

Ползунок

Действие	Часть речи	Отвечает на вопросы
Выбор свойства	Существительное Прилагательное Наречие Числительное Глагол в начальной форме	Какой? чей? который? Кто или что именно?

Действие	Часть речи	Отвечает на вопросы
Уточнение действия	Наречие	Сделать как? где? когда?

Поле ввода

Действие	Часть речи	Отвечает на вопросы
Выбор Уточнение Ввод данных	Любая

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

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

10 принципов UI-дизайна, о которых часто забывают

1. Придумывайте применение для пустых пространств

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

Что бы вы ни решили сделать, там не должна стоять надпись: «Здесь пока ничего нет».

2. Не используйте ползунки для ввода количественных значений

Ползунки отлично подходят для регулировки качественных характеристик, таких как яркость, громкость, цвет и так далее. Но не стоит использовать их для ввода количественных значений: если пользователь захочет выбрать цифру 6, почти наверняка ползунок будет постоянно сбиваться то на 5, то на 7.

3. Ставьте выпадающее меню, только если вариантов много

При выборе страны или года рождения есть много вариантов ответа, поэтому выпадающее меню подходит идеально. Но если вариантов всего несколько, лучше добавить кнопку единичного выбора (radio button) или ползунок.

Если раскрывающийся список, наоборот, очень длинный и содержит множество пунктов, подумайте о добавлении мини-поиска или фильтра.

4. Делайте элементы управления достаточно крупными для пальцев

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

Предотвратить это поможет зазор в 2 мм. По версии Apple, минимально возможный размер  элемента управления — это 44 на 44 пикселя. Microsoft рекомендует делать сторону таких кнопок равной 34 пикселям. Допустимый в этой компании минимум — 26 пикселей.

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

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

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

6. Используйте нумерацию страниц для контента, у которого есть начало, середина и конец

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

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

7. Выбирайте визуальные объяснения, а не текстовые инструкции

Выражение «не нужно рассказывать, нужно показывать» часто приписывают Антону Чехову. Это литературный метод, который позволяет читателю проникнуться историей с помощью чувств и ощущений, а не описаний автора.

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

8. Давайте текстовое пояснение для иконок

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

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

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

9. По возможности используйте интерфейс устройства

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

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

10. Если задача займет неопределенное количество времени, ставьте вращающийся диск

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

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

Источник.

Иллюстрации: Дэнни Сапио

Элемент интерфейса — это… Что такое Элемент интерфейса?

Кроссплатформенный редактор элементов интерфейса Qt designer

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

Другие названия: контро́л (control), элемент управления и ви́джет (англ. widget).

Происхождение термина «виджет»

Употребляется примерно с 1920-х годов в американском английском для обозначения простой, но необходимой вещи, маленького изделия, название которого временно забыто говорящим^[1]. Online Etymology Dictionary предполагает, что на его форму могло повлиять слово англ. gadget или же оно происходит от англ. which it — «этот, как его»^[2]. Другие словари предполагают словослияние «window gadget» (букв. «оконное приспособление»), также произошедшее в начале двадцатого века^[1].

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

Типовые элементы интерфейса

В большинстве существует стандартный набор элементов интерфейса, включающий следующие элементы управления:

• список (list box)
• дерево — иерархический список (tree view)
• раскрывающийся список (combo box, drop-down list)
• поле редактирования (textbox, edit field)
• элемент для отображения табличных данных (grid view)

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

• Радиальное меню — кольцевое меню вокруг курсора. Выбор пункта меню осуществляется движением курсора в направлении пункта меню.
• Кнопка последовательного выбора — элемент, значение в котором выбирается последовательным нажатием мыши по нему. В отличие от раскрывающегося списка, такая кнопка не позволяет видеть другие значения, кроме выбранного.
• Счётчик — двунаправленный вариант для числовых значений. Нажатие на кнопку позволяет изменить значение параметра на единицу в большую или меньшую сторону.
• Heads-up display — отображение поверх всех элементов значения каких-то параметров либо важных сообщений.
• Пузырь — подсказка, наподобие филактера в комиксах, которая указывает на элемент-источник сообщения.
• Валкодер — вращающийся элемент управления, наподобие ручки настройки во многих радиоприёмниках. Может быть как одно- так и многооборотным.
• Скрываемый виджет — элемент, позволяющий скрыть часть элементов управления, когда они не используются.
• Индикатор уровня (Level Indicator) — элемент для индикации значения какой-либо величины. Иногда вместо него используется индикатор процесса, но некоторые руководства (к примеру, HIG от Apple^[3]) запрещают подобную практику.

Библиотеки элементов интерфейса

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

• Кроссплатформенные, на основе Java
  • SWT (Standard Widget Toolkit) — в составе проекта Eclipse
  • Swing — разработка Sun, компонента Java Foundation Classes (JFC) на основе AWT
  • AWT — частично устаревший Abstract Windowing Toolkit (Sun, 1995)

• Кроссплатформенные, на основе C/C++, с возможностью использования в других языках

• Кроссплатформенные, на основе Pascal

• Кроссплатформенные, на основе Ajax
• Под AmigaOS
  • Intuition
  • Reaction
  • MUI (Magic User Interface)

• Графический интерфейс для игр

См. также

Примечания

Ссылки

Инструменты разработки элементов графического интерфейса
Низко- уровневые
Высоко- уровневые

32 Элементы пользовательского интерфейса (UI), которые необходимо знать дизайнерам

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

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

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

1. Введение в элементы пользовательского интерфейса
2. Полный глоссарий элементов пользовательского интерфейса (с примерами)

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

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

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

1. Элементы управления вводом
2. Компоненты навигации
3. Информационные компоненты
4. Контейнеры

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

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

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

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

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

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

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

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

1. Accordion

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

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

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

3.Breadcrumb

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

Изображение Шэрон Олорунниво

4. Кнопка

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

Изображение Гал Шир

5.Карточка

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

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

6. Карусель

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

7. Флажок

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

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

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

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

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

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

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

11. Feed

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

12. Форма

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

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

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

14. Значок

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

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

15.Поле ввода

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

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

17.Loader

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

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

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

19. Модальное окно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27. Ползунки управления

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

28. Шаговый двигатель

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

29. Тег

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

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

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

Изображение Хоанг Нгуен

31. Всплывающая подсказка

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

32. Тумблер

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

Видите, что элемент отсутствует? Не стесняйтесь комментировать ниже!

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

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

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

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

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

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

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

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

Терминология и использование

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

Рекомендуется: Перейдите в Файл> Инструменты .

Рекомендуется: В меню Файл выберите Инструменты .

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

Предлоги, которые можно использовать с этими элементами, см. В Таблица предлогов.

Окна, страницы, диалоговые окна и панели

Чаще всего окно — это все окно приложения на рабочем столе. среда. Однако он также может относиться к модульным элементам приложения, которые вы можно открывать и закрывать. Например, в Android Studio несколько окон доступный в меню View> Tool Windows .

Рекомендуется: В окне MyApp щелкните Edit .

Не рекомендуется: На странице MyApp щелкните Edit .

Страница — предпочтительный термин для обозначения веб-страницы в целом и подстраницы. консоли в частности.

Рекомендуется: В консоли Google Cloud перейдите на страницу Deployments .

Не рекомендуется: В Google Cloud Console перейдите в окно Deployments .

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

Рекомендуется: В диалоговом окне Приветствие нажмите ОК .

Не рекомендуется: Во всплывающем окне Добро пожаловать, нажмите ОК .

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

Рекомендуется: На панели Создать учетную запись службы щелкните Новый .

Не рекомендуется: На панели Create service account щелкните New .

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

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

Чтобы обратиться к меню, используйте форму LABEL_NAME menu.

Чтобы сообщить читателю, где найти команду в меню или подменю, используйте такую ​​фразу, как В меню Файл выберите Открыть .

Использование угловых скоб

Другой вариант — использовать угловые скобки (>). Если вы используете угловые скобки, следуйте этим руководящие принципы:

• Поставьте неразрывный промежуток ( & nbsp; ) перед каждой угловой скобкой.
• Не выделяйте каждое название меню отдельно; вместо этого заключите всю последовательность в один полужирный шрифт элемент ( ... или ** ... ** ).
• Оберните угловую скобку тегом span и добавьте атрибут aria-label с , а затем текст ( > ).В противном случае некоторые программы чтения с экрана могут прочитать > как больше, чем.

В следующем примере текст отображается как Выберите View> Инструменты> Инструменты разработчика . Программа чтения с экрана интерпретирует это как Выберите «Просмотр», затем «Инструменты», а затем «Инструменты разработчика» .

HTML

 Выберите  Просмотр & ampnbsp; >  Инструменты & ampnbsp; >  Инструменты разработчика .

Уценка

 Выберите ** Просмотр & ampnbsp; >  Инструменты >  Инструменты разработчика **. 

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

Рекомендуется: Выбрать MyApp> Настройки , а затем выберите Языки панель предпочтений.

Не рекомендуется: Выберите MyApp > Настройки > Языки > + > CSS .

Панель инструментов

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

Рекомендуется: на приборной панели на панели инструментов нажмите Изменить .

Рекомендуется: нажмите Изменить .

Кнопки и значки

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

Рекомендуется: нажмите ОК .

Не рекомендуется: нажмите «ОК». кнопка.

Значок — это символ или изображение, представляющее объект или функцию. Иконка также может быть кнопкой. Если на кнопке есть значок, напишите имя кнопку, как показано во всплывающей подсказке, и добавьте значок кнопки непосредственно перед имя.Если вы не уверены в названии значка, проверьте элемент, чтобы использовать aria-label атрибут. Для получения дополнительной информации см. Использование ария-этикетка.

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

Рекомендуется: нажмите Добавить .

Не рекомендуется: щелкните значок.

Если имя элемента пользовательского интерфейса заканчивается многоточием (…), исключите многоточие.

Рекомендуется: нажмите Обзор .

Не рекомендуется: нажмите Обзор … .

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

Рекомендуется: Щелкните меню Меню .

Не рекомендуется: на левой боковой панели, нажмите кнопку с тремя линиями.

Вкладка

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

Рекомендуется: Выбрать Инструменты> Параметры , а затем щелкните вкладку Изменить .

Текстовое поле

Текстовое поле — это поле, которое пользователь может ввести.Использовать поле и форма LABEL_NAME поле . Отформатируйте текст что пользователь вводит с помощью элемента в HTML или с помощью кода форматирование (моноширинное) в другой разметке.

В документации Google Cloud используйте поле вместо ящик .

Рекомендуется: в коробке Owner , введите ваше имя.

Рекомендуется: в поле Имя , введите wsfc-1 .

Рекомендуется: в поле Имя , введите wsfc-1 .

Рекомендуется: в поле Экземпляр , укажите значение длиной менее 64 символов.

Поле со списком, поле со списком и счетчик

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

Рекомендуется: в раскрывающемся списке Элемент В списке выберите Desktop .

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

Рекомендуется: в поле Font введите или выберите шрифт, который хотите использовать.

Счетчик - это поле, которое позволяет пользователю выбрать значение, щелкнув стрелки или набрав. Чтобы обратиться к счетчику, используйте форму the LABEL_NAME box . Для обозначения ввода значения в спин поле используйте глагол введите .

Рекомендуется: в поле Размер шрифта , введите размер шрифта.

Флажок

Флажок - это небольшое поле, которое указывает, включен или выключен.Чтобы установить флажок, используйте форму the LABEL_NAME флажок . С осторожностью используйте глаголы , проверьте и снимите отметку с , что может быть неоднозначным; часто лучше использовать , выберите и вместо этого очистите .

Рекомендуется: выбрать автоматически Проверить наличие обновлений чекбокс.

Рекомендуется: очистить Закладки флажок.

Радиокнопка

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

Рекомендовано: Выбрать Не помню пароли .

Рекомендуется: Выберите предпочитаемый Режим запуска .

Расширитель стрелка

Стрелка развертывания - это элемент пользовательского интерфейса, используемый для развертывания или свертывания раздела навигация или контент. Избегайте явных ссылок на них в документации, но когда вы это сделаете, используйте термины расширитель стрелка и расширяемая секция , а не такие термины, как expando или zippy .

Рекомендуется: Чтобы развернуть Дополнительные параметры В разделе щелкните значок arrow_rightexpander стрелка.

Не рекомендуется: расширять Дополнительные параметры раздел, щелкните мышкой.

Переключить

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

Рекомендуется: вы можете переключать Magic Mode в окне Настройки .

Рекомендуется: чтобы включить параметр, щелкните значок Wi-Fi переключатель.

Нажатие и ввод клавиш на клавиатуре

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

Ниже приведен пример тега :

Рекомендуется: Нажмите Control + C .

При визуализации текст выглядит следующим образом:

Рекомендуется: нажмите Control + C .

Если вы работаете с разметкой, отличной от HTML, используйте моноширинное форматирование, вот как рендеров.Если вы работаете в Markdown, заключите имя ключа в обратных кавычках ( `).

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

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

Рекомендуется: нажмите Esc .

Рекомендуется: нажмите клавишу Esc .

Введите названия клавиш-модификаторов, таких как Command, Control, Option и Сдвиг. Не используйте символы для этих клавиш. Чтобы обратиться к комбинации клавиш, используйте форма МОДИФИКАТОР + KEY_NAME .

Рекомендуется: Нажмите Control + V .

Если пользователь работает либо с Windows, либо с Mac, поместите ярлык Mac в круглые скобки после ярлыка Windows.

Рекомендуется: Для копирования нажмите Control + C (или Command + C на Mac).

Не рекомендуется: для копирования нажмите Ctrl + C ( ⌘ + C ).

Для ссылки на клавишу или комбинацию, в которой используется клавиша Shift, используйте форму МОДИФИКАТОР + Shift + KEY_NAME .

Рекомендуется: Нажмите Control + Shift +? .

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

Чтобы использовать сочетание клавиш , используйте сочетание клавиш или . комбинация .

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

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

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

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

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

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

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

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

• Элементы управления вводом
• Навигационные компоненты
• Информационные компоненты
• Контейнеры

Элементы управления вводом

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

1. Кнопки

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

2. Текстовые поля

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

3. Изображения и значки

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

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

4. Флажки

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

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

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

6. Списки и раскрывающиеся списки

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

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

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

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

Навигационные компоненты

Навигационные компоненты - это набор компонентов пользовательского интерфейса, которые могут упростить навигацию по веб-сайту или мобильному приложению. Существует множество компонентов навигации, например:

1. Панели навигации

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

2. Меню и раскрывающиеся меню

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

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

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

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

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

4. Панели вкладок (для приложений Android или iOS)

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

5. Гармошка

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

6. Древовидные меню

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

7. Панировочные сухари

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

8. Карусели

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

9. Строки / поля поиска

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

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

10. Теги

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

Информационные компоненты

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

1. Всплывающие подсказки

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

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

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

Хотите создать удобный, но эффективный индикатор выполнения для своего веб-сайта или приложения? Проверьте 24 лучших примера индикатора выполнения и бесплатные шаблоны PSD .

3. Уведомления

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

4. Загрузчик

Загрузчик часто представляет собой анимированный компонент, который сообщает пользователям, что веб-сайт / мобильное приложение обрабатывает действие в фоновом режиме, и просит их терпеливо подождать. Чтобы ожидание было приятным, погрузчики могут иметь креативный дизайн в различных формах и цветах. Например:

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

Контейнеры

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

1. Карты

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

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

2. Поля прокрутки

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

3. Формы

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

Лучшие бесплатные ресурсы по элементам пользовательского интерфейса, которые нельзя пропустить

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

Лучшие бесплатные комплекты пользовательского интерфейса

1. 25 лучших бесплатных наборов пользовательского интерфейса Android для Sketch в 2020 году

Лучшие 25 лучших бесплатных наборов пользовательского интерфейса Android для Sketch собраны, чтобы помочь вам с легкостью создать потрясающее мобильное приложение. Большинство наборов пользовательского интерфейса можно загрузить бесплатно.

Бесплатная загрузка

2. 41 Лучшие наборы и шаблоны веб-интерфейса

Собраны 41 из лучших наборов пользовательского интерфейса и шаблонов для проектов веб-сайтов. Все они в форматах Sketch / Photoshop / Adobe XD. Вы можете бесплатно скачать, исходя из собственных потребностей.

Бесплатная загрузка

3. 35 лучших бесплатных наборов пользовательского интерфейса Adobe XD для приложений и веб-дизайна

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

Бесплатная загрузка

4. 12 лучших бесплатных наборов пользовательского интерфейса для дизайна материалов для Sketch и PSD

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

Бесплатная загрузка

5. 30 лучших примеров дизайна пользовательского интерфейса iPhone X и комплекты пользовательского интерфейса

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

Скачать бесплатно

Лучшие бесплатные макеты

1. 11 лучших бесплатных шаблонов мокапов для Android

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

Бесплатная загрузка

2. 25 лучших бесплатных шаблонов макетов MacBook

Не стесняйтесь проверить 25 самых профессиональных и красивых макетов и шаблонов MacBook в разных ракурсах и сценариях.

Бесплатная загрузка

3. 42 лучших макета iPhone X, iPhone XS (Max) для бесплатной загрузки [PSD + Sketch + PNG]

42 высококачественных макета iPhone X, iPhone XS и iPhone XS Max и представлены ресурсы, которые помогут вам с легкостью создавать приложения для iPhone.

Бесплатная загрузка

Заключение

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

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

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

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

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

---

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

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

UI не следует путать с UX (пользовательский интерфейс). Пользовательский интерфейс - это все элементы веб-сайта, с которыми пользователи взаимодействуют с , а UX - это общий опыт пользователей с продуктами или услугами компании.

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

---

Преимущества сосредоточения на пользовательском интерфейсе

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

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

---

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

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

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

Элементы управления вводом

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

• Флажки
• Радиокнопки
• Раскрывающиеся списки
• Пуговицы
• Текстовые поля

Навигационные компоненты

Навигационные компоненты помогают посетителям перемещаться по вашему сайту и находить подробную информацию о продуктах и ​​услугах.Какие есть примеры навигационных компонентов?

• Слайдеры
• Меню
• Поля поиска
• Теги
• Иконки

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

Информационные компоненты

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

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

Контейнеры

Контейнеры

UI - это способ группировки информации. Они могут сэкономить место на вашем сайте, не забывая при этом о информации.Примеры контейнеров:

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

---

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

В 1990-х два известных консультанта по веб-юзабилити разработали десять руководств по дизайну пользовательского интерфейса.Хотя они были созданы более 30 лет назад, они все еще применимы сегодня, как и тогда. Основные веб-сайты, такие как Google и Adobe, по-прежнему используют эти десять рекомендаций по пользовательскому интерфейсу:

1. Видимость состояния системы - Создайте интерфейс своего веб-сайта так, чтобы пользователь всегда знал, что происходит.
2. Соответствие между системой и реальным миром - Совместите свой пользовательский интерфейс с миром ваших пользователей. Например, используйте реальный язык, который посетители вашего веб-сайта будут использовать вместо отраслевого жаргона.
3. Элементы управления и свобода пользователя - Дайте пользователям возможность оставить нежелательное действие без особых усилий. Все совершают ошибки!
4. Согласованность и стандарты - Выбрав стиль пользовательского интерфейса, придерживайтесь его. Если кнопка означает что-то на одной странице, она должна означать то же самое на другой. Следите за тем, чтобы на вашем сайте все было единообразно, чтобы избежать путаницы.
5. Предотвращение ошибок - Помогите пользователям избежать ошибок. Удалите подверженные ошибкам элементы пользовательского интерфейса или добавьте экраны подтверждения, прежде чем пользователи выполнят определенные действия.
6. Узнавать, а не вспоминать - Не заставляйте пользователей помнить, как пользоваться сайтом. Предоставьте им знакомые параметры на всех ваших страницах, чтобы они могли видеть элемент и знать, что он делает, а не помнить, как к нему вернуться.
7. Гибкость и эффективность использования - Дайте пользователям несколько способов достичь того же результата. Это дает им возможность взаимодействовать с веб-сайтом так, как им нравится.
8. Эстетичный и минималистичный дизайн - Используйте только актуальную информацию, чтобы свести элементы дизайна пользовательского интерфейса к минимуму.Чем меньше у вас беспорядка, тем легче посетителям ориентироваться.
9. Помогите пользователям распознавать, диагностировать и устранять ошибки. - Используйте понятные, удобные сообщения об ошибках на простом языке, которые предлагают решение. Избегайте кодов ошибок.
10. Справка и документация - Хотя вы надеетесь, что пользователям это не понадобится, предоставьте документацию, которую легко найти, чтобы помочь им разобраться в сложных процессах и выполнять задачи.

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

---

Создайте свой веб-сайт с учетом пользовательского интерфейса

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

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

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

1 июля 2020 г.

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

Дизайн пользовательского интерфейса (UI)

и - это процесс создания внешнего вида интерфейса.

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

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

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

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

Хорошо!

Поехали.

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

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

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

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

4 ключевых элемента пользовательского интерфейса (UI): (но не ограничиваясь ими)

1. Элементы управления вводом

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

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

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

2.

Навигационные компоненты

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

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

.

3. Информационная составляющая

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

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

.

4. Контейнеры

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

Элементы пользовательского интерфейса (UI) в элементах управления вводом

Флажки

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

Например. Предположим, вы хотите забронировать отель на время отпуска.Вы заходите на сайт booking.com и вводите пункт назначения. Вы найдете флажки в левой части интерфейса, такие как флажок «Бюджет», «Политика бронирования» и т. Д.

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

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

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

Кнопки

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

Текстовые поля

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

Подумайте о том, чтобы ввести адрес своего дома в текстовое поле при поиске доставки вашей любимой еды с сайта Food.

Радиокнопки

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

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

Список

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

Переключение

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

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

Поле даты

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

Считайте, что вы бронируете гостиницу или авиабилеты. Первое, что вас попросят на сайте, - это выбрать даты поездки.

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

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

Панировочные сухари

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

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

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

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

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

Теги Тег

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

Слайдер

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

Значок

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

Поле поиска

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

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

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

Карусель

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

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

Меню

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

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

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

Уведомления

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

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

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

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

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

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

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

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

Подсказка

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

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

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

Окно сообщения

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

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

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

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

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

Аккордеон

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

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

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

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

Сводка

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

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

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

Спасибо за чтение.

---

Если вам понравилась эта статья, поделитесь ею с друзьями, эта статья им тоже поможет 🙂

Ссылки и дополнительная литература
https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/
https: // www.usability.gov/how-to-and-tools/methods/user-interface-elements.html
https://developer.gnome.org/hig/stable/ui-elements.html.en
https: // www. krishaweb.com/important-elements-of-successful-ui-design
Вот замечательная книга, чтобы узнать о UI
Узнайте о дизайне пользовательского интерфейса здесь, в этой статье
Узнайте об истории и принципах дизайна пользовательского интерфейса здесь, в этой статье

Еще статьи для вас

«U I» в дизайне пользовательского интерфейса означает «пользовательский интерфейс». Пользовательский интерфейс представляет собой точку взаимодействия между пользователем и цифровым устройством или продуктом.

Подробнее

Давайте вернемся в 1940-50-е годы и рассмотрим первое поколение компьютеров. С очень маленьким пользовательским интерфейсом (UI) у них было всего несколько кнопок на консоли оператора

Подробнее

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

Подробнее

box / box-ui-elements: компоненты React для системы проектирования Box и подключаемые компоненты

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

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

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

Установка

пряжа add box-ui-elements или npm install box-ui-elements

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

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

Обычный

Элементы

* Эти компоненты используют разделение кода.См. Раздел «Разделение кода» для получения дополнительной информации.

Расщепление кода

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

Таблицы стилей

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

Box используют таблицы стилей SCSS. Каждый из элементов включает соответствующую таблицу стилей SCSS для правильной визуализации. Как только вы импортируете элемент в свое приложение React, соответствующая таблица стилей будет автоматически добавлена.Однако вам нужно будет настроить webpack для обработки файлов .scss с помощью sass-loader / css-loader. Это заставит веб-пакет правильно включить наши файлы SCSS в ваш окончательный вывод CSS. Здесь в разделе правил показан образец конфигурации.

Поддержка браузера

• Desktop Chrome, Firefox, Safari, Edge (последние 2 версии)
• Ограниченная поддержка Internet Explorer 11 (требуется полифил ES2015)
• Мобильный Chrome и Safari

Наши рекомендации по участию можно найти в СОДЕРЖАНИЕ.мкр. Инструкции по настройке разработки можно найти на DEVELOPING.md.

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

Авторские права Box, Inc., 2016 г. Все права защищены.

По лицензии Box Software License Agreement v.20170516. Вы не можете использовать этот файл, кроме как в соответствии с Лицензией. Вы можете получить копию лицензии по телефону

.

https://developer.box.com/docs/box-sdk-license

Если это не требуется действующим законодательством или не согласовано в письменной форме, программное обеспечение распространяется по Лицензии распространяется на УСЛОВИЯХ "КАК ЕСТЬ", БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ ИЛИ УСЛОВИЙ, явных или подразумеваемых.См. Лицензию для конкретных языков, регулирующих разрешения и ограничения по Лицензии.

Понимание элементов и принципов веб-интерфейса

Крис Банк из UXPin - приложение для создания макетов и прототипов - объясняет некоторые из наиболее важных принципов проектирования веб-интерфейса. Для анализа примеров пользовательского интерфейса от более чем 33 компаний ознакомьтесь с рекомендациями по использованию веб-интерфейса.

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

Источник: Принципы проектирования интерфейсов

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

Суть интерфейса

Перво-наперво, давайте разберемся, что такое UI на самом деле. «Интерфейс» может быть сложным термином, поэтому мы уделим немного времени, чтобы осмыслить, что он влечет за собой. Райан Сингер, менеджер по продукту в Basecamp, советует нам не думать об интерфейсах «экранах, кнопок или пикселях», как соблазнительно для дизайнеров, а скорее как о совокупности «заданий», каждая из которых имеет начало, середину и конец. .

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

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

Элементы управления вводом

Интерфейс был бы просто «лицом» без взаимодействия, и многое из этого исходит от элементов управления вводом. Но есть парадокс с элементами управления, потому что пользователям нужно больше возможностей, но каждый новый элемент управления усложняет пользовательский интерфейс и загромождает экран. По словам Дмитрия Фадеева, основателя Usaura, лучший способ достичь этого идеального баланса - это контролировать по требованию.

Скрывая элементы управления до тех пор, пока они не понадобятся, вы экономите место на экране, не жертвуя параметрами пользователя.Это беспроигрышное решение, которое на данный момент принято на большинстве высокопрофильных веб-сайтов. Элементы управления можно скрыть и отобразить, наведя указатель мыши на затронутый контент (Pinterest), скрыть в свернутых раскрывающихся меню с помощью вкладок (Документы Google) или их гибрид, как в приведенном выше примере CollabFinder.

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

Источник: Google

Если ваш сайт сфокусирован на определенном поле ввода или если ввод является необходимым первым шагом, вы должны реализовать автофокусировку на этом поле ввода, чтобы курсор запускался там автоматически. Лучшим примером этого является Google, где при входе на сайт пользователь может начать вводить свой запрос, не нажимая где-либо.Опять же, Фадеев помогает объяснить технические детали, лежащие в основе этой техники пользовательского интерфейса.

Как обсуждалось в Web UI Patterns 2014, Google также включает значения по умолчанию и автозаполнение, что значительно ускоряет действия пользователя и помогает им исследовать дополнительные темы и темы.

Источник: Google

Навигация

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

Коллис Таид, соучредитель Envato, приводит два основных правила навигации:

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

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

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

I. Контент

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

1. Меню - выбор по умолчанию для пользователей для поиска контента сайта.

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

3. Фильтры - фильтры позволяют управлять тяжелыми сайтами.

4. Ссылки Помогает пользователям понять связи между связанным контентом.

Источник: Дизайн пользовательского интерфейса навигации


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

II. Место размещения

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

Источник: Дизайн пользовательского интерфейса навигации


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

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

Источник: Navigation UI Design


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

Дополнительные примеры горизонтальной и вертикальной навигации можно найти в этой коллекции шаблонов пользовательского интерфейса навигации.

Анимация

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




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

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

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

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

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

I. Меню с Panache

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

Источник: Создание анимированных пользовательских интерфейсов с определенной целью


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

Источник: Создание анимированных пользовательских интерфейсов с определенной целью


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

II. Parallax Background Scrolling

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

Источник: Создание анимированных пользовательских интерфейсов с определенной целью


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

III. Переходы на веб-страницы

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

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

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

Настройки по умолчанию

По статистике, пользователи редко изменяют настройки по умолчанию, даже если параметры настройки доступны. Это означает, что вам нужно сделать все правильно с первого раза. Как дизайнер пользовательского интерфейса, вы обязаны предвидеть, как пользователь хочет свои настройки, еще до того, как он даже воспользуется сайтом. Однако есть и положительный момент: вы можете использовать настройки по умолчанию, чтобы инициировать действия, которым должен следовать пользователь. Living Social использует разумный подход, делая аудиторию по умолчанию для электронных писем «все», что побуждает пользователей переадресовывать сделки людям другого пола (что, по-видимому, способствует достижению цели компании по привлечению пользователей).

Источник: Living Social


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


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

Управляемые действия

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

Источник: LinkedIn, через 99 Designs


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

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

Визуальная ясность и ясность языка

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

Источники: Imgur / Stack Exchange

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


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

• Простота - ключ к успеху - не перегружайте пользователя слишком большим количеством функций или элементов управления.
• Проверьте свою формулировку - правильная формулировка может решить проблемы, вызывающие путаницу, в то время как неправильная формулировка вызывает их.
• Избегайте противоречий. Как вы увидите в примере из StackExchange, если на кнопке написано «Выбрать файл», не называйте ее «просмотр по нажатию». Держите язык последовательным.
• Избегайте преувеличения - будьте краткими; чрезмерное объяснение может произвести обратный эффект.
• Пояснения при наведении курсора. Нет лучшего способа избавиться от путаницы, связанной со значками, не загромождая экран. Gmail - хороший пример использования пояснений при наведении курсора для объяснения неоднозначных значков.

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

Источник: 7 нерушимых законов дизайна интерфейсов


Принцип «MAYA»

Ваша цель как UI-дизайнера - создать величайший, самый новый и оригинальный интерфейс, который выходит далеко за рамки самой смелой мечты обычного пользователя, верно? Не совсем.Хотя мы дали советы о том, как сделать ваш пользовательский интерфейс максимально гладким и оптимизированным, важно помнить о принципе MAYA как о методологии сдержек и противовесов.


Знаменитый промышленный дизайнер Раймонд Лоуи придумал выражение «Самый продвинутый, но приемлемый» (MAYA), чтобы объяснить, что общественность по своей природе сопротивляется переменам и не приемлет радикально новую инновацию, даже если бы это было лучшее решение.

Быстро вперёд в современность. Консалтинговая фирма по UI / UX Above the Fold объясняет, как мудрость принципа MAYA применима к веб-дизайну, а именно, не забудьте включить ссылки на опыт, с которым пользователи уже знакомы.Это не значит, что веб-дизайн не должен быть инновационным и раздвигать границы; однако, если это так, он также должен включать в себя три вещи:

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

2. Традиционные альтернативные варианты - разные пользователи будут иметь разные уровни комфорта.Предложение «традиционного» варианта в дополнение к новому и отличному от других даст пользователям чувство безопасности, даже если они никогда не будут его использовать. Например, у Etsy есть анимированная опция «поиска по цвету», дополненная традиционной панелью поиска.

3. Разумный масштаб - другими словами, не изобретайте велосипед. Ненужные дополнения, обозначенные как «новые», «улучшенные» или «улучшенные», только расстраивают пользователей. Если вы прилагаете усилия, чтобы создать что-то новаторское, убедитесь, что оно того стоит.

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

Takeaway

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

Для получения практических советов по созданию веб-интерфейсов на основе примеров ведущих компаний, таких как AirBnB, Wufoo, Linkedin и других, ознакомьтесь с рекомендациями по использованию веб-интерфейса.


.

No related posts.