К какой группе элементов 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-формы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка

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

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

32 User Interface Elements For UI Designers

BY MARIA DE LA RIVA , UPDATED ON MARCH 29, 2022 9 mins read

User interface (UI) elements are the parts we use to build apps or websites. They add interactivity to a user interface, providing touchpoints for the user as they navigate their way around; think buttons, scrollbars, menu items and checkboxes.

As a user interface (UI) designer, you’ll use UI elements to create a visual language and ensure consistency across your product—making it user-friendly and easy to navigate without too much thought on the user’s part.

In this guide, we’ll explore some of the most common user interface elements, considering when and why you might use them. We’ll cover:

User Interface Elements: An Introduction

User interface elements usually fall into one of the following four categories:

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

Input controls allow users to input information into the system. If you need your users to tell you what country they are in, for example, you’ll use an input control to let them do so.

Navigational components help users move around a product or website. Common navigational components include tab bars on an iOS device and a hamburger menu on an Android.

Informational components share information with users.

Containers hold related content together.

Know Your UI Elements: A Comprehensive Glossary

Most of us spend a pretty big chunk of our day on interfaces. The time we spend looking at our favorite app or a piece of software we use at work familiarizes us with common UI elements. We learn how to use them and how they behave. When we see them on new apps or websites, we know what to do with them instantly as a result of having interacted with them before.

Knowing your UI elements will allow you to recognize opportunities to use them in your designs, helping you design clear and simple interfaces.

Let’s take a look at the most common UI elements you’ll run into.

1. Accordion

Accordions let users expand and collapse sections of content. They help users navigate material quickly and allow the UI designer to include large amounts of information in limited space.

2. Bento Menu

A bento menu, named after bento boxes, represents a menu with grid items. As you read along, you’ll begin to notice UI designer is just another word for a foodie—we love to name our UI elements after food.

3. Breadcrumb

These little trails of links help users figure out where they are within a website. Often located at the top of a site, breadcrumbs let users see their current location and the proceeding pages. Users are also able to click on them to move between steps.

4. Button

Traditionally displayed as shapes with a label, buttons tell users they can perform a particular action, like submitting.

5. Card

Super popular these days, cards are small rectangular or square modules that contain different kinds of information—in the form of buttons, text, rich media, and so on. Cards act as an entry point for the user, displaying different kinds of content side by side which the user can then click on. Cards are a great UI design choice if you want to make smart use of the space available and present the user with multiple content options, without making them scroll through a traditional list.

Image by Crank

6. Carousel

Carousels allow users to browse through sets of content, like images or cards, often hyperlinked to more content or sources. The biggest advantage of using carousels in UI design is that they enable more than one piece of content to occupy the same area of space on a page or screen. If you decide to use carousels, be sure to follow these guidelines set out by the Nielsen Norman Group.

7. Checkbox

In UI design, a checkbox appears exactly as the name suggests: a little square box on the screen that the user can check or uncheck. A checkbox allows users to select one of multiple options from a list, with each checkbox operating as an individual. Checking the checkbox marks it with a little tick! Some common use cases for this element include forms and databases.

8. Comment

Pretty common around interfaces today, comments display content users input into the system in chronological order. You’ve seen them around social media engines and on blog posts.

9. Döner Menu

A döner menu is a variation of the more well-known hamburger menu. While a hamburger menu consists of three lines of equal length stacked one on top of the other, a döner menu consists of a vertical stack of three lines of different lengths: a long line, a shorter line below it, and an even shorter line underneath that! This UI element represents a group of filters.

10. Dropdown

This controversial UI element allows users to select an item from a list that “drops down” once we click on it. To learn more about why this element has a lousy rep, check out this naughty presentation.

11. Feed

Here is an inescapable one! Feeds display user activity in chronological order. The content varies and can range from simple text to images to video. Think Twitter!

12. Form

Forms help users input sets of related information into the system and submit them. Think of all the boxes asking for shipping details when you order something online.

13. Hamburger Menu

These three little horizontal lines look slightly like America’s quintessential meal and represent a list menu. You’ll commonly find the hamburger menu on the top left-hand corner of apps and most likely containing a group of navigation links.

14. Icon

Icons are images used to communicate a variety of things to users. They can help to better communicate content, or can communicate and trigger a specific action. You can learn how to design icons from scratch in this step-by-step guide to the icon design process.

15. Input Field

Input fields are, quite simply, a place for users to enter content into the system. They aren’t just limited to forms, either—search bars are input fields as well.

16. Kebab Menu

We’ve covered the hamburger menu and the döner menu: now for another (non-edible!) UI element: the kebab menu. Consisting of three vertical dots, the kebab menu represents a set of grouped options.

17. Loader

Loaders can take on many, many forms—designers enjoy getting creative with them. Loaders are designed to let users know the system is completing an action in the background and should wait.

Image by Kickass

18. Meatballs Menu

Yet another member of the menu family is the meatballs menu—a set of three horizontal dots. The meatballs menu signifies that there are more options available, which are revealed when you click on the menu dots.

19. Modal

A modal window is a small box containing content or a message that requires you to interact with it before you can close it and return to your flow.

Think of the last time you deleted an item on your phone. The little message that popped up asking you to confirm that you wanted to remove it is a modal.

20. Notification

You’ll find these little red dots everywhere on interfaces today. They let us know there is something new, like a message, for us to go check out.

However, notifications don’t just tell us someone has liked one of our posts—they can let us know an error occurred, or a process was successful.

21. Pagination

Typically found near the bottom of a page, pagination organizes content into pages. Pagination lets users know where they are within a page and click to move into other sections.

22. Picker

Date and time pickers let users pick dates and times. The advantage of using pickers over input fields is the ability to keep all the data users enter tidy and consistently formatted in a database, making information manageable and easy to access.

23. Progress Bar

Progress bars help users visualize where they are in a series of steps. You’ll commonly find them on checkouts, marking the different stages a user needs to complete to finalize a purchase, like billing and shipping.

24. Radio Buttons

Often confused with checkboxes, radio buttons are small circular elements that let users select one option among a list. The key here is noting that users can only choose one option and not multiple options like they can with checkboxes.

25. Search Field

Commonly represented as an input field with a little magnifying glass inside of it, search fields allow users to input information to find within the system.

26. Sidebar

A sidebar displays a group of navigational actions or content literally on the side of a page. It can be visible or tucked away.

27. Slider Controls

Sliders are a common UI element used for selecting a value or a range of values. By dragging the slider with their finger or mouse, the user can gradually and finely adjust a value—like volume, brightness, or desired price range when shopping.

28. Stepper

Steppers are two-segment controls that also let users adjust a value. However, unlike sliders, they allow users to alter the value in predefined increments only.

29. Tag

In UI design, tags are essentially labels which help to mark and categorize content. They usually consist of relevant keywords which make it easier to find and browse the corresponding piece of content. Tags are often used on social websites and blogs.

30. Tab Bar

Tab bars appear at the bottom of a mobile app and allow users to quickly move back and forth between the primary sections of an app.

31. Tooltip

Tooltips provide little hints that help users understand a part or process in an interface.

32. Toggle

Think of toggles as on and off switches. They let us do just that: turn something on or off.

See an element missing? Feel free to comment below!

If you’d like to learn more about user interface design, check out this video:

You may also be interested in taking a look at the following articles:

What You Should Do Now

Get a hands-on introduction to UI design and design your very first app screen with a free, self-paced UI Design Short Course.

Take part in one of our FREE live online UI design events with industry experts.

Talk to a program advisor to discuss career change and find out what it takes to become a qualified UI designer in just 5-9 months—complete with a job guarantee.

This month, apply for the Women in Tech Scholarship—worth up to $1,445 off our full UI Design Program. Offered to the first 100 women who enroll, book your advisor call today.

This article is part of:

UI Design

Maria de la Riva

Maria de la Riva is a UX/UI Designer digital nomad. For the past 4 years, she’s worked with online education startups, like CareerFoundry, mentoring and writing curriculum content. Currently, she is Head of Product at Iguama Inc., a startup developing the technology loyalty programs need to help their users redeem points on online retailers. Maria is an avid diver and sailor.

Related UI Design Articles

4 of the Best UI Storyboard Examples for 2022

What is Fitts’s Law? How to Boost Your Design Skills

How to Become a UI Designer With No Experience

What is CareerFoundry?

CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.