Подпишитесь на нас в соц. сетях или свяжитесь с нами любым удобным способом

Наша армия дизайнеров работает не покладая мышек, чтоб вы увидели ее скорее!

Страница еще в разработке

Полный гайд по UI-элементам и их типам для дизайнера

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

Стой! Забери в подарок: Бесплатный курс по дизайну

Уроки по Figma, Tilda + по поиску клиентов и заработку на дизайне

Получить доступ

Оглавление статьи

4 типа UI-элементов
Input Controls — Элементы ввода
Navigation Components — Навигационные элементы
Informational Components — Информационные элементы
Containers — Контейнеры и структурные блоки

Современный пользовательский интерфейс — это не просто красивая обертка

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

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

При создании интерфейса важно учитывать не только внешний вид, но и пользовательский сценарий, доступность, типографику и консистентность (consistency). Именно поэтому дизайнеры все чаще используют дизайн-системы, библиотеки компонентов и готовые решения на базе фреймворков — таких как Bootstrap, Material UI или atomic design.

Источник:
Outcrowd UI/UX

🧩4 типа UI-элементов

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

📥 Input Controls — Элементы ввода
Эти элементы позволяют пользователю вводить данные или делать выбор из предложенных вариантов. К ним относятся поля ввода текста (input), чекбоксы, радиокнопки (radio button), селекты (dropdown), слайдеры и другие формы взаимодействия. Они незаменимы в формах, регистрациях, фильтрах и любых сценариях, где пользователь что-то сообщает системе.

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

ℹ️ Informational Components — Информационные элементы
Элементы этой группы служат для передачи статуса, обратной связи и справочной информации. Tooltip, alert, toast, modal window и прогресс-бары сообщают пользователю о результате действия, предупреждают об ошибках или дают дополнительную информацию. Это повышает интерактивность и делает интерфейс более дружелюбным.

📦 Containers — Контейнеры и структурные блоки
Контейнеры — это элементы, которые группируют и организуют другие UI-компоненты. Примеры: карточки, панели, аккордеоны, таблицы, сетки (grid layout). Они помогают визуально структурировать страницу, создают порядок и ритм, обеспечивают чистую иерархию контента.

“

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

Примеры UI-элементов

Ниже рассмотрим конкретные примеры элементов UI по каждому из 4 типов

📥 Input Controls — Элементы ввода

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

Text Field

Элемент интерфейса, который позволяет пользователю ввести и отредактировать одну строку текста. Чаще всего используется для ввода коротких данных: имени, логина, e-mail, пароля или поискового запроса.
Пример: поле поиска в браузере или форма авторизации.

Пример:
Oleg Frolov

Password Field

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

Пример:
Samuel Kantala

Text Area

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

Пример:
Praveen Juge

Checkbox

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

Пример:
Shakuro

Radio Button

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

Пример:
Vitaly Silkin

Toggle / Switch

Toggle / Switch — элемент интерфейса в виде ползунка или рычажка, который переключает состояние между двумя вариантами, обычно «вкл» и «выкл».
Пример: включение тёмной темы или активация уведомлений.

Пример:
Mykola Morozov

Dropdown / Select

Dropdown / Select — элемент интерфейса, который позволяет выбрать один (или несколько) вариантов из скрытого списка. Список раскрывается при нажатии на поле или стрелку.
Пример: выбор страны при заполнении формы.

Пример:
Mate Stojić

Multi-Select

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

Пример:
Matia Gobbo

Date Picker

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

Пример:
Kristaps Elsins

Time Picker

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

Пример:
Brylle Clarido

Date-Time Picker

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

Пример:
Tran Mau Tri Tam

File Upload

File Upload — элемент интерфейса, позволяющий пользователю выбрать и загрузить один или несколько файлов с устройства на сайт или в приложение. Часто сопровождается кнопкой «Выбрать файл» или областью для перетаскивания (drag & drop).
Пример: отправка резюме в форме отклика на вакансию.

Пример:
Md Solayman Hossen

Range Slider

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

Пример:
Taimour Sohail

Stepper

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

Пример:
Figma Material X kit for Stepper UI design templates.

Search Field

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

Пример:
Sourabh Choraria
script.gs

Color Picker

Color Picker — элемент интерфейса, позволяющий выбрать цвет из палитры, с помощью цветового круга, градиента или ввода цветового кода (HEX, RGB, HSL).
Используется в графических редакторах, настройках темы и любых случаях, где пользователь должен задать цвет вручную.

Пример:
Mykolas Puodžiūnas

Number Input

Number Input — поле ввода, предназначенное только для числовых значений.
Может поддерживать ручной ввод, кнопки увеличения/уменьшения значения и ограничения (минимум, максимум, шаг).
Используется в формах, калькуляторах, настройках параметров и других случаях, где требуется ввести точное число.

Пример:
Farrel Putra

Button (Submit / Reset / Action)

Button (Submit / Reset / Action) — элемент интерфейса, который выполняет определённое действие при нажатии.

Submit — отправка данных формы.
Reset — сброс введённых значений в форме.
Action — запуск произвольного действия (например, открытие окна, переход по ссылке, сохранение).

Пример: кнопка «Отправить», «Очистить», «Сохранить изменения».

Пример:
Aaron Iker

Signature Pad

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

Пример:
Robbi Darwis

🧭 Navigation Components — Навигационные элементы

Функция: помогают пользователю перемещаться по разделам и страницам.

Top Navigation Bar

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

Пример:
Vijay Singh Shekhawat

Sidebar

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

Пример:
Nicholas Ergemla

Breadcrumbs

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

Пример:
Amanda Galeano

Tabs

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

Пример:
Detachless

Pagination

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

Пример:
Luis daniel rovira

Hamburger Menu

Hamburger Menu — иконка в виде трёх горизонтальных полосок, которая открывает скрытое меню при нажатии. Чаще всего используется в мобильных версиях сайтов и приложений для экономии места на экране.
Пример: меню навигации в мобильном приложении или адаптивном сайте.

Пример:
Paul Lapkin

Link / Text Link

Link / Text Link — кликабельный текстовый элемент, который ведёт пользователя на другую страницу, раздел сайта или внешний ресурс. Обычно выделяется цветом, подчёркиванием или изменением стиля при наведении.
Пример: ссылка «Подробнее» в статье.

Пример:
Juan Buitrago

Anchor Link

Anchor Link — ссылка, которая переносит пользователя к определённому месту или блоку на той же странице. Используется для быстрого перемещения по длинным страницам, например, в оглавлениях или лендингах.
Пример: перейти к следующему пункту «Перейти»

Пример:
WordPress Yazı / Sayfa İçi Bağlantı (Çapa Link) Nedir Nasıl Eklenir

Back Button / Forward Button

Back Button / Forward Button — элементы навигации, позволяющие перемещаться на предыдущую или следующую страницу или экран. Часто используются в браузерах, приложениях и интерфейсах с последовательными шагами.
Пример: стрелка «←» для возврата на предыдущий экран и «→» для перехода вперёд.

Пример:
Charles Marino

Dropdown Menu

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

Пример:
Squalid Wit

Mega Menu

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

Пример:
Dominik Tyka

Step Navigation (Wizard)

Step Navigation (Wizard) — элемент интерфейса, который делит процесс на последовательные шаги и позволяет пользователю перемещаться между ними.
Часто используется в формах, регистрациях, настройках и онбординге, чтобы упростить сложные процессы.
Пример: оформление заказа в интернет-магазине с шагами «Корзина → Доставка → Оплата → Подтверждение».

Пример:
Sogand

Scrollspy Navigation

Scrollspy Navigation — навигационное меню, которое автоматически подсвечивает активный пункт в зависимости от того, какой раздел страницы пользователь видит в данный момент. Часто используется на лендингах и длинных страницах для удобства ориентации.
Пример: в оглавлении статьи активным подсвечивается раздел, который сейчас на экране.

Пример:
Aurélien Salomon UX

App Drawer

App Drawer — выезжающее боковое меню в мобильных приложениях, которое скрыто за пределами экрана и открывается свайпом или нажатием на иконку (обычно «гамбургер» ☰). Используется для размещения навигации, настроек и дополнительных функций, не загромождая основной экран.
Пример: меню Gmail на Android, открывающееся слева с папками «Входящие», «Отправленные», «Черновики».

Пример:
Sandip Sharma

Купить гайд -50%

4.990₽ ~~10.000₽~~

ℹ️ Informational Components — Информационные элементы

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

Tooltip

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

Пример tooltip
Andrew Mialszygrosz

Popover

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

Пример popover
Mobbin

Toast / Snackbar

Toast / Snackbar — временное уведомление, которое появляется в верхней или нижней части экрана и исчезает через несколько секунд. Используется для уведомлений о событиях.
Пример: сообщение об успешной отправке формы или ошибке при попытке сохранить данные.

Пример snackbar
Hari Teja

Notification Bell

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

Пример Notification Bell
Pinterest

Alert / Banner

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

Пример Alert / Banner
Patryk Ilnicki

Modal / Dialog

Modal / Dialog — всплывающее окно, которое блокирует доступ к остальной части интерфейса, пока пользователь не выполнит действие (например, закроет окно или подтвердит действие).
Пример: окно подтверждения действий, таких как удаление или сохранение изменений.

Пример Modal / Dialog
Pinterest

Status Label

Status Label — метка, отображающая текущее состояние элемента или процесса, например, «Успех», «Ошибка» или «Информация».
Пример: статус задачи — «Выполнено» или «Не удалось выполнить».

Пример Status Label
Pinterest

Badge / Counter

Badge / Counter — индикатор количества чего-либо, обычно в виде небольшого кружка или прямоугольника, который показывает количество непрочитанных сообщений, задач и т. д.
Пример: значок с числом уведомлений на иконке почты.

Пример Badge / Counter
Julio Reguero

Loading Spinner

Loading Spinner — анимация, которая показывает процесс загрузки данных или выполнения операции, чтобы уведомить пользователя о том, что процесс ещё не завершён.
Пример: круговая анимация во время загрузки контента на странице.

Пример Loading Spinner Carlo Spagnola

Progress Bar

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

Пример Progress Bar
Equal

Бесплатный интенсив по диджитал дизайну

Личный куратор
3 видео-урока

Полезные PDF-файлы
Диплом об окончании

Записаться

Circular Loader

Circular Loader — круговой индикатор выполнения, представляющий собой анимацию в виде круга, который заполняется по мере выполнения задачи.
Пример: крутящийся круг при загрузке страницы.

Пример Circular Loader
Saijo George

Empty State Message

Empty State Message — сообщение, которое отображается, когда в приложении или на странице нет данных, например, пустой список или папка.
Пример: сообщение «Нет уведомлений» в пустой папке.

Пример Empty State Message
Denis

Help Icon / Inline Help

Help Icon / Inline Help — иконка помощи или встроенная подсказка, которая предоставляет пользователю дополнительную информацию или инструкцию по использованию элемента интерфейса.
Пример: иконка вопросительного знака, показывающая краткую инструкцию.

Пример Inline Help
Sarvesh Pansare

Hint / Subtext

Hint / Subtext — поясняющий текст, который помогает пользователю понять, что требуется для успешного выполнения действия. Обычно отображается под полем ввода.
Пример: текст «Введите ваш номер телефона» под полем для ввода.

Пример Subtext
Bruny

Onboarding Tip

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

Пример Onboarding Tip
Pinterest

📦 Containers — Контейнеры и структурные блоки

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

Card

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

Пример Card
Benjamin Conoir

Accordion

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

Пример Accordion
Godspower Ebiowei Ehioze

Panel

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

Пример Panel
Halal Lab

Section

Section — логический блок на странице, обычно разделяющий информацию по тематике или содержанию, создающий структуру для контента.
Пример: секция «О нас» на сайте компании.

Пример Section
Pinterest

Container / Box

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

Пример Container
Zach Robinson

Grid Layout

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

Пример Grid Layout
Pinterest

Flex Layout

Flex Layout — гибкая верстка на основе flexbox, которая позволяет элементам адаптироваться к различным размерам экрана и выстраиваться в линию, в зависимости от доступного пространства.
Пример: меню навигации, где элементы могут адаптироваться под ширину экрана.

Пример Flex Layout
Pinterest

List Group

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

Пример List Group
Nazar Vasylyshyn

Table

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

Пример Table
Hue & Machine

Expansion Panel

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

Пример Expansion Panel
Mark Cabritit

Carousel / Slider

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

Пример Carousel / Slider
Alex Prokhorov

Tabs Container

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

Пример Tabs Container
Abraham John

Form Wrapper

Form Wrapper — контейнер для формы, который группирует поля ввода и кнопки, предоставляя структуру для валидации и отправки данных.
Пример: обёртка для формы регистрации, включая поля для имени, email и кнопки отправки.

Пример Form Wrapper
Max McKenzie

Page Wrapper

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

Пример Page Wrapper
Ahmad Shadid

Drawer

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

Пример Drawer
Selcan Güler

Collapse Group

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

Пример Collapse Group
Danilo Tanic

Scrollable Container

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

Пример Scrollable Container
Pinterest

Купить гайд -50%

4.990₽ ~~10.000₽~~

Зачем знать UI-элементы?

Понимание структуры интерфейса помогает:

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

Хорошо спроектированный графический интерфейс помогает пользователю быстрее ориентироваться в системе, особенно если он сопровождается анимацией интерфейса, touch-интерфейсом и продуманными микровзаимодействиями.
При этом важно тестировать макеты и прототипы на этапе UX-тестирования, чтобы заранее выявить слабые места. А для новых пользователей незаменимым станет продуманный onboarding и форма обратной связи для уточнения деталей.
Именно такой компонентный подход сегодня лежит в основе большинства успешных проектов в сфере фронтенд-разработки и дизайна интерфейсов — от лендингов до сложных веб-приложений с отзывчивым дизайном.