浅谈B端智能化设计下的统计图展示

「不想细看版：直接拉到文末看“总结一下”」

· · · 

2011年诺贝尔经济学奖获得者Thomas J. Sargent在论坛上表示：人工智能就是统计学，后来，华为CEO任正非也在央视的采访中援引了这一观点。

无论你怎么看这个观点，统计学在智能化中的重要地位可见一斑，而作为统计学中用来展示数据的统计图，无疑在B端智能化设计中占有了重要一席。在大量信息数据面前，作为降低用户认知负荷的法器，让信息得到更高效和直观的传播方式，统计图不仅在B端后台被大量使用，在AR化前台的展示上也非常具有优势。

但是，要设计好一个统计图并不简单，我们简单 从四个方面入手 ，来看下统计图展示这回事。

1. 统计图的构成

一般来说，统计图一共由图题、图目、坐标轴、图形、图例和图注六种元素构成。如下图所示。

1. 图题 ：统计图的名称。

好的图题让人一看就知道该图要显示的是何事、何物、发生于何时和何地。如果图示表示的数据资料比较复杂，也可以用大标题和小标题。

排版上面，图题一般是该图中最大号的文字。

2· 图目 ：也叫刻度线标签，即表明图形各种不同类别、名称、时间或空间的统计数量值。

好的图目要符合不遗漏不重复，同时要具备可比性质。

排版上面，若图目较长，可采用倾斜排列，但可读性会较差，可以换一种统计图的表现形式。

图片来源于网络，版权归原作者

3. 坐标轴 ：表示数据的映射关系，又包含了刻度标记、图尺、轴标题等

4. 图形： 图的主要部分。

5. 图例 ：用来表明各种图形的含义

6. 图注 ：图形中需要借助文字或数字加以补充说明的，在设计中，一般是以鼠标滑过时显示提醒这种形式出现的。

2. 用什么统计图合适？

任何设计都没有好和坏，而是适合与否。用什么样的统计图更好也要看你展示数据的目的。基于国外专家Andrew Abela在2006年整理的一副图标使用建议的思维导图，我简化更新如下：

从表里已经可以看出， 有些统计图和其他统计图是类似 的 ，比如柱形图换个角度就是条状图，更适用于项目比较多时候的差异比较。折线图和面积图，散点图和气泡图等，也都是这样发展出来的。

另外，这张图里面的每一种所绘的统计图仅为代表性示意，比如在差异比较的柱状图中，如果是要同时展示多个维度，那就可以升级为多组柱状图或堆叠柱状图。相关关系的网状图，也可以升级为弧形图（如下图左），而想要更酷炫的弧形图，又可以升级为3D弧形图（如下图右）。

图片来源：AntV

3. 怎么才算一个好的统计图？

有一个概念叫做 数据墨水比 ，它是数据视觉专家爱德华·塔夫特在1983年引入的一个概念，指与整个图形中使用的油墨（或像素）总量相比，用于呈现实际数据的油墨比例占比量，以此来衡量这个统计图的质量。

你可以理解为 简约至上理念的一种运用 ，也可以理解为 去除无关元素的图形降噪处理 。

例如下面这个图形中的竖线就没有必要，柱状图之间的间隔已经将每个分类区别出来了，竖线并没有传递出更多的信息，可以去掉。

一般来说，统计图可视化中常见的噪音有4种：

网格线

多余的文本

图形或坐标轴的装饰元素

立体化

4. 常用统计图设计资源

网站类

1. 网址：http://chart.guide/

分类提供了近100种统计图，并且每种上注明了使用建议。

2. 网址：http://antv.vision/zh

蚂蚁团队的数据可视化方案网站，包含统计图的设计指导、Sketch资源和图书推荐

另外，蚂蚁团队还提供统计图在线生成的网站以及Sketch插件： http://chartcube.alipay.com/

3. 网址：http://echarts.apache.org/en/index.html

基于基于 JavaScript数据可视化图表库，示例里提供了各种统计图在线样式设计时可参考。

插件类

PS拉框助手，支持PS、Sketch、Figma、XD

http://www.pslkzs.com/

Chart的figma插件：

http://www.figma.com/community/plugin/734590934750866002/Chart

Chart 的Sketch插件：

http://github.com/pavelkuligin/chart

总结一下：

1、统计图的构成：图题、图目、坐标轴、图形、图例和图注

2、按展示目的选择统计图：四个维度

3、好的统计图数据墨水比例低。常见的统计图噪音来源于：网格、多余的文本、装饰线、立体元素

4、网站和插件类的常用统计图资源推荐

Hello，我是 林影落 。

林间有片影子落下来 ，

希望给你乘个凉，偷个闲，发下呆，思下考。

一名10年+的UX设计师，

公众号 每周 原创 更新，

以设计为主，关键词： AR，智能化，B端 ，

个人成长为辅，关键词： 竞争力 。