Мы в EastBanc Technologies часто сталкиваемся с необходимостью снять демо- или промо-ролик о мобильных приложениях, которые разрабатываем. Цели могут быть разные — иногда мы делаем это для наших клиентов в качестве инструкции по применению приложения, иногда снимаем для широкой аудитории и выкладываем на свой Youtube-канал. Главное, что всегда хочется сделать это быстро и в приличном качестве.
Первый наш ролик был посвящен обзору трех мобильных приложений для BFM.ru. В нем нам хотелось показать сходства и различия в линейке приложений для трех разных девайсов. Именно поэтому исторически так сложилось, что мы сразу отказались от screen movie (видео, захваченного с экрана): нам важно было продемонстрировать жесты, и мы сняли ролик на камеру – с персонажами, устройствами и декорациями. Такое видео выглядит более близким к реальности, оно понятнее для неопытного пользователя и, наконец, выгодно показывает наше программистское кунг-фу:)
Тогда, снимая BFM, мы собрали много шишек и в итоге выработали некий успешный в нашем понимании процесс. Сейчас, после съемки ролика о мобильном приложении «Кассир-Бонус Склад», мы хотим рассказать о том, как это делать. Ролик, который мы снимали вместе с коллегами и заказчиками из S7, демонстрируется в конце статьи. Он призван донести до пользователей информацию о том, как нужно пользоваться приложением, чтобы оно помогало в работе.
Мобильное Windows 8-приложение «Кассир-Бонус Склад» для региональных представителей S7 Airlines
Для понимания о предмете съемки: региональные представители авиакомпании выполняют массу тяжелой «полевой» работы — обеспечивают наземное обслуживание самолетов и экипажей, регистрируют багаж и пассажиров, ищут пропавший багаж… И при этом они же осуществляют доставку призов кассирам, которые продают билеты на рейсы S7 и участвуют в программе лояльности «Кассир-Бонус». Ежемесячно на имя каждого регионального представителя приходят десятки посылок и сотни призов, которые надо забрать, распределить и доставить кассирам. Мобильное приложение облегчит эту часть их обязанностей: с его помощью можно будет сканировать код на посылке, смотреть ее содержимое, уведомлять авиакомпанию о бракованных призах, отслеживать статус посылки, отчитываться в получении и многое другое.
На весь съемочный процесс у нас ушло примерно 2,5 часа:
- 15 минут на написание сценария
- 1 час на операторскую работу. Получилось 16 кусков (для удобства будем называть их use-case, то есть кусками, несущими определенную смысловую нагрузку. Например, части, описывающие «Поиск заказа» и «Сканирование QR-кода» — это юс-кейсы), включая перебивки.
- 30 минут отснятое сливалось со съемочного девайса
- 10 минут заняла нарезка видео
- 40 минут заняли склейка и подписи на экранах.
Итак, с чего начать.
Шаг 1 – Театр начинается с вешалки, а съемка ролика начинается с реквизита и съемочной группы
Что и кто точно понадобятся:
- Непосредственно само устройство, которое будем снимать.
- Камера, возможно использовать премиальный смартфон с камерой хорошего разрешения.
- Штатив.
- Лампа с рассеянным светом.
- Зеленая или синяя подложка – на них изображение получается контрастным.
- Актер.
- Режиссер.
- Оператор.
Все вместе выглядит так:
Шаг 2 – Пишем сценарий
Очень важно – описать всю последовательность действий и главное – зафиксировать те данные, которые могут понадобиться в процессе. Например, это может выглядеть вот так:
Глава 1. Открытие приложения
- Открываем приложение с экрана телефона.
- Проходим авторизацию (необходим логин и пароль).
- Ждем, когда произойдет загрузка данных и показываем несколько секунд, что увидит пользователь.
Приводим сырой кусок видео, чтобы продемонстрировать паузы между действиями.
(Обратите внимание, в финальном ролике процедура авторизации будет ускорена как и все рутинные процедуры).
Глава 2. Выдача заказа
У нас есть разные возможности найти нужный посылку, чтобы ее выдать — например, просканировав код или по номеру заказа или по ID кассира. Сначала покажем use-case целиком, потом покажем те части, которые могут быть выполнены другим способом.
Часть 1. Поиск с помощью сканера и выдача заказа
- Сканируем QR код.
- Показываем найденный заказ.
- Нажимаем кнопку «Обработать».
- Подтверждаем выполнение в диалоге.
- Ждем выполнения запроса.
- Показываем результат.
Часть 2. Поиск по номеру заказа
- В разделе «Сканер» нажимаем на кнопку «Ввести номер вручную».
- Вводим номер заказа (! Нужен заранее подготовленный номер)
- Нажимаем кнопку «Найти».
- Показываем найденный заказ.
Это только небольшая часть примера нашего сценария, главное, что мы хотим сказать, – нужно продумать детали того, что нужно показать в ролике.
Шаг 3 – Учимся на чужом опыте
Подсматривать чужие идеи и не повторять чужие ошибки не зазорно – это правильно!
Например, можно посмотреть ролики:
www.youtube.com/watch?v=k32xyP3KuWE
www.youtube.com/watch?v=8zaXKD5qEpI
www.youtube.com/watch?v=6bFueqtljwU
Для себя мы сделали следующие выводы:
1. Телефон нужно положить криво (намеренно) – это выглядит более естественно и объемно.
2. Жесты руками нужно делать медленно и убирать руки от телефона после каждого жеста, чтобы зритель видел то, что произошло на экране устройства, и чтобы было удобнее монтировать ролик.
3. Сделать яркость экрана максимальной, чтобы изображение не выглядело блекло.
4. Использовать WiFi.
5. Делать акцент не на всем устройстве, а на том, что отображается на экране.
6. Использовать «стоп-кадр», чтобы акцентировать внимание зрителя.
7. Использовать несколько общих планов, чтобы создать эффект объёмности происходящего.
8. Комментируем текстом главы и нетривиальные действия.
9. Используем музыку за кадром.
Шаг 4 – Снимаем
- Придерживаемся сценария.
- Снимаем главами и эпизодами внутри глав – удобно монтировать, а если вдруг понадобится переснять, то только конкретный кусочек.
Шаг 5 – Хронометраж
Хронометраж – это фиксация всех участков ролика, которые должны быть использованы. Вот вы сняли 10 роликов: 8 по юз-кейсам и два «по ошибке», теперь кто-то садится и просматривает их все внимательно, отмечая, с какой по какую секунду надо вырезать и какую часть использовать. Мы пробовали отмечать сразу же, что ускорить, что замедлить, где поставить стоп-кадр, но это оказалось не очень удобно: если кусочки сначала ускорять/замедлять, то отметки времени для нарезки смещаются, если же сначала резать – то смещаются отметки для ускорения и замедления.
Итак, сначала мы просто отмечаем все нужные нам отрезки. Особенно важен этот шаг, если режиссер ролика (или человек, ответственный за ролик) и монтажер – это разные люди, или даже находятся в разных городах. Если же вы и монтируете, и определяете содержание ролика, то можно выполнить этот этап сразу, вырезая все нужное из роликов и компонуя в правильном порядке.
Шаг 6 — Монтируем
Готовим видео
Первая часть монтажа – вырезать все нужные участки роликов и собрать в правильном порядке. Сразу же стоит удалить аудио-канал, т.к. в процессе съемки нередко произносятся довольно экспрессивные слова, которым не место в приличном ролике:). Для передачи информации можно использовать профессиональную озвучку или текст на экране; комментарии, которые получилось сделать во время съемки лучше удалить. В случае, если будет использован текст на экране (дешевле и проще реализуется), исходный звук стоит заменить на музыку.
Второе – удалить все ненужные участки: например, когда вы решали, что нажать дальше, повторяли какое-то действие, которое не получилось с первого раза, ждали загрузки данных и т.п. Поскольку телефон в основном лежит, вЫрезать лишнее не составит труда, главное, чтобы в кадре не было рук. Если же какой-то момент необходимо вырезать, а соединить незаметно оставшиеся части невозможно – не расстраивайтесь, это отличное место для небольшой анимации или информационного экрана.
Следующее, что нужно сделать, – ускорить участки, где показан ввод текста (например, при авторизации, см. выше). Актеру не стоит торопиться, главное набрать правильно. На видео такие участки можно ускорить в 2-4 раза, и выглядеть будет очень хорошо. Можно ускорить и другие участки, где происходит какое-то медленное действие, например, загрузка данных с прогресс-баром. Заметим, что ускорять участки, на которых показаны стандартные анимации загрузки, не стоит – пользователи поймут, что ролик ускорен, поскольку стандартные анимации всегда работают с одинаковой скоростью.
Добавляем текст
Теперь у нас готов основной видео-материал, и дальше нужно добавить текст, стоп-кадры, анимацию и музыку.
Ориентируясь на сценарий, нужно составить для видео поясняющий текст. Он должен быть кратким и емким, обозначать то, что показано на видео, и сообщать о том, что на видео не показано; не нужно делать описание того, что показано на видео: если описание необходимо – значит, ролик снят не очень хорошо. Для каждого юс-кейса должно хватить одного-двух экранов с текстом. Текста на экране должно быть немного, до 10 слов. Можно оставить на продолжении всего юс-кейса общий заголовок, например «Выдача заказа», и менять подписи к различными частям: «сканирование QR-кода», «поиск заказа». Если возникает необходимость написать больше текста, вынесите его на отдельный экран и задайте ему время отображения, необходимое для того, чтобы средний пользователь успел прочитать весь текст.
Местоположение текста, шрифт и цвета лучше выбрать в начале работы, и использовать одни и те же для всех поясняющих надписей в ролике. Цвета текста лучше иметь 2-3 для использования на разном фоне и для выделения ключевых слов.
Для переходов от общего плана к ролику с юс-кейсом можно тоже добавить анимации и поясняющие надписи.
Последний шаг – добавляем музыку. Для использования музыки в видео-ролике у вас должны быть права. Если вы не хотите нарушать чужие права, попробуйте использовать музыку, распространяемую под лицензией Creative Commons – creativecommons.org/legalmusicforvideos
Ссылки с него не все живые, но есть и вполне рабочие и активно пополняющиеся сайты:
ccmixter.org/
audiofarm.org/explore/category/Soundtracks
Шаг 7 – Наслаждаемся результатом и гордимся собой!
Автор: eastbanctech
