Говорите громко.
![Анимированная инфографика онлайн [Пошаговое руководство от Visme]](https://visme.co/blog/wp-content/uploads/2016/02/Header-2.gif)
Сегодня инфографику можно встретить повсюду в интернете – в блогах, социальных сетях и даже в почтовых рассылках.
Это неудивительно, так как инфографика – эффективный инструмент для многих целей, от маркетинга до линкбилдинга. Инфографика обязательно должна выделяться на фоне других, и отличный способ сделать ее необычной и запоминающейся – использовать анимацию.
Анимация и интерактивные функции помогут вам быстро заинтересовать и вовлечь целевую аудиторию.
Большинство инструментов для создания инфографики помогут вам сделать отличный проект всего за несколько минут, но немногие позволяют добавить анимацию и интерактивность.
В Visme есть эти функции – здесь можно создать как статичную, так и анимированную инфографику с движущимися иллюстрациями и интерактивными элементами, такими как ссылки, опросы и даже встроенные видеоролики.
В этом пошаговом руководстве мы расскажем вам, как создать анимированную инфографику в Visme, которая точно понравится вашим клиентам.
Посмотрите также наше 5-минутное видео, чтобы узнать больше о доступных в Visme функциях анимации.
Первым делом зарегистрируйте бесплатный аккаунт Visme. Для этого понадобится ввести адрес электронной почты, имя и пароль.
На главной странице Visme нажмите Create (Создать) в левом верхнем углу.
Создав новый проект, вы сможете выбрать один из тысячи шаблонов в библиотеке Visme. После недавнего обновления ориентироваться в ней стало ещё проще, поэтому вы без труда найдете подходящий шаблон.
Вы можете открыть и полистать шаблоны на вкладке Infographics (Инфографика), открыть нужную категорию или просто набрать ключевые слова в поисковой строке.
Если вам хочется начать с чистого листа, вы можете сделать и это. Почему бы и нет?
Для этого пошагового руководства мы выбрали анимированную инфографику о том, как правильно мыть руки, с пятью разделами.
Все шаблоны можно редактировать, изменяя текст, фотографии и другие элементы на нужные вам. Так вы сможете создать инфографику на совершенно другую тему, чем была в шаблоне.
Например, мы изменим тему инфографики на «5 типов анимаций, доступных в Visme». Не забудьте изменить размер шрифта, чтобы он гармонировал с другими элементами дизайна.
В проекты, созданные в Visme, можно добавить различные анимированные элементы,
в том числе иллюстрации (плоские, контурные или изометрические), персонажи (в разных позах), жесты, специальные эффекты и т.д.
Все эти элементы можно настраивать – вы даже можете изменить цвет кожи персонажа.
Вы также можете настроить скорость показа анимации и число ее повторов.
Все анимированные графические элементы, которые вы найдете в библиотеке Visme, разработаны нашей командой дизайнеров. Вы не встретите их на других платформах.
В любых проектах – презентациях, картинках для социальных сетей и анимированной инфографике – вы можете анимировать разные элементы дизайна, такие как блоки текста и значки, не анимированные изначально.
В Visme есть 14 типов анимации появления и исчезновения, которые легко применить к любому элементу.
Просто нажмите на объект, который вы хотите сделать анимированным, выберите Actions (Действия), а затем Animate (Анимировать). Выберите анимацию появления для объектов, которые должны оставаться на странице, и анимацию исчезновения для тех, которые больше не понадобятся.
Проект можно просмотреть, чтобы увидеть, как эффекты будут выглядеть в жизни.
Нажав на кнопку меню в левом верхнем углу и выбрав пункт Show objects list (Показать список объектов), вы можете настроить время появления каждого объекта с помощью временной шкалы.
Посмотрите, в какой момент объект появляется относительно других и переместите его вперед или назад по шкале, если нужно. Обратите внимание, что в списке объектов видны только объекты выбранного блока контента, а не все объекты инфографики.Посмотрите, в какой момент объект появляется относительно других и переместите его вперед или назад по шкале, если нужно. Обратите внимание, что в списке объектов видны только объекты выбранного блока контента, а не все объекты инфографики.
Если в вашей анимированной инфографике будут статистические данные, добавьте их в виде виджетов, анимированных диаграмм или графиков, чтобы аудитория обратила на них внимание.
Можно выбрать один из нескольких видов анимации – попробуйте и посмотрите, что будет лучше всего смотреться в вашем проекте.
Если графиков и диаграмм будет много, используйте похожие стили анимации во всей инфографике – так дизайн будет выглядеть гармоничнее.
Вы также можете добавить интерактивность, настроив появление чисел в те моменты, когда пользователь наводит указатель на столбцы или части диаграмм.
В инфографике можно использовать интерактивные элементы, связанные между собой, а также появление всплывающего текста или анимацию по наведению указателя.
Сделать это несложно – посмотрите, как мы оформили интерактивную диаграмму о лучших программах для дизайна. С помощью этих элементов также можно включить в инфографику интерактивный опрос.
Чтобы связать друг с другом разные элементы инфографики, нажмите на объект, при нажатии или наведении на который должен появляться другой объект.
Откройте меню Actions (Действия), нажмите Link (Связать), а затем выберите вариант Pop-up (Всплывание). Затем вы сможете выбрать, должен ли объект появляться при нажатии или наведении на него указателя.
Обратите внимание, что когда вы добавляете объекты в инфографику, им присваиваются стандартные названия.
Нажмите на значок меню в левом верхнем углу и выберите пункт Show objects list (Показать список объектов). Справа появится панель со списком объектов, на которой вы увидите эти названия и сможете изменить их, если потребуется.
Анимация и интерактивность выделят вашу инфографику из похожих проектов и сделают ее запоминающейся. Поэкспериментируйте с разными функциями и возьмите на заметку те, которые вам особенно понравятся.
Ещё один отличный способ добавить вашей инфографике визуального интереса – встроить в нее видео. Это можно сделать на вкладке Media (Медиафайлы) или Apps (Приложения) на панели редактора слева.
На вкладке Media (Медиафайлы) можно встроить в инфографику любые форматы контента с помощью ссылки или кода iframe. В корпоративных аккаунтах даже есть возможность встраивать в проекты HTML-код.
Если вы выберете раздел Videos (Видео), вы сможете выбрать видеофайлы из нашей библиотеки и добавить их в инфографику в качестве фона или акцента.
На вкладке Apps (Приложения) можно установить связь с разными видеосервисами (их список постоянно пополняется), поэтому вы можете вставить проигрыватель YouTube или Vimeo прямо в проект.
Помимо связывания объектов внутри презентации, вы также можете добавить ссылки на внешние сайты или на другие части инфографики. Это особенно полезно в случаях, когда ваша инфографика длинная и содержит множество данных.
Нажмите на объект, к которому вы хотите добавить ссылку (например, иконку социальной сети), откройте меню Actions (Действия), нажмите Link (Связать) и добавьте нужную ссылку.
В конце этой инфографики мы добавили ссылку на нашу домашнюю страницу. Вы можете указать, должна ли ссылка открываться в том же или в новом окне, так же, как это делается на обычных сайтах.
Прежде чем закончить работу, выберите подходящие шрифты и цвета, которые будут соответствовать вашему фирменному стилю и контенту инфографики.
В библиотеке Visme есть сотни бесплатных шрифтов и готовые цветовые схемы. Меняя их, вы сможете всего за один клик преобразить внешний вид инфографики. В Visme есть и специальный раздел для брендов, куда можно загрузить свою фирменную цветовую схему.
Наконец, настал момент поделиться вашим анимированным шедевром с публикой! Это удобнее всего сделать, встроив инфографику на веб-страницу или в блог. При этом все анимированные и интерактивные элементы будут работать.
Посмотрите, как мы встроили инфографику со сравнением программ для графического дизайна в этот пост.
Убедитесь также, что вся анимация и интерактивность, которую мы добавили в инфографику в этом руководстве, работает:
Через Visme можно опубликовать проект онлайн и поделиться с аудиторией частной или общедоступной ссылкой. Если вы хотите показывать его без доступа к интернету, проект можно скачать в нескольких форматах: PDF, JPG, PNG и HTML5.
HTML5 – это офлайн-формат, в котором работают анимированные и интерактивные элементы, добавленные в редакторе Visme.
Вы готовы начать создавать свою собственную инфографику в Visme? Зарегистрируйте бесплатный аккаунт и поэкспериментируйте с разными функциями, которые предлагает редактор Visme. Вы уже на пути к созданию шедевра!
Создайте дизайн бренда для своего бизнеса, независимо от вашего уровня подготовки.
Попробуйте Visme бесплатно
