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

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

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

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

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

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

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

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

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

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

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

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

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

Easy In — Easy Out

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

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

Easy Ease

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

График

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

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

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

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

Кривые Безье

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

Motion Blur

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

Пример motion blur

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

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

Автор: alconost

Источник ^[5]