数据可视化设计需要注意的流程、原则，以及如何避免一些陷阱

大数据所蕴含的能量最终如何有效地传递给用户，这不仅需要借助最新的前端技术，也对用户体验设计提出了另外一个层面的要求。在CMDN俱乐部第28期活动中，ThoughtWorks前端工程师陈显军从数据可视化谈起，详解数据可视化设计需要注意的流程、原则，以及如何避免一些常见的陷阱。

以下为ThoughtWorks前端工程师 陈显军的演讲实录：

最近几年，大数据和云服务，很火。我们在谈论大数据时，往往会谈到数据挖掘、数据分析，但实际上还有很重要的一块，因为所有数据的分析、挖掘，其最终目的都是将信息呈现给客户。所以我觉得可视化这一块，是最终面对客户的，最终是让用户可以体验到你所有的设计，但背后的数据，用户看不到。

数据可视化，一步一步来

数据可视化包含许多步骤，在此我简单地罗列一下（如下图所示），比如说可能做数据搜集、爬数据，或者到不同的业务部门进行搜集，然后对这些数据进行处理，进行数据过滤，相当于数据的预先处理。再接下来就是数据挖掘、分析，从大量的数据当中找出有用信息。

图：数据可视化流程

在数据挖掘、分析出来之后，如果呈现一串数据或者一个表格，这样很难吸引人，也很难打动客户。因此，对于客户而言，应该直接接触到Represent（表现）、Refine（改善）、Interact（交互）三个阶段。将数据进行可视化的展现，让数据生动起来，这就是数据可视化的一个比较简单但非常重要的流程。

说到可视化的展现，通常对于任何一门技术或行业来说，就是提炼出一个最基础的东西，提炼数据在本质上是有原则的，不是说我们可能觉得可视化，就自己通过想象去展现。

数据可视化，怎么个可视法？

 

从图形基本元素说起，怎么选择？

 

图形基本元素众多，长短、倾斜度可体现数据变化，图形大小、明暗度、色彩、形状等都可进行可视化展现。通过高矮可以区分数量大小，通过颜色可以区分类别。要想将最重要的信息传递给用户，相应的坐标图、说明文字、分类都是非常重要的。

在互联网上有着各式各样的图形，但为什么最基础的图形最常见？因为它的表达方式最为准确，也最为直观，用户很容易可以理解它要表达的内容。比如Map，可以通过不同的颜色来区分人口的密集度。还有Wordle，在早期博客上就有，某个词出现次数越多，字号就越大。

 

怎么组合？怎么展现？

 

我们开始说了最基本的图形，那么该如何去选择这些图形元素进行组合、展现？我在组合时经常会犯下一些错误，但这些错误你很难会发现。

图：分类不过5

就拿饼状图来说吧，我为了简单一点，把文字全部去掉，只留下个光秃秃的饼状图，因此，要进行区分就需要根据颜色来。但一旦分类超过某一个量，用户就很难区分哪一个多哪一个少，哪怕你加了标签和说明。饼状图表达方式非常准确，但如果分类过多的话，就应该考虑使用其他的表达方式。

数据可视化展现涉及到哪些工具？

数据可视化工具实际上分为三类，第一类是纯粹从设计角度去考虑。比如我们要对设计师做信息化的展现，我们就画一个图，不需要精确的比例，也不需要背后有很明确的数据来支持。还有一种是单独的工具，包括给设计师、程序员用的工具。此外，还有一种是完全通过程序的手段去生成图像。

实现数据可视化比较专业的工具：

 

Adobe Illustrator Microsoft Office Excel Tableau D3.js：D3.js是一个JavaScript库，用于处理基于数据的文档。D3.js能够帮助开发者使用HTML/CSS/SVG处理日常生活中的数据。 Processing

 

图：R语言——可用于常见的数据挖掘分析，并将结果以可视化方式展现

通常，我们有两种做法，一种即是数据可视化，另一种则叫做信息可视化。数据可视化基于数据本身，更注重背后的数据支持；信息可视化基于设计，譬如在一幅地图上展现“哪个区域人口密度最大”，不一定标识具体的人口数量，也不一定精确到小数点。

如果做数据可视化展现的话，可以去“纽约时报”（点击链接查看纽约时报可视化图表）等网站上看看，因为在数据的分析和展现方面，纽约时报在业界已经做得非常成熟了。

讲了这么多，主要是我们怎么去实现数据可视化，但真正做数据可视化的目的是什么？是为了告诉用户他们最终需要知道的信息。实际上，我们做数据可视化的目的就是讲故事，将隐藏在数据背后的、特别重要的信息以讲故事的方式分享给用户。