如何为您的网站制作精美的图表和图表?

文章撰写者:
  • 推荐文章
  • 更新:Apr 15,2019

如果互联网是一回事,那就是视觉。

人们喜欢快速,易于访问的信息,信息图表只提供这种类型的数据可视化。 当与饼图,图表或照片结合使用时,即使是复杂的数据也更容易理解。

根据Top Marketing Schools的信息图表,信息图表有可能达到约100万人的15。

为什么选择图表?

营销公司Bell Pottinger认为,信息图表等数字商品的业务预算增长了55%。

在关于图表的信息图表中, Unbounce 表示搜索图表的人数在过去两年中增加了800%。 有了这样的统计数据,很难否认信息图表形式的数据可视化是一个 良好的网站和博客内容/营销.

信息图表统计

好处#1-新访客

添加信息图表可以通过几种方式吸引新的网站访问者。

  • 网络搜索:互联网用户可能正在研究您的信息图所在的主题。 如果您是唯一拥有蓝莓为何让您更聪明的信息图表的网站,那么您将从任何搜索该主题信息图表的人那里获得流量。 那些专门搜索图像的人也可能会遇到你的信息图。
  • 社会化媒体:Top Marketing Schools的信息图表显示传统帖子获取75推文,而信息图表几乎获得600。 由于人们更倾向于在Twitter上分享您的信息图而不是简单的帖子,因此您通过社交媒体吸引新访问者的潜力是巨大的。

尼尔森/诺曼集团 估计平均页面访问持续不到一分钟。 除非你抓住读者的兴趣,否则她会浏览你的页面并转到下一个网站。

网站访问者习惯于滚动信息和新闻。 这是信息图表如此有效地吸引读者兴趣的另一个原因。 有趣事实的直观表示是比文本段落更快地呈现信息的方式。 读者可以快速浏览您的信息图表,吸收所需的信息,并留出更长的时间来查看您提供的其他信息,或者可以为您的网站添加书签以供日后使用。

服务信息丰富的信息图表的技术挑战

但是,要记住的另一件事是,虽然信息图表增加了价值,但是需要很长时间才能加载的重型图像可能会吸引访问者。 Pew Internet的研究估计,普通网站访问者希望页面加载时间不到3秒。 您的网站加载速度越快,转化率就越高。

这是一个非常平衡的行为,以确保您的网站提供视觉丰富的体验,同时仍然快速加载闪电。 实现此目标的最佳方法是使用快速服务器和优化图像。 你会注意到我们的 网络托管评论,我们在评估网络主机时对速度进行了很多强调并进行了大量的速度测试。

好处#2-保留访客

尼尔森/诺曼集团 估计平均页面访问持续不到一分钟。 除非你抓住读者的兴趣,否则她会浏览你的页面并转到下一个网站。

网站访问者习惯于滚动信息和新闻。 这是信息图表如此有效地吸引读者兴趣的另一个原因。 有趣事实的直观表示是比文本段落更快地呈现信息的方式。 读者可以快速浏览您的信息图表,吸收所需的信息,并留出更长的时间来查看您提供的其他信息,或者可以为您的网站添加书签以供日后使用。

但是,要记住的另一件事是,虽然信息图表增加了价值,但是需要很长时间才能加载的重型图像可能会吸引访问者。 Pew Internet的研究估计,普通网站访问者希望页面加载时间不到3秒。 您的网站加载速度越快,转化率就越高。

这是一个非常平衡的行为,以确保您的网站提供视觉丰富的体验,同时仍然快速加载闪电。 实现此目标的最佳方法是使用快速服务器和优化图像。 你会注意到我们的 托管评论页面,我们将A2列为最快的托管公司之一。 您可以阅读各种网络主机上的完整评论,看看哪一个最符合您对速度和其他功能的需求。

好处#3 - 添加权限

大多数人都是视觉学习者。 NeoMam 来自Google Trends,Nielson和Pearson等来源的研究表明70百分比的感觉受体位于眼睛中,人们可以在1 / 10th的瞬间接收和理解视觉场景。

人们倾向于相信他们看到的东西,因为他们更好地理解它。 在您的信息图中进行研究并对其进行备份可以为您的品牌增添权威。 务必:

  • 提供可靠的统计
  • 在信息图的底部添加备受推崇的资源
  • 添加以可视方式显示这些统计信息的图形和图表

当您将视觉感官与交互式功能相结合时,例如NeoMam信息图来自这些统计数据,您不仅可以捕捉读者的兴趣,还可以吸引读者的兴趣。

你还注意到什么? 您是否注意到页面上的普通图形或者移动,闪烁或可能启动视频的图形?


是什么让一个好的信息图表?

展望未来,我们将研究当今数据可视化的一些最佳资源和工具。 无论你是一个休闲的博主,只是想为品牌创建一些漂亮的信息图表,或者是一个需要深入挖掘这个领域的职业平面设计师; 我相信你会发现这篇文章很有用。

信息架构

通常,一个好的数据可视化包含三个主要元素:

  1. 有意义的数据,
  2. 适当的信息设计,和
  3. 美丽的图形。

请记住,虽然信息图表和图表往往会吸引博客圈和社交媒体用户的注意力; 他们应该做的不仅仅是品牌推广 - 信息图表和图表首先应该以用户友好的方式提供无聊和混乱的数据。

因此,之前 创建图表或信息图表,您需要1)组织,过滤和优化您的数据; 2)决定如何呈现您的数据(又名数据可视化设计)。

数据挖掘

输入OpenRefine - 一个功能强大的数据挖掘工具,可以避免我们在Excel工作表上逐行组织数据。 此工具以前称为Google Refine(和Freebase Gridworks),可帮助用户浏览和清理数据,将数据从一种格式转换为另一种格式,并使用各种Web服务进行扩展。

如果您正在处理大量无序数据,OpenRefine绝对是您工具箱中必备的。 该工具目前托管在GitHub上,你可以 访问此页 获取所有必要的信息和帮助。 如需进一步的跟进和最新消息,您还应该查看其新推出的网站 http://openrefine.org/

数据展示

一旦准备好了数据,就该决定如何将它呈现给观众了。

完成这项工作有无数种方法:饼图,图表,折线图,直方图,热图,流程图,周期表等。 这些方法中的每一种都非常适合某些类型的数据(如果误用则会严重恶化)。

您应该如何展示您的数据,以便您的统计数据美观,引人注目且易于理解?

在这个问题上, 视觉素养 为您可用于显示数据的所有选项构建了一个非常方便的周期表(见下图)。

请注意,当您翻转鼠标时,周期表会显示许多有趣的示例,因此请确保您在网站上查看实际的表格。

关于数据可视化的周期表

如果您正在寻找非传统方法,那么您应该检查 这篇很棒的文章 在Smashing Magazine上。 这篇文章是在不久前发表的,但我发现它非常有帮助。


信息图表和充电工具使用

一旦完成了信息架构,就需要进行一些真正的生产。 从原始数据制作好看的图表绝非易事,幸运的是有无数工具可以完成工作。

是的,无数的数据可视化工具。 有一些综合工具可以从复杂数据中生成交互式图形; 还有简单的Web应用程序,除了生成简单的2轴线图之外什么都不做。

出于实际原因,我们将调查双方并为高级和临时用户列出多个图形工具。

高级制图工具

首先,让我们看看一些先进的东西。

1。 ggPlot2和R.

R和ggplot2

R 是一种计算机语言和数据操作,计算和图形显示的环境。 ggplot2另一方面,是R的绘图系统,有助于生成复杂的多层图形。 例如,上面的HeatMap是使用ggplot2和R构建的。

如果你热衷于学习R和ggplot2, LearnR 是一个很好的博客供进一步阅读(虽然博客已有一段时间没有更新)。

2。 jqPlot

jqPlot

jqPlot 是jQuery Javascript框架的绘图和图表插件。 jqPlot可生成漂亮的线条,条形图和饼图。 该工具带有一些不错的功能,例如生成可由用户在Web浏览器上调整的交互点。 但是,值得注意的是,此工具未经过全面测试,可能不受某些Web浏览器支持 - 即7下的Chrome和IE。

3。 JP Graph

JP Graph

JP Graph 是一个PHP驱动的图表工具,支持各种绘图类型。 如果您正在编写需要图形创建库的PHP程序,那么您应该研究这个问题。 我不会说JP Graph对于初学者来说是一个简单的工具,但是当您需要从Web服务器生成图形和图表时,工具(或PHP库)确实非常有用。 JP Graph是免费的非商业用途,您需要一个支持PHP 4.3.x或更高版本的Web服务器。

4。 JS InfoVis Toolkit

JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit 是由Nicolas Garcia Belmont开发的图书馆。 该库提供了广泛的可视化选择,并且完全免费使用。

5。 很多眼睛

IBM的许多眼睛

IBM Analytics 是一个免费工具,使用户可以从几乎任何类型的数据集创建可视化。

Many Eyes托管在IBM服务器上,不仅仅是数据可视化 - 它允许用户上传自己的数据集,并根据存储在服务器中的任何数据生成新的可视化模型。

6。 谷歌图表

谷歌图

谷歌图 是免费的,强大的,灵活的,并且得到许多其他开发人员工具的支持。

Google Chart上的图表纯粹基于HTML5 / SVG技术; 该工具可帮助创建各种格式的图表,并具有漂亮的动画和交互式控件

7。 轴

轴

Axiis 是由Tom Gonzalez和Michael VanDaniker开发的开源数据可视化框架。 该工具专为初学者和专业开发人员而设计。 Axiis提供预构建的可视化组件以及抽象布局模式和渲染类,允许您创建自己独特的可视化。

简易信息图表工具初学者

不可否认,大多数博主(包括我自己)不需要上面的综合图表工具来进行常规博客操作。 更常见的是,我们所需要的只是一个简单的Web应用程序或一个简单的工具来快速完成工作。

话虽如此,这里是创建工具列表,需要很少的学习努力和用户友好。

1。 Visme

visme

Visme 是一个DIY平台,允许用户创建专业的演示文稿和信息图表。

超过350,000个人和组织(包括来自IBM和迪士尼等大公司的用户)利用该工具通过交互式图形和演示进行更好的沟通。

2。 Easel.ly

Easel.ly

Easel.ly 有助于在线轻松创建和共享可视化数据。 Web应用程序带有一些简单的界面,包含一些预设模板和拖放功能。 尽管Easel.ly目前仍处于测试阶段,但它已经拥有超过130,000用户在其服务器上创建的视觉效果。

3。 Vizualize.me

VIsualize.me

Vizualize.me 帮助创建关于个人的美丽信息图表(是的,因此名为Vizualize Me)。 这是一个有趣的工具,只需点击几下即可创建精美的简历或个人资料。 如果你在LinkedIn上,你应该尝试这个 - 该工具能够链接你的LinkedIn个人资料,并根据你的数据生成令人惊叹的图形。

4。 Hohli

Hohli

需要一个简单的图表生成器 然后 Hohli 是参观的地方。 这个Web应用程序支持十二种不同大小的各种类型的图表 - 所有用户需要去的是键入数据和设计细节。

5。 Piktochart

Piktochart信息图表

Piktochart 是一个基于模板的信息图表工具,可以帮助非设计师创建漂亮的图形和图表。

该工具支持拖放功能,可在预设模板,图标,矢量和图像中提供广泛的选择。 如果您正在寻找一个简单的图形工具,并且不介意为服务支付少量费用,Piktochart绝对是您最好的选择之一。

6。 Infogr.am

信息克

Infogr.am 是一个用户友好的网络应用程序,用于制作图表。 只需点击几下即可创建交互式信息图表和图表,将其放入文章,博客文章或与朋友分享。 随着一些200 000信息图表的创建和10 000一周的新注册,它是世界上发展最快的数据可视化社区。


在您开始之前:信息图表灵感

那么你准备好创建一些自己的信息图表吗? 等待。 我们还有一点要去这里。

以下是从互联网上捕获的一些最流行的信息图表和图表。

我很确定你过去曾在社交媒体网络上看到过其中的一些内容 - 这证明了具有有意义数据的漂亮图片!

此外,还有一些理由说明为什么信息图库如今被贩卖得如此繁重。

通过引用他人的作品,我们可以了解哪些内容适合观众。

  • 流行信息图的平均大小是多少?
  • 观众最喜欢哪种主题?
  • 您是否应该在图表中包含尽可能多的数据?
  • 你应该在信息图中覆盖多少个要点?
  • 是什么让这个信息图流行?

现实生活中的例子:信息图的类型

当您浏览样本时,这些是要问的问题。

被说明的咖啡饮料

被说明的咖啡饮料
来源: lokeshdhakar.com

风扇男孩的野外指南

PC World Fan Boys Field Guide
来源: 计算机世界

美国最佳啤酒2008

美国最好的啤酒
来源: Mikewithart.com

周期表字体

字体表

救助追踪器

救助追踪器
来源: “纽约时报”

电话的演变

时间线图表
来源:Pow Wow Now

签入图表

图图
资料来源:四方广场

深入研究

当我为这篇文章做研究时,我碰到了几十个与我们主题相关的有趣的博客和网站。 说真的,有很多东西需要阅读,学习和玩耍! 我从来不知道有这么多可用的数据 Gap Minder更好的世界流量; 我在信息网站/博客上看了很多 UX Booth (与数据可视化并不完全相关,但有很多关于可视化如何改善Web用户体验的有用文章), 动态图, 流动数据, 以及 框和箭头; 我非常欣赏所有令人惊叹的作品 兰迪的Pinterest董事会图表色情.

如果您只是开始数据可视化,我强烈建议您访问上面列出的网站和博客。

如果您尚未在营销活动中利用数据可视化的强大功能,那么现在是时候开始了。

关于Jerry Low

WebHostingSecretRevealed.net(WHSR)的创始人 - 100,000用户信任和使用的托管评论。 超过15在网络托管,联盟营销和SEO方面的多年经验。 ProBlogger.net,Business.com,SocialMediaToday.com等的贡献者。