[tradein][ux] Редизайн результата «Тихая уверенность»: одна цифра-герой (expected_sold) + confidence-driven типографика + снять тройное дублирование цен #1972

New issue

Closed

opened 2026-06-27 08:53:03 +00:00 by lekss361 · 1 comment

lekss361 commented

2026-06-27 08:53:03 +00:00

Owner

Из стратегического аудита 2026-06-27 (дизайн-фасет — ответ на вопрос «большая типографика?»).

Проблема

HeroSummary.tsx (731 стр): цена-герой утоплена в 28px среди десятка чисел равного веса; asking/sold дублируются 3-5× (hero-duo + hero-prices + hero-bars) → главный ответ тонет. Жаргон без расшифровки (CV/IMV/ДКП — частью пофикшено #1922).

Дизайн-направление: гибрид «Тихая уверенность» (Ledger × Terminal)

Большая типографика — ДА, но как носитель честности, не украшение (крупная цифра без видимого разброса усиливает иллюзию точности).

Лендинг + первый экран = «Большой счёт»: ОДНА цифра-герой (expected_sold — реальная цена сделки, primary headline вместо asking). Шрифт Manrope (уже в проекте, brand-режим), hero clamp(56,9vw,112px), цена clamp(44,7vw,88px). НЕ моноширинный (на 88px mono = «чек из терминала») → --font-sans + tabular-nums. Цифра чёрная (--fg), не синяя (эмоция = «факт»); синий --accent только на CTA + median-tick.
Range / источники / «как считали» = «Прозрачный терминал»: диапазон, CV, ДКП-коридор, аналоги — плотно/табл-но (--viz-*, tabular). Большая типографика сюда НЕ заходит.
Confidence-driven размер (защита от иллюзии точности): high → 88px/--fg + узкий бар, medium → 64px/--fg-2, low → 52px/--muted + широкий заштрихованный бар + «оценка приблизительная». Range всегда виден под ценой.
- dark-mode (терминал-зона + премиум-hero выигрывают; инверсия дешёвая по OKLCH-токенам).

DoD

Предусловие: снять тройное дублирование цен (hero-duo+hero-prices+hero-bars) — именно оно мешает герою читаться.
expected_sold → primary headline (additive, не молчаливый −30%).
Confidence-driven typography-токены (размер цены + вид бара зависят от confidence).
Целевой мокап (из аудита):

ул. Малышева 4 · 62 м² · 2-комн · 5/9 · кирпич
●●● высокая достоверность · 47 аналогов · разброс 8%
      Реальная цена сделки
      8,4 млн ₽                    ← Manrope/sans 88px, tnum
      ├──────────●─────────────┤   ← один тонкий бар
      7,9         8,4          9,1
      В объявлении 9,1 млн ₽ — уйдёт за ~30 дн.
      ▸ Как посчитали   ▸ 47 аналогов   ▸ PDF

scope/frontend, ux. Refs аудит 0627 (audits/Mera_Strategic_Audit_0627), #1871, #1837.

Из стратегического аудита 2026-06-27 (дизайн-фасет — ответ на вопрос «большая типографика?»). ## Проблема `HeroSummary.tsx` (731 стр): цена-герой утоплена в 28px среди десятка чисел равного веса; asking/sold дублируются **3-5×** (`hero-duo` + `hero-prices` + `hero-bars`) → главный ответ тонет. Жаргон без расшифровки (CV/IMV/ДКП — частью пофикшено #1922). ## Дизайн-направление: гибрид «Тихая уверенность» (Ledger × Terminal) **Большая типографика — ДА, но как носитель честности, не украшение** (крупная цифра без видимого разброса усиливает иллюзию точности). - **Лендинг + первый экран = «Большой счёт»**: ОДНА цифра-герой (**expected_sold** — реальная цена сделки, primary headline вместо asking). Шрифт `Manrope` (уже в проекте, brand-режим), hero `clamp(56,9vw,112px)`, цена `clamp(44,7vw,88px)`. **НЕ моноширинный** (на 88px mono = «чек из терминала») → `--font-sans` + `tabular-nums`. Цифра **чёрная** (`--fg`), не синяя (эмоция = «факт»); синий `--accent` только на CTA + median-tick. - **Range / источники / «как считали» = «Прозрачный терминал»**: диапазон, CV, ДКП-коридор, аналоги — плотно/табл-но (`--viz-*`, tabular). Большая типографика сюда НЕ заходит. - **Confidence-driven размер** (защита от иллюзии точности): `high → 88px/--fg + узкий бар`, `medium → 64px/--fg-2`, `low → 52px/--muted + широкий заштрихованный бар + «оценка приблизительная»`. Range всегда виден под ценой. - + dark-mode (терминал-зона + премиум-hero выигрывают; инверсия дешёвая по OKLCH-токенам). ## DoD - **Предусловие**: снять тройное дублирование цен (`hero-duo`+`hero-prices`+`hero-bars`) — именно оно мешает герою читаться. - expected_sold → primary headline (additive, не молчаливый −30%). - Confidence-driven typography-токены (размер цены + вид бара зависят от confidence). - Целевой мокап (из аудита): ``` ул. Малышева 4 · 62 м² · 2-комн · 5/9 · кирпич ●●● высокая достоверность · 47 аналогов · разброс 8% Реальная цена сделки 8,4 млн ₽ ← Manrope/sans 88px, tnum ├──────────●─────────────┤ ← один тонкий бар 7,9 8,4 9,1 В объявлении 9,1 млн ₽ — уйдёт за ~30 дн. ▸ Как посчитали ▸ 47 аналогов ▸ PDF ``` scope/frontend, ux. Refs аудит 0627 (`audits/Mera_Strategic_Audit_0627`), #1871, #1837.

lekss361 added the

priority/p2

scope/frontend

tradein

labels 2026-06-27 08:53:22 +00:00

lekss361 commented

2026-07-03 21:52:10 +00:00

Author

Owner

Живая проверка: файлы этого issue относятся к недостижимому MVP-роуту, закрываю

Проверил живьём: HeroSummary.tsx/IMVBenchmark.tsx/CianValuationCard.tsx/EstimateForm.tsx и т.д. — это компоненты tradein-mvp/frontend/src/components/trade-in/ (без /v2/), используемые корневым роутом tradein-mvp/frontend/src/app/page.tsx (/trade-in). Прямой запрос изнутри docker-сети (curl -sL http://tradein-frontend:3000/trade-in) даёт финальный effective_url=.../trade-in/v2 — корневой роут редиректит на v2, контент = «МЕРА» (v2-брендинг), не MVP-вёрстка.

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

Принцип «одна цифра-герой + confidence-driven типографика» уже реализован в v2 (ResultPanel.tsx): «ОЖИДАЕМАЯ ЦЕНА СДЕЛКИ» — доминирующая карточка (40px, accentDeep, рамка/glow), asking уменьшен (30px), ДКП демоутирован (28px, muted, узкая колонка после #1991). Confidence-driven масштабирование (high/medium/low → разный размер) не реализовано буквально как в этом issue, но если это всё ещё желаемо — заведи как fresh issue на конкретные v2-файлы, эта формулировка устарела.

Живая, актуальная (grounded to file:line) аудит-цепочка по v2 — issues #2062/#2081, там и продолжится реальная UX-работа.

Закрываю как superseded — недостижимый код.

## Живая проверка: файлы этого issue относятся к недостижимому MVP-роуту, закрываю Проверил живьём: `HeroSummary.tsx`/`IMVBenchmark.tsx`/`CianValuationCard.tsx`/`EstimateForm.tsx` и т.д. — это компоненты `tradein-mvp/frontend/src/components/trade-in/` (без `/v2/`), используемые корневым роутом `tradein-mvp/frontend/src/app/page.tsx` (`/trade-in`). Прямой запрос изнутри docker-сети (`curl -sL http://tradein-frontend:3000/trade-in`) даёт финальный `effective_url=.../trade-in/v2` — корневой роут редиректит на v2, контент = «МЕРА» (v2-брендинг), не MVP-вёрстка. Живой прод пользователь физически не может увидеть эти компоненты — код существует в дереве, но недостижим. Принцип «одна цифра-герой + confidence-driven типографика» **уже реализован** в v2 (`ResultPanel.tsx`): «ОЖИДАЕМАЯ ЦЕНА СДЕЛКИ» — доминирующая карточка (40px, accentDeep, рамка/glow), asking уменьшен (30px), ДКП демоутирован (28px, muted, узкая колонка после #1991). Confidence-driven масштабирование (high/medium/low → разный размер) не реализовано буквально как в этом issue, но если это всё ещё желаемо — заведи как fresh issue на конкретные v2-файлы, эта формулировка устарела. Живая, актуальная (grounded to file:line) аудит-цепочка по v2 — issues #2062/#2081, там и продолжится реальная UX-работа. **Закрываю как superseded — недостижимый код.**

lekss361 closed this issue

2026-07-03 21:52:38 +00:00