Элементы интерфейса веб-приложений

Элементы интерфейса веб-приложений

Практический справочник по UI-компонентам

01 / Навигация
Навигация, Breadcrumbs, Tabs
Паттерны навигации внутри страницы и между разделами приложения.
Breadcrumbs / Хлебные крошки
Главная Проекты Дизайн Компоненты
Когда: при вложенности 3+ уровня. Помогают понять где ты и вернуться назад.
Tabs / Вкладки
Обзор
Активность
Настройки
Контент активной вкладки
Когда: переключение между связанными разделами одного экрана. Максимум 5–6 вкладок.
Segmented Control
День
Неделя
Месяц
Список
Сетка
Отличие от Tabs: для переключения режимов отображения, не разделов. Единый контрол с выбором.
02 / Кнопки
Кнопки и действия
На каждом экране одна primary кнопка — главное действие. Никогда не ставьте две primary рядом.
Типы кнопок
Primary — главное действие.
Secondary — второстепенное.
Ghost — менее важное, не отвлекает.
Danger — деструктивное действие.
Состояния и размеры
Disabled — opacity 40%, cursor not-allowed. Icon button — квадратная кнопка только с иконкой.
FAB / Floating Action Button
Фиксирована в углу экрана поверх контента
Когда: одно главное действие всегда доступно — создать, добавить. В веб-приложениях реже чем в мобайле.
03 / Формы
Формы и элементы управления
Всегда показывайте состояния: default, focus, error, disabled. Без этого форма выглядит незаконченной.
Text Input — состояния
Минимум 8 символов
Label всегда над полем. Error: красная рамка + сообщение под полем.
Search Bar, Select, Date, Stepper
Stepper — для чисел с шагом. Всегда ограничивай минимум и максимум.
Checkbox, Radio, Toggle, Slider
Тёмная тема
Автосохранение
Прозрачность60%
Toggle — вкл/выкл. Checkbox — множественный выбор. Radio — один вариант.
File Upload / Загрузка файла
📎
Перетащите файл или нажмите
PNG, JPG, PDF до 10 МБ
Drag-and-drop зона. При наведении меняет цвет. При клике открывает диалог выбора файла.
Combobox (поиск + выбор)
Combobox = Input + Dropdown. Поддерживает поиск по вариантам. Отличается от Select тем что можно вводить текст.
04 / Данные
Таблицы и списки
Основные паттерны для отображения структурированных данных.
Table / Таблица
УчастникРольСтатусАктивность
МА
Марина Абрамова
Дизайнер Активна Сегодня 14:20
АК
Алексей Козлов
Разработчик Офлайн 3 дня назад
Заголовки — uppercase, мелкий шрифт. Hover строки — лёгкая подсветка. Действия в последней колонке.
Stacked List / Список
🎨
Дизайн-система
Обновлено сегодня
Готово
📱
Мобильное приложение
В работе
В работе
🖥
Веб-приложение
Не начато
Черновик
Вертикальный список с иконкой + контент + мета. Весь элемент кликабелен.
Pagination / Пагинация
Показано 11–20 из 98 результатов
Активная страница — синяя заливка. Стрелки видны всегда. Многоточие при большом количестве страниц.
Grid List / Сетка карточек
🎨
Дизайн-система
14 компонентов
📱
Мобайл
8 экранов
+
Новый
Отображение данных сеткой вместо таблицы. Когда важна визуальная составляющая — превью, фото, иллюстрация.
05 / Карточки
Cards и Accordion
Карточка — основной паттерн группировки контента. Accordion — для скрытия вторичной информации.
Card — базовая
Дизайн-система v2.0
Обновлено 2 часа назад
Готово
Новые компоненты, токены и правила использования.
Header (заголовок + метка) + Body (контент) + Footer (действия).
Card — метрика
Участники
14
▲ +3 за неделю
Просмотры
89
за апрель
Лейбл мелкий сверху, число крупное, динамика снизу. Стандарт для дашбордов.
Accordion
Что входит в подписку?
Видеоуроки, задания, прямые эфиры и марафон с публикацией на Dribbble.
Можно отменить?
Да, в любой момент. Доступ до конца оплаченного периода.
Где материалы?
В закрытом Telegram-канале. Доступ активен пока действует подписка.
Когда: FAQ, настройки, длинные разделы не нужные всем сразу. Раскрывается по клику.
06 / Статусы и метки
Badge, Chip, Status Dot, Rating
Компоненты для отображения категорий, статусов и тегов.
Badge / Бейджи
Активен Ошибка В процессе Архив ✓ Завершено ✕ Отклонено
Зелёный — хорошее. Красный — ошибка. Синий — процесс. Серый — неактивное.
Chip / Теги
UX/UI Веб-приложения ✕ Мобайл Figma Прототипирование
Chip — интерактивный тег для фильтрации и выбора категорий. Может иметь кнопку удаления.
Status Dot и Rating
Онлайн
Отошёл
Недоступен
Офлайн

Оцените урок
Status dot — маленькая точка рядом с аватаром. Rating — звёздный рейтинг для оценки.
07 / Прогресс и загрузка
Progress, Skeleton, Loading
Система всегда должна давать обратную связь о процессах.
Progress Bar
Профиль заполнен75%
Места в клубе14/20
Ошибки3
Всегда показывай числовое значение рядом. Цвет несёт смысл: синий — нейтральный, зелёный — хорошо, красный — проблема.
Loading Indicator
Загружаем данные...
Spinner — анимированный индикатор загрузки. Может быть отдельным или внутри кнопки.
Skeleton / Загрузка контента
Серые блоки-заглушки пока грузится контент. Повторяют форму реальных элементов. Лучше чем просто спиннер.
08 / Оверлеи
Toast, Dialog, Dropdown, Tooltip, Banner
Компоненты которые появляются поверх основного контента.
Toast / Уведомления
Сохранено
Изменения применены
Ошибка
Не удалось загрузить файл
Предупреждение
Файл близок к лимиту
Подсказка
Данные обновятся автоматически
Появляется в углу экрана на 3–5 секунд. Не перекрывает контент. Показывает результат действия.
Tooltip, Kbd, Dropdown
?
Наведи чтобы увидеть
Tooltip при наведении
Горячие клавиши:
+SСохранить
+ZОтменить
✏️ Редактировать
📋 Дублировать
🗑 Удалить
Dropdown — деструктивные действия внизу, отделены разделителем. Kbd — визуализация горячих клавиш.
Dialog и Banner
Dialog — блокирует фон, для важных действий и подтверждений. Banner — не исчезает автоматически, для важных сообщений.
Empty State
📂
Проектов пока нет
Создайте первый проект чтобы начать работу
Никогда просто пустота. Структура: иконка + заголовок + описание + кнопка действия.
09 / Остальные компоненты
Toolbar, Аватары, Divider
Вспомогательные компоненты интерфейса.
Toolbar
Панель инструментов с группами кнопок. Группы разделены вертикальной линией. Активное состояние — подсветка.
Аватары
МА
ИС
АК
МА
ИС
АК
+5
SM 28px — таблицы. MD 36px — карточки. LG 48px — профиль. Stack — группа участников с перекрытием.
Divider / Разделитель
Блок выше

Блок ниже
или
Другой вариант
Горизонтальная линия для разделения контента. Может содержать текст посередине.
Удалить проект?
Это действие нельзя отменить. Все данные и файлы будут удалены навсегда.