Гайд по веб‑анимации:
как сделать сайт эффектным
и удобным — виды анимаций
на сайте, способы реализации, принципы использования

В статье речь пойдёт не о видосиках и гифках, а именно об анимированных объектах и эффектах на сайте, которые могут улучшить взаимодействие с интерфейсом и сделать его, с одной стороны, привлекательнее, с другой — удобнее.

Пользователям нравится, когда на сайте есть WOW-эффекты: нестандартные появления, вращения, деформации. Всё это делает сайт объёмнее, живее, атмосфернее. Анимация нужна не только ради красоты: она «затягивает» пользователя в интерфейс, ему становится интересно взаимодействовать с сайтом. Это улучшает поведенческий фактор, увеличивает время пребывания пользователя на сайте. В данной статье под интерфейсом имеются в виду не только сайты, а все диджитал-продукты: приложения, онлайн сервисы, личные кабинеты, платформы.

Посмотрите сайт Apple: при прокрутке лендосов с продуктом, мы обязательно встретим плавное появление текстов, поворот продукта по мере скролла, вставки видео, gif-объектов. Сайт становится интересным: это уже не просто продающий лендинг, который качает только контентом, а визуальный сторителлинг, который за счёт анимации погружает пользователя в продукт и продаёт идею.

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

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

Подробно мы рассказывали о задачах анимации в статье «Нужна ли сайту анимация». Пробежимся кратко по основным пунктам.

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

Выделение объектов с помощью движения

01

Привлечение внимания к кнопке за счёт подёргивания

02

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

03

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

Анимация используется для упрощения навигации. Например, всплывающие подсказки: по мере изучения сайта, контента, статьи, в нижнем правом углу высвечивается какая-то подсказка. Если мы посмотрим Youtube, появление подсказок на видео — это та же анимация: когда спикер на видео говорит «Сейчас у вас появится ссылка на нужный ролик» и, действительно, появляется ссылка. Хоть подсказки на Youtube настраиваются автором видео, это тоже анимация в интерфейсе, которая улучшает навигацию и глубину просмотра проекта.

Давайте представим, что вы оборудуете офисы, переговорные, залы и так далее: от мебели до техники. Это сотни товарных позиций. Причём не всегда очевидно: что, куда, для какого помещения, и в каких случаях нужно. Можно отметить «кому надо — тот найдёт и купит», — ок, а как быть с теми, кто ещё не в курсе, что ему это надо =). Можно сделать каталог с удобной фильтрацией, но продать через каталог товар, за которым пользователь не приходил — скорее случайность. Что если сделать виртуальную комнату, наполненную вашей продукцией. Пусть в ней каждый объект будет кликабелен и ведёт на товар или раздел каталога. Пользователь сможет пройти по помещению, посмотреть этот объект почти вживую, разобраться, зачем он нужен и даже представить, куда он у себя в офисе всё это поставит. Звучит круто и не совсем реально?

Цените пример:

Виртуальная презентация товаров Panasonic

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

Ориентироваться в таком блоке, если бы он целиком выпал на экран, было бы чудовищно. Но за счёт пошаговости, скрытия определённых объектов в этом меню, мы управляем вниманием пользователя. Не рассеиваем на 100 500 элементов, а фокусируем на определённых нужных ему категориях, и дальше, по мере перехода в нужную категорию, открываются более глубокие подкатегории с помощью анимации.

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

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

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

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

Ещё одна задача — эмоции и настроение. Анимация задаёт их за счёт нескольких факторов:

• что анимировано,
• как анимировано,
• с какой скоростью анимировано.

Работа студентки курса PRO Web, Веры Ганенко

Например, на лонгриде (большая креативно оформленная статья) анимация появления изображений, текста, контента — плавная, равномерная, способствует изучению материалов в определённом темпе, и более приятному и последовательному восприятию большого объема информации.

Анимация сборки продукта. Сделано в Dog Studio

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

Похожий пример с часами:

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

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

По назначению анимацию условно можно разбить на 2 типа: функциональная, эстетическая.

Функциональная — анимация взаимодействия пользователя с объектами интерфейса. Например, открытие pop-up окон, получение уведомления об отправке заявки, эффекты наведения на кнопки, раскрывание списков, смена состояния иконок, смена внешнего вида курсора при наведении на объекты или при drag-and-drop.

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

Отвечает за красоту, марафет, эмоции. Её задача — погрузить пользователя в проект, сделать сайт живее, динамичнее, интереснее.

Исходя из масштабности, анимацию делят на частную и глобальную.

К частной анимации относятся эффекты, применяемые к конкретным объектам. Такая анимация не используется на всём сайте. Например, анимирование в обложке страницы какой-нибудь вращающейся финтифлюшки.

Обложка сайта kanarys

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

пример

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

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

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

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

Групповая анимация настраивается не для каждого объекта, а для группы в целом. Самый частый пример использования групповой анимации: при прокрутке сайта на Tilda из стандартных блоков новые секции появляются на экране из прозрачности. Это и есть групповая анимация. То есть весь блок с его содержимым — это группа. И к этой группе применён эффект появления, не к каждому объекту, а ко всему блоку целиком.

Виды анимации можно классифицировать по объектам, с которыми происходит взаимодействие.

Функциональная анимация интерфейсов касается инпутов, элементов навигации, секций, меню, появления уведомлений, pop-up окон, поведения блоков (например, FAQ — анимация по клику, открытие списков, закрытие)

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

Чаще это эстетическая анимация: текст каким-то нестандартным образом появляется на экране:

• побуквенно (эффект печатной машинки),
• из невидимости,
• появление снизу вверх или слева направо,
• с искажением или поворотом.

Например, пользователь кликает на круглую кнопку, круг растягивается на весь экран и появляется белый текст. Это интерактивная анимация фонового объекта, предполагающая взаимодействие с интерфейсом.

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

Иногда фоновые объекты анимируются и без взаимодействия с интерфейсом, просто по мере скролла.

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

Чаще всего для анимации фона используется простая анимация движения объектов по фону, возможно зацикленная анимация, либо видео.

Если же речь идёт о сложных технологиях, используют JavaScript анимацию, WebGL, Three.js — как правило, это уже про трехмерные сцены.