Как сделать красивые диаграммы и инфографику для ваших сайтов?

Статья написана:
  • Избранные статьи
  • Обновлено: Apr 15, 2019

Уведомление: _usort_terms_by_ID is устарела начиная с версии 4.7.0! Вместо этого используйте wp_list_sort (). в /home/218053.cloudwaysapps.com/wmdtwanpyt/public_html/wp-includes/functions.php на линии 4435

Если Интернет - это одно, это визуально.

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

Согласно инфографике Top Marketing Schools, инфографика может охватить около 15 миллионов человек.

Почему инфографика?

Маркетинговая компания Bell Pottinger увидела увеличение бизнес-бюджетов 55% на цифровые товары, такие как инфографика.

В инфографике о инфографике, Unbounce что число людей, ищущих инфографику, за последние два года увеличилось на 800%. При такой статистике трудно отрицать, что визуализация данных в форме инфографики является хороший контент / маркетинг для сайтов и блогов.

инфографическая статистика

Выгода # 1- Новые посетители

Добавление инфографики привлекает новых посетителей сайта несколькими способами.

  • Поиск в ИнтернетеПользователи Интернета могут проводить исследования по теме, в которой находится ваша инфографика. Если вы единственный сайт, на котором есть инфографика о том, почему черника делает вас умнее, то вы получите трафик от любого, кто ищет инфографику по этой теме. Те, кто ищет изображения специально, могут столкнуться и с вашей инфографикой.
  • Присоединяйтесь!: Инфографика из лучших маркетинговых школ, указывающая на то, что традиционная почта получает информацию о твитах 75, в то время как инфографика получает почти 600. Поскольку люди с большей вероятностью могут делиться своей инфографикой на Твиттере, чем с простой почтой, ваш потенциал для привлечения новых посетителей через социальные сети огромен.

Nielson / Norman Group По оценкам, среднее посещение страницы длится менее минуты. Если вы не заинтересуете читателя, она перебирает вашу страницу и переходит на следующий сайт.

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

Техническая задача обслуживания инфографики, насыщенной информацией

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

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

Выгода # 2 - удерживать посетителей

Nielson / Norman Group По оценкам, среднее посещение страницы длится менее минуты. Если вы не заинтересуете читателя, она перебирает вашу страницу и переходит на следующий сайт.

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

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

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

Преимущество #3 - добавить полномочия

Большинство людей являются визуальными учениками. NeoMam собрал исследования из таких источников, как Google Trends, Nielson и Pearson, которые показывают, что 70-процент сенсорных рецепторов находится в глазах, и люди могут принимать и осмысливать визуальную сцену только под 1 / 10th секунды.

Люди склонны верить в то, что видят, потому что они понимают это лучше. Выполнение исследований и их поддержка в вашей инфографике могут добавить к вашему бренду полномочия. Обязательно:

  • Предложить твердую статистику
  • Добавьте уважаемые ресурсы в нижней части инфографики
  • Добавьте графики и диаграммы, которые показывают эту статистику визуально

Когда вы объединяете визуальные ощущения с интерактивными функциями, такими как инфографика NeoMam, из которой получена эта статистика, вы не только фиксируете интерес своего читателя, но и привлекаете его.

Что вы заметили больше? Вы заметили простой рисунок на странице или тот, который перемещается, мигает или, возможно, запускает видео?


Что делает хорошую инфографику?

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

Информационная архитектура

В целом, хорошая часть визуализации данных состоит из трех основных элементов:

  1. Значимые данные,
  2. Надлежащие информационные проекты и
  3. Красивая графика.

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

Следовательно, до создание графика или инфографики, вам понадобится 1) Организуйте, фильтруйте и уточняйте свои данные; 2) Решите, как представить свои данные (например, проекты визуализации данных).

Добыча данных

Введите OpenRefine - мощный инструмент интеллектуального анализа данных, который избавляет нас от упорядочивания наших данных подряд за строкой на листе Excel. Этот инструмент, ранее известный как Google Refine (и Freebase Gridworks), помогает пользователям исследовать и очищать данные, преобразовывать данные из одного формата в другой и распространять его различными веб-службами.

В случае, если вы работаете с некоторыми массивными неупорядоченными данными, OpenRefine определенно должен быть в вашем наборе инструментов. Инструмент в настоящее время размещен на GitHub, вы можете посетите эту страницу за всю необходимую информацию и помогает. Для дальнейших последующих новостей и последних новостей, вы также должны проверить свой недавно запущенный веб-сайт на http://openrefine.org/

Представление данных

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

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

Как вы должны представить свои данные, чтобы ваша статистика была красивой, привлекательной и легкой для понимания?

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

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

Периодическая таблица визуализации данных

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


Инструменты для инфографики и зарядки

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

Да, бесчисленное количество инструментов для визуализации данных. Существуют комплексные инструменты, которые генерируют интерактивную графику из сложных данных; есть также легкие веб-приложения, которые ничего не делают, кроме генерации простых графических графиков оси 2.

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

Инструменты продвижения по графику

Во-первых, давайте посмотрим на некоторые из передовых продуктов.

1. ggPlot2 и R

R и ggplot2

R это компьютерный язык и среда для обработки данных, расчета и графического отображения. ggplot2, с другой стороны, представляет собой систему построения графика для R, которая помогает создавать сложную многослойную графику. Например, HeatMap, например, построен с использованием ggplot2 и R.

Если вы увлекаетесь изучением R и ggplot2, LearnR это отличный блог для дальнейшего чтения (хотя блог не был обновлен в течение некоторого времени).

2. jqPlot

jqPlot

jqPlot является плагином и графическим плагином для jQuery Javascript. jqPlot создает красивые линейные, барные и круговые диаграммы. Инструмент поставляется с некоторыми хорошими функциями, такими как создание интерактивных точек, которые могут быть настроены пользователями в веб-браузерах. Однако стоит отметить, что этот инструмент не был полностью протестирован и может не поддерживаться некоторыми веб-браузерами, а именно Chrome и IE ниже 7.

3. JP Graph

JP Graph

JP Graph это инструмент построения диаграмм, основанный на PHP, который поддерживает различные типы сюжетов. Если вы пишете PHP-программу, которая нуждается в библиотеке создания графа, это то, что вы должны изучить. Я бы не сказал, что JP Graph - простой инструмент для начинающих, но инструмент (или PHP-библиотека) очень полезен, когда вам нужно создавать графики и диаграммы с вашего веб-сервера. JP Graph является бесплатным для некоммерческого использования, и вам понадобится веб-сервер, поддерживающий PHP 4.3.x или выше.

4. JS InfoVis Toolkit

JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit это библиотека, разработанная Николасом Гарсией Белмонт. Библиотека поставляется с широким спектром вариантов визуализации и полностью бесплатна.

5. Много глаз

Многие глаза от IBM

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

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

6. Диаграмма Google

Google Chart

Google Chart является бесплатным, мощным, гибким и поддерживается множеством других инструментов разработчика.

Диаграмма на Google Chart основана исключительно на технологии HTML5 / SVG; инструмент помогает создавать диаграммы в различных форматах с красивой анимацией и интерактивными элементами управления.

7. Ось

Ось

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

Легкие инфографические инструменты для начинающих

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

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

1. Visme

visme

Visme это платформа DIY, которая позволяет пользователям создавать профессиональные презентации и инфографику.

Больше, чем лица и организации 350,000 (включая пользователей крупных компаний, таких как IBM и Disney), используют инструмент для лучшего общения благодаря интерактивной графике и презентациям.

2. Easel.ly

Easel.ly

Easel.ly помогает легко создавать и обмениваться визуальными данными. Веб-приложение поставляется в простом интерфейсе с некоторыми предустановленными шаблонами и функциями перетаскивания. Хотя Easel.ly по-прежнему в настоящее время находится в бета-режиме, но на его сервере уже больше, чем 130,000-созданных визуальных образов.

3. Vizualize.me

VIsualize.me

Vizualize.me помогает создавать красивые инфографики о личности (да, отсюда и название Vizualize Me). Это забавный инструмент для игры, и он создает красивое резюме или профиль всего за несколько кликов. Если вы находитесь в LinkedIn, вы должны попробовать это - инструмент может связываться с вашим профилем LinkedIn и генерирует потрясающую графику на основе ваших данных.

4. Hohli

Hohli

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

5. Piktochart

Piktochart Infographic

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

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

6. Infogr.am

Infogram

Infogr.am это удобное веб-приложение для создания инфографики. Создавайте интерактивные инфографики и графики с помощью нескольких кликов, размещайте их в своей статье, публикуйте в блоге или делитесь с друзьями. С помощью некоторой инфографики 200 000 и новых подписчиков 10 000 в неделю это самое быстро растущее сообщество визуализации данных в мире.


Прежде чем вы начнете: инфографика Вдохновение

Итак, вы готовы создать свою собственную инфографику? Подождите. У нас еще осталось немного больше.

Вот некоторые из самых популярных инфографик и графиков, захваченных из Интернета.

Я уверен, что вы видели некоторые из них в социальных сетях в прошлом, что доказывает, что симпатичная графика со значимыми палочками данных!

Кроме того, есть причины, по которым в наши дни галереи инфографики становятся предметом интенсивной торговли.

Обращаясь к чужим работам, мы узнаем, что хорошо работает с аудиторией.

  • Каков средний размер популярной инфографики?
  • Какой тип темы наиболее приветствуется зрителями?
  • Должны ли вы включать как можно больше данных в свои диаграммы?
  • Сколько пулевых точек вы должны покрывать в своей инфографике?
  • Что делает эту инфографику популярной?

Примеры из реальной жизни: типы инфографики

Это вопросы, которые нужно задать, когда вы просматриваете образцы.

Кофейные напитки Иллюстрированный

Кофейные напитки Иллюстрированный
источник: lokeshdhakar.com

Полевое руководство для поклонников

Руководство пользователя игрового мира
источник: PC World

Лучшее пиво в Америке 2008

Лучшее пиво в Америке
источник: Mikewithart.com

Периодические таблицы шрифтов

Таблица шрифтов

Отслеживание

Отслеживание
источник: New York Times

Эволюция телефона

Временная хронология
Источник: Пау Вау сейчас

Проверить в графике

графический инфографический
Источник: Четыре квадрата

Копаем глубже

Я столкнулся с десятками интересных блогов и веб-сайтов, связанных с нашей темой, когда я делал свое исследование для этой публикации. Серьезно, есть так много, чтобы читать, учиться и играть! Я никогда не знал, что доступно так много данных Зазор Лучший мировой поток; Я много читал на информационных сайтах / блогах, таких как UX Booth (не полностью связанные с визуализацией данных, но есть много полезных статей о том, как визуализация улучшает работу веб-пользователей), Динамические диаграммы, Проточные данные, так же как Коробки и стрелки; и я глубоко восхищаюсь всеми потрясающими работами, Пинтестерная доска Рэнди График порно.

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

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

О Джерри Лоу

Основатель WebHostingSecretRevealed.net (WHSR) - обзора хостинга, которому доверяют и используют пользователи 100,000. Более чем 15-летний опыт в веб-хостинге, партнерском маркетинге и SEO. Вкладчик в ProBlogger.net, Business.com, SocialMediaToday.com и многое другое.

Подключение: