Анимированная инфографика: как сделать GIF и видео
Анимированная инфографика собирает в 3 раза больше просмотров, чем статичная. Движение цепляет взгляд в ленте, ровную статичную картинку пролистывают, не заметив. Собрать анимацию не сложнее, чем картинку. Если, конечно, знать процесс.
Форматы анимированной инфографики
GIF
Автоматически воспроизводится везде. Слабые места: 256 цветов и изрядный вес. Зато для коротких петлевых анимаций — самое то.
WebM / MP4
Качество выше, вес меньше. ВКонтакте и Telegram показывают их как видео. Зацикливание автоматом сработает не везде.
Как собрать анимацию
Сначала статичная основа
Сделайте статичную инфографику, которая работает без всякого движения. Дизайн должен жить сам по себе: анимация ложится поверх, а не заменяет его.
Выберите, что будет двигаться
Анимировать всё подряд — верная дорога к хаосу. Оставьте 2–3 элемента: появление заголовка, рост столбцов диаграммы, счётчик цифр. Фон и прочую статику не трогайте.
Эффекты и очередность
В GrafMaker каждый элемент анимируется отдельно. Эффекты на выбор: Fade In (появление), Slide (въезд), Scale (масштабирование), Typewriter (печатание текста). Задайте задержки, чтобы элементы выходили по очереди, а не все разом.
Длительность и петля
Для GIF оптимум — 3–8 секунд, для видео — до 15. Петлю замыкайте плавно: конец должен перетекать в начало, чтобы зацикливание не бросалось в глаза.
Экспорт и проверка
В соцсети уходит GIF до 50 МБ либо MP4/WebM. Telegram лучше работает с MP4 (там выше качество), ВКонтакте переваривает оба формата. Перед публикацией проверьте анимацию на телефоне.
Принципы хорошей анимации
- Последовательность. Элементы появляются один за другим, а не все сразу
- Ease-in/ease-out: движение начинается медленно, разгоняется и тормозит, как в природе
- Краткость. Одно движение живёт 300–600 мс, дольше не нужно
- Цель. Анимация помогает понять данные, а не развлекает сама по себе
Где это работает
- ВКонтакте: GIF в постах собирают в 2–3 раза больше реакций
- Telegram: видео с автовоспроизведением в каналах
- Email-рассылки, где GIF поддерживает большинство клиентов
- Презентации. Анимация оживляет слайды
- Сайты — динамичные баннеры и иллюстрации