Как сделать хорошее видео для страницы приложения в App Store

Привет, Хабр!

Меня зовут Алёна, я работаю в студии motion-графики. Недавно приложение с нашим роликом успешно прошло модерацию, так что хочу поделиться опытом, как сделать видео для страницы в App Store и не облажаться: что и как может сделать сам разработчик, что лучше отдать на аутсорс, а от каких фишек лучше вообще отказаться.



В описании приложения ролик размещается на месте первого скриншота, а в поиске App Store так и вообще на самом видном месте:



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

Требования Apple


Основные требования и советы от Apple описаны здесь. Это, в основном, рекомендации по содержанию:

  • Видео должно подходить аудитории от 4 лет.
  • Apple не советует показывать в кадре пользователей или их руки, взаимодействующие с интерфейсом (нарисованные руки тоже не надо), просит избегать зума.
  • Нельзя с помощью монтажа создавать у пользователя иллюзию, что в вашем приложении есть функции, которых там нет.
  • Нельзя использовать чужой контент, если у вас нет специальной лицензии.
  • Графику, подписи, музыку и закадровый текст использовать можно.


Впрочем, вряд ли Apple будет очень уж лютовать из-за зума или руки в кадре: те же требования к скриншотам еще более суровы, но попробуйте найти приложение, которое на 100% им соответствует.

UPD, май 2017: в первые пару месяцев модераторы, действительно, не банили за горизонтальные ролики, телефоны в кадре и тому подобные вольности. Но теперь важно строго соответствовать требованиям: только интерфейс, простая графика, кадры-перебивки.

К тому же нельзя показывать интерфейс других приложений (например, если в ваше приложение интегрированы карты или навигатор) и стартовый экран айфона — из-за этого релиз тоже рискует не пройти модерацию.



Технические требования

На странице о видео их нет, так что спасибо Дмитрию Якунину, который делился информацией из интерфейса App Store, когда заливал обновление.

  • 15-30 сек.
  • до 500 MB
  • MP4, M4V, MOV
  • Соотношения сторон (ролик может быть как горизонтальным, так и вертикальным):
  • для 4-дюймовых айфонов (5, 5s, 5c): 1136x640, 640x1136, 1920x1080, 1080x1920
  • iPhone 6 (4,7 дюйма): 1334x750, 750x1334
  • 6+ (5,5 дюймов): 1920x1080, 1080x1920
  • для iPad: 1200x900, 900x1200

Залить видео можно только с OS X не старше 10.10 через Safari.
Перед отправкой на модерацию видео проходит постобработку (со стороны Apple), и это может затянуться надолго.


Вот пример ролика, который прошел модерацию:



UPD, май 2017: пример ролика, который строго соответствует всем правилам и прошел модерацию в апреле (вертикальный, без фона):




Вертикальное или горизонтальное?



UPD, май 2017: так как требования модераторов стали строже, для App Store этот вопрос теперь не актуален: видео должно быть той же ориентации, что и само приложение — чаще всего, вертикальное.

Но плюсы и минусы, описанные ниже, актуальны для других площадок, где можно размещать и вертикальное, и горизонтальное видео — например, для мобильных рекламных сетей, facebook и Instagram.



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

Из плюсов:
  • интерфейс в реальном размере, на весь экран — у пользователя возникает неосознанное впечатление, что он уже установил приложение и сам его использует;
  • если в приложении много мелких деталей или текста — все видно.


Из минусов:
  • нет места для дополнительной информации;
  • не получится показать взаимодействие приложения с реальными объектами;
  • вы не сможете использовать этот ролик на видеохостингах, в социальных сетях, на Хабре.


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



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


Этапы работы



Сценарий

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

Я обычно пишу сценарий в табличке: в первой колонке — время, во второй — что в этот момент происходит в интерфейсе приложения (это можно просто описать словами или сразу добавить во вторую колонку скрины с комментариями). Это базовый вариант, при необходимости можно добавить и другие колонки:

  • закадровый текст;
  • титры;
  • инфографика;
  • видео.


Ролик лучше воспринимается, если ставить акцент на кейсы, а не фичи приложения. В 30 секунд в среднем умещается 1-2 кейса или описание примерно 5 функций, связанных между собой. Лучше всего, если получается рассказать историю: например, как разные функции приложения помогают пользователю в течение дня, на всех стадиях планирования поездки и т.д.

Самое сложное при написании сценария — не ошибиться с таймингом. На бумаге кажется, что в 30 секунд можно впихнуть бесконечно много информации, но это не так.

Чтобы более-менее точно оценить время, мы репетируем все действия, которые хотим показать, захватываем в видеофайл, а потом делаем черновой монтаж: вырезаем все ошибки, паузы, ускоряем видео до той степени, когда происходящее на экране выглядит естественно и понятно со стороны, добавляем паузы между кейсами (или другими смысловыми блоками), плюс по паре секунд в начале и в конце ролика.


Диктор

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


Музыка

На стоках можно подобрать музыку, которая бесплатно распространяется по лицензии Creative Commons. Обязательное условие — лицензия должна разрешать использование трека в качестве составной части другого произведения (в Creative Commons это называется derivative work). Плюс нужно дать ссылку на автора. Другой недорогой вариант — купить трек в продакшн-библиотеке.


Интерфейсная анимация

Есть два основных способа анимации интерфейса: это захват экрана + монтаж или отрисовка и анимация интерфейса на основе скриншотов.

  • Для захвата экрана в OS X Yosemite можно будет использовать предустановленный QuickTime Player — он умеет захватывать видео напрямую с iPhone или iPad. В Mavericks для начала нужно передать видео с устройства на Mac с помощью сторонних программ (например, Reflector) и уже после этого записывать в QuickTime. Большая их часть — платные, но с триалом, которого для наших целей вполне достаточно.

    Монтировать можно в любой удобной программе, в зависимости от операционки и опыта (Adobe Premier, Movie Maker, Final Cut и т.д.). Из сырого видео нужно вырезать все лишние паузы, неправильные клики, итоговое действие можно чуть ускорить. При переходе к новому кейсу не обязательно показывать путь от предыдущего этапа или со стартовой страницы — можно сделать монтажный переход и начать сразу с нужного интерфейса. Основные переходы лучше подгонять под музыку.
  • Анимация с отрисованным в векторе интерфейсом — намного более сложная задача. В этой технике анимируется каждое действие: появление элементов, набор текста, нажатие каждой кнопки и т.д. Такая анимация выглядит аккуратнее и дает большую свободу: можно добавлять переходы, которых нет в функционале приложения (по мелочи: мы помним требования Apple и не обманываем пользователя!), подставлять любой контент (чтобы избежать проблем с авторскими правами, не заполнять в самом приложении демо-аккаунты и т.д.). Делается, естественно, дольше и сложнее, чем захват экрана: лучше отдать эту работу профессионалам или ограничиться захватом.


Анимация телефона

UPD, май 2017: опять же, для App Store раздел уже неактуальный, но может пригодиться для создания рекламы, эксплейнера или видео для Google Play.


Здесь тоже есть два пути: использовать 3D-модель устройства или снять живого пользователя с настоящим телефоном (снова напоминаю, что Apple против, но вряд ли из-за этого обновление не пройдет модерацию).

  • Модель телефона вместе с анимацией и простейшими титрами можно скачать на видеохайве. За 20-30$ вы получаете качественный шаблон в формате проекта After Effects. Работать с ним очень просто, разобраться можно с нуля: в проекте в названии каждой дорожки обозначено, какие данные нужно туда подставить. Но, конечно, в таком формате шаблон можно будет опознать с первого взгляда. Если вы хотите его хоть немного изменить и раньше не работали с AE, советую предварительно посмотреть базовый курс Эндрю Крамера.
  • Съемку видео лучше заказывать у студии или фрилансера. Если снимаете сами, обратите внимание на вставку интерфейсной анимации в экран телефона. Снимать экран вживую не советую: из-за перепада освещения и температуры цвета очень сложно снять видео так, чтобы это выглядло нормально, не говоря уже о бесконечных дублях. Так что лучше как минимум сделать экран зеленым на время съемки, а потом подставить заранее подготовленную анимацию. Если вам не нужно показывать сложное взаимодействие с интерфейсом, очень поможет приложение TrackFinger. Оно отслеживает движения пальцев и собирает информацию о них в проект After Effects.


Motion-дизайн, инфографика, титры

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

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

Мы пока не рискнули выкладывать подобный ролик на страницу App Store, используем его в качестве YouTube-рекламы (для чего изначально и делали):



UPD: В комментариях подсказали несколько полезных ссылок о видео для App Store (на английском):


UPD2: Поучаствуйте, пожалуйста, в опросе: пытаемся выяснить, насколько точно (по мнению разработчиков и пользователей) анимация в видео должна соответствовать анимации в приложении.
Поделиться публикацией

Комментарии 25

    +1
    Видео должно быть 30 fps. Проверено 2-ух часовыми муками тщетных попыток upload-а.
      0
      А мы заливали 25 fps, вроде все прошло гладко.
        0
        У меня было что-то вроде 44.6, после конвертации стало 29.9 и загрузка прошла успешно. Возможно, условие успеха такое fps<=30.
        0
        Два часа — это не так плохо, у меня ушло два дня, чтобы понять, почему видео с 30.07 fps не принимается iTunes Connect. Так что да, вероятно условие 30 fps или незначительно ниже.
        +2
        У студий занимающихся рекламными роликами начались прекрасные времена :)
          +1
          Красивое видео конечно хорошо, но я бы предпочел увидеть в рамке телефона на видео то же, что и после запуска самого приложения.
          А то может получиться так, что в видео будет вкладываться больше денег, чем в разработку приложения.
            0
            Да, после некоторых ролико от приложений сплошные разочарования в плане интерфейса
            Примеры:
            1) Один
            2) Два
              0
              А почему в красивом видео не показать интерфейс приложения таким, какой он есть? Это со всех сторон выгоднее и безопаснее: и Apple гарантированно не забанит, и не будет разочарованных пользователей, которые поставят низкую оценку в сторе.

                0
                Так а почему Вы так не сделали? Судя по видео, интерфейс приложения формируется из голограмм вокруг устройства. Плюс, как уже сказали, некоторые анимации, представленные на видео, в приложении отсутствуют. И не зря Apple просит не зумить контент, такие эффекты искажают реальность.
                Возможно я придираюсь, но если подходить к вопросу формально, то по-другому никак.
                  0
                  Все, что связано с функциями приложения и действиями пользователя в нем, в ролике показано точно. Приукрашены анимации появления некоторых элементов на монтажных склейках — и, возможно, лучше действительно обойтись без этого.
                  Хорошо, что вы подняли эту тему! Надо будет как-то выяснить у пользователей приложения, разочаровывают их такие несоответствия, или они их вообще не замечают.

                  А вот насчет зума не соглашусь. Я как пользователь буду рада, если в видео будет приближение к той кнопке, которую мне нужно будет нажать — мне показывают ровно то, что важно в этом кадре, не нужно отвлекаться на все остальное. Конечно, до тех пор, пока от этого зума голова не кружится)
                    0
                    Попробуйте добавить голосование в топик, вот и узнаем.
              +2
              Вот упрёк и вам повторю — нет у вас таких анимаций в приложении, как в ролике. Будь я цензором — не пустил бы!
                +3
                image

                Только мой перфекционизм задевают поплывшие буквы на клавиатуре? :)
                  0
                  Наш теперь тоже задевает, сидим краснеем всей командой, больше так не будем))
                    0
                    Спасибо вам за внимательность! Картинку заменили, косяки исправляем.
                  0
                  Я себе небольшую подборку статей на английском сделал пару дней назад:
                  По первой ссылке в конце еще несколько статей…
                    0
                    О, спасибо! Можно добавить в статью со ссылкой на вас?
                      0
                      Можно и без ссылки добавить.
                    0
                    Перед отправкой видео на проверку настоятельно рекомендую прочитать пункты 3.14 — 3.17 App Store Review Guidelines
                      0
                      Мучаюсь как раз с этим :(
                      Главное, что не получается, так это подключить девайс по AirPlay с маком =(
                      Подключены к одной сети Wi-Fi, но у девайса ни в какую не появляется этот желанный значок AirPlay, чтобы начать соединение
                        0
                        Советую так же в список рекомендуемых ссылок включить видео сессии с WWDC, там достаточно хорошо всё описано.

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

                        P.S. Хорошая новость для тех, кто залил превью для 4" экранов, но не сделал это для 4.7" и 5.5". Видео для 4" будет отображаться на этих устройствах (iPhone 6 и 6+), хотя и потерей качества.
                          0
                          Подскажите, учитывая набор разрешений который вы описали для разных девайсов — при заливке видео в апстор есть возможность залить разные разрешения для разных типов девайсов?

                          Или можно залить одну максимальную версию которая будет ресайзиться под меньшие разрешения?
                            0
                            Для айпэда нужен отдельный ролик — там соотношение сторон совсем другое, а для всех айфонов вроде подходит full HD (как у 6+) и дальше уже ресайзится.
                              0
                              спасибо
                                0
                                только неясно зачем делать видео для айпед если приложение само для айфонов?

                                с айпеда разве можно смотреть айфон приложения?

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

                            Самое читаемое