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

语言: CN / TW / HK

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

· · · 

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端

个人成长为辅,关键词: 竞争力