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

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

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

根据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 Hosting 评论 例如或 查看我们的其他评论 看看哪个虚拟主机最能满足您对速度的需求。

好处3 –增加权限

我们的50%的大脑参与了视觉处理(来源).

大多数人都是视觉学习者。 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 对于初学者来说是一个简单的工具,但是这个工具(或者, PHP library) 在您需要从 Web 服务器生成图形和图表时非常有用。 JP Graph 可免费用于非商业用途,您需要一个支持 PHP 4.3.x 或更高版本。

4。 JS InfoVis Toolkit

JavaScript InfoVis Toolkit

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

 5。 IBM Analytics(以前称为Many Eyes)

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

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

6。 谷歌图表

谷歌图

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

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

7. 轴心

轴

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

简易信息图表工具初学者

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

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

1。 Visme

visme

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

超过350,000个个人和组织(包括IBM和Disney这样的大公司的用户)使用该工具通过交互式图形和演示更好地进行通信。

2.通风

Venngage 是2011以来的一种用户友好的可视化工具。 该工具提供了一种简便的方法,可通过拖放编辑器,自由格式的画布以及示例和预构建模板的1,000 +创建图表。

3。 Easel.ly

Easel.ly

Easel.ly 帮助轻松地在线创建和共享视觉数据。 该Web应用程序具有简单的界面,其中包含一些预设模板和拖放功能。 尽管Easel.ly目前仍处于beta模式,但它已经在其服务器上拥有130,000多个用户创建的视觉效果。

4。 Vizualize.me

VIsualize.me

Vizualize.me 帮助创建有关个人的精美信息图表(是的,因此名为Vizualize Me)。 这是一个有趣的工具,只需单击几下即可创建漂亮的简历或个人资料。 如果您使用的是LinkedIn,则应真正尝试一下-该工具能够链接到您的LinkedIn个人资料并根据您的数据生成精美的图形。

5。 Hohli

Hohli

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

6。 Piktochart

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

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

 


 

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

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

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

我敢肯定,您过去在社交媒体网络上看到过其中的一些内容-这证明了带有有意义数据棒的漂亮图形!

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

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

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

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

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

被说明的咖啡饮料

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

风扇男孩的野外指南 

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

美国最佳啤酒2008

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

周期表字体

字体表

救助追踪器

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

电话的演变

时间线图表
来源:Pow Wow Now

 

签入图表

图图
资料来源:四方广场

深入研究

在研究这篇文章时,我碰到了许多有趣的博客和与我们的主题相关的网站。 认真地说,有很多东西可供阅读,学习和玩耍! 我从来不知道有太多可用的数据 Gap Minder 和 更好的世界流量; 我在信息网站/博客上看了很多 UX Booth (与数据可视化并不完全相关,但有很多关于可视化如何改善Web用户体验的有用文章), 动态图流动数据; 我深深欣赏所有展示的惊人作品 兰迪的Pinterest董事会 和  图表色情.

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

如果您没有在营销活动中利用数据可视化的功能,那么现在就该开始了。

作者照片

Jerry Low 的文章