图表规则

表格与我们的口头表达系统交互，而图形则与视觉系统交互。视觉系统处理信息的速度更快。这也就意味着设计良好的图形通常能够比设计良好的表格更快地传达信息 图形可分为四类：点图、线图、条形图和面积图，我们在设计图表时需要注意一下几点：

1.条形图宽度

不希望条形图太宽或太窄，以至于受众希望比较面积而非长度，用右图体会一下条形图的”宜居带“：过窄、过宽和恰到好处。

2、文字方向

为便于阅读，文本标签应水平放置在图表上 文本标签不应该： ● 旋转 ● 垂直堆叠

3、形状

图表可以运用形状，以多种方式展示数据。形状的设计可以是有趣的、曲线的，或者精确和高保真的等等。 形状精确程度： 图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状（在触摸大小和功能可见性方面）展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

如果你的数据集属于展示类，在常驻数据标签的存在下，你是可以使用大圆角的。在业务类数据集，还是建议大家使用平角或小圆角（1~5pt即可）

4、失真

即失去本意或本来的面貌，信息传递错误。

我们常见的平滑曲线图，相较于折线图，多了一份柔美、自然与律动感。但是请注意，曲线在用户心智当中是一组连续的数据，是真实的趋势，曲线上任意一点都会对应一个真实的数据。而折线图在用户心智中是一组有限的数据进行连接，方便查看大致趋势。

例如当你只测量了整点时刻的温度，为了美观绘制了平滑曲线，用户可能会认为12:30时，温度为20°。但这并非真实的，谁知道是12点后缓慢降温，还是突然降温呢？

如果我们用钢笔工具在相同的几个点当中绘制平滑曲线，我们可以获得无数种可能性，这就是平滑曲线的失真原因。

最佳实践：趋势图的统计频率密度是很高的，可以用平滑曲线，如果密度比较低的话，譬如这些日趋势，其实还是需要看清楚每一个点是在哪里的，用平滑曲线反而有一些模糊了准确值。

5、浮夸

即虚幻夸张，不切实际。这是很多设计师常犯的错误，总是忍不住地添加视觉效果，影响了数据真实性却不自知。

以下的柱状图，你能快速地告诉我1月、3月、5月哪个数据值更大吗？折线图中，你能快速地分辨分辨并读取信息吗？

如果这些图表只做视觉点缀作用，不承载信息传递作用，那么是勉强可用的。但如果你需要传递信息，让用户读取，那么建议你放弃3D、物理投影、拟物质感，除非你是在VR场景中使用它们。

6、双y轴：总之不是个好主意

需要花一些时间和精力才能理解哪些数据应该参照哪条坐标轴。因此你应该避免使用右侧/第二条y轴，思考以下的办法是否能满足你的需求。 1）不添加第二条y轴，而是将该轴的数据点以标签形式直接展示。 2）将图形竖直分割开，借用同一条x轴，但各自使用不同的y轴*（都置于左侧）

7、避免使用过多的颜色数量

在实际应用中，经常会出现大量颜色使用的误区，建议高亮重要的数据（不超过8个），其他数据默认置灰，通过图例交互进行查看。

8、限制饼图的切片数量

饼图是最受欢迎但经常被误用的图表之一。在使用饼图时，首先要注意切片的数量最好保持在5-7片。

如果还有很多占比很小的切片，可以将这些全部归到“其他”切片中。

9、直接在图表上标注

如果没有正确的标注，无论图表设计的多好看都没有意义。 直接在图表上标注数据或信息对使用者来说更直观，更节省时间和精力。

10、不要在切片上标注

将数值放在切片上虽然很直观，但可能会导致很多问题，例如左侧饼图数值的可读性问题、切片太薄无法添加数值等，对比来看，右侧饼图添加标注的方式更合适。

11、饼图切片的排序

将数值放在切片上虽然很直观，但可能会导致很多问题，例如左侧饼图数值的可读性问题、切片太薄无法添加数值等，对比来看，右侧饼图添加标注的方式更合适。

12、避免极端的环形图

环形图,又称为甜甜圈图,是饼图的一种变体,本质是饼图将中间区域挖空，用在多样品间的多种数据的比较中。

虽然环形图腾出中间区域来显示额外的信息，但牺牲清晰度走极端会让图表变得毫无用处。

13、环形图-使用分类颜色

保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据，同色系颜色常用在直方图中。

14、环形图-最多使用五个阶段

当圆环图包含多个数据分段时，图标会变得难以理解，为保证图标的清晰，尽可能将分段控制在 2-3 段，不要超过5段。如果数据过多，可以考虑使用柱状图、条形图等其他形式的图表。

15、环形图-保证数据准确

圆环图的所有分段加起来的数值应该始终为 100%，没有有多段数据占比过小，可以一起汇总到“其他”分段中

16、环形图-按顺序排列数据

圆环图的份分段应从12点位置开始按最大值排序，然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。

不要将时间分段 时间是一个顺序变量，不能用作圆环图中的类别。例如每个季度的时间是相同的，但是每个季度访客却不一样，使用圆环图会给用户造成一定的困扰。如果以时间作为基本单位，可以使用直方图、条形图等图表。