Жизнь – как вождение велосипеда. Чтобы сохранить равновесие, ты должен двигаться.
А.Эйнштейн
Преамбула: в Alconost мы делаем продающие видеоролики для программных продуктов, веб сайтов, онлайн сервисов, мобильных приложений. Ключевая роль в таких роликах отводится скринкастам — показу действий пользователя в программе/сервисе/на сайте. Скринкаст — это показ товара “лицом”. Если скринкаст сделан убого — у зрителя останется ощущение убогого продукта и задача “мотивировать попробовать продукт” будет провалена.
Мы задумались над тем, почему иногда скринкасты выглядят неестественно и негармонично и как сделать так, чтобы скринкасты всегда получались хорошо. Оказывается, существуют 12 принципов анимации Диснея и если следовать им — любое действие на экране будет выглядеть красивым и гармоничным. Мы чуть-чуть поработали над этими принципами: убрали то, что не относится к скринкастам, а остальное адаптировали под специфику видеороликов о программных продуктах. В итоге у нас получилась памятка-руководство для видеодизайнеров, которой мы и хотим поделиться.
Итак, если вы заказали видеоролик, и вам раз за разом присылают промежуточные версии с отстойными скринкастами — покажите вашим «видеоменам» вот этот ролик:
Видео предназначено для людей, близких к видеодизайну, поэтому если вам нужно более подробное описание каждого принципа — добро пожаловать под кат.
Итак, если необходимо сделать классный скринкаст, руководствуйтесь следующими принципами:
Мелкие неразборчивые детали — это вселенское зло, превращающее скринкасты в средство раздражения зрителя. Когда мозг не может разобрать мелкую деталь, он посылает сигнал о потенциальной опасности, что вызывает ощущение напряжения и дискомфорта. Поэтому старайтесь в ролике показывать окно программы или сайта максимально крупно.
Хинт: чтобы окно можно было показать крупно — сжимайте его, когда делаете скриншоты. Чем более сжато окно, тем крупнее можно приблизиться к нему камерой в видео.
Если скриншот появляется на экране сразу целиком — это может выглядеть скучно, если скриншот собирается по элементам — это выглядит интересно. Разделите окно программы или сайта на отдельные элементы, проанимируйте их появление — и классный скринкаст вам обеспечен.
Постоянная равномерная скорость движения объектов — это зло.
Движение объекта должно начинаться с ускорения (Easy Out), которое постепенно уменьшается и к середине пути сходит на нет. Во второй половине пути объект должен двигаться с возрастающим замедлением. Завершается движение плавным медленным торможением (Easy In).
Это принцип похож на предыдущий, только область первоначального ускорения объекта очень мала, а большую часть пути занимает медленное затухание движения, стремление к плавному торможению от одного ключевого кадра к другому (Ease).
Если в процессе движения сжать объект по оси сонаправленной движению и растянуть по оси перпендикулярной движению — вам удастся сделать движение живым и динамичным. А если использовать преувеличенное сжатие и растяжение, можно добиться эффекта утрированности, комичности.
Если закончить движение объекта небольшим, чуть заметным отскоком — это очень оживит видео. Как и в предыдущем принципе, если преувеличить отскок, можно добиться эффекта гиперболы, утрированности.
Траектории движения объектов должны представлять собой нелинейные кривые Безье. Линейные траектории безусловно тоже имеют право на жизнь, но они не дают ощущения динамики, выглядят “неживыми”, механическими и больше подходят для второстепенных объектов. Сочетание принципа Easy In-Easy Out с принципом использования кривых Безье гарантированно сделает скринкаст (да и видео в целом) естественным и гармоничным.
Объект в движении должен быть размыт. Чем быстрее движение — тем более “смазанным” должен быть объект. Иначе мозг зрителя будет пытаться понять, почему видео выглядит неестественно. Скорее всего это ему не удастся, но впечатление от видео будет испорчено.
 
Стоит отметить, что при анимации скринкастов не обязательно использовать абсолютно все перечисленные выше принципы. Здравый смысл и талант дизайнера еще никто не отменял ;)
Об авторе
Alconost занимается локализацией приложений, игр и сайтов на 60 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.
Подробнее: https://alconost.com
А.Эйнштейн
Преамбула: в Alconost мы делаем продающие видеоролики для программных продуктов, веб сайтов, онлайн сервисов, мобильных приложений. Ключевая роль в таких роликах отводится скринкастам — показу действий пользователя в программе/сервисе/на сайте. Скринкаст — это показ товара “лицом”. Если скринкаст сделан убого — у зрителя останется ощущение убогого продукта и задача “мотивировать попробовать продукт” будет провалена.
Мы задумались над тем, почему иногда скринкасты выглядят неестественно и негармонично и как сделать так, чтобы скринкасты всегда получались хорошо. Оказывается, существуют 12 принципов анимации Диснея и если следовать им — любое действие на экране будет выглядеть красивым и гармоничным. Мы чуть-чуть поработали над этими принципами: убрали то, что не относится к скринкастам, а остальное адаптировали под специфику видеороликов о программных продуктах. В итоге у нас получилась памятка-руководство для видеодизайнеров, которой мы и хотим поделиться.
Итак, если вы заказали видеоролик, и вам раз за разом присылают промежуточные версии с отстойными скринкастами — покажите вашим «видеоменам» вот этот ролик:
Видео предназначено для людей, близких к видеодизайну, поэтому если вам нужно более подробное описание каждого принципа — добро пожаловать под кат.
Итак, если необходимо сделать классный скринкаст, руководствуйтесь следующими принципами:
Чем крупнее — тем лучше
Мелкие неразборчивые детали — это вселенское зло, превращающее скринкасты в средство раздражения зрителя. Когда мозг не может разобрать мелкую деталь, он посылает сигнал о потенциальной опасности, что вызывает ощущение напряжения и дискомфорта. Поэтому старайтесь в ролике показывать окно программы или сайта максимально крупно.
Хинт: чтобы окно можно было показать крупно — сжимайте его, когда делаете скриншоты. Чем более сжато окно, тем крупнее можно приблизиться к нему камерой в видео.
Сравните два скрина
Анимация элементов
Если скриншот появляется на экране сразу целиком — это может выглядеть скучно, если скриншот собирается по элементам — это выглядит интересно. Разделите окно программы или сайта на отдельные элементы, проанимируйте их появление — и классный скринкаст вам обеспечен.
Easy In — Easy Out
Постоянная равномерная скорость движения объектов — это зло.
Движение объекта должно начинаться с ускорения (Easy Out), которое постепенно уменьшается и к середине пути сходит на нет. Во второй половине пути объект должен двигаться с возрастающим замедлением. Завершается движение плавным медленным торможением (Easy In).
Скорость движения объекта можно выразить графиком
Easy Ease
Это принцип похож на предыдущий, только область первоначального ускорения объекта очень мала, а большую часть пути занимает медленное затухание движения, стремление к плавному торможению от одного ключевого кадра к другому (Ease).
График
Сжатие и растяжение
Если в процессе движения сжать объект по оси сонаправленной движению и растянуть по оси перпендикулярной движению — вам удастся сделать движение живым и динамичным. А если использовать преувеличенное сжатие и растяжение, можно добиться эффекта утрированности, комичности.
Эффект отскока (bounce)
Если закончить движение объекта небольшим, чуть заметным отскоком — это очень оживит видео. Как и в предыдущем принципе, если преувеличить отскок, можно добиться эффекта гиперболы, утрированности.
Кривые Безье
Траектории движения объектов должны представлять собой нелинейные кривые Безье. Линейные траектории безусловно тоже имеют право на жизнь, но они не дают ощущения динамики, выглядят “неживыми”, механическими и больше подходят для второстепенных объектов. Сочетание принципа Easy In-Easy Out с принципом использования кривых Безье гарантированно сделает скринкаст (да и видео в целом) естественным и гармоничным.
Motion Blur
Объект в движении должен быть размыт. Чем быстрее движение — тем более “смазанным” должен быть объект. Иначе мозг зрителя будет пытаться понять, почему видео выглядит неестественно. Скорее всего это ему не удастся, но впечатление от видео будет испорчено.
Пример motion blur
 
Стоит отметить, что при анимации скринкастов не обязательно использовать абсолютно все перечисленные выше принципы. Здравый смысл и талант дизайнера еще никто не отменял ;)
Об авторе
Alconost занимается локализацией приложений, игр и сайтов на 60 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.
Подробнее: https://alconost.com
