“别忘了，你是为读者进行可视化设计。”

——《数据之美：一本书学会可视化设计》

01 数据分析的价值

经过处理的数据

数据可视化是为数据分析服务的，在谈数据可视化之前我们简单聊聊数据分析的价值。数据分析的主要作用是把大量的、无序的数据背后的信息进行加工和提炼，总结出被研究事件的潜在规律，进而帮助用户（通常是管理者）进行有效的判断和决策。在企业的日常经营中具体还可以分为现状分析、原因分析和预测分析。当然今天我们主要是来聊聊怎么让数据秀起来，这里不再展开细述，感兴趣的同学可以自行百度。

02 让数据show起来

图片来自网络

能show起来的数据当然不是简单的罗列，而是要美丽！直观！一目了然！用户都看不明白的可视化产品，基本等同于被宣告了死刑。下面就让我们摆正姿势，开始数据可视化实现的流程。

| 需求分析

1.给谁看

可视化产品也是产品，所以一样需要先搞清楚产品给谁用，我们的用户是谁。C端用户给他最关心、最一目了然的数据即可，比如微信的步数排行和王者荣耀每周的战报；企业管理层则侧重于数据的来源、计算的逻辑以及数据的准确性；如果是对外展示企业的实力，则需要各种高大上的图表设计，比如阿里、京东每年双11的大屏。

2.看什么

知道用户是谁了，还需要了解用户关心什么数据，期望从中获取哪些关键信息。

1）首先需要熟悉数据，哪些数据可以直接获取的，哪些需要通过计算得来的，计算的逻辑又是是什么；

2）在考虑到数据的实现方式时，还需弄清楚哪些是实时的，哪些是离线的；

3）已明确展示的指标里，哪些是重要的，哪些是次要的；

4）数据展示的维度有哪些，按时间（年、季、月、日、时、分、秒），按机构，按区域，按人等等。

3.在哪看

在汇报型的材料里，可视化的数据通常是静态的附在PPT或者邮件上的，还有一些朋友圈分享的可视化信息长图也有类似的特性——一次性；而在为用户提供的动态的、持久的、周期性计算的指标数据时，则需要做一款数据产品了，本文重点讨论的也是后者。

| 指标计算

1.数据获取

复杂的数据产品通常会跨多个系统获取数据，这里格外需要注意的是同样名称的数据，在不同的系统里可能定义不同，所以前期调研时需要多花点时间明确指标定义。

2.指标计算

指标计算只要明确了计算逻辑，实现上都是技术细节了，在后期的数据验证上基本不会有什么问题，技术实现上这里不再详述。

这里我说一个之前踩过的坑，产品在设计、开发和测试环境都没有问题，最后上线发现问题了，图表（柱状图）上各区域展示的数据间视觉对比不明显。原因是测试时用的模拟数据，而模拟数据与真实数据是有差别的，所以验证图形与数据之间的契合度时一定要用真实数据。

| 设计原则

Don't make me think！借用克鲁格的这本书名来作为我们的设计原则。具体可分为以下四个原则：对齐、聚拢、对比、重复。

1.对齐原则

作业写得不好看不要紧，关键是要工整。

--来自小学老师的谆谆忠告

页面上任何元素摆放的杂乱无章都会令人不适，用户在这种情况下无法聚焦自己所要搜寻的信息，甚至会因为不爽而马上关掉页面。而对齐，可以让数据更加清晰、清爽。

对齐原则

这一条实现起来比较简单，现在很多工具在排版的时候都会设置控制线共我们参考。

2.聚拢原则

聚拢原则也被称为“亲密性（Proximity）”原则，即将相关的项组织在一起，移动这些项，使他们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的元素。

凡事皆有逻辑存在，这种逻辑可以是因果、时间先后、“金字塔模型”等，人们总是喜欢遵循一定的逻辑去理解世间万物。我们在做数据可视化产品时也应该遵循这样的思维逻辑，将相似相关的内容分类聚拢，而不相关的内容应该明显的隔离出来，这样有助于组织信息，减少混乱，为用户提供清晰的结构。

聚拢原则

举个栗子：下面的两张名片左边的信息比较分散，让人不知道该从哪看起，而右边的看起来则比较清晰明确。

3.对比原则

即使在满足了对齐、聚拢设计原则之后，在面对大量信息时，我们还是要考虑到把用户最关心的内容制造成焦点传递给用户，让用户一目了然。如果说对齐让设计更有秩序，那么，对比就是让这个设计更有亮点。对比可以采用多种方式产生，比如大小对比、颜色对比、图形对比等。

对比原则

4.重复原则

重复原则就是保持可视化产品整体设计的一致性，在产品设计中反复使用一些视觉要素，建立数据之间的联系， 保持视觉上的统一。

对于重复的使用，通常有以下几种方式：一致的排版；一致的字体；一致的配色等。

重复原则

| 选图表

好看不一定好用，每一种数据都有各自匹配的展示的图表

1.柱状图

柱状图

可以直观展示各组数据差异性，强调个体与个体之间的比较，缺点在于比较维度少；

2.饼图

饼图

可以展示各项占总体的比例，同时强调个体与个体间的比较，缺点在于数据不精细，不适用于分类较多的情况；

3.折线图

折线图

可以直观反映数据的变化趋势，但数据量小时则不明显。

其它还有反映数据转换关系的漏斗图，直观反映核心数据的大数字以及反映数据密集程度的热力图等等。

| 前端开发

现在的前端开发已经不再局限于web了，APP、微信端的H5对于用户来说反而更加灵活方便。市面上有很多成熟的可视化工具可以满足大部分数据图形需求，而复杂的图形设计则需要考虑前端同学的技术水平和产品上线时间之间的平衡。

03 小结

数据可视化并不意味着就一定因为要实现某种功能而让产品枯燥无聊，或者是为了看上去绚丽多彩而显得复杂多余。产品经理们往往并不能很好地把握设计与需求之间的平衡，从而创造出华而不实的数据可视化形式，往往偏离了初衷，这是需要我们时刻警惕。

文末附上我之前做过的产品，今天拿上文的设计原则来考量,依然可以发现很多不足的地方，欢迎拍砖（请轻拍^_^）

某业务数据产品

某平台数据产品

- End -