Определение

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

Функциональность

Элемент отображает прогресс пользователя в многошаговых процессах, помогая ему ориентироваться на каждом этапе. Он визуализирует завершённые, текущие и предстоящие шаги, предоставляя чёткое понимание, на каком этапе находится процесс и сколько осталось до его завершения.

Дизайн и Стиль

Размер и Форма

Может использоваться в двух размерах: M и L

Компонент Step включает в себя иконку шага (Step icon), а также компоненты Заголовок и подзаголовок (Title&Subtitle). Они используются для указания названия шага и описания текущего статуса его выполнения. Иконка визуально обозначает этап, а текстовые компоненты дают пользователю больше информации о прогрессе или необходимости дополнительных действий.

Цвет и Контраст

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Текст

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

Правильно

Неправильно

Варианты

Активное состояние

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

Следующий шаг

Указывает на то, что пользователь может перейти к следующему шагу для заполнения данных или выполнения действия. Он визуально подчёркивает доступность следующего этапа, направляя пользователя по процессу и поддерживая его вовлечённость.

Шаг недоступен

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

Шаг пройден

Указывает на то, что пользователь выполнил необходимые действия для завершения шага.

Предупреждение

Указывает на то, что пользователь мог заполнить не все данные или ввел недопустимое значение.

Ошибка

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

Состояния

Элемент Step может использовать различные семантические цвета, такие как:

• Информационный
• Нейтральный
• Успешный
• Предупреждение
• Ошибочный

Анатомия

Для понимания анатомии входящих компонентов смотри примеры Заголовок и подзаголовок (Title&Subtitle)