🚧Stepper
Обзор
Степпер или индикатор прогресса — это визуальное представление прогресса пользователя через набор шагов, направляющих к завершению определенного процесса.
Логический порядок
Разместите шаги в порядке логики и требований к выполнению. Лучше размещать шаги слева направо, но при недостатке пространства или особенностях проектирования страницы предусмотрен вертикальный степпер.
Шаги и их доступность
Информируйте пользователя о текущем шаге - о том, где он в настоящее время находится в процессе или задаче. Разрешите пользователю вернуться к предыдущим шагам, чтобы просмотреть отправленные данные. Это даст ему ощущение контроля.
Названия шагов
Степпер должен сопровождаться четкими названиями шагов, указывающими, что пользователь выполнит на каждом шаге. Опишите название одним-двумя словами. Дополнительно можно использовать вспомогательный текст (он также должен быть коротким и емким).
Допускается использование степпера без названий шагов и вспомогательного текста при условиях:
степпер содержит 3-4 шага
контекст степпера понятен пользователю (это доказано пользовательскими исследованиями).
Проверка
Используйте проверку, чтобы подтвердить, что предыдущий шаг был завершен. Если пользователь не может перейти к следующему шагу без предварительного выполнения задачи, используйте встроенное уведомление (Message), чтобы проинформировать его об этом.
Описание работы
Типы шагов
Общие правила и принципы
Каждый шаг обозначается своим порядковым номером. Если шаг имеет индикацию Success, Warning, Danger, то при выборе такого шага его порядковый номер меняется на иконку-индикатор.
Выбран шаг №1. Его Status: Default (действия не выполнены)
Выбран шаг №1. Его Status: Success (действия выполнены)
Выбран шаг №2.
Переход от одного шага к другому может осуществляться одним из следующих способов или комбинацией этих способов:
кликом на кнопки перехода (панель снизу)
кликом на кнопки перехода + кликом на шаг (кружок с номером / галочкой + название).
Переход только прокликиванием шагов не используется. Если шаг заполнен, то кнопка перехода к следующему оформляется как Fill Primary:
Есть 2 возможных сценария:
Пользователь может просмотреть вкладки с последующими шагами
Шаг заблокирован до тех пор, пока не выполнен предыдущий шаг.
С возможностью просмотра следующих шагов
Текущий шаг не выполнен, кнопка перехода на следующий шаг Outline secondary:
Без возможности просмотра следующих шагов
Проектировщик интерфейса может запретить переход на следующий шаг без выполнения предыдущего. В примере ниже переход к оплате заблокирован до внесения информации о получателе.
Анатомия
Step number. Номер шага.
Name. Название шага, не обязательное, но рекомендуемое.
Divider. Линия-разделитель, нет у последнего шага.
Размеры и оформление
Внутренние отступы
Цвет
Внешние отступы
Stepper размещается в контейнер, значения отступов внутри которого описаны в Grids. Рекомендуемые отступы: 16рх, 8рх.
Аналогично для вертикального Stepper:
Адаптивность
Состояния (State)
Интерактивность
Для повышения доступности клика в качестве интерактивной задается область шага (включающая номер шага и название). Клик по шагу приводит к переходу на него:
Состояния (State)
3 основных состояния шага:
Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с шагом (шаг при этом может быть выбран / не выбран, выполнен, быть следующим или текущим)
Hover — при наведении курсора
Disable — неактивное (недоступное для взаимодействия).
Фокус (Focus)
Так же существует состояние Focus. Он появляется в момент выбора шага с помощью клавиатуры или при клике на него, и может быть совмещен с состояниями Default, Hover. Невозможен в состоянии Disabled.
Взаимодействие с клавиатуры
Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом компоненте. Если шаги располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →.
Last updated
Was this helpful?