UI kit: элементы интерфейса

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

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

Основные типы элементов

→ Button (кнопка)

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

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

→ FAB (Floating Action Button, плавающая кнопка)

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

Используйте FAB только в том случае, если это наиболее подходящий способ представления основного действия экрана

→ Checkbox (чекбокс)

Чекбоксы позволяют пользователю выбрать один или несколько вариантов из списка. Отображаются в форме квадрата и галки

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

→ Radio Group (радио)

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

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

В радио по умолчанию должен быть выбран наиболее часто используемый параметр

→ Switch (переключатель)

Переключатели включают или выключают состояние одной конкретной настройки (вкл/выкл, да/нет)

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

→ Select (селект)

Селект – поле ввода с выпадающим меню для сбора информации из списка вариантов

→ Text Field / Input (текстовое поле)

Текстовые поля позволяют пользователям вводить и редактировать текст

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

→ Accordion (аккордеон)

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

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

→ Avatar (аватар)

Аватар – это визуальный способ представления юзера или компании в пользовательском интерфейсе

→ Date Picker (дейт пикер)

Date Picker позволяет пользователям выбирать дату

Помимо Date Picker существует компонент Time Picker, который позволяет пользователю выбрать время

→ Divider (разделитель)

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

→ Table (таблица)

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

→ Tooltip (подсказка)

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

Всплывающая подсказка появляется при наведении (hover) курсора к интересующему объекту или в случае недопустимого действия

→ Badge (значок)

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

→ Chip (чип / чипсы / фишки)

Чипсы – это компактные элементы, представляющие входные данные, атрибут или действие

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

→ Progress (прогресс)

Индикаторы хода выполнения (счетчики) отображают неопределенное время ожидания или отображают длительность процесса

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

→ Skeleton (скелет)

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

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

→ Backdrop (бэкдроп)

Backdrop сужает фокус пользователя до определенного элемента на экране

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

→ Dialog (диалог)

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

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

→ Snackbar / Alert (снэки / алерты)

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

Snackbar появляется временно и плавает над пользовательским интерфейсом, чтобы предоставить пользователям (некритические) обновления процессов приложения

→ App Bar (верхняя панель приложения)

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

Ее можно преобразовать в контекстную панель действий (Tool Bar) или использовать как панель навигации

→ Breadcrumbs (хлебные крошки)

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

→ Drawer (драйвер)

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

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

→ Link (ссылка)

Ссылка связывает веб-страницы и является элементом навигации. Она выступает как более легкий аналог кнопки. Ее нельзя использовать для основного действия (для этого есть кнопка)

→ Dropdown / Menu (выпадающий список)

Выпадающий список (раскрывающийся) – элемент интерфейса, позволяющий выбрать одно из нескольких заранее определённых значений параметра. Вы можете раскрыть выпадающий список наведением (hover) курсора мыши или нажатием (click) на селект

→ Tabs (табы / вкладки)

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

→ Pagination (пагинация)

Пагинация позволяет пользователю выбрать определенную страницу из диапазона страниц

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

2026-01-03 14:08 Для опытных UI Kit