Перейти к основному содержимому

Функциональные элементы

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Аналитику Тестировщику

Play ITЗагрузка интерактивного демо…

Функциональные элементы​

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

image.png

Поля ввода — это элементы, предназначенные для ввода текстовой информации пользователем. Они могут быть однострочными (input) или многострочными (textarea).

image-1.png

Выпадающие списки (dropdowns) позволяют пользователю выбирать один или несколько вариантов из предложенного списка. Они экономят место на экране и упрощают выбор.

image-2.png

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

image-3.png

Переключатели (toggle switches) позволяют пользователю включать или выключать определенные функции. Они работают по принципу "вкл/выкл". Их также называют флагами.

image-4.png image-5.png

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

  • Выполненная задача
  • Невыполненная задача
  • Другая задача

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

image-6.png

Аккордеон (Accordion) — блок с раскрывающимися секциями: виден заголовок, по клику открывается содержимое, остальные секции при этом могут сворачиваться. Часто используют в FAQ, настройках и длинных формах, чтобы не перегружать экран.

Типичные правила:

  • заголовок секции кликабелен целиком, не только иконка «стрелка»;
  • состояние «открыто/закрыто» видно и по иконке, и по aria-expanded;
  • в HTML5 для простых случаев достаточно пары <details> + <summary> без JavaScript;
  • если секций много, не открывайте все сразу — пользователь теряет ориентир.

Пример вёрстки и стилей — аккордеон в CSS.

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

image-7.png

Содержание