Анимированная инфографика переживает момент. Будь то GIF-файлы или видео, они стали одним из наиболее распространенного контента в социальных сетях. Так что же делает их настолько привлекательными для потребления? Давайте внимательно рассмотрим несколько замечательных примеров, которые могут вдохновить ваш следующий анимированный дизайн инфографики.
Содержание статьи
Что такое анимированная инфографика?
—
Анимированная инфографика — это способ визуализации информации с использованием комбинации изображений, иллюстраций, диаграмм, графиков, текста и других элементов, которые анимированы для добавления движения.
За последние пять лет инфографика стала использоваться как средство, позволяющее сделать сложную информацию приемлемой. Но то, что когда-то было в основном статичной формой контента, значительно изменилось и теперь включает анимацию и анимированные элементы, которые помогают сделать идеи более легко интерпретируемыми и увлекательными.

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

Смелая и целенаправленная, эта статичная инфографика, озаглавленная «Женщины, управляющие миром» USC Marshall, представляет растущую и разнообразную группу женщин-предпринимателей, то, как они составляют рынок и какие компании они управляют.

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

—
Следом за популярностью статической инфографики стал рост анимированного GIF. Сила использования анимации в инфографике заключается в том, что она помогает подчеркнуть определенные факты и цифры, делая вашу инфографику еще более удобной для восприятия.
Самое лучшее в GIF — это то, что их не так сложно сделать. Вам не нужно разбираться в сложных программах, таких как Adobe Premiere Pro или After Effects. Вы можете создавать их в программах для редактирования фотографий, таких как Photoshop.

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

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

Эта инфографика о том, как работает динамик, взрывает различные технические элементы динамика, показывая, как они называются и как они работают.

—
Из GIF-файлов инфографика превратилась в полностью анимированную видеоинфографику. Возникновение видео объясняющего было чем-то, что можно увидеть. И это имеет большой смысл, когда вы рассматриваете, насколько убедительно наблюдать и слушать что-то, что вам объясняют и визуально представляют.
Видео-разъяснители успешно упрощают интерпретацию сложных тем, предоставляя визуальный контекст. Они решают ту же проблему, что и статическая инфографика и инфографика GIF, и обеспечивают еще больший контроль над опытом.
В любое время в видео инфографике создатель полностью отвечает за то, что отображается на экране, и за скорость, с которой он показывается. Для зрителя это более пассивный опыт по сравнению со статической инфографикой (прокрутка не требуется). Но визуальные и звуковые эффекты могут сделать вещи более понятными для аудитории, делая сложные идеи намного проще.
Вот некоторые из лучших примеров видеоинфографики.
Пример 1: Одиночество | Kurzgesagt
Kurzgesagt специализируется на создании больших идей, доступных посредством увлекательного повествования и сложной анимации.
Via Kurzgesagt
Канал использует визуальные метафоры для воплощения в жизнь фактов, цифр и идей — например, концепцию одиночества, представленную здесь как персонаж с дырой в груди.
Пример 2: Высший | Патриот с Хасаном Минхаем
Хасан Минхадж, ведущий «Патриотического акта» на Netflix, часто шутит о том, что его выступление в PowerPoint показалось до 11. Но, как вы можете видеть в этом видео, он на самом деле не преувеличивает.
Акт о патриоте
Каждый эпизод охватывает отдельную тему, и цвета и образы всегда адаптируются. Но это по сути одна длинная инфографика, объединяющая цитаты, изображения, графики и многое другое. В этом случае анимированная графика, по сути, является вторым ведущим шоу и имеет решающее значение для успешного удержания аудитории на той же странице, на которой Минхадж пытается объяснить что-то довольно сложное в течение получаса.
Пример 3: как Toyota изменила то, как мы делаем вещи | Bloomberg
В серии Bloomberg «Тогда это произошло» используется действительно простой, но эффективный анимированный инфографический стиль.
Виа Блумберг
Сосредоточенный вокруг идеи альбома для вырезок или чертежной доски, их стиль сочетает в себе картинки, графики, текст и многое другое в виде вырезанных фрагментов информации, собранных вместе на столешнице. Чёрно-белая цветовая гамма делает всё понятным и доступным. Но сама концепция делает ее игривой и убедительной.
Пример 4: Работа, упрощенная | слабина
Эта анимация из Slack показывает, что вы можете делать, используя в основном простые, узнаваемые значки, такие как электронная почта, сообщения и время, смешивая их с анимацией людей, взаимодействующих в анимированном пространстве.
Виа Слэк
Это видео не использует текст на экране и голос за кадром. Вместо этого он показывает, что Slack может сделать для вас знакомыми, узнаваемыми действиями (например, получение уведомления по телефону), чтобы помочь зрителю контекстуализировать, что приложение может сделать для них.
Пример 5. Гибкость гибридного облака | Microsoft
Это видео — определение того, что делает стиль анимированной инфографики столь привлекательным для потребителей. Он использует сложную концепцию, облако, и позволяет легко понять, как это может помочь вашему бизнесу.
Через Microsoft
Поддерживая сценарий с помощью контекстно-зависимой анимации (то, что начинается с того, что сервер превращается в здание, а это здание в конечном итоге подключается к облаку и т. Д.), Он визуально передает то, что этот сервис может сделать для вас во многих отношениях. более убедительный способ, чем просто использование статистики или отснятого материала.
Способность визуализировать данные
—
По мере развития инфографики росла и их аудитория. Сегодня люди привыкли объяснять им сложную информацию в легко усваиваемых визуальных формах. И все больше и больше люди захотят идти в своем собственном темпе.
Следующая граница интерактивной инфографики уже появляется, и ожидается, что стиль «выбери свое приключение» будет расти. Но что не изменится, так это миссия инфографики — сделать комплекс приемлемым. Будь то статичная инфографика, GIF или видео, все они по-прежнему делают сложные представления о мире немного менее понятными.
Если вы хотите узнать больше о производстве видео или освоить видеомаркетинг, мы здесь, чтобы помочь. Сейчас самое время добавить видео и анимацию.