Анимация в веб-дизайне: что должен знать и уметь веб-дизайнер?

Всевозможные анимации преследуют вас в интернете повсеместно, даже если вы не придаете им особого значения. Вы открываете новую вкладку в браузере — на ней отображается анимация загрузки страницы. Добавляете песню в любимые в Spotify — серое сердечко становится зеленым, выплескивая несколько маленьких сердечек в стороны. Устанавливаете приложение на смартфон — прогресс установки отображается в виде заполняемого круга (в зависимости от операционной системы может отличаться). И это самые простые примеры использования анимаций.

Соцсети, корпоративные сайты, лендинги, приложения, игры и операционные системы — все они используют анимации различной сложности. Зачем? Затем, что современному пользователю нравится динамический, а не статический контент. Каждая приятная глазу анимация — небольшая порция дофамина. Едва ощутимая, но достаточная, чтобы сайты и приложения из начала двухтысячных сегодня казались нам абсолютно «деревянными» и непривлекательными.

Итак, сегодня речь пойдет об анимациях в веб-дизайне. Об их ключевых характеристиках, возможностях и преимуществах использования. Будет интересно!

Ключевые характеристики анимации

Анимация в веб дизайне строится на трех основных характеристиках. Это плавность, свойства и скорость. 

Плавность (easing)

Easing — это значение, которое демонстрирует, с какой скоростью видоизменяется элемент за определенный временной промежуток. Данный параметр нельзя путать со скоростью анимации. Последний имеет определенную неизменную величину, в то время как плавность — переменчива. Представьте, что вы толкаете машину. Сначала медленно, а затем постепенно набираете скорость. Это самый простой способ объяснить такую характеристику, как плавность.

Характеристика easing позволяет добавить реализма более сложным анимациям и сделать их более приятными глазу.

Самые популярные сценарии использования параметра easing — ease-in и ease-out:

• Ease-in — плавное ускорение. Именно оно используется при создании всплывающих баннеров на сайтах и в приложениях. И это хорошая практика, потому как моментальное появление баннера или любой другой информации на экране может лишь отпугнуть человека и вызвать неприятные впечатления.
• Ease-out — плавное замедление. То есть, сначала анимация быстрая, а ближе к завершению замедляется и плавно приостанавливается. Яркий пример использования — лента Instagram. Если вы свайпнете снизу вверх и отпустите палец, лента будет прокручиваться, постепенно плавно приостанавливаясь, а затем прокрутка остановится.

Также есть linear-анимация — одинаково плавная. И ease in out — плавное ускорение и замедление, но с ускорением «посередине».

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

Свойства

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

Обратите внимание! Если вы применяете несколько свойств к анимации, необходимо описывать каждое из них во избежание путаницы.

Длительность и скорость

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

Согласно гайдлайнам Google Material Design, длительность анимации для разных устройств должна быть следующей:

• Для смартфонов — 200-300 миллисекунд
• Для планшетов — 400-450 миллисекунд
• Для смарт-часов — 150-200 миллисекунд

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

Хореография в анимациях

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

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

Линейное движение

Это достаточно простой вид анимационной хореографии. Его суть в том, что внешний вид и анимация объектов подчиняются одному заданному правилу. 

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

Очень важно, используя анимации, направлять внимание пользователя в одном векторе, не заставляя его взгляд метаться в стороны.

Подчиненное взаимодействие

Здесь немного сложнее. Суть подчиненного взаимодействия в анимации заключается в том, что у нас есть главный элемент, на котором концентрируется внимание пользователя и которому подчиняются прочие элементы. Такой тип хореографии в анимации дает чувство упорядоченности. Но самое главное — он помогает пользователю сразу понять, какой элемент является главным.

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

Как показать анимацию и передать ее в работу

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

Анимации в Figma

Figma — удобный облачный графический редактор, который в том числе поддерживает простые анимации. Вы можете отрисовать экран начальной и конечной точки анимации, создать связь между ними и описать характер анимации. Вариантов много: мгновенная анимация, растворение, перемещение наружу или внутрь. Кроме того, в Figma можно настраивать плавность анимации (Easing) и ее продолжительность.

Делиться анимацией в Figma проще простого — достаточно скинуть клиенту ссылку на ваш прототип. Притом поделиться можно как всем прототипом, так и отдельными элементами, добавив к ним при необходимости текстовые пояснения и комментарии. Это удобно, но нужно помнить, что Figma не работает со сложными анимациями.

Анимация в After Effects

Если анимация в веб-дизайне сложная и многоуровневая, в ход вступает After Effects — профессиональный программный продукт от Adobe. Здесь можно смонтировать и подготовить стильный ролик, в котором будут продемонстрированы анимации любой сложности с уникальными авторскими эффектами и переходами. Да, времени придется потратить больше, чем при работе с Figma. Но результат того стоит.

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

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

Передача ролика разработчикам

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

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

Совет! Вам не обязательно стараться делать раскадровки максимально детализированными. Главное — делать их понятными, давать детальные описания и описывать все обозначенные выше параметры: свойства, плавность и длительность.

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

Вместо заключения

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

Мы в Wezom Академии уже сейчас уделяем особое внимание работе с анимациями на курсе «Web-дизайн с нуля до крутого портфолио». И это лишь малая часть всего того, что изучают наши студенты — будущие графические и веб-дизайнеры. Если вам интересна эта тема и вы хотите попробовать свои силы в веб-дизайне, самое время начать!