02UI-компоненты

Аудит раскладки и группировки блоков

Прогон страницы через «старший дизайнер видит её впервые»: где раскладка проседает, что объединить, что разделить, что переставить — с конкретными ходами, а не «надо подумать».

Действуй как senior product-дизайнер, который видит страницу впервые. Аудит — не дизайн-критика «нравится / не нравится», а разбор раскладки блоков с конкретными решениями: что объединить, что разделить, что переставить, что убрать.

Источник: {{url_or_screenshot}} Главное действие: {{primary_action}} Аудитория: {{audience}}

Принципы оценки (это критерии, не словесный шум)

Gestalt — proximity / similarity / common region. Связанные по смыслу элементы должны жить близко и в одной зоне. Несвязанные — разнесены.
Иерархия за 3 секунды. Закрой глаза на 3 сек, открой. Что видно первым? Это и должно быть самым важным.
F / Z reading pattern. Глаз идёт сверху-слева вниз-вправо. Первая зона — самое ценное предложение, не логотип партнёра.
Один primary CTA на экран. Несколько одинаково яркие кнопки = ни одной.
Spacing говорит. Маленький отступ = «связано». Большой = «другая тема». Если отступы одинаковые везде — иерархия размыта.
Cognitive load = количество групп × 3. Юзер хорошо держит в голове 5±2 блока. Если на экране 12 секций — половина пропадает.
Mobile — отдельный продукт. Раскладка, которая работает на 1280px, на 375px часто превращается в простыню из 9 экранов.

Что сделать

Шаг 1. Инвентаризация блоков

Пронумеруй все секции страницы сверху вниз. Для каждой — одна строка: что говорит + зачем + примерный размер на экране (% высоты viewport).

Шаг 2. Найди семь типов проблем

#	Тип	Что искать
1	Дубли	Два блока решают одну задачу (две формы регистрации, два «свяжитесь с нами», два FAQ)
2	Сирота	Блок ни к чему не примыкает по смыслу — болтается посередине
3	Разорванная пара	Два связанных блока разделены чем-то лишним между ними
4	Слепая зона	Самый важный для primary_action блок находится ниже первого скролла
5	Равные приоритеты	3-4 элемента одинаково яркие — глаз не знает куда смотреть
6	Шум	Декоративные блоки (badges, partners, иконки фич) перебивают content path
7	Mobile-разрыв	Двухколоночный блок на mobile превращается в две стопки, теряется связь

Шаг 3. Сформулируй ходы

Для каждой проблемы — один конкретный ход одного из 5 типов:

MERGE — объединить N блоков в 1 (например: «hero CTA» + «sticky bottom CTA» = один primary CTA с двумя точками входа)
SPLIT — разнести 1 блок на 2 (например: «features + pricing в одной таблице» → features card + pricing section)
MOVE — переставить блок X между Y и Z
REMOVE — убрать (с обоснованием: на чём это ничего не теряет)
DEMOTE/PROMOTE — изменить визуальный вес (увеличить, перевести в primary; или уменьшить, сделать secondary)

Шаг 4. Проверь новый порядок на flow

Опиши читательский путь в одно предложение для каждой версии:

Сейчас: «глаз идёт на A → теряется на B → находит C → не понимает зачем D → доходит до primary CTA на 4-м экране»
После: «глаз идёт на A (offer) → видит B (proof) → C (как работает) → primary CTA на первом экране → дальше детали для тех, кто колеблется»

Формат вывода

Краткое резюме

3-5 предложений: что главное не так, главный ход.

Текущая раскладка

Markdown-таблица: # | Блок | Что говорит | % viewport | Видим ли «холодному» юзеру в первые 5 сек?

Проблемы

Markdown-таблица, отсортированная по серьёзности: # | Тип (Дубль/Сирота/...) | Блоки | Что ломает

Ходы

Нумерованный список. Каждый ход:

MERGE/SPLIT/MOVE/REMOVE/PROMOTE/DEMOTE: <короткое название хода>
Что: конкретно какие блоки трогаем
Зачем: какую из 7 проблем закрывает
Эффект: что юзер увидит / почувствует после
Риск: что может пойти не так (если есть)

Новый flow

Одно предложение: путь глаза от первого экрана до primary_action.

Что хорошо — не трогать

3-5 пунктов. Это столь же важно, как список проблем.

Anti-patterns (НЕ делать)

❌ Полный редизайн («давайте всё переделаем»). Каждый ход — точечный.
❌ Цвета, типографика, иконки — это другие аудиты. Здесь только раскладка и группировка.
❌ «Этот блок мне не нравится» — у каждого замечания должна быть привязка к одному из 7 типов проблем.
❌ Ходы без обоснования. Каждый MERGE/SPLIT/MOVE — с Зачем.
❌ Игнорировать mobile. Если раскладка ломается на 375px — это критическая проблема.
❌ Жалеть блоки. REMOVE — нормальный ход. «У нас же там фотка команды, как её убрать» — не аргумент.