В веб-разработке нередко возникает «языковой барьер» между менеджерами проектов и дизайнерами или разработчиками. Один термин может пониматься по-разному, а интерфейсные элементы – называться неточно. Эта статья – практичный справочник по основным UI-компонентам для менеджеров IT- проектов. Здесь приведены визуальные примеры, русские и английские названия компонентов, объяснения их назначения и правильные термины, которыми стоит пользоваться в общении с дизайнерами и разработчиками

Кнопки (Buttons)

Компонент Button представляет кнопку – элемент для запуска какого-либо действия по нажатию.

Основные виды кнопок:

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

Основные состояния кнопок:

• Обычное состояние (Default)
• При наведении курсора (Hove)
• При нажатии (Pressed)
• Отключена (Disabled)
• В процессе выполнения действия (Loading)

Иконки (Icons)

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

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

Важно: иконки в макете должны быть только в векторном формате. Использование PNG и других растровых форматов недопустимо 
— это влияет на качество и масштабируемость. Убедитесь, что все иконки добавлены как векторные объекты. Библиотеки иконок можно найти в FIGMA COMMUNITY

Типографика (Typography)

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

Важно обращать внимание:

• Межбуквенное расстояние (Letter Spacing) — это расстояние между буквами. Важно применять его осознанно, так как в выбранном шрифте, 
как правило, уже задана сбалансированная типографика, и дополнительная настройка может нарушить читаемость.
• Расстояние между строками (Line Height) — это параметр, определяющий вертикальный интервал между строками текста. 
От него напрямую зависит читаемость и визуальный ритм абзацев. Правильно подобранное значение помогает глазу 
легче сканировать текст и уменьшает визуальную нагрузку.

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

Сетка (Layout Guide)

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

Основные виды сетки:

Примеры использования сетки:

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

Навигация (Navigation)

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

Основные виды навигации:

• Меню (menu) – компонент меню, представляющий список пунктов (выпадающих или статичных), через которые пользователь 
может переходить к разным разделам или выполнять действия.
• Хлебные крошки (Breadcrumb) – это навигационная цепочка, которая показывает, где именно находится пользователь на сайте.
• Пагинация (Pagination) – компонент постраничной навигации. Отображает набор пронумерованных страниц 
и элементы управления для перехода между страницами
• Шаги (Steps) – компонент, отображающий прогресс прохождения многошагового процесса.

Текстовое поле ввода (Input)

Input — это поле на сайте или в приложении, куда пользователь может ввести данные: текст, email, пароль, число и т.д.
Например, строка для ввода имени или поисковый запрос.
Важно: при создании полей ввода (inputs) в дизайне обязательно учитывайте и прорабатывайте все их состояния: 
обычное, при наведении, при клике, с ошибкой, успешно заполненное и отключённое.

Состояния Input:

• Обычное состояние (Default)
• При наведении (Hover)
• При клике (Focus)
• Заполнено (Filled)
• Ошибка (Error)
• Отключенные (Disabled)

Выбор даты (DatePicker)

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

Элементы выбора (Toggle/ Selection Controls)

Toggle/ Selection Controls — это термины которые включают в себя такие элементы как: 

• Чекбокс (Checkbox) - позволяет нам выбрать сразу несколько вариантов из списка
• Радио баттон (Radio Button) - позволяет нам выбрать только один вариантов из списка
• Свичь (Switch) - вкл/ выкл какое-либо функционала, позволяет выбирать один или несколько вариантов

Важно: любой элемент управления формами (Checkbox, Radio Button и Switch) может отображаться с текстом или отдельно.

Важно: при создании любого элемента управления формами (Checkbox, Radio Button и Switch) в дизайне обязательно учитывайте
и прорабатывайте все их состояния: обычное, при наведении, при клике, выбранное и отключённое.

Уведомления о количестве

Основные виды уведомлений о количестве:

• -Карусель (Carousel) - интерактивный UI-элемент, который позволяет перелистывать несколько слайдов/элементов внутри одного блока.

  Где может использоваться:

1. Мобильные приложения — например, при онбординге или показе товаров; 

2. Интернет-магазины — для прокрутки карточек продуктов, новинок или акций;

3. Новостные сайты — отображение главных статей или баннеров;

4. Галереи — показ изображений, портфолио, отзывов.

• -Бейдж с числом (Badge) - это маленький круглый значок, размещённый поверх иконки или карточки, отображающий цифровое значение

  Где может использоваться: 1. Мобильные приложения — на иконках чатов, уведомлений, вкладках.

  2. Интернет-магазины — для прокрутки карточек продуктов, новинок или акций;

  3. Мессенджеры и почта — отображает количество непрочитанных сообщений;

  4. CRM, админки, панели управления — для отображения новых запросов, ошибок, задач.

• -Прогресс-бар (Progress) - показывает пользователю, на каком этапе находится текущий процесс. 
Может сопровождаться процентами, статусными иконками или текстом («loading», «done», «error»).
Где может использоваться: 1. Загрузка файлов — показывает, сколько процентов загружено;
 2. Формы и опросы — визуализирует, сколько шагов пройдено;
 3. Установка/обновление ПО — на экранах инсталляции;
 4. Обработка заказов — отслеживание этапов выполнения.

Другие элементы

• Пошаговый тур по интерфейсу/Онбординг (Tour/Onboarding) - это интерактивное руководство, предназначенное для ознакомления 
пользователей с функциями и элементами интерфейса программы или веб-сайта.

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

• Модальное окно (Modal) - это всплывающее окно, которое появляется поверх основного контента страницы
или приложения, временно блокируя взаимодействие с остальной частью интерфейса до тех пор, пока пользователь 
не совершит какое-либо действие в модальном окне (например, заполнит форму, подтвердит выбор или закроет его).

• Ползунок (Slider) - это элемент управления интерфейсом, который позволяет пользователю выбирать значение из определенного диапазона,
перемещая "ползунок" или "бегунок" вдоль горизонтальной или вертикальной шкалы.

• Тэг, метка (Tag) - это маленькая кнопка или слово, которое помогает описать или отсортировать информацию.
Как и где используется: 1. Для организации. Помогает группировать похожие вещи (например, статьи по темам, товары по характеристикам).
 2. Для поиска. Позволяет быстро находить нужную информацию, фильтруя её по этим меткам.