Дизайн-система · v3

UX-лаборатория

Живые паттерны поведения экрана: якоря и scroll, адаптив, PWA-установка, hash-роутинг. Канон — docs/10-ux-patterns.md.

Якоря и scroll

Якорные чипы выше скроллятся к секциям с scroll-margin-top: calc(var(--lv-header-h) + 12px) — заголовки не прячутся под sticky-шапкой. Прокрутите страницу ниже 480px — появится каноническая кнопка «наверх».

Кнопка «наверх»

Капсула 48px на gradient-brand, справа над нижней навигацией, safe-area учтён. Порог появления — 480px, показ через opacity + translateY (только transform/opacity).

scrollY: 0 px · порог 480 px

Внешний вход по якорю

Ссылка вида 06-ux-lab.html#s-pwa из письма или соцсети: если контент догружается после отрисовки, позиционирование повторяется на load — сниппет в docs/10 §1.2.

Адаптив

Два порога — 640 и 900 — плюс токены каркаса. Медиазапросы используют литералы (в @media нельзя var()), значения сеток — из --lv-container*.

Живой индикатор брейкпоинта

Капсула 480px

ширина окна: — px

012 кол. → 4 при ≥640

02gap 12px

03плитки 12px

04safe-area внизу

PWA-установка

Честный флоу beforeinstallprompt: своё приглашение — только когда браузер его отдал; в standalone всё установочное скрыто; на iOS — инструкция с i-share.

Установить «Лови»

Состояние определяется на каждом входе и никогда не показывает лишнего.

Hash-роутинг

Роуты — #/путь, якоря страницы — #блок; роутер различает их по префиксу. Табы — настоящие ссылки <a href="#/…">: работают назад/вперёд, средний клик и «открыть в новой вкладке».

Обзор Награды История

Экран «Обзор»

Панель по умолчанию видна без JS (прогрессивное улучшение): роутер только синхронизирует location.hash с DOM. Неизвестный роут ведёт сюда же.

try lovii-design…/06-ux-lab.html#/chto-ugodno → дефолт «Обзор»

Текущий роут: #