К какой группе элементов ui относится ссылка

К какой группе элементов ui относится ссылка

Button (Кнопка) — элемент, при нажатии на который происходит какое-то действие на сайте. Radiobutton (Переключатель опций) — позволяет пользователю выбрать одну опцию Checkbox (Флажок) — позволяет выбрать несколько опций Select (Выпадающий список) — позволяет пользователю выбрать одну опцию из выпадающего списка Accordeon (Аккордеон) — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента. Slider (Слайдер) — переключатель изображений (или другого контента) работающий автоматически или вручную Content (Контент) — текст, изображения, видео, то есть наполнение сайта. Popin (Попин) — небольшое всплывающее окно в углу экрана. Popup (Попап, Модальное окно) — разновидность всплывающего окна. Оно появляется на большую часть экрана и блокирует работы с остальным сайтом. Это может быть форма обратной связи, или просмотр фотографий в вк и фейсбуке. Block (Блок) — смысловой элемент включающий в себя информацию только об одной сущности. Обычно блок начинается с заголовка и отделен от следующего каким-либо визуальным решением, цветом, линией, тенью. Раздел — страница сайта. Тут все просто. Header (Шапка, хеддер) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е она перемещается вместе с перемещением пользователя по странице. Footer (Подвал, футер) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта Galley (Галерея) — набор из нескольких изображений Preview (Превью, предпросмотр) — изображение или часть другого контента, уменьшенная в размере. При нажатии на превью открывается исходный размер контента, отображаемого в превью. Border (Бордер) — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками) Tooltip (Тултип) — подсказка, всплывающая при наведении на элемент Pointer Cursor (Поинтер) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку Text Cursor — тип курсора, стандартный для редактирования текста Navigation (Навигация) — любой вид элементов позволяющая перенаправлять пользователя на похожий элемент будь то страница, другая картинка, следующий текст и так далее. Pagination (Пагинация) — нумерация страниц, обычно отображенная как навигация в конце страницы List (Списки) — в веб интерфейсах присутствуют нумерованные списки (цифрами) , маркированные списки (точки, квадратики, кружки, черточки) и списки определений Arrows (Стрелочки) — вид навигации. Search Bar (Поисковая строка) — строка для ввода поискового запроса Player (Плеер) — элемент воспроизводящий аудио и видеофайлы Slider (Слайдер) — предназначен для ввода чисел в указанном диапазоне Editbox (Текстовое поле) — поле для ввода текстовых значений Password field (Поле пароля) — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки. Input Mask (Маска) — это значения, указывающие формат допустимых значений входных данных в поле. Link (Ссылка) — элемент интерфейса перенаправляющий вас по адресу, указанному в нем. Anchor (Якорь) — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем Tabs (Вкладки, табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку Progress bar (Строка выполнения, прогресса, загрузки) — элемент GUI, который представляет собой прямоугольную область, которая «заполняется» областью другого цвета/фактуры по мере выполнения какой-либо задачи, например, загрузки файла. Switch (Переключатель) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл Alert (Алерт, Окно с предупреждением) — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером Spinner / Throbber (Спиннер, троббер) — анимированный элемент, воспроизводящийся в процессе выполнения какой-то задачи. Preloader (Прелоадер) — развновидность спиннера для индикации процесса загрузки сайта, видео, изображений и другого контента. Rating bar (Рейтинг) — элемент интерфейса показывающий среднюю оценку Tags (Теги) — элемент чаще всего располагающийся под контентом. Показывает принадлежность статьи, товара и пр. к конкретной категории. Зачастую при нажатии на тег, вы попадете на страницу со всем контентом, у которого есть такой тэг Breadcrumbs (Хлебные крошки, навигационная цепочка) — элемент интерфейса, показывающий путь от начала до того уровня, где в данный момент находится пользователь. См. также https://ru.wikipedia.org/wiki/Элемент_интерфейса и ее английскую версию. Статья базируется на https://borodaboroda.com/blog/elementy-interfejsa-sajta/

Про внешний вид элементов

Веб-формы

Веб-форма на сайте — это аналог бумажной формы, анкеты, бланка и опросного листа. Форму можно использовать для того чтобы получать сведения от посетителей сайта или выдавать нужные данные в ответ. К примеру, с помощью web-формы можно указать адресс доставки товара или же получить список книг по фильтру, где фильтр тоже является формой. Все что требуется от посетителей, так это внести различного рода информацию в поля формы, выбрать необходимые пункты в списках, установить переключатели и т.д. В разметке веб-страницы форма задается тегом <form>, внутри которого и располагаются элементы управления. Для отправки формы имеются два метода: GET и POST. Метод GET рекомендуется использовать в случаях, когда при обработке формы на стороне сервера не происходит побочных действий, например, поиск. В противном случае, когда на стороне сервера подразумевается модификация в базах данных и т.п., требуется использовать метод POST. Об отличиях методов GET и POST часто спрашивают на собеседовании. Вот тут (на английском) дается детальное описание различий. Подробнее о формах читайте тут: HTML Book — Тег <form> HTML5-формы

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

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 это флаг который позволяет выбрать между Да или Нет.

Барабан

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

Ссылки и кнопки в UI — в чём сходства и различия

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

Проблематика

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

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

Второй момент — возможность повесить на ссылку выполнение javascript привело к тому, что ссылки зачастую и используют как альтернативу кнопкам, что неверно.

При выборе типа элемента необходимо отталкиваться от определения сущности элементов:
Кнопка (html тег <button> ) — это функциональный элемент, то есть элемент, отвечающий за выполнение определённой функции.
Ссылка (html тег <a> ) — это элемент навигации, то есть элемент, отвечающий за взаимосвязь разделов веб-ресурса (или разных ресурсов) между собой.

Ссылка-кнопка: что будет, если ссылку сделать функциональным элементом?

Ссылке можно задать javascript, который она должна выполнить, то есть из ссылки ( <a> ) при желании можно сделать функциональный элемент — кнопку.

Такая ссылка-кнопка не будет иметь корректного URL-адреса, поэтому при наведении курсора на ссылку-кнопку в окне браузера (внизу) выведется «javascript:;» или «ТекущийАдрес/#».

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

У ссылки нет штатного состояния disabled (заблокирована), характерного для кнопок и отвечающего за блокировку кнопки до наступления каких-либо событий, которые переводят кнопку в активное состояние.

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

Кнопка-ссылка: что будет, если кнопку сделать навигационным элементом?

Кнопке можно передавать URL-адрес, то есть сделать из кнопки ( <button> ) ссылку.
Кнопка-ссылка не отобразит URL адрес при наведении на неё курсора мыши.
Кнопка-ссылка не позволит сохранить URL-адрес через контекстное меню.
Кнопка-ссылка не позволит открыть себя в новой вкладке (к примеру, зажав ctrl+левая кнопка мыши).

Правый клик мыши в браузере по ссылке и кнопке

Кнопка или ссылка — решающие правила

Навигация между страницами — ссылка.
Навигация по якорям — ссылка.

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

Для примера рассмотрим функцию вызова окна входа на трёх сервисах совместных поездок: beepcar.ru, едем.рф и blablacar.ru.

beepcar.ru — правильно

Функция входа сделана в виде кнопки (хотя внешне похоже на ссылку), которая открывает на этой же странице окно для ввода регистрационных данных.

Кнопка «Войти» в beepcar.ru

едем.рф — неправильно

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

Кнопка «Войти» в едем.рф

blablacar.ru — правильно+

Функция входа сделана в виде ссылки (внешне тоже как ссылка), которая открывает на этой же странице окно для ввода регистрационных данных. Но при этом у blablacar.ru есть и отдельная страница для входа, ссылка на которую и представлена по ссылке «Войти», то есть остались все прелести ссылки.

Кнопка «Войти» в blablacar.ru

Оформление ссылок и кнопок

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

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

Классические кнопки для бэкэнда

Некоторые полезные советы по оформлению и использованию ссылок и кнопок можно найти в Контур.Гайды (от СКБ Контур): Ссылка, Кнопка

Построение интерфейса: описание паттерна «Активные ссылки» (Action links)

Ссылки — это просто или совсем не просто?

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

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

— При нажатии на ссылку произойдет создание резервной копии? – это Активная ссылка
— Поля форм, заполнятся автоматически-определяемыми значениями? – это Активная сылка
— А может еще что-то…

У вас есть несколько команд, которые нужно отобразить совместно, или визуально выделить одну из них.

Что можно сделать?
Для сохранения целостности страницы и для наименее важных команд, используйте ссылки.

В каких случаях использовать?

Если в вашем HTML документе есть боковая панель, где удобно и логично собрать основные команды, или вы хотите расположить команды рядом с навигационными ссылками, то Активные ссылки отличный выбор, который подойдет так же и для прикладного ПО. Ссылки также помогут в случае, если вы ограниченны в пространстве.
При этом для множества команд сгруппированных по некому логическому или иерархическому признаку, лучше использовать паттерн Ленточного дизайна.
Если же вы хотите создать панель управления, то рекомендуется паттерн Группы кнопок.
Ссылки – это отличный способ обеспечить доступ к второстепенным командам.

Почему именно так?
Иногда, например в на Веб-документах, ссылки выглядят более органично, и для зрительной однородности документа лучше использовать именно их. Они могут быть сгруппированы вместе с традиционными навигационными ссылками, при том что использование кнопок в данном случае разорвет визуальную целостность документа.
Ссылки занимают меньше места, таким образом если вы ограниченны в пространстве, или команда достаточно длинная лучше отдать предпочтение ссылкам, а не кнопкам.
Важно: Единственное что вызывает опасение при использование ссылок, это то что большинство люде воспринимают ссылки исключительно как навигационный, безопасный элемент. Следовательно, необходимо, или сделать запрос подтверждения на данные команды, или убедиться, что они легко обратимы (отменяемы).
Когда необходимо выделить определенные команды, ссылки отличный способ визуально сделать разграничение по важности. Ссылки — текст, они смешиваются с основным наполнением документа, акцентируя при этом внимание на кнопках.

Как же это сделать?
Все довольно просто — вы всего-навсего используете ссылку вместо кнопки. Некоторые разработчики баз снабжают их специальными кнопками ссылок или кнопками гиперссылок, которые обеспечивают привычное кликовое событие и выбор параметров команды.
Для выделения и визуализации команды, особенно когда она находится в ряду других ссылок, вы можете соотнести ее с иконкой (не рекомендуется использовать это, если вы вынесли команду в ряд ссылок, чтобы минимизировать ее важность).
Попытайтесь вникнуть в то, что именно выражает текст, определите какое действие стоит за данным текстом и убедитесь в том, что это действие не возможно будет перепутать с навигационной ссылкой. Формулируйте сжато, но информативно. Использование глагола обычно подразумевает действие. Также можно использовать заглавные буквы, чтобы выделить ключевое слово из остального текста.
Отдельные команды, которые относятся к некоторой части пользовательского интерфейса (the UI), вам следует размещать визуально рядом с объектами воздействия.

Яндекс.Директ

Яндекс.Директ использует ссылки на действия при создании нового объявления. Ссылка «упорядочить» рассортирует ключевые слова по строкам. Обратите внимание на оформление ссылок. В данном примере, на наш взгляд, очень корректно и ненавязчиво Ссылки на команды, которые не ведут к перезагрузке страницы, выделили в виде псевдоссылок, оформив их прерывистым подчеркиванием, а не сплошным, как делается для навигационных элементов.
Ссылка на онлайн пример: direct.yandex.ru

Google. Добавить файл к письму

Google активно использует данный паттерн. Используя этот паттерн для прикрепления дополнительного файла к исходящему письму, сохраняется визуальная целостность экрана, кнопка в данном случае слишком сильно выделялась бы, разрывая страницу на две части.
Ссылка на онлайн пример: gmail.com

Google.Добавить напоминание

Еще один пример мы берем из Календаря. Ссылка «Добавить напоминание» открывает дополнительное поля для уведомлений и является типичным примером паттерна.
Ссылка на онлайн пример: google.com/calendar

Google.Кнопки — только для подчеркивания важности

В данном примере хотим обратить Ваше внимание сразу на несколько элементов. Google очень активно использует ссылки, и лишь только для создания акцента на весомости функций — делает их кнопками. Так команда «Написать письмо» письмо оформлена в виде ссылки, клик на нее не нанесет никакого вреда и не приведет к значительным изменениям, которые трудно будет отменить. При этом команды «Удалить», «В спам» и др. выделены кнопками — так как могут привести к потери информации.
Ссылка на онлайн пример: gmail.com