Как составить раскадровку демо продукта до начала анимации

Именно при раскадровке демо продукта можно обнаружить, что финал не вытекает из начала. Лучше выяснить это до записи шести дублей, выбора музыки и доводки перехода. Несколько черновых кадров покажут недостающее исходное действие или необъяснимое изменение гораздо дешевле, чем готовая анимация.

У раскадровки программного продукта есть особая задача: сохранить логику его работы. Ролик может выглядеть плавным и при этом перескакивать между несвязанными состояниями интерфейса. Можно показать каждый клик, но так и не объяснить зрителю, зачем нужна эта задача. Раскадровка должна связать вопрос аудитории, реальное взаимодействие и результат, который можно рассмотреть.

Разберём процесс согласования: рецензент получает черновик, находит проблему, оставляет конкретный комментарий и видит исправленную версию.

Опишите результат, прежде чем рисовать начало

Начните с конечного состояния, которое отвечает на вопрос аудитории. В примере с согласованием важен исправленный черновик, в котором замечание устранено. Одной декоративной карточки «Готово» недостаточно. Зритель должен понять, что исправили и как это связано с исходной проблемой.

Опишите результат одним предложением, затем определите, что нужно показать раньше, чтобы он был понятен. Зрителю нужны черновик, соответствующая проблема и комментарий с просьбой внести изменение. Вряд ли ему необходимо наблюдать, как рецензент входит в аккаунт или ищет документ среди посторонних проектов.

Такой обратный проход не даёт вступлению занять весь ролик. Команды часто начинают с рассказа о компании: начало истории организации кажется естественной отправной точкой. Но у зрителя обычно другая отправная точка — задача, которую ему нужно выполнить.

Не приписывайте результату лишнего. Если в записи показана только отправка комментария, финал не должен создавать впечатление, что исправление внесено автоматически. Либо снимите весь завершённый процесс, либо сузьте обещание ролика до той части, которую можете продемонстрировать.

Используйте раскадровку для решений, а не для украшения документа

Раскадровке не нужны красивые рисунки. Нужно достаточно визуальной информации, чтобы показать, куда посмотрит зритель, и достаточно текста, чтобы объяснить изменение. Скриншот с грубо обозначенной областью кадрирования может оказаться полезнее безупречной иллюстрации несуществующего интерфейса.

Шаблон Salesforce для планирования демо полезен тем, что строит демонстрацию вокруг вопроса, основного вывода и продуманного пути. Сначала определите цель с его помощью, а затем разложите демонстрацию на отдельные кадры.

Для каждого предполагаемого плана запишите вопрос аудитории, на который он отвечает. «Где проблема?» и «Что изменилось?» — разные вопросы. Если два последовательных плана отвечают на один и тот же вопрос и не добавляют подтверждений, один из них может быть лишним. Если на важный вопрос не отвечает ни один план, раскадровка выявила пробел.

Документ должно быть легко менять. Сложно оформленная презентация может мешать пересмотру раскадровки именно тогда, когда изменения полезнее всего. В рабочей версии должно быть просто переставить, удалить или заменить план.

Найдите пропущенную середину с помощью полей пути

В нижней части шаблона Salesforce предлагается описать задачу, путь с соединительными словами «потому что», «поэтому» и «но», а затем итог. Эти подсказки решают другую задачу, чем начальный вопрос: проверяют, следуют ли события одно из другого. Раскадровка с шестью красивыми экранами всё равно может не пройти такую проверку.

Попробуйте эти связки на последовательности рецензирования. Рецензент выделяет фразу, потому что она сформулирована неверно. Поэтому комментарий должен оставаться привязанным к этой фразе. Но один комментарий ещё не показывает, что автор его учёл. В последнем плане нужна исправленная фраза, иначе история должна закончиться отправкой замечания. Стоит записать последовательность через причинные связи — и становится ясно, какой записи не хватает.

Отразите этот вывод в самой раскадровке. Добавьте место для исправленного черновика, укажите, кто его снимет, и сохраните то же название документа в предшествующем состоянии. Если исправление ещё не готово, завершите более короткое демо об обратной связи, вместо того чтобы заполнять пробел декоративной карточкой успеха. Шаблон помогает решить, что снимать, а раскадровка — сколько места на экране и времени в неподвижном состоянии нужно каждой записи.

Добавьте к каждому кадру пять видов информации

Полезный кадр демо программы должен содержать видимое состояние, область кадрирования, действие или изменение, короткое объяснение и замысел по длительности. Не обязательно делать для этого пять отдельных полей на каждой странице. Но человек, не участвовавший в обсуждении раскадровки, должен суметь восстановить все пять.

Видимое состояние указывает конкретный экран или исходный материал. Кадрирование определяет, какая его часть попадёт в кадр. Действие описывает, что происходит в течение плана. Объяснение содержит закадровый или редакционный текст. Замысел по длительности сообщает автору, нужен ли короткий ориентирующий план или результат, который следует дать рассмотреть.

Особенно полезно условие перехода. Оно описывает, что зритель должен понять до следующего плана. «Держать две секунды» может быть исходной инструкцией, но «держать, пока короткое исправление можно будет прочитать при мобильном размере просмотра» объясняет назначение паузы.

Отмечайте недостающие записи рядом с планами, где они нужны. Если исправленный черновик ещё не снят, назначьте эту съёмку до начала анимации. Иначе автору придётся либо закончить историю на комментарии, либо подменить финал более слабым.

Следите за непрерывностью состояний во всей последовательности

Логическая непрерывность работы программы часто важнее визуальной. Название проекта, заголовок элемента, выбранный аккаунт и статус задачи должны оставаться прежними, если история не объясняет их изменение. Плавное растворение между двумя разными проектами не устраняет логический разрыв.

Составьте небольшую заметку о непрерывности для нашего примера. Запишите проект, название черновика, нужную фразу и текст комментария. Используйте заметку при записи каждого состояния. Несоответствие проще обнаружить во время подготовки материала, чем после окончательного подбора музыки и типографики.

Проверяйте происходящее между планами, а не только внутри них. Если в конце одного плана открыт комментарий, а следующий начинается с исправленного черновика, решите, как монтаж передаст выполненную между ними работу. Возможно, потребуется короткий переход, подпись или реальная запись исправления.

Сохраняйте причину там, где она важна. Нельзя ставить клик по посторонней кнопке непосредственно перед результатом, если такой монтаж создаёт впечатление, что результат вызван этой кнопкой. Это удобно выявлять на этапе раскадровки: положение указателя и изменения состояний пока легко переставить.

Разделяйте реальные экраны и редакционные объяснения

Настоящий интерфейс показывает зрителю, что есть в продукте. Редакционный текст объясняет, почему важна конкретная часть. Когда эти роли разделены, ролик легче понимать и обновлять.

Например, подпись может гласить «Привяжите замечание к проблеме», пока на экране остаётся настоящий интерфейс комментария. Замена собственных надписей продукта маркетинговыми формулировками размывает эту границу. Если надпись в интерфейсе неверна или устарела, обновите запись продукта, а не закрашивайте её в раскадровке.

Используйте аннотации, чтобы направлять внимание, а не создавать функции. Рамка вокруг комментария может быть редакционным выделением. Новая анимированная кнопка, которой никогда не было в продукте, — уже другое утверждение. При необходимости отмечайте концептуальные элементы как концепты и не позволяйте им выдавать себя за записанное поведение.

Такое разделение помогает и при сопровождении. Редакционные подписи можно менять независимо от экрана. Изменения продукта требуют новой записи. Из раскадровки должно быть понятно, какое именно изменение понадобится при следующем обновлении.

Планируйте движение камеры как последовательность конечных точек

Запишите, откуда камера начинает движение, где останавливается и зачем перемещается. «Начать с черновика, приблизиться к выделенной фразе, затем задержаться» задаёт анимации цель. «Добавить динамичные приближения» не объясняет, что зритель должен из них узнать.

Движение камеры может показать связь между элементом управления и результатом. Но оно же может разрушить эту связь, если камера перемещается слишком далеко или быстро. Проверьте, узнаёт ли зритель исходный контекст в конце движения. Знакомый заголовок или граница раздела могут служить ориентиром.

Не делайте все планы максимально крупными. Крупный план улучшает видимость деталей, но убирает ориентиры. Чередуйте осмысленно: сначала покажите достаточно контекста, чтобы найти задачу, затем приблизьте важное действие и наконец покажите результат в понятном масштабе.

Включите в раскадровку неподвижный кадр после движения. Часто именно он важнее всего: в нём зритель читает или сравнивает. Если раскадровка содержит только эффектные промежуточные положения, можно упустить вопрос, достаточно ли места получает сама информация.

Проверяйте текст вместе с длительностью

Нельзя оценивать предложение отдельно от времени и пространства, доступных для чтения. Поместите предполагаемый текст в черновой кадр примерно в окончательном размере. Текст-заполнитель скрывает проблемы с переносами, длиной и акцентами.

Просмотрите последовательность в ожидаемом масштабе. Скриншоту настольного приложения в маленьком плеере соцсети может понадобиться гораздо более тесное кадрирование, чем тому же скриншоту в большой презентации. Если ключевая фраза в этом масштабе исчезает, измените композицию до подробной проработки анимации.

Разделяйте время появления в кадре и время, доступное для чтения. Текст, который почти весь план въезжает на своё место, может оставаться неподвижным совсем недолго. В раскадровке нужна пауза после его появления, особенно если важные надписи есть и в самом интерфейсе.

Не решайте любую проблему длительности увеличением ролика. Иногда закадровый текст повторяет экран, а подпись пытается объяснить сразу две мысли. Сокращение текста может улучшить последовательность сильнее, чем дополнительная секунда в каждом плане.

Заимствуйте принцип плейсхолдеров для планов

Документация Apple по раскадровкам iMovie описывает добавление медиа в плейсхолдеры раскадровки. Полезная производственная идея здесь в том, что роль плана определена ещё до выбора окончательного материала. Плейсхолдеры помогают отделить назначение плана от медиа, которое позднее его заполнит.

Примените этот принцип к демо программы: назовите подтверждение, нужное в каждом месте. «Экран результата с исправленной фразой» — более полезный плейсхолдер, чем «красивый кадр продукта». Он сообщает человеку, собирающему материалы, что удовлетворит потребность истории.

Плейсхолдер должен также выявлять неопределённость. Если конечное состояние пока нельзя снять, потому что функция не завершена, отметьте его как нерешённое. Не позволяйте красивому макету незаметно превращать планируемую возможность в продемонстрированную.

Когда настоящий материал появится, пересмотрите план. Доступный экран может отличаться формой или плотностью от чернового рисунка. Подстройте композицию под подтверждение, вместо того чтобы втискивать его в решение, которое уже не работает.

Покажите недостающий материал в плане

В примере с рецензированием назовите рабочие материалы по состояниям: draft-before, comment-open и draft-corrected. Рядом укажите, записан ли материал, проверен ли он или ещё нужен. Если draft-corrected отсутствует, в раскадровке должно остаться незаполненное место, а не незаметная замена на праздничную графику.

Такой небольшой список показывает и возможности повторного использования. Общий план черновика и крупный план фразы могут происходить из одной исходной записи. Исправленное состояние требует собственного подтверждения. Перечень планов, который различает кадрирование и новые состояния, помогает при сборе материала избежать и лишней работы, и неподтверждённых переходов.

Соберите черновую последовательность с длительностями до полировки

Расположите предполагаемые экраны по порядку, используя простые склейки и временные паузы. Черновой последовательности не нужны музыка, сложные переходы или окончательная цветовая обработка. Её задача — показать, можно ли успеть проследить историю.

Посмотрите без пауз. Затем объясните задачу одним предложением. Если объяснение зависит от информации, которой в последовательности не было, добавьте недостающий контекст или сузьте обещание. Проверка раскадровки особенно полезна, когда рано выявляет такие структурные проблемы.

Посмотрите ещё раз с закадровым текстом или подписями. Ищите конкуренцию между чтением и действием. Подробный комментарий, появляющийся одновременно с новой голосовой инструкцией, может требовать слишком много внимания. Перенесите одно из них раньше, упростите текст или оставьте спокойную паузу.

Дорабатывайте переходы только после того, как заработает черновая последовательность. Красивый переход между несвязанными состояниями может затруднить обнаружение проблемы, но не укрепит логику. История должна работать и с обычными склейками.

Простая карточка Focus «Done.» задаёт финальный акцент в том ролике. В раскадровке рецензирования сохраняйте исправленную формулировку на экране до карточки завершения, иначе аудитория увидит статус, но не само исправление.

Спрашивайте проверяющих о пробелах, а не о предпочтениях

Дайте проверяющим конкретную задачу. Спросите, где они потеряли нить, какой результат поняли или чего ожидали дальше. На раннем этапе такие вопросы дают более полезную обратную связь, чем вопрос о том, нравится ли стиль анимации.

Разделяйте фактическую и творческую проверку. Знакомый с продуктом человек может проверить последовательность состояний и надписи. Менее знакомый — обнаружить недостающий контекст. Эти точки зрения дополняют друг друга, но ни одна не заменяет другую.

Фиксируйте разногласия через потребности зрителя. Если одному проверяющему нужно более долгое вступление, а другому — быстрый старт, определите, какую информацию вступление обязано сообщить. Возможно, удастся сократить его, сохранив единственный действительно нужный аудитории факт.

Не включайте в одну раскадровку все предложенные функции. Предложение может быть правильным и при этом относиться к другому ролику. Держите основной вопрос перед глазами, чтобы во время обсуждения последовательность не превратилась в общий обзор продукта.

Подготовьте утверждённую раскадровку к передаче в производство

Окончательная раскадровка должна связывать каждый план с его реальным исходным материалом, утверждённым текстом, замыслом по длительности и нерешённым вопросом. Уберите устаревшие варианты из рабочей последовательности, чтобы автору не пришлось угадывать, какую версию утвердили.

В брифе OpenDesign Motion можно описать порядок сцен и приложить нужные материалы. Запросите редактируемый проект и отрендеренное видео, а раскадровку храните рядом. Документ объясняет задуманную историю, экспортированный файл показывает, что было сделано на самом деле.

Изменения раскадровки меняют план, а не автоматически существующий MP4. Обновлённую строку или замечание о длительности ещё нужно реализовать и отрендерить. Прежде чем считать работу законченной, сравните новый результат с утверждённой последовательностью.

Таким образом, полезная раскадровка демо продукта — больше, чем ряд красивых кадров. Это краткая договорённость о подтверждениях, внимании и последовательности. Когда эти решения ясны, анимация помогает следить за объяснением, а не пытается придумать его задним числом.