大数据可视化的设计原则是什么？（浅析大数据可视化的5个设计原则）

“数据面板”、“大数据”、“数据可视化”、“数据分析”——越来越多人和企业，开始运用他们的数据来做一些有趣的事情。下面会分享一些观点，讲讲如何造就这种特殊且有意义的产品。

一用户不同，数据不同

任何时候设计一套复杂的系统，都不可避免要为很多用户和角色进行设计。总裁、经理和分析师是几个常见角色，每个都有自己的工作流程和对数据的需求。

定义好角色，产生不同视角，这本身就是一种艺术。在此就不详细解释了。关于角色，重要的一点是预先确定好，围绕它们来组织信息结构与线框图。

下面是一款健康报告应用的最终成品。这套系统有着不同的用户群，他们各自都需要不同的数据管理。创建了关键角色后，会根据每个角色来生成相应的图表界面，我们的客户都乐于接受这种方式。

二制作页面模型

在满屋子客户面前展示作品是件难事。无论是在解释线框图、流程图，还是就视觉设计进行讨论，都很难让每个人跟上你的观点。

通过角色来组织作品，会防止你(和客户)在这些讨论中跑题。核心点很简单：

首先为用户呈现他们需要的，再将页面余下的信息根据用户故事或信息层级，进行结构化处理。

如果一开始就使人分心，那么用户不仅难以分辨每个元素是什么，也难以集中精力于整个流程。

这是进行用户体验设计时需要牢记的一项准则。下面是制作页面模型的两个常用方式。

给画板创建某种结构。问问自己——通过这些信息要讲述怎样的事？

在behance和dribbble上有很多仪表板和数据图表项目，视觉上设计得很漂亮，但通常都使人眼花缭乱、过目即忘。它们要么是各种图表组件以缺乏层级的瀑布流形式排列，要么视觉上过度设计，并不适合这项数据的信息表达。

左图展示的就是眼花缭乱的数据画报。右图例子则是装饰物分散注意力，注意不到数据。

在上面的图中(左图)，这个数据面板用了控制台的方式来呈现信息……相当有压迫感。为避免如此，我们试着以组织信息的方式处理这类界面，让人们感觉像是在阅读杂志文章。

并不是说控制台式的界面就没有用武之地……我个人愿意设计成那样。但多数情况下，没有必要时刻看见所有信息。

最关键的一点——避免创造出令人一知半解的图形。为页面信息建立模型，首先给用户呈现关键信息，然后才是支撑内容。

三选择正确的图形

在美学方面，有很多(太多了)设计都在误用图表。

最糟的是——这些“坏习惯”似乎在成倍增加。随处可见本应是饼形图的面积图，还有本应该是柱状图的曲线图。让我们一起来制止这些设计……下面这些建议有助于你正确对待数据：

1始于数据

未经处理的原始数据表格一点也没有吸引力。但它是最佳的起点。它帮你开始思考数据中有哪些变量可用，这些变量数据如何关联。

原始数据的单调特性，会帮你思考系统中各种变量间的关联。

除了从空白数据行列入手，等待灵感忽然进入你意识。你还可以更积极一些，通过下面这些很棒的资源，帮你揭示出有趣的关联：

1. Charted ——Medium开发的一款自动数据可视化工具。

2. 通过Google Sheets、Illustrator和Sketch设计更好的图表。

3. Tableau——这个工具是最好的，不过相当昂贵。

在整个过程中，这部分并没有灵丹妙药。别对深入研究数据心存恐惧，试着混合搭配不同变量，创建基本图表。这需要时间，但它是值得的。我想到的一些绝妙点子，都来自这些原始数据文件的拼拼凑凑。

2处理离散数据和连续数据

我花了很长时间才意识到这点，有些图表比其他更能表达你的数据。在创作中很容易陷入这样的境地，选择一种好看的图表，然后指望它能发挥作用。

有些图形比其他更好，这取决于你所处理的数据类型。选择合适图表的方法之一，是评估你手中的数据。有两种主要数据：

离散数据——数值可清晰计数。比如进球数或点赞数。

柱状图最适合表现离散数据

连续数据——任何范围值。比如一季的降雨量，或一个人的身高体重。

曲线图最适合表现连续数据

3根据展示关系选择图形

围绕目标找到能提供信息的指标或者数据，选择合适的图形去展示需要可视化的数据。

数据的5种关系

首先，我们需要了解，数据通常包含五种相关关系：构成、比较、趋势、分布及联系。

构成：主要关注每个部分所占整体的百分比，如果你想表达的信息包括：“份额”、“百分比”以及“预计将达到百分之多少”，这时候可以用到饼图；

比较：可以展示事物的排列顺序——是差不多，还是一个比另一个更多或更少呢？“大于”、“小于”或者“大致相当”都是比较相对关系中的关键词，这时候会首选条图；

趋势：是最常见的一种时间序列关系，关心数据如何随着时间变化而变化，每周、每月、每年的变化趋势是增长、减少、上下波动或基本不变，这时候使用线图更好地表现指标随时间呈现的趋势；

分布：是关心各数值范围内各包含了多少项目，典型的信息会包含：“集中”、“频率”与“分布”等，这时候使用柱图；同时，还可以根据地理位置数据，通过地图展示不同分布特征；

联系：主要查看两个变量之间是否表达出我们预期所要证明的模式关系，比如预期销售额可能随着折扣幅度的增长而增长，这时候可以用气泡图来展示，用于表达“与……有关”、“随……而增长”、“随……而不同”变量间的关系。

对信息中包含的5种关系，可以简单归纳如下：

构成：占总体的百分比

比较：项目的排名

趋势：如何随着时间变化

分布：项目的频率情况

联系：变量之间的关系

条形图：

条图表达比较关系，按照强调的方式可以排列任何顺序，适用于高亮Top3或Top5数据，如在零售行业中统计畅销品的销售情况就是很好的应用。它是最通用的一种图表，应在所有的图集使用中占到25%。

柱状图

柱图用高度反映数据差异，用来展示有多少项目（频率）会落入一个具有一定特征的数据段中，比如分析公司人员构成是否存在老龄化现象，可以通过柱图看到25岁以下的员工有多少，25岁到35岁之间员工有多少等这种年龄的分布情况。同时，柱图还可以用来表示含有较少数据值的趋势变化关系。

分析图形有单指标柱图、多指标柱图以及堆叠柱图类型。

（1）、单指标柱图

（2）、多指标柱图

（3）、堆叠柱图

线图

线图可用来反映随时间变化而变化的关系，尤其是在趋势比单个数据点更重要的场合。

在柱图与线图的选择过程中，可以考虑数据的本质。柱图强调的是数量的级别，它更适合于表现在一小段时间里发生的事件，产量的数据很适合这个领域。线图强调的是角度的运动及图像的变换，因此展示数据的发展趋势时最好使用它，存货量就是一个很好的例子。柱图和线图的使用应占到图集看板的50%左右。

线图类型中可以有单线图，还可以在图中进行多指标趋势性比较。

（1）、单线图

（2）、多指标趋势性比较

饼图

构成比例关系时，最好使用饼图，给人一种整体的形象，可以展示每一部分所占全部的百分比，比如产品A预计销售额占到所有产品销售额的最大份额。

为了使饼图尽量发挥作用，在使用中不宜多于6种成分。人的眼睛比较习惯于按顺时针方向进行观察，所以应该讲最重要的部分放在紧靠12点钟的位置，如果没有哪一个部分比其他部分更加重要，那么就应该考虑让它们从大到小的顺序排列。

数据观除了有标准饼图，还提供中空饼图和环形饼图两种类型。

（1）、标准饼图

（2）、中空饼图

（3）、环形饼图

Attention！不适用饼图的情况

饼图是通过面积呈现数据的变化，当各指标所占比例接近时，无法直观的判断面积的大小，此时选择条图来呈现，规律就更加清晰。饼图是应最少使用的图表，在所有的陈述和报告中其使用率应少于5%。

错误的图表类型：

正确的图表类型：

面积图

与折线图较为类似，面积图强调变量随时间而变化的程度，也可用于引起人们对总值趋势的注意。用填充了颜色或图案的面积来显示数据，面积片数不宜超过5片。

漏斗图

漏斗图用来表示逐层分析的过程，从一个总值（最顶端），不断除去不关心的部分，最终得到关心的值的过程。

多用于业务流程比较规范、周期长、环节多的流程分析，通过比较各个环节宽窄大小，能够直观地发现和说明问题所在。常见应用场景：电商网站、营销推广、CRM等。

1）电商网站：通过转化率比较能充分展示用户从进入网站到实现购买的最终转化率。 2）营销推广：反映搜索营销的各个环节的转化，从展现、点击、访问、咨询，直到生成订单过程中的客户数量及流失。

3）CRM：销售漏斗图用来展示客户各个阶段转化比较。

金字塔图

金字塔图用于展示类似金字塔的层级结构和数据量。例如某个国家的收入分配，金字塔顶部显示高收入类别，逐渐降低到代表低收入的底部。

雷达图

雷达图可以用来表现一个周期数值的变化，也可以用来表现特定对象主要参数的相对关系。

雷达图多用于在财务分析中，用来分析企业负债能力、运营能力、盈利和发展能力等指标。

地图

地图是信息密度最大的数据可视化方式，人们在日常生活中就使用地图，所以能直观理解地图。

数据观基于不同的视觉化原理提供三种地图：区域地图、散点地图和热力地图。

（1）、区域地图

区域地图是按照国家、省市行政区划分，用来展现地理信息，以及与地理位置有关的信息，指标的多少可以用颜色深浅区分。

（2）、散点地图

散点地图基于高德地图实现，通过定位经纬度，用散点来表示所在位置的信息指标。

（3）、热力地图

热力地图以特殊高亮的形式显示访客所在的地理区域的图示，不同颜色反映不同区域密度的分布。

表格

表格可以通过拖拽所关心的指标，如通过一级、二级分类，了解更加明细的数据，起到数据透视表功能。

综合使用

饼图、柱图、条图、线图、气泡图可以组成可视化报告90%图形，其他视觉化展示可以将图表组合起来综合使用。

4选择维度

分辨哪些是有价值的值得关注的维度，选择数据展示的视角。基本图表一般有哪些可用维度呢？

四基本的或定制化图形

最后，作为这些海量数据系统的设计师，你得反复问自己“我应该选择非常规方式来定制化设计?还是使用久经考验的图表来展现信息?”

最近无意中读到这篇来自37 Signals的文章—— 只要3种图表就够了。作者强烈表达一个观点，图形的“有效性”胜过它的视觉特征。

我非常赞同文中这一观点。不过，我觉得他的观点代表着一种极端实用主义的视角。我相信定制化的图形通常也能提升数据的易用性，同时独具一格引人入胜。

基本柱状图的例子

对我来说，有“一种尺寸通行”的图表，还有“适用于最佳尺寸”的图表。表格、曲线图和柱状图就很好，可以容纳各种类型的数据，但它们也非常普通(一种尺寸通行)。

作为专业的设计师，我希望我的作品看起来和感觉上是独特且有用的。

比如，纽约时报做得很好，通过定制化的交互式图形，来为他们的文章添彩。我们来看一些完美的定制化图表案例：

这个案例对曲线图做了调整，让人“一睹”那些支撑图表的基本数据。

在这个3D图表中，透视角度的改变在视觉上非常有冲击力，也让用户更好理解数据间的关联。

Selfiecity.net的这个例子做得很好，图表中每个元素都是用户头像信息，用了真实内容来创建图表。

这个案例中，根据可视化展示目标，将重要信息添加辅助线或更改颜色等手段，进行信息的凸显，将用户的注意力引向关键信息，帮助用户理解数据意义。

最后这个项目，用了颜色编码来展表现偏好，同时立体突起在视觉上表现人口统计信息，非常的直观，信息层级分明。

作为首要准则——数据与技术所需，我们需要尝试各种定制化图形。但我们还是要有备选计划，以防设计并不奏效，或者客户喜欢相对保守的方式。

五让用户花 < 5秒钟，找到自己想要的

我们为什么要把所有这些数据放在页面上？

答案是：这样人们才能使用——做决策、调研、预测未来，什么都行。关键是，用户不会沉浸于你所选的漂亮色彩，他们是来工作的。

我的建议是——在你排布好页面一切就绪后，问问自己“觉得怎么样?”。看看每个图表、组件、表格，仔细考虑人们从中能获取到什么。

通常你会得出这样的结论，“这些都不重要”，这就意味着要减少或是重新思考。

这在我身上发生过好几次——我创作了复杂漂亮的数据图界面，包含了一系列时尚的图表、饼形图，还有成千上万数据点构成的地图。

但总是被客户质疑“我只想知道这样有效吗……我要的东西在哪?”还有“我只要3样东西……X、Y和Z。哪里可以看到它们?”

哎，这时候你才会意识到自己迷失在杂草丛中，遗失了重点。

我会有个办法，尝试使用文字来精确表达人们所要的东西。

理解用户的需求，通过高亮显示：把它放在可见位置，用文本直接指示结果。在重要信息上，文字总结可能比图表更有效。

这个方法使我们的客户产生共鸣，尤其在重要信息上。但我之前提过，总要考虑各种角色，所以要用在适当的地方。

就像其他所有形式的设计一样，它也需要一种平衡。

力求使你的数据与众不同，但是要避免过度设计和无谓的分心。

为数据选择正确的图形，但别忘了有层次地构建页面。

无论多么单调、令人沮丧，还要打磨每个小细节……还有别忘了问自己，“觉得怎么样?”