Контролы
Last updated
Last updated
Контролы – элементы интерфейса, с помощью которых пользователь взаимодействует с системой.
Поле ввода (инпут), плейсхолдер, фокус, кнопка-крестик, комбобокс, инпут многострочный, интуп с токенами, инпут с маской.
Поле ввода (инпут) – если больше 5 слов, то нужно многострочное. Название – существительное, без двоеточия, "введите", "ваш".
Плейсхолдер – подсказка в поле ввода, которая отображается, пока поле не заполнено.
Фокус – выбранное поле, место клика мышью или tab перехода.
Кнопка-крестик – контрол для очистки поля ввода.
Комбобокс – поле ввода со списком подсказок. Может быть со стрелкой и без стрелки. Плейсхолдер подсказывает "Введите или выберите из списка".
Поле с токенами – позволяет ввести много однородных элементов (токенов). Плейсхолдер типа "Введите номера через запятую". Название – существительное во множественном числе.
Поле с маской – плейсхолдер показывает количество символов и форматирование (пробелы, тире).
Ссылка (линк), кнопка, кнопка-меню, кебаб-меню, панель массовых действий, спойлер, аккордеон.
Ссылка (линк) – контрол для перехода на другую страницу.
Кнопка – контрол для выполнения действия. Название – инфинитив, ответ на вопрос "Что сделать", например - "Найти".
Кнопка-меню – содержит несколько команд, объединённых по смыслу.
Кебаб-меню – кнопка с тремя точками, содержит действия с объектом.
Панель массовых действий – позволяет выбрать действие, которое применится сразу к нескольким объектам. Обычно располагается снизу.
Спойлер – показывает и скрывает контент по клику.
Аккордеон – набор спойлеров, которые открываются/скрываются независимо.
Чекбокс, тогл, радиокнопка, переключатель, раскрывающийся список.
Чекбокс – «отметка в квадрате», выбор одного или нескольких параметров. Не запускает действие.
Тогл – «тумблер», переключатель состояния.
Радиокнопка – выбор одного варианта из нескольких. Повторный клик по кнопке не снимает выбор (в отличие от чекбокса).
Переключатель – замена радиокнопкам, горизонтальный вариант.
Раскрывающийся список – выбор из набора значений.
Табы, пейджинг (пагинация), ещёкалка, скролл (бесконечный скролл).
Табы – вкладки, группируют контент, помогают в навигации.
Пейджинг (пагинация) – постраничная навигация. Страница перезагружается при переходе.
Ещёкалка – способ представления большого количества информации, когда по умолчанию на странице только часть контента, остальное подгружается по команде "Ещё" (без перезагрузки страницы).
Скролл – прокрутка. Бесконечный скролл – погрузка контента по мере прокрутки.
Тултип, хинт, тост, модальное окно (лайтбокс), мини-модалка, сайдпейдж, наложение, залипание.
Тултип – всплывающая подсказка, которая появляется при наведении на элемент. Например, иконки без текста или сокращённые длинные названия.
Хинт – всплывающая подсказка, которая появляется при клике на элемент (или на знак вопроса рядом с элементом).
Тост – короткое немодальное уведомление, которое сообщает о результате выполненной команды. Чаще всего всплывает вверху или внизу, может содержать кнопку отмены и крестик.
Модальное окно – эмуляция диалогового окна браузера, появляется поверх страницы в ответ на действие пользователя. Если модальное окно блокирует доступ к основному содержанию страницы, оно называется лайтбоксом.
Мини-модалка – мало информации, 1-3 кнопки.
Сайдпейдж – модальное окно, которое появляется поверх основной страницы и занимает всю высоту окна браузера. Может блокировать или не блокировать основную страницу.
Наложение – сайдпейджа на сайдпейдж или модального окна на сайдпейдж.
Залипание – например, когда шапка остаётся при скролле сайдпейджа.
Спиннер, прогресс-бар, глобальный лоадер.
Спиннер – зацикленный индикатор, не отображает прогресс выполнения задачи. До 10 секунд. Если можно закрыть окно – нужно об этом сообщить. Название – разъяснение (например, "Проверка отчёта").
Прогресс-бар – индикатор, который отображает процесс выполнения задачи. Дольше 10 секунд. Лучше немодальный, можно добавить кнопку-крестик. Сколько осталось времени – округляем в большую сторону.
Глобальный лоадер – универсальный индикатор, отображает обмен данными с сервером. Обычно располагается у верхней границы экрана и выглядит как тонкая полоска. Для загрузки контента в новом экране лоадер используется вместе с мини-скелетоном.
Скелетон/мини-скелетон – статичная картинка, которая схематично показывает будущий контент. Обосновано для частотных сценариев.
Тултип-обучалка – подсказка с крестиком (или кнопкой "понятно"), которая появляется в ответ на срабатывание контекстного триггера (условие отображения).
