让数据变有趣!如何设计实用易读的图表(上)

图1-1 店铺成交金额

相对于单纯的文本来说，大脑处理图形化的内容会更加省力。每一个汉字都可以看作是一个图形符号，在阅读文本时，大脑首先对其一一进行解码，将这些形状和头脑中储存的记忆进行匹配，从

而理解它的含义。一段文本中，汉字的解码过程是线性依次进行的，而图表是作为一个完整的图形同步进行解码，所以比文本要快的多（图1-2）。根据相关研究，一个高质量的信息图理解度比纯文字高30倍。

图1-2 女装金额占比

可用性专家Jakob Nielsen的一项研究表明，一般人阅读网页平均只会读到20%左右的文字。人们的注意力越来越碎片化，大量的文字让人很容易产生阅读疲劳，图表能够比较好的抓住人们的注意力。在微博、微信等渠道营销传播上，将数据用图表的形式展现比纯文字会获得更高的点击、收藏等

愿意去分享哪个？

7大洲中最高的山峰：南极洲，文森峰，16050呎 4892米南美洲，阿空加瓜山，22841呎 6962米非洲，乞力马扎罗山，19340呎 5892米亚洲，珠穆朗玛峰，29035 8848米欧洲，厄尔布鲁士

山18510呎 5642米北美洲，麦金利山20320呎 6194米大洋洲，卡斯滕土山16024呎 4884米

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

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

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

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

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

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

A.柱形图

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

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

B.饼图

以圆心角的度数来表达数值大小的统计图表。常用于表现数据的占比关系，饼图中各项的总和

为100%，最适合表达单一主题，即部分占整体的比例。饼图的类型比较少，主要有以下三种：

基础型饼图，包括常规型饼图和环形饼图；半圆型饼图，在某些场景中，半圆会比较方便排版，利于对齐。而且标注信息也方便呈现；复合型饼图，当饼图的扇形数量过多时，可以将最后的若干项合并为其他类，在二级图表中表现这些项目的构成。

C. 折线图

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

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

D. 表格

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

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

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

A.柱形图

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

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

柱子的宽度为D，则柱子之间的间距建议在1/2D与D之间，簇形柱形图两个柱子之间的间距建议

为1/8D。这样既可以保证柱子之间不会过于分散-失去数据之间的关联性，又不会过密-保障数据之间的独立性和舒适阅读。

图2-15 柱形之间的间距

B. 饼图

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

图2-16 饼图的绘制方法

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

图2-17 饼图的绘制方法

C. 折线图

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