【数据可视化】背后的故事——图表设计

 

热门图表工具下载：

• FusionCharts下载
• HighCharts下载

一、图表的目的和价值

图表设计是数据可视化的一个分支领域，是对数据进行二次加工，用统计图表的方式进行呈现。数据是事实或观察的结果，是对客观事物的逻辑归纳，通常一个具体的数字比一个模糊的说法更加具有可信度和说服力。但单纯的数字本身并不能提供足够的影响力，假设一个淘宝女装卖家3月份的成交金额是50万，这个数据本身并不能说明什么问题，但是当你加上4月份60万，5月份的成交金额70万等多个月的数据，通过折线图的方式呈现，可以判断出成交金额是上升趋势，再结合去年同时段的销售曲线进行对比和其他维度信息的补充（图1-1），可能推断出是因为换季所带来得销量增长，店铺可以考虑加大夏季款的上新。所以我们说图表是解读数字的一种强有力的手段。

图1-1 店铺成交金额

相对于单纯的文本来说，大脑处理图形化的内容会更加省力。每一个汉字都可以看作是一个图形符号，在阅读文本时，大脑首先对其一一进行解码，将这些形状和头脑中储存的记忆进行匹配，从而理解它的含义。一段文本中，汉字的解码过程是线性依次进行的，而图表是作为一个完整的图形同步进行解码，所以比文本要快的多（图1-2）。根据相关研究，一个高质量的信息图理解度比纯文字高30倍。

图1-2 女装金额占比

可用性专家Jakob Nielsen的一项研究表明，一般人阅读网页平均只会读到20%左右的文字。人们的注意力越来越碎片化，大量的文字让人很容易产生阅读疲劳，图表能够比较好的抓住人们的注意力。在微博、微信等渠道营销传播上，将数据用图表的形式展现比纯文字会获得更高的点击、收藏等数值，也更容易被人记住，从而制造话题，营造口碑营销。试想下面的文字和图表（图1-3），你更愿意去分享哪个？

7大洲中最高的山峰：

• 南极洲，文森峰，16050呎 4892米；
• 南美洲，阿空加瓜山，22841呎 6962米；
• 非洲，乞力马扎罗山，19340呎 5892米；
• 亚洲，珠穆朗玛峰，29035 8848米；
• 欧洲，厄尔布鲁士山18510呎 5642米；
• 北美洲，麦金利山20320呎 6194米；
• 大洋洲，卡斯滕土山16024呎 4884米。

图1-3 7大洲中最高的山峰

二、数据产品中的图表设计原则和方法

大数据是近些年非常热门的一个词，马云曾说过阿里巴巴未来十年的战略目标是建立DT数据时代中国商业发展的基础设施。生意参谋就是在这个大环境下孵化的一款数据产品，旨在为中小卖家提供数据化运营的思路，通过监控店铺日常经营和活动情况，帮助卖家对店铺运营进行调整。有幸参与这个产品从建立到成长的全过程。数据产品最离不开的其实就是图表设计，既要保证图表本身数据清晰准确、直观易懂，又要在找准用户关注的核心内容进行适当的突显，帮助用户通过数据进行决策。生意参谋这种数据产品就是将数据化运营的思路融入设计中，引导用户通过数据得出有效的结论，辅助店铺经营。除此以外，具有一定设计感的、打动人心的图表设计也可以创造更多的商业传播价值，提升品牌形象。

1.如何精准表达图表中的数据

数据产品中用户主要是利用数据来进行分析和决策，所以十分强调数据的精准性。那么如何通过图表来准确的传达数据呢，首先我们要明确每种图表的定义和使用范围。其次要使用正确的方式将图表绘制出来，不能在表达上有所偏差。

（1）选择合适的图表

明确每种图表的定义和使用场景有助于我们对数据进行加工和二次传达。柱形图、饼图、折线图、表格是四种最常使用的图表，但往往容易被混乱使用，让我们一起来仔细研究这四种基础图表的定义和类型，找寻其中的差异。

A.柱形图

又称条形统计图，条状图。是一种以长方形的长度为变量的统计图表。常用于比较两个或以上的值。柱形图常见的有以下4种：

垂直柱形图，最常见的柱形图； 水平柱形图，一般按照数值的大小排列； 簇状柱形图，用于多组数据比较，强调一组数据内部的比较； 堆叠柱形图，用于多组数据比较，和簇状柱形图不同的是，堆叠柱形图更加强调一组数据中部分与整体的关系。

B.饼图

以圆心角的度数来表达数值大小的统计图表。常用于表现数据的占比关系，饼图中各项的总和为100%，最适合表达单一主题，即部分占整体的比例。饼图的类型比较少，主要有以下三种：
基础型饼图，包括常规型饼图和环形饼图； 半圆型饼图，在某些场景中，半圆会比较方便排版，利于对齐。而且标注信息也方便呈现； 复合型饼图，当饼图的扇形数量过多时，可以将最后的若干项合并为其他类，在二级图表中表现这些项目的构成。

c. 折线图

是通过线条的波动（上升或下降）来显示连续数据随时间或有序类别变化的图表。常用于强调数据的变化或者趋势。折线图主要可分为单条、多条、堆叠：

单条折线图，只显示一组数据波动的情况； 多条折线图，同时显示多组数据波动的情况； 多条堆叠折线图，显示多组数据波动的情况，同时表现多组数据之合的变化。多个数据叠加时（堆叠图），推荐使用面积图，不推荐使用折线图形式。

D. 表格

由若干的行与列所构成的一种有序的组织形式，表格可以高效率的展现大量数据。表格的类型多种多样，除了单纯的文本和数字外，我们还可以往里面添加图片、操作等多种类型。表格是几种图表中最多样和特殊的类型。

基础表格，静态纯文本类的基本表格； 内容复合表格，由其他内容类型结合的较复杂的表格形式； 操作复合表格，用户的行为对表格样式或特征产生影响。
 
（2）正确的绘制图表

了解了四种的图表后，通过选择适合的图表类型我们完成了精准表达数据的第一步，那么第二步就是将图表正确的绘制出来。错误的坐标轴选择，或者关键元素的缺失，会导致图表的准确性下降，表意不明。

A.柱形图

数据产品的图表强调数据的准确性，通常零基线是不可或缺的，为了强调起始位置，颜色上要比其他的网格线深。考虑到用户不同显示设备的差异，建议至少取94的灰度值才可以保证清楚的辨识，颜色太浅在一些设备上无法显示清楚。

图2-1 柱形图中的零基线

柱子的宽度为D，则柱子之间的间距建议在1/2D与D之间，簇形柱形图两个柱子之间的间距建议为1/8D。这样既可以保证柱子之间不会过于分散-失去数据之间的关联性，又不会过密-保障数据之间的独立性和舒适阅读。

图2-2 柱形之间的间距

B. 饼图

饼图一般我们采用的绘制方法是，按照用户的阅读习惯，从上到下，以时钟的12点为起点，顺时针排布扇形（图2-3）。

图2-3 饼图的绘制方法

但这种绘制方法存在一点不足，在用户视线的焦点——饼图的上半部，不重要的最小数据项和最大数据项一起占据了视觉焦点。为了解决这个问题，我们在这个基础上做了一些优化，同样以时钟的12点为起点，先逆时针绘制最大切片，再回到12点，顺时针绘制出第二大切片，其余切片依次绘制（图2-4）。这种方法使得用户视线的焦点——饼图的上半部放置的都是最重要的数据。但这种绘制方法也有一点小小的不足：在有多个饼图时，每个饼图的起始位置都不相同（图中问号所标出的位置）。大家可以根据不同的使用场景选择不同的饼图绘制方法。

图2-4 饼图的绘制方法

C. 折线图

折线图常用于表示数据的变化和趋势，坐标轴的不同对折线的变化幅度有很大的影响。坐标轴的数值设定的太高，则折线变化过于平缓，掩盖现实无法清晰的表现折线的变化。反之，如果坐标轴设定的太低，又会让折线变化过于陡峭，过于夸张夸大了折线变化的趋势。

图2-5 折线的绘制方法

2. 如何提升图表的易读性

数据产品中往往充满了大量的数字和图表，用户容易淹没在数据的海洋中，除了精准表达这些数据以外，提升图表的易读性也是数据产品中图表设计的一个显著特点。图表中文字部分通常为具体的数值和数值的含义解释。通过对这些文本进行合理排版，可以使用户快速理解图表，从而达到高效阅读的目的。

A. 柱形图

坐标轴的标签使用水平排列，不建议垂直排列或者倾斜排列，字数多的时候不易阅读。柱形图中部分标签的使用方法也适用于折线图。

图2-6 柱形图的标签排列

水平柱形图一般会简化坐标，数据值跟随在柱形图后方，增加数据墨水比率。

图2-7 水平柱形图

当坐标轴标签过长时，垂直柱形图无法将所有坐标轴标签全部显示，有以下几种解决方案：

可采用水平柱形图增加标签的显示空间。

图2-8 水平柱形图

显示主刻度，其余数据省略，通过交互动作来显示。比如显示2010年/2011年，而年里面的具体的月份隐藏，hover时出现。如图2-9中的横坐标。 高位数的数值可以转化单位。比如500,000显示为50万，更符合中文的阅读习惯，且节省空间。如图2-9中的纵坐标。

图2-9 柱形图的刻度值

B.饼图

①. 在饼图内与百分比数值一起显示：

信息连贯视觉集中，理论上最合适的位置。但受限于饼图本身的形状和大小，文字过多时容易溢出。

图2-10 饼图的标签

②. 使用引导线，在饼图周围合适位置显示：

引导线可以将切片与标签有效的关联，可以显示更多的字符数。引导线较多时，可以进行变形规整。在数据产品中通常是活动数据，数值大小经常在变化，标签和引导线的位置不固定，排版上难以掌控。

图2-11 使用引导线的饼图

③. 数值和标签分离显示：

标签字符数不受局限，但标签与饼图分离，需要对照阅读。

图2-12 数值和标签分离显示

④. 配合交互动作切换标签在环形圆饼空白处显示：

空白部分不受切片大小影响，标签和数值可一起显示。适用于强调当个切片数值。标签与切片对应关系需要带交互操作说明，数据展示较隐藏。

图2-13 带交互的标签

C. 表格

文字信息纵向列对比能够很好的形成视觉引导线，符合格式塔心理学中相近原则。不同的数据类型有不同的对齐方式。一般来说文本采用左对齐，数据右对齐，方便通过数字位数的长短对比数据的量级和大小。

图2-14 表格的对齐

表示状态的文字，通常只有固定几种类型（如已完成、待支付等），则可以采用居中对齐。关系紧密的字段可以靠近成组排列，加强数据之间的关联性，同时减少了数据组的量，也可以方便用户快速定位信息。

图2-15 表格的对齐

来源：阿里巴巴（中国站）用户体验设计部博客