Density & Information
Один продукт может стоять на витрине, помещаться в карман и жить в терминале аналитика — одновременно. Плотность — это договор между задачей пользователя и количеством информации, которое мы кладём в поле его зрения.
Три режима
У AIST.tech три поверхности и три плотности. Они не стилистические — они функциональные.
- Section Y
- 96–160 px
- Container
- 1152 max
- Body
- 16–18 px / 1.6
- H1
- 48–72 px
- Card pad
- 24–32 px
- Section Y
- 32–64 px
- Container
- fluid + sidebar 240
- Body
- 14–15 px / 1.55
- H1
- 24–32 px
- Card pad
- 16–24 px
- Section Y
- 16–32 px
- Container
- fluid, max 1920
- Body
- 12–13 px / 1.45
- H1
- 18–22 px
- Row height
- 28–32 px
Один контент — три плотности
Сравнение режимов на одной задаче — показать продукты пользователю.
Голосовой агент для колл-центра.
Снижает время отклика на 62%, обрабатывает первую линию полностью.
| id | product | calls | δ 24h |
|---|---|---|---|
| vo-01 | Voice Op | 1284 | +18% |
| ma-02 | MI Analyst | 12 | +4% |
| de-03 | Doc Ext | 98 | −2% |
| ra-04 | RAG | 14892 | +1% |
| cb-05 | ChatBot | 442 | +9% |
| ag-06 | Agent SDK | 7 | −14% |
| en-07 | Enricher | 2104 | +22% |
| tr-08 | Translator | 81 | +0% |
Type ramp по режимам
Иерархия не исчезает в плотных режимах — она сжимается. H1 в Analyst = 22 px, но он всё ещё в два раза крупнее body.
Эвристика — какой режим выбрать
Если непонятно — на какой вопрос отвечает экран.
| Задача | Что выбрать | Сигнал |
|---|---|---|
| «Объяснить, почему нам можно доверять» | Marketing | Скорость убеждения. Один экран — одна мысль. Воздух — часть аргумента. |
| «Помочь пользователю принять решение» | Marketing / ЛК hero | 3–5 модулей. Hairline-карточки. Иерархия > плотность. |
| «Управлять 5–20 объектами» | ЛК | List rows, sidebar, tabular figures, sticky header. |
| «Найти аномалию в 1 000+ строк» | Analyst | Тёмный фон, 12 px mono, многоколоночные таблицы, sparklines. |
| «Сравнить несколько метрик в реальном времени» | Analyst | Bento с графиками, малые отступы, минимум хрома. |
| «Один график, объяснить инвестору» | Marketing | Большие подписи, контекст вокруг, не dashboard. |
Шкала информации в поле зрения
Грубое мерило: сколько смысловых единиц попадает в первые 800 px высоты. Smysl unit = карточка, строка таблицы, заголовок + абзац, метрика.
| Режим | Smysl-units на 800 px | Что там живёт |
|---|---|---|
| Marketing | 1–4 | Hero, подзаголовок, 3-карточная сетка, CTA. Экран «дышит». |
| ЛК | 8–20 | Sidebar+ list rows + header. Видно сразу всю команду или продукты. |
| Analyst | 40–120 | Таблица + chat + панель виджетов. Глаз сканирует, не читает. |
Принципы
- Не смешиваем режимы внутри экрана. Маркетинговый hero на dashboard — значит, dashboard ещё не продуктивен.
- Плотность — не уродство. Analyst-режим тоже красив. Mono, tabular numbers, выровненные колонки — это эстетика Bloomberg, не «сырой интерфейс».
- Воздух — не добродетель. Маркетинг любит воздух, потому что задача — убедить. Аналитик ненавидит воздух, потому что задача — увидеть. И тот, и другой — правы.
- Иерархия всегда есть. H1 в любом режиме крупнее body минимум в 1.5 раза. Иначе теряется навигация по экрану.
- Сначала контент, потом плотность. Сначала понимаем, что показываем, потом выбираем сколько помещается на экран.
Do / Don't
В маркетинге — 3-карточная сетка с 48 px gap, body 16–18.
В маркетинге плотный список на 30 строк. Это ЛК, не витрина.
В Analyst — mono цифры, tabular-nums, row 28 px.
В Analyst — карточки 200 px высоты с иконкой и подзаголовком. Маркетинг приехал не туда.
В ЛК sidebar 240 px, контент fluid. Видно навигацию и объекты одновременно.
В ЛК container 1152 centered с hero на всю высоту. Это маркетинг, тут не продают.
Где это живёт
| Источник | Что определяет |
|---|---|
| Spacing & Radii | --space-* шкала. Marketing — 32–80, ЛК — 16–32, Analyst — 4–16. |
| Typography | Type ramp 56→28→20 для H1 по режимам. |
| Cards | Marketing — hairline / inverse, ЛК — ring / list, Analyst — rows. |
| Surfaces | Light для первых двух, dark zinc для Analyst. |