一、图表的目的和价值

更直观的使得数据可视化。帮助用户看到数据的趋势，同时通过数据的可视化帮助用户做商业决策。

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

数据产品最离不开的其实就是图表设计，既要保证图表本身数据清晰准确、直观易懂，又要在找准用户关注的核心内容进行适当的突显，帮助用户通过数据进行决策。除此以外，具有一定设计感的、打动人心的图表设计也可以创造更多的商业传播价值，提升品牌形象。

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

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

（1）选择合适的图表

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

（2）正确的绘制图表

A.柱形图

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

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

B. 饼图

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

饼图的绘制方法

C. 折线图

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

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

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

A. 柱形图

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

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

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

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

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

B.饼图

在饼图内与百分比数值一起显示。

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

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

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

数值和标签分离显示。

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

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

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

C. 表格

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

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

原文地址http://www.woshipm.com/pd/198923.html

Powered by Froala Editor