Как стать автором
Обновить
0
Alconost
Локализуем на 70 языков, делаем видеоролики для IT

Принципы анимации: как сделать хороший скринкаст программного продукта

Время на прочтение3 мин
Количество просмотров18K
Жизнь – как вождение велосипеда. Чтобы сохранить равновесие, ты должен двигаться.
А.Эйнштейн


Преамбула: в Alconost мы делаем продающие видеоролики для программных продуктов, веб сайтов, онлайн сервисов, мобильных приложений. Ключевая роль в таких роликах отводится скринкастам — показу действий пользователя в программе/сервисе/на сайте. Скринкаст — это показ товара “лицом”. Если скринкаст сделан убого — у зрителя останется ощущение убогого продукта и задача “мотивировать попробовать продукт” будет провалена.

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

Итак, если вы заказали видеоролик, и вам раз за разом присылают промежуточные версии с отстойными скринкастами — покажите вашим «видеоменам» вот этот ролик:



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

Итак, если необходимо сделать классный скринкаст, руководствуйтесь следующими принципами:

Чем крупнее — тем лучше


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

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

Сравните два скрина




Анимация элементов


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

Easy In — Easy Out


Постоянная равномерная скорость движения объектов — это зло.
Движение объекта должно начинаться с ускорения (Easy Out), которое постепенно уменьшается и к середине пути сходит на нет. Во второй половине пути объект должен двигаться с возрастающим замедлением. Завершается движение плавным медленным торможением (Easy In).

Скорость движения объекта можно выразить графиком
image

Easy Ease


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

График
image

Сжатие и растяжение


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

Эффект отскока (bounce)


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

Кривые Безье


Траектории движения объектов должны представлять собой нелинейные кривые Безье. Линейные траектории безусловно тоже имеют право на жизнь, но они не дают ощущения динамики, выглядят “неживыми”, механическими и больше подходят для второстепенных объектов. Сочетание принципа Easy In-Easy Out с принципом использования кривых Безье гарантированно сделает скринкаст (да и видео в целом) естественным и гармоничным.

Motion Blur


Объект в движении должен быть размыт. Чем быстрее движение — тем более “смазанным” должен быть объект. Иначе мозг зрителя будет пытаться понять, почему видео выглядит неестественно. Скорее всего это ему не удастся, но впечатление от видео будет испорчено.

Пример motion blur
image

&nbsp
Стоит отметить, что при анимации скринкастов не обязательно использовать абсолютно все перечисленные выше принципы. Здравый смысл и талант дизайнера еще никто не отменял ;)


Об авторе

Alconost занимается локализацией приложений, игр и сайтов на 60 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

Подробнее: https://alconost.com

Теги:
Хабы:
Всего голосов 33: ↑21 и ↓12+9
Комментарии36

Публикации

Информация

Сайт
alconost.com
Дата регистрации
Дата основания
2004
Численность
201–500 человек
Местоположение
США

Истории