У проекта уже есть адресат, обещание, возражения и свидетельства. Теперь они должны стать маршрутом. Мы переведём рекламные формулы из готовых последовательностей в грамматику операций, построим кривую сопротивления, разберём первый экран, паузы и повторные CTA, а затем соберём бумажную раскадровку. Структура будет оцениваться по изменению состояния посетителя, а не по наличию обязательных секций. Итог занятия — сценарий скролла на 7–11 зон, карта давления и работающий черновой ствол страницы.
Рабочий вопрос
Как провести посетителя к действию, сохранив его право сопротивляться?
Метафора коридора полезна: лендинг ведёт через последовательность помещений к одной главной двери. Она становится опасной, когда дизайнер запирает боковые выходы, выключает свет позади и называет это ростом конверсии. Хороший маршрут организует понимание и позволяет решение; давление должно оставаться видимым.
Скролл превращает аргумент во время. Содержание появляется порциями, а порядок меняет смысл: цена до механизма воспринимается иначе, чем после демонстрации; предупреждение в конце выглядит сокрытием, хотя тот же текст на пороге становится условием договора.
Формулы как грамматики
AIDA, POPS, «до — после — мост», «почему — что — как — дальше» и климовские структуры полезны как грамматики действия. Буквальное заполнение ячеек быстро производит одинаковые страницы. Выбирайте схему по задаче и переписывайте её после встречи с материалом.
AIDA описывает движение внимания к действию. POPS усиливает проблему и вводит решение. Для спекулятивного продукта обострение особенно рискованно: дизайнер способен сначала изобрести тревогу, а затем продать устройство для её обслуживания. В структуре должна появиться критическая проверка: существовало ли желание до страницы и что она с ним делает.
Базовый ствол
Для курса используем шесть операций:
1. вход — узнавание ситуации и предмета;
2. напряжение — причина продолжить;
3. объяснение — механизм и закон вещи;
4. свидетельство — основания доверия;
5. цена и сопротивление — ограничение, риск, возражение;
6. действие — ясный переход в новое состояние.
Операция может занимать несколько экранов; один экран способен совмещать две операции. Список описывает работу, а не набор секций.
Раскадровка раньше компоновки
Работайте карточками. На каждой укажите:
⚫️ функцию зоны;
⚫️ главный вопрос посетителя;
⚫️ материал;
⚫️ тип доказательства;
⚫️ желаемое изменение состояния;
⚫️ переход к следующей зоне.
Пока карточки лежат на столе, их легче переставить и выбросить. В Figma и Cargo блок быстро обрастает аккуратными отступами и начинает требовать сохранения за выслугу лет.
Зона считается работающей, когда
⚫️ в ней есть один главный смысловой жест;
⚫️ её материал нельзя без потери перенести в любую другую секцию;
⚫️ она отвечает на возникший к этому месту вопрос;
⚫️ переход создаёт основание для следующего шага;
⚫️ визуальная форма соответствует типу знания.
«Блок преимуществ» не является функцией. Он может сравнивать, объяснять механизм, снижать риск или производить социальный знак — назовите точную работу.
Коридор из архива
Серия коридоров из старой лекции буквально иллюстрировала вход, демонстрацию достоинств, отзывы и финальную дверь. Сохраните пространственную ясность, но добавьте изменение давления. Все комнаты не должны быть одинаково красными, громкими и срочными. Маршрут нуждается в паузах, смене масштаба и месте, где возражение получает полноценный голос.
Кривая сопротивления
Нарисуйте две линии по вертикали страницы:
⚫️ сколько основания для согласия уже получено;
⚫️ какое сопротивление остаётся.
CTA появляется там, где первая линия для выбранной ступени узнавания пересекает вторую. Механическое повторение кнопки через каждые два экрана не усиливает аргумент — оно выдаёт отсутствие представления о том, когда пользователь готов.
Для тяжёлого действия предусмотрите промежуточную ветку: демонстрацию, полный договор, пробный режим, консультацию, просмотр противопоказаний. Основной маршрут остаётся один, но решение не превращается в прыжок без ступени.
Монтажный протокол
Раскадровка становится проверяемой, когда переходы описаны изменением состояния, а не соседством прямоугольников. Для каждой пары зон восстановите короткую цепь:
Если новый вопрос не возник, переход держится на авторском «а теперь поговорим о…». Если состояние не изменилось, две зоны, вероятно, повторяют одну работу. Если следующая зона отвечает раньше, чем посетитель успел усомниться, аргумент выглядит заученным и перестаёт слушать адресата.
Заведите таблицу переходов:
Анатомия подчиняется сценарию
Заголовок, продукт, преимущества, сценарий применения, отзывы, FAQ, цены, контакты и CTA — библиотека возможных органов. У конкретной страницы часть отсутствует, часть меняет форму. Вымышленный регуляторный протокол может выполнить работу FAQ; демонстрация ошибки — работу честного отзыва; интерактивная модель цены — работу тарифной таблицы.
Сначала определите сопротивление, затем выбирайте орган. Иначе анатомический атлас становится рецептом по сборке Франкенштейна из всех доступных секций.
Первый экран открывает аргумент
Проверьте первые две зоны вместе. Hero отвечает на вопросы «что», «для кого», «какое действие». Следующая зона должна развить самое сильное напряжение, а не начинать страницу заново фразой «Мы верим в будущее».
Три допустимых перехода:
⚫️ от обещания к механизму;
⚫️ от узнаваемой ситуации к новой возможности;
⚫️ от цены или запрета к объяснению, почему предложение всё же существует.
CTA: действие, объект, последствие
Текст CTA проходит три проверки:
1. какой глагол описывает действие;
2. какой объект получает или передаёт пользователь;
3. что случится сразу после клика.
Креативная формулировка допустима, когда интерфейс рядом возвращает техническую ясность. «Войти в тень» может быть кнопкой внутри мира проекта; подпись должна сообщить, что откроется форма заявки на пробное исчезновение.
Пауза перед решением
Пустота, короткая фраза, неподвижный кадр или смена цветового режима могут отделить доказательства от действия. Пауза даёт посетителю возможность присвоить решение и снижает ощущение, что страница непрерывно толкает в спину.
Пауза функциональна, когда меняет темп. Огромный пустой экран, скопированный из фестивального сайта и никак не связанный с аргументом, остаётся дорогой манерностью.
Карта давления
Отметьте на раскадровке:
⚫️ просьбы о внимании;
⚫️ эмоциональное усиление;
⚫️ социальное давление;
⚫️ срочность;
⚫️ сбор данных;
⚫️ необратимое действие;
⚫️ право остановиться или уйти.
Если все типы давления сходятся в одном месте, посетитель получает интерфейсную засаду. Перепишите последовательность или покажите условия раньше.
Структуры из архива
Разберите два архивных лендинга без оценки стиля. Подпишите функцию каждой секции и найдите место, где аргумент перестаёт развиваться, хотя страница продолжается. Затем удалите минимум четверть блоков. Это упражнение особенно полезно перед работой с AI site builder: генератор любит полноту типового набора, проекту нужна собственная мера.
Интерактив. Допрос перехода
Разложите карточки на полу или длинном столе. Партнёр выбирает три перехода и спрашивает:
⚫️ что изменилось в предыдущей зоне;
⚫️ почему следующий вопрос возникает именно сейчас;
⚫️ что потеряется при перестановке;
⚫️ можно ли удалить одну из зон;
⚫️ где пользователь получает право отказа.
Автор меняет порядок при свидетеле и фотографирует две версии раскадровки.
Три линзы, которые меняют оптику скролла
Формат
Десять минут. Выберите одну линзу и измените один переход, одну паузу или место появления CTA. Правку внесите в раскадровку и живой ствол.
Линза 1. Этос, пафос и логос
В «Риторике» Аристотель описывает три способа убеждения, производимые самой речью. Ethos связан с характером говорящего, каким он проявляется перед аудиторией; pathos — с состоянием слушателей; logos — с устройством рассуждения и доказательства. Это не три ящика для контента. Один жест может работать во всех режимах: честное признание ограничения укрепляет характер говорящего, снижает тревогу и добавляет логическое условие к обещанию.
Лендинг разворачивает риторику во времени. Первый экран ещё не доказал надёжность, но уже выбрал голос: приказ, исповедь, медицинская рекомендация, шёпот сообщества. Затем страница изменяет аффект — возбуждает, пугает, даёт облегчение — и предлагает цепь оснований. Перекос легко услышать. Чистый пафос превращает фантастический товар в истерику; один логос — в технический паспорт без желания; декоративный этос надевает белый халат, не показывая процедуры.
Интереснее всего момент несовпадения. Бренд говорит заботливо, но требует немедленной оплаты; диаграмма выглядит строгой, однако не имеет источника; трогательное свидетельство скрывает, что участнику заплатили. Тогда один риторический режим разоблачает другой. Перед CTA полезно спросить, какая работа уже совершена: человек понял механизм, увидел право говорящего, пережил собственную ставку? Недостающую силу не обязательно добавлять новым блоком. Иногда достаточно изменить голос подписи, поставить ограничение раньше восторга или дать доказательству испортить слишком красивую эмоцию.
Вопрос к проекту: какая сила доминирует в каждой зоне и чего недостаёт перед действием? Вмешательство: измените порядок двух зон или добавьте недостающее основание без нового рекламного блока.
Линза 2. Монтаж
Киношный монтаж радикально показывает, что последовательность производит мысль. В опытах, связанных с именем Льва Кулешова, неизменное лицо актёра читалось по-разному рядом с супом, ребёнком или гробом. Эйзенштейн превращает столкновение кадров в интеллектуальный метод: фрагмент A рядом с фрагментом B рождает качество C, которого нельзя найти простым пересказом каждого кадра.
Скролл — монтажная машина с ненадёжным проектором: скорость выбирает сам зритель, экран обрезает кадр, вкладку могут закрыть, к секции — прийти по якорной ссылке. Поэтому соседство нужно проектировать ещё точнее. Роскошный рендер после предупреждения выглядит опасным соблазном; то же предупреждение после рендера — поздним юридическим кашлем. Пустое поле между обещанием и ценой создаёт ожидание или подозрение в зависимости от того, чем его зарядили предыдущие зоны.
Монтаж также позволяет убеждать без прямого комментария. Поставьте рядом рекламное обещание и форму возврата, портрет счастливого владельца и запись побочного эффекта, инструкцию и след её неправильного применения. Читатель сам соберёт вывод, но свобода этой сборки относительна: вы выбрали фрагменты, масштаб и порядок. Проверяйте каждый шов вопросом «какое третье значение здесь возникает?» Если ответ сводится к «идёт следующий блок», структура пока работает как склад, где коробки стоят рядом только потому, что закончилась стена.
Вопрос к проекту: какой вывод посетитель собирает на стыке двух зон? Вмешательство: переставьте одну пару и запишите, как изменился вывод; оставьте версию, где конфликт точнее.
Линза 3. Распределение чувственного
Жак Рансьер называет «распределением чувственного» порядок, который заранее определяет, что может быть увидено и услышано, кто способен говорить, чья речь считается шумом, какие занятия и пространства признаются общими. Политика возникает, когда этот чувственный порядок нарушается: тот, кому была отведена роль бессловесного исполнителя, предъявляет себя как говорящего участника.
Лендинг выглядит частной коммерческой страницей, однако проводит такое распределение на каждом экране. Выгода получает hero и анимацию; риск — серую строку; покупатель виден как палец на CTA; сборщик данных, модератор, курьер, источник сырья исчезают. Отзыв показывает лицо, но оставляет человеку одну допустимую реплику — подтверждение обещания. Даже пустота распределена политически: одним объектам позволено занимать экран в одиночку, другие обязаны тесниться в карусели.
В фантастическом проекте этот порядок можно сделать частью художественного аргумента. Пусть инструкция заговорит голосом обслуживающего существа, цена появится раньше образа роскоши, форма отказа получит тот же масштаб, что покупка. Речь не о моральной обязанности всё уравнять: одинаковая громкость снова уничтожит различие. Нужно увидеть, чья невидимость поддерживает убедительность. Иногда один вытесненный голос меняет весь скролл, потому что после него прежняя выгода уже не может вернуться на сцену невинной.
Вопрос к проекту: кому страница даёт крупный голос, а кого прячет до конца маршрута? Вмешательство: поднимите один вытесненный голос раньше и перестройте переход вокруг него.
---
Домашняя работа
Подготовьте:
⚫️ раскадровку на 7–11 зон;
⚫️ функцию и вопрос каждой зоны;
⚫️ кривую сопротивления;
⚫️ карту давления;
⚫️ минимум два обоснованных CTA;
⚫️ один безопасный промежуточный маршрут;
⚫️ живой черновой ствол в Cargo без финальной стилизации;
⚫️ фотографию версии до и после допроса переходов.
Критерий готовности
Страница меняет состояние последовательно, а блоки не повторяют одну рекламную мысль разными словами. Доказательства появляются рядом с соответствующими возражениями, ограничение видно до тяжёлого действия, CTA имеет основание и технически понятное последствие.
Exit ticket
⚫️ «Самый важный перелом происходит после…»
⚫️ «Я удалил зону, потому что…»
⚫️ «Право остановиться появляется…»
След занятия
Раскадровка + кривая сопротивления + карта давления + два CTA + черновой ствол страницы.