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

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

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

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

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

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

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

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

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

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

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

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

Easy In — Easy Out

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

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

Easy Ease

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

График

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

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

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

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

Кривые Безье

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

Motion Blur

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

Пример motion blur

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

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