设计实战：图表设计，远不止“好看”这么简单(2)

　　前面我们谈论了很多图表设计前期的事，接下来谈一谈需要注意的几点细节，Dan Saffer 说过“最好的产品通常会做好两件事情：功能和细节。功能能够吸引用户关注这个产品，而细节则能够让关注的用户留下来”。毕竟细节设计成就卓越产品嘛~

　　X坐标轴

　　考虑到不同屏幕或浏览器的适配问题，当X坐标轴标签文字显示过于拥挤时可将文字打斜放置，既保证了数据的正常阅读也不影响图表美观。

　　图1-6 Antv

　　当X坐标轴标签为连续的年份时，不要墨守成规的写成“2015、2016…”，可以用简写的式“2015、16、17…”，看起来会简单、清晰很多。

　　图1-7

　　Y坐标轴

　　如图下图1-8-1，当Y坐标轴的数字很长时会出现左右空间过于紧凑的情况，这时，如果单位换算是10的倍数(如1s=1000ms)，可以考虑定义单位换算规则，即：

　　case1：当时间 ≥1000ms 时，计时单位用 s 表示，数据精确到小数点后两位

　　case2：当时间 <1000ms 时，计时单位用 ms 表示，数据精确到个位

　　如下面1-8-2

　　图1-8-1

　　图1-8-2

　　如果没有单位换算，如下图1-9 所示，单位是“次”或“个”，这时可以考虑用位数换算，即：

　　case1：当数字 ≤4 位数时，用精确数字表示

　　case2：当数字 >5 位数时，用 K 为单位进行缩写表示，精确到个位

　　case3：当数字 >8 位数时，用 M 为单位进行缩写表示，精确到个位

　　case4：当数字 >11 位数时，用 M 为单位进行缩写表示，精确到个位

　　case5：当数字 >14 位数时，用科学计数法表示，精确到小数点后3位

　　如下图1-9所示

　　图1-9

　　数据分布规则

　　如果没有制定明确的数据显示规则，就会出现下图2-1-1的展示情况(后端传什么数据，前端就展示什么数据)，导致图表展示效果和可读性都很差，如果要解决这个问题就需要定义规则。

　　图2-1-1

　　这里数据的展示和时间有关，所以，我们需要考虑的是某个时间段内展示多少个点才是合适的，而显示一个点由多长时间的数据聚合(点聚合区间是多少)，具体如下图2-1-2

　　图2-1-2

　　规则定义清楚后，后台在与前段交互的时候就会按照以上规则进行，最终实现效果如下图2-1-37

　　图2-1-3

　　遵循设计原则

　　图表的设计价值在于精准、高效、简单的传递数据信息，最好能够让读者一目了然，即使做不到一目了然也应该具备自我解释的能力。所以，就要求在设计时应该增强和突出数据元素，减少和弱化非数据元素，具体应该注意以下原则：

　　1.删除

　　除非特殊场景的考虑，应尽可能的删除和数据非相关的元素:

　　背景色

　　渐变色

　　网格线

　　3D效果

　　阴影效果(如果具体操作需要强调的除外，如：鼠标Hover查看具体信息)

　　2.弱化

　　即使有必要保留非数据元素，也要弱化或隐藏它们，尽量使用淡色

　　坐标轴

　　网格辅助线

　　表格线

　　3.组织

　　把相关的数据元素进行合理的组织分类，不要指望把所有的数据元素都放入图表内，只要放关键的、重要的数据在图表内。

　　4.强调

　　对于已选的数据元素也要考虑优先级，明确哪些数据是需要重点突出的进行突出标识，以便读者能够快速get到重要信息。

　　如图2-2所示，通过上述原则对对图表进行优化，最终变成了一个简洁有效的图表。

　　图2-2

　　总结

编辑：未知