Гайд по скринкастам и анимации интерфейсов в видеороликах

За 6 лет мы в Multiways сделали более 100 роликов про интерфейсы. С такими задачами к нам обращаются практически все клиенты — от стартапов до госкорпораций.

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

У скринкастов два типа целей:

Обучить — то есть показать, как работает интерфейс, и объяснить, как им пользоваться. Например, научить пользователей смотреть статистику своих трат в личном кабинете банковского приложения.

Презентовать — то есть прорекламировать digital-продукт или конкретную услугу, показав, как удобно она устроена для пользователя. Например, можно подготовить рекламный ролик на основе скринкаста: показать, как переводить деньги в банковском приложении и озвучить на фоне продающий месседж в духе «в приложении нашего банка деньги близким переводятся одной кнопкой».

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

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

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

Пример простого и лаконичного ролика, максимально заточенного под обучение:

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

👉 Сотрудник в штат, фрилансер или агентство: как понять, кто вам нужен

👉 Как составить ТЗ на анимацию

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

Самое удобное – это доставать интерфейсы для видеоролика из Фигмы.

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

Сложности. Ключевая сложность – к макетам не всегда есть доступ по разным причинам. Они могут быть утеряны, к ним не может быть доступа. Если продукт стремительно развивается – то макеты будут часто обновляться и в этом тоже есть своя сложность – «поймать» актуальную версию.

Советы. Не теряйте доступ к Фигме, при создании ролика дублируйте все дизайн-макеты, которые необходимы, на отдельный лист или вообще в отдельный проект, чтобы с вашей рабочей Фигмой ничего не случилось.

Когда нет доступа к исходникам, приходится работать просто с картинками интерфейсов. Важно понимать, что скриншоты интерфейса мы тут не рассматриваем, а говорим именно про экспортированные картинки.

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

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

Советы. Ищите исходники в максимальном качестве, которое найдете. И ищите проект, в котором они были сделаны, ведь если есть эти картинки, то их откуда-то экспортировали.)

Скриншоты можно сделать и с реального интерфейса.

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

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

Советы. Делайте скриншоты на мониторе с максимальным разрешением — например, на Retina-дисплее на технике Apple или на мониторе с разрешением 4K. Тогда, если в ролике придётся приблизить или кадрировать элементы интерфейса, они не будут размытыми.

Ещё есть специальный софт для обратного прототипирования интерфейса, который автоматически раскладывает скриншот на иллюстрацию со слоями. Мы использовали PageLayers и остались довольны. Более детально это описано, например, тут. Если знаете софт лучше или удобнее — напишите в комментариях.

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

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

Сложность работы с интерфейсами в ролике изображена на следующем графике:

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

Хороший скринкаст – это не только интерфейс, но и то, что его окружает. Вот несколько простых шагов, как сделать ролик интереснее:

Добавьте курсор. Это может быть как классическая стрелка, так и кружок или любой другой объект. Курсор можно будет интересно анимировать.

Встройте интерфейс в устройство. Это может быть телефон, планшет или ПК.

Что важно учесть:

Вставлять в ролик iPhone или iMac вышло из моды лет 5 назад. Лучше использользовать обезличенные смартфоны или ПК, в которых не считывается конкретная модель. Устройства не должны перетягивать на себя слишком много внимания, потому что основная суть не в них, а в интерфейсе. Тем более, они часто обновляются, и ролик быстрее теряет актуальность. Помимо этого, вы сразу фокусируетесь на обладателях конкретных моделей, упуская из виду остальных пользователей.

Мы рекомендуем брать полупрозрачные, стеклянные бруски, которые лишь обозначают устройство. А вместо ПК лучше просто сделать небольшую рамку, напоминающую окно браузера.

Добавьте 3D-элементы. Чтобы сделать устройство более подвижным и интересным, мы рекомендуем присмотреться к объёмной модели. Такая визуализация более мобильна в кадре — она может вращаться, перемещаться в разные части экрана, более сложно взаимодействовать с остальными элементами в кадре. В конце этого материала есть референс с таким приемом.

Даже если в ваших планах (или в бюджете) не запланировано создание полноценного насыщенного 3D-ролика, в скринкаст можно аккуратно интегрировать ненавязчивые объекты. Например — разнообразить фон геометрическими фигурами из стекла.

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

Обыграйте интерфейс в начале ролика. Если на главной странице сайта или портала есть видео, то с него можно эффектно начать ролик.

Пример того, как скринкаст может начинаться с видео:

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

Элементами саунд-дизайна могут быть любые звуки: клик мышью, стук клавиатуры, звуковое уведомление, а ещё — фоновая музыка и голос диктора. Все эти инструменты помогают оживить интерфейс и удерживать на нём внимание зрителя.

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

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

👉 Сразу определитесь, для чего вам нужен скринкаст: обучение или реклама. В случае обучения сконцентрируйтесь на смыслах, в случае рекламы – на вау-эффекте.

👉 Соберите все необходимые интерфейсы в самом лучшем качестве, которое у вас есть. Это сэкономит время и деньги.

👉 Используйте абстрактные устройства и приятные шурешки (курсор, пояснения и тд) – это сделает просмотр ролика более приятным.

👉 Если есть, о чем рассказать вокруг самого интерфейса – добавьте сюжетные подводки.

👉 Не стоит недооценивать саунд-дизайн в таких роликах. В хорошем скринкасте интерфейс всегда звучит. =)

#анимация #моушен-дизайн #интерфейсы #дизайн #скринкасты #видеопродакшн