Говорите громко.
Визуальная коммуникация всегда была важным фактором взаимодействия между людьми. Визуальные образы могут помочь передать любое сообщение с помощью маленького количества слов или вообще без них.
Мы не будем говорить банальные вещи о том, как важны изображения, вы и так это знаете. Но интерактивная инфографика является отличным дополнением к любому типу контента, будь то сообщение в блоге, обновление в социальных сетях или email-рассылка.
Инфографика, в частности, является практичным инструментом для визуализации данных и такой информации, которую сложно просмотреть бегло.
Кроме того, инфографиками можно делиться!
Но многие обычно не учитывают при разработке инфографики, что ее можно оживить с помощью анимации и интерактивности.
Чтобы вдохновить вас, мы составили список, в котором представлена интерактивная инфографика. А еще мы подготовили потрясающие шаблоны, которые побудят вас создать собственный визуальный контент.
Но сначала посмотрите это видео из серии уроков Visme на YouTube. В нем объясняется, как добавить всплывающую графику в ваш контент – а это является важным компонентом интерактивной инфографики.
Из видео вы узнаете, как создавать всплывающую графику и эффекты наведения в Visme для использования интерактивной графики, которая гораздо более привлекательна, чем статичные изображения.
Ниже представлены 23 анимированные и интерактивные инфографики, которые вы можете добавить в закладки для вдохновения.
Фильм «Путь: Во все тяжкие» (El Camino) от Netflix вышел в качестве продолжения сериала «Во все тяжкие» спустя годы после выхода финала в эфир. Ребята из Storygraph составили хронологию всего сериала, c которой можно ознакомиться перед просмотром «Путь: Во все тяжкие» в качестве краткого обзора.
Временная шкала выделена белой линией для каждого персонажа, и они движутся вдоль своей линии, встречая других героев и взаимодействуя в различных местах.
Кажется, что вся временная шкала была разработана как один длинный горизонтальный график, а затем персонажи были анимированы поверх него. Итоговый видеоролик получился веселым, легким и увлекательным.
Эта анимированная инфографика была разработана таким образом, чтобы напоминать роспись на керамике Древней Римской империи. В ней рассказывается о жизни Спартака и о том, как ему удалось собрать армию и создать Спарту.
Творческий аспект «Жизни Спартака» заключается в том, что все изображено в двухмерном формате, напоминающем рисунки на керамике той эпохи. Использование исторической визуальной привлекательности – это отличный способ вдохнуть жизнь в вашу инфографику.
Эта интерактивная круговая диаграмма от The Guardian рассказывает о том, что в каждом штате действуют разные законы и права. Интерактивность заключается в том, что при наведении курсора мыши на каждый штат высвечивается история о том, что означает каждый цвет.
Такая интерактивная инфографика одна из самых простых в создании, поскольку в ней отсутствует анимация. Всплывающие окна срабатывают при наведении курсора, чтобы облегчить восприятие.
К сожалению, последнее обновление этой диаграммы было сделано в 2015 году и было бы неплохо, если бы эта интерактивная инфографика была обновлена с учетом последних нормативных актов.
Не все инфографики должны быть посвящены серьезной информации. Они также могут быть веселыми и развлекательными. Например, этот пример показывает, как мужчины называют своих друзей в разных частях Соединенных Штатов.
При нажатии на одно из слов в верхнем меню, подсвечивается соответствующий регион США. Для обозначения распространенности использования слова «бро» используется 5 последовательных цветов. Этот пример очень прост, но в то же время очень забавен.
Еще один забавный пример интерактивной инфографики – это визуализация имен для собак по породам. Нажмите на кружок с названием породы, и во всплывающем окне появится ее иллюстрация, а также наиболее распространенные имена, используемые для этой породы.
Эта интерактивная инфографика была создана с помощью программы Visme. Вы можете сделать подобную инфографику для своего собственного контента, следуя такому же стилю.
Хотя мы не можем опробовать эту интерактивную инфографику онлайн, она была частью экспозиции, посвященной подводной геологии. Она использовалась в качестве презентационного инструмента профессорами, а также как инструмент познания для студентов.
Интерактивный дисплей цунами представлял собой сенсорный экран с визуализацией того, как формируются цунами, каково их воздействие на Землю и как они выглядят из космоса.
Технически эту интерактивную инфографику можно считать скорее информационным дизайном. Это отличный пример того, как с помощью творческого подхода и программирования можно вывести учебные пособия на новый уровень.
Tabletop Whale – это известный блог о научной иллюстрации и интерактивной инфографике. Неудивительно, что мы включили в этот список три примера их работ.
Это анимированная инфографика, объясняющая функции аппарата искусственной вентиляции легких, используемого для пациентов с COVID-19. Инфографика состоит из трех разделов. Первый наглядно показывает, как работает вентиляция легких, а затем демонстрируются два различных типа используемых аппаратов ИВЛ.
Такой тип анимированной инфографики – это отличный пример того, как легко объяснить внутреннюю работу сложного на первый взгляд аппарата. Информация такого рода будет полезна подписчикам.
Вторая интерактивная инфографика от Tabletop Whale – одна из самых известных. «Человек» – это анимированная инфографика о жизненном цикле человеческого зародыша. Дизайн представляет собой спиральную визуализацию, которая развивается снаружи внутрь.
Строго говоря, движение является оптической иллюзией – анимация применяется к каждому отдельному элементу, но временная шкала настолько безупречна, что кажется, будто она движется.
Интерактивные инфографики, подобные инфографике выше, становятся все более распространенными с каждым днем. Их особенность заключается в интуитивном дизайне. В этой инфографике Чартерного института эргономики и человеческих факторов легко заметить интерактивные триггеры.
Мало того, здесь также есть надписи, объясняющие принцип работы анимации. Создать инфографику в таком стиле легко с помощью Visme. Вам нужно всего лишь применить функцию всплывающего окна и использовать несколько заметных иконок в качестве визуальных триггеров.
Прокручивающиеся инфографики были очень популярны несколько лет назад. Это не обычная инфографика, поскольку ее создание требует много времени и усилий. Не говоря уже о способности сделать ее так, чтобы она быстро загружалась на сайте.
Приведенный выше пример – один из победителей в этой категории. Это прокручивающаяся интерактивная инфографика, которая наглядно демонстрирует, как создавать лучшие посадочные страницы. Инфографику назвали «Магистраль посадочных страниц», и ее дизайн идеально подходит для этой цели.
Изучая искусство и дизайн, нельзя обойти вниманием движение Баухаус. Видео выше – это познавательная анимированная инфографика об истории движения.
В соответствии с темой, дизайн прост, минимален и отвечает стилю Баухаус. Эта аккуратная интерактивная инфографика от 99designs – отличный пример того, как короткое видео вместо статичной графики может изменить ситуацию.
Интернет-издание National Geographic поделилось интерактивной инфографикой, наглядно демонстрирующей все новые небоскребы, которые планировали построить на Манхэттене к концу 2020 года.
Инфографика прокручивается на веб-странице горизонтально и разделена на секции, которые можно посмотреть в 3D. Здания выделены цветом в соответствии с годом их постройки, и даже отбрасывают тень на Центральный парк!
Создать такую интерактивную инфографику непросто. Для создания такого типа дизайна вам нужен профессионал. Но это того стоит!
Большая часть визуального контента в Интернете сейчас имитирует видеоигры, которые обеспечивают пользователям захватывающий опыт, сочетая первоклассное повествование с интерактивностью.
Например, этот анимированный и интерактивный материал с самого начала привлекает читателей потрясающими графическими эффектами и яркими, живыми цветами. Зритель может менять темп интерактивного произведения с помощью стрелок, расположенных справа.
Примечательной особенностью этого инновационного материала является использование плоских цветов для создания 3D-дизайна и интерактивных графиков, к которым можно получить доступ, нажав на значок рядом с названием вида животного.
Эта анимированная GIF-инфографика от Tabletop Whale одновременно обучает и развлекает.
Идея заключается в использовании микроанимации для привлечения внимания аудитории в соцсетях и имитации впечатлений от созерцания живых, великолепных бабочек.
Наша команда Visme создала эту интерактивную инфографику для сравнения 7 различных инструментов дизайна, доступных сегодня. Она стала частью статьи в блоге, в которой мы сравнили дизайна-инструменты.
Это интерактивная круговая диаграмма с измененными размерами фрагментов для представления конкретных аспектов данных. Когда вы нажимаете на сектор, появляется история, которая объясняет специфику этого инструмента дизайна.
Если что и нравится современным читателям и зрителям, так это свобода выбора.
Эта интерактивная инфографика предоставляет зрителям полную свободу в изучении каждого из различных уровней информации, углубляясь, как им нравится.
Эта интерактивная инфографика во весь экран привлекает внимание не только своим размером, но и умелым использованием ярких цветов, тонкой, но эффективной анимации и крупных шрифтов.
Warby Parker – это компания, известная тем, что она ломает шаблоны.
Например, в этом годовом отчете читатель находится по другую сторону баррикад. Вместо того чтобы предоставить обычные цифры о результатах своей деятельности за прошлый год, компания предлагает аудитории создать свой собственный отчет.
Эта анимированная инфографика использует красивую меланхоличную музыку и графику, чтобы передать своим зрителям мощное послание.
Она задает правильный тон и использует идеальное количество анимации, графических элементов и текста для создания мощного впечатления.
Эти потрясающие анимированные инфографики одновременно невероятно красивы и информативны. Они сочетают элегантный, профессиональный статичный дизайн с анимированными элементами, создавая уникальную и привлекающую внимание визуализацию данных.
Используя только черно-белые графические элементы, эта простая, но искусная анимированная инфографика поражает зрителей продуманными переходами, которые плавно соединяют между собой идеи и концепции.
Как и предыдущие инфографики, этот дизайн выделяется умелым использованием переходов и гармоничным сочетанием текста, анимации и повествования.
Если вы изучите каждый из переходов, то увидите, что здесь нет резких остановок; нет неустойчивых скачков от одной идеи к другой.
Этот графический монтаж сочетает реальные изображения и анимированная инфографику, что придает ему трехмерное качество и особую креативность. Это показывает, что сочетание, казалось бы, несопоставимых элементов может создать впечатляющую инфографику, если правильно их соединить.
Вдохновились?
После просмотра 23 потрясающих анимированных и интерактивных инфографик вы наверняка захотите создать свою собственную. С помощью Visme вы можете создавать интерактивный контент с всплывающими окнами и анимацией, используя шаблоны или разрабатывая их с нуля.
Как только ваша анимированная или интерактивная инфографика будет готова, вы сможете вставить ее на свой сайт, чтобы пользователи могли взаимодействовать с ней. Поделитесь инфографикой в соцсетях, загрузите ее в формате JPG или дайте на нее ссылку.
Вы будете удивлены положительной реакцией читателей и подписчиков.
Не забудьте поделиться с нами своими творениями!
Создайте дизайн бренда для своего бизнеса, независимо от вашего уровня подготовки.
Попробуйте Visme бесплатно
