Контролы

Контролы – элементы интерфейса, с помощью которых пользователь взаимодействует с системой.

Поля

Поле ввода (инпут), плейсхолдер, фокус, кнопка-крестик, комбобокс, инпут многострочный, интуп с токенами, инпут с маской.

Поле ввода (инпут) – если больше 5 слов, то нужно многострочное. Название – существительное, без двоеточия, "введите", "ваш".

Плейсхолдер – подсказка в поле ввода, которая отображается, пока поле не заполнено.

Фокус – выбранное поле, место клика мышью или tab перехода.

Кнопка-крестик – контрол для очистки поля ввода.

Комбобокс – поле ввода со списком подсказок. Может быть со стрелкой и без стрелки. Плейсхолдер подсказывает "Введите или выберите из списка".

Поле с токенами – позволяет ввести много однородных элементов (токенов). Плейсхолдер типа "Введите номера через запятую". Название – существительное во множественном числе.

Поле с маской – плейсхолдер показывает количество символов и форматирование (пробелы, тире).

Действия

Ссылка (линк), кнопка, кнопка-меню, кебаб-меню, панель массовых действий, спойлер, аккордеон.

Ссылка (линк) – контрол для перехода на другую страницу.

Кнопка – контрол для выполнения действия. Название – инфинитив, ответ на вопрос "Что сделать", например - "Найти".

Кнопка-меню – содержит несколько команд, объединённых по смыслу.

Кебаб-меню – кнопка с тремя точками, содержит действия с объектом.

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

Спойлер – показывает и скрывает контент по клику.

Аккордеон – набор спойлеров, которые открываются/скрываются независимо.

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

Чекбокс, тогл, радиокнопка, переключатель, раскрывающийся список.

Чекбокс – «отметка в квадрате», выбор одного или нескольких параметров. Не запускает действие.

Тогл – «тумблер», переключатель состояния.

Радиокнопка – выбор одного варианта из нескольких. Повторный клик по кнопке не снимает выбор (в отличие от чекбокса).

Переключатель – замена радиокнопкам, горизонтальный вариант.

Раскрывающийся список – выбор из набора значений.

Навигация

Табы, пейджинг (пагинация), ещёкалка, скролл (бесконечный скролл).

Табы – вкладки, группируют контент, помогают в навигации.

Пейджинг (пагинация) – постраничная навигация. Страница перезагружается при переходе.

Ещёкалка – способ представления большого количества информации, когда по умолчанию на странице только часть контента, остальное подгружается по команде "Ещё" (без перезагрузки страницы).

Скролл – прокрутка. Бесконечный скролл – погрузка контента по мере прокрутки.

Поп-апы

Тултип, хинт, тост, модальное окно (лайтбокс), мини-модалка, сайдпейдж, наложение, залипание.

Тултип – всплывающая подсказка, которая появляется при наведении на элемент. Например, иконки без текста или сокращённые длинные названия.

Хинт – всплывающая подсказка, которая появляется при клике на элемент (или на знак вопроса рядом с элементом).

Тост – короткое немодальное уведомление, которое сообщает о результате выполненной команды. Чаще всего всплывает вверху или внизу, может содержать кнопку отмены и крестик.

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

Мини-модалка – мало информации, 1-3 кнопки.

Сайдпейдж – модальное окно, которое появляется поверх основной страницы и занимает всю высоту окна браузера. Может блокировать или не блокировать основную страницу.

Наложение – сайдпейджа на сайдпейдж или модального окна на сайдпейдж.

Залипание – например, когда шапка остаётся при скролле сайдпейджа.

Индикаторы прогресса

Спиннер, прогресс-бар, глобальный лоадер.

Спиннер – зацикленный индикатор, не отображает прогресс выполнения задачи. До 10 секунд. Если можно закрыть окно – нужно об этом сообщить. Название – разъяснение (например, "Проверка отчёта").

Прогресс-бар – индикатор, который отображает процесс выполнения задачи. Дольше 10 секунд. Лучше немодальный, можно добавить кнопку-крестик. Сколько осталось времени – округляем в большую сторону.

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

Скелетон/мини-скелетон – статичная картинка, которая схематично показывает будущий контент. Обосновано для частотных сценариев.

Тултип-обучалка – подсказка с крестиком (или кнопкой "понятно"), которая появляется в ответ на срабатывание контекстного триггера (условие отображения).