Wireframe
Шапка страницы
Способ доставки
Адрес
Временной слот
UI Structure
-
01Контекстный баннерПоявляется только при выборе >1 даты. Объясняет логику: «Вы выбрали N дат — это N отдельных посылок». Показывается один раз, закрывается крестиком. Не повторяется при возврате на шаг.
-
02Прогресс заполненияГоризонтальная полоса из N сегментов — по числу посылок. Закрашивается по мере подтверждения блоков. При 1–2 посылках скрыт — избыточен. Появляется от 3 и выше.
-
03Список блоков доставки (аккордеон)Один открытый блок — остальные свёрнуты. После подтверждения блок сворачивается и показывает краткое summary. Следующий незаполненный открывается автоматически. Нумерация «Посылка 1», «Посылка 2» — только при N > 1.
-
04Тело блока доставкиСтруктура полей: (1) Способ доставки — сегментированный контрол «Курьер / ПВЗ». (2) Адрес или ПВЗ — поле меняется в зависимости от выбора. (3) Временной слот — только для курьера, скрыт для ПВЗ. (4) Кнопка «Подтвердить» — активна при заполнении всех обязательных полей.
-
05Summary блока (свёрнутое состояние)Когда блок подтверждён и свёрнут — в заголовке отображается: способ, адрес (обрезанный до 30 символов), слот если курьер. Номер меняет цвет с primary на grey. Статус «✓ Готово».
-
06Сайдбар: состав заказа + доставкиФиксированный справа. Показывает позиции заказа, затем блок «Доставки» — по одной строке на посылку со способом и ценой. Обновляется в реальном времени. Итого пересчитывается автоматически.
Visual Hierarchy
| Уровень | Элемент | Визуальный приём | Цель |
|---|---|---|---|
| H1 | Заголовок шага «Доставка» | 36px / weight 300 / lh 48px | Ориентация в потоке оформления |
| H2 | Заголовок блока посылки | 14px / weight 500 + нумерованный маркер primary-400 | Разграничение независимых блоков |
| H3 | Подзаголовки полей внутри блока | 12px / weight 700 / uppercase / grey-300 | Структурирование формы внутри блока |
| Body | Поля ввода, слоты, адрес | 14px / weight 400 / border grey-200 | Основной уровень взаимодействия |
| Meta | Статусы, summary в свёрнутом блоке | 12px / grey-400 / строчными | Контекст без отвлечения от действий |
| CTA | «Подтвердить» и «Перейти к оплате» | primary-400 fill / 14px disabled при незаполненности | Управление потоком — явный призыв к действию |
UX Notes
Нумерация только при N > 1
При одной дате — нет «Посылка 1», просто «Доставка». Нумерация появляется только когда есть смысл различать посылки между собой.
Авто-переход к следующему блоку
После нажатия «Подтвердить» блок сворачивается, следующий незаполненный открывается автоматически. Пользователь не ищет куда идти дальше.
Редактирование = открыть блок
Свёрнутый подтверждённый блок можно кликнуть — он раскрывается с сохранёнными данными. Нет отдельного режима «редактирования».
Слот только для курьера
Поле временного слота скрыто при выборе ПВЗ — оно нерелевантно. Форма не загружает пользователя полями, которые не нужны.
Disable кнопки оплаты
«Перейти к оплате» заблокирована, пока хотя бы один блок не подтверждён. Статус кнопки — явный индикатор прогресса для опытных пользователей.
Масштабирование 5–10 дат
При N ≥ 3 добавляется прогресс-полоса с сегментами. При N ≥ 5 — список дат в сайдбаре схлопывается в компактный вид со счётчиком «X из Y заполнено».