Способы использования Lottie‑анимации на сайте

В то время, когда появились первые веб-сайты, из данных на них был только статичный текст. Позже добавились изображения и анимация в виде GIF-файлов, содержащая в себе палитру из 256 цветов. С тех пор анимация, используемая в вебе, стала более сложной и утонченной. Фактически, анимация стала неотъемлемой частью создания привлекательного контента, эффективного пользовательского интерфейса и пользовательского опыта (UI/UX).

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

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

Существует несколько способов добавления анимации на веб-ресурс, такие как видео, GIF или интеграция в код со сторонних ресурсов. Сегодня мы поговорим о Lottie-анимации.

Lottie — это формат файлов анимации с открытым исходным кодом на базе JSON (англ. JavaScript Object Notation), который позволяет добавлять анимацию на любые платформы так же легко, как статичный объект.

Данный формат файлов работает на любом устройстве и имеет кроссплатформенную поддержку и библиотеки. Lottie используется более чем 250000 компаниями по всему миру и во многих инструментах, которые мы используем ежедневно. Одно из самых популярных применений — стикеры Telegram.

Библиотека Lottie имеет множество бесплатных анимаций, благодаря вкладу талантливых дизайнеров со всего мира, которые можно настраивать в соответствии с цветами бренда и экспортировать в различные форматы, такие как Lottie, dotLottie, GIF, MP4, Transparent MOV и WebM. Lottie-анимацию можно привязать к триггерам скролла страницы, наведения или нажатия, что дает большое поле для творчества и возможностей.

Но почему мы должны использовать именно Lottie?

Множество различных форматов используется сейчас в веб-индустрии для того, чтобы привлечь внимание клиентов, вызвать определенные эмоции и расположить к себе. Давайте разберемся в чем разница между этими форматами и причем здесь Lottie.

GIF (Graphics Interchange Format) — это растровый формат графических изображений. Он был разработан в далеком 1987 году и долгое время был одним из наиболее распространенных форматов в интернете. Поддерживает прозрачность и анимацию.

PNG (Portable Network Graphics) — изначально был разработан для замены GIF, так как файлы GIF поддерживают только 256 цветов, в то время как PNG поддерживает более 16 миллионов цветов, благодаря чему данный тип файлов отлично подходит для отображения высококачественных фотографий и иллюстраций. Но при этом в данном формате файла перестала поддерживаться анимация.

SVG (Scalable Vector Graphics) — это векторная графика, основанная на языке XML, которая используется для отображения элементов графического дизайна без потери качества при масштабировании, таких как логотипы. Может анимироваться через код, но требует определенных знаний в этой области.

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

Lottie — это формат файла на основе JSON, в котором хранятся данные об анимации в виде текста.

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

Lottie-файл на 600% меньше GIF, что позволяет добавлять анимацию на сайт, не замедляя его.

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

Файлы Lottie доступны в бесплатных или платных библиотеках непосредственно на сайте lottiefiles.com. Но также есть множество сервисов, которые могут помочь с созданием, редактированием и простым использованием Lottie-файлов.

Создавать собственные анимации, сохраняя их в формате .json, возможно с помощью плагина LottieFiles для Adobe After Effects, в котором есть:

Создавать, экспортировать и использовать Lottie-анимации можно и в Figma с помощью плагина LottieFiles. Это позволит:

Работать с Lottie можно в Canva, ProtoPie, используя плагин Aninix в Figma и многих других ресурсах, а также интегрировать в Webflow, WordPress, Wix, Elementor и в Tilda через Zero Block.

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

Разобравшись в том, что именно представляет из себя Lottie-анимация, пора приступить к обсуждению главного. Что она дает веб-ресурсам?

• Анимация вызывает эмоции. Использование анимации для визуальных элементов может передавать смысл и настроение, захватывать внимание зрителя и погружать в уникальный опыт.

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

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

• Анимация запоминается. Движущиеся изображения запоминаются легче, чем статические, поэтому хорошим способом отложиться в памяти у клиента – использовать движение.

Иссара Вилленскомер, обучающий анимации UI/UX и продуктовых дизайнеров, написал популярный манифест «UX в движении», в котором излагает 12 принципов, отвечающих на вопрос: как узнать, когда и где реализовать движение для поддержки удобства использования?

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

Микровзаимодействия

Микровзаимодействия — это анимированные элементы, которые инициируются малейшим действием.

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

Здесь, при наведении на проект, мы видим, что изображение кликабельно, так мы можем получить больше информации о данной работе.

Загрузка

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

Навигация

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

Анимация логотипа

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

Netflix

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

Google

Google имеет множество анимаций на своих сервисах, которые поддерживают цветовую палитру бренда и мгновенно узнаваемы.

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

На этом веб-сайте прекрасно все: анимация логотипа при наведении, переход Menu в Open, анимации стрелок при наведении, целая история при прокрутке страницы. Это отличный пример того, как незначительные анимации могут оживить веб-сайт и завлечь пользователя.

Визуальная обратная связь

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

Здесь анимированное сердечко, которое будто пульсирует во время нажатия Like на понравившийся проект.

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

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

Анимация — путь к привлечению внимания, направления и заинтересованности пользователей.

Можно открыть любой веб-сайт и увидеть там анимацию. Сайт дня на awwwards.com не исключение.