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

Элементы ввода и выбора

  • Input — поле ввода текста в одну строку. Логин, email, поиск.
  • Textarea — поле ввода в несколько строк. Комментарий, описание задачи.
  • Select — выпадающий список, выбор одного из готовых вариантов. Страна, валюта.
  • Autocomplete — выпадающий список с поиском по вводу. Город, адрес.
  • Chips — «таблетки» для множественного выбора и тегов. Фильтры на маркетплейсе.
  • Radio button — кружок, выбор одного из нескольких. Способ оплаты.
  • Checkbox — квадрат с галочкой, вкл/выкл или множественный выбор. «Согласен с условиями».
  • Toggle / Switch — переключатель вкл/выкл. Тёмная тема, уведомления.
  • Slider — ползунок для значения из диапазона. Цена от-до, громкость.
  • Date picker — выбор даты из календаря. Дата рождения, бронирование.
  • Stepper — +/− для числового значения. Количество товара.

Навигация и структура

  • Burger menu (☰) — три полоски, прячет навигацию. Мобильные сайты.
  • Kebab menu (⋮) — три точки вертикально, доп. действия. Карточка товара, пост.
  • Meatball menu (•••) — три точки горизонтально, доп. действия. iOS, macOS.
  • Tab bar — вкладки для переключения разделов. Нижняя навигация в приложении.
  • Breadcrumbs — цепочка «Главная › Каталог › Товар». Навигация на сайте.
  • Sidebar — боковая панель с меню. Админки, почта, Telegram Desktop.
  • Pagination — переключение страниц (1, 2, 3… →). Результаты поиска.
  • Carousel — горизонтальная прокрутка карточек. Сторис, баннеры.
  • Accordion — раскрывающийся блок по клику на заголовок. FAQ, настройки.

Всплывающие элементы и обратная связь

  • Modal — окно поверх страницы, блокирует фон. «Вы уверены?».
  • Bottom sheet — панель снизу экрана (мобильный). Карточка ресторана в Яндекс Картах.
  • Drawer — панель сбоку, выезжает слева/справа. Меню, корзина.
  • Popover — маленькое окно у элемента по клику. Детали, мини-форма.
  • Tooltip — подсказка при наведении. Иконка «?» с пояснением.
  • Toast — короткое уведомление, исчезает само. «Скопировано!».
  • Snackbar — уведомление снизу с кнопкой действия. «Письмо удалено. Отменить?».
  • Alert / Banner — заметное сообщение, не исчезает само. «Обновите приложение».
  • Skeleton — серый силуэт контента при загрузке. Мерцающие плейсхолдеры.
  • Spinner / Loader — крутилка загрузки.
  • Progress bar — полоска прогресса. «Загрузка 67%».
  • Badge — кружок-счётчик на иконке. 3 непрочитанных сообщения.
  • Avatar — круглая картинка пользователя.
  • Tag — метка/категория. «Новинка», «Скидка», статус задачи.

Состояния и поведение (не компоненты, но важно для ТЗ)

  • Hover — состояние при наведении курсора. На мобилке его нет — частый баг в ТЗ.
  • Focus — элемент выбран (tab или клик). Поле ввода с рамкой.
  • Disabled — заблокирован, взаимодействовать нельзя. Серая некликабельная кнопка.
  • Active / Pressed — момент нажатия. Кнопка «вдавлена».
  • Empty state — экран без данных. «У вас пока нет заказов».
  • Error state — состояние ошибки. Красная рамка + «введите корректный email».
  • Loading state — состояние загрузки. Skeleton или spinner вместо контента.
  • Placeholder — подсказка внутри пустого поля. Серый текст «введите имя».

Откуда вообще эти названия?

Burger — три полоски похожи на бургер в разрезе. Придумал Норм Кокс в 1981 году для Xerox Star, первого коммерческого ПК с GUI. Kebab — три точки вертикально, как мясо на шампуре; популяризировал Google в Material Design. Meatball — три точки горизонтально, фрикадельки в ряд; используется в iOS и macOS.

Breadcrumbs — «хлебные крошки» из сказки про Гензеля и Гретель: дети оставляли крошки, чтобы найти дорогу домой. Toast — уведомление «выскакивает» снизу, как тост из тостера (родом из Android). Skeleton — «скелет» контента: серые плейсхолдеры повторяют форму будущих элементов. Accordion открывается и закрывается, как меха аккордеона, а Carousel крутит элементы по кругу, как лошадок на карусели.

Знаешь название — говоришь с фронтом на одном языке. Не знаешь — «сделай вон ту штуку» и три итерации переделок.