2.3.3　柱状图的黄金法则

柱状图常用来做类别的比较，其中可视化元素为柱状体。那么，柱状体的粗细和间距如何定义呢？下面是一些设计原则。

柱状体不能太粗也不能太细，间距要有规律，这样在视觉上才能有好的表现。在图2-44中，中间柱状图的柱子间距过于疏散没有规律；右边图中的柱子间距又过小，视觉上显得拥挤，并且当分类过多时，过小的间距会导致柱状体之间没有独立性，不易阅读。

图2-44

定义柱状体的间距可以用5分原则设计法，即柱子之间的间距为N，左右两边与柱子之间的距离就是N/2，如图2-45所示。这也是很多界面设计中常用的技法，其原理就是接近黄金比例，视觉上较为舒适。同时，在保证界面元素整体协调性的情况下，尽可能把柱子的宽度设计成N，这样视觉上最为协调，如果不能则一定要保证间距遵循5分原则。

图2-45

另外，在设计图形前，设计师最好能了解到真实数据，这样才能结合真实的数据来设计图形，尽可能还原落地后的样子。在图2-46中，图形的设计和落地后的样子存在较大的差异。问题就出在设计前设计师没有了解数据的真实情况，前端工程师按照设计图把X轴的数值固定了。

图2-46

如果不能了解到真实数据或数据是实时传输的，就需要跟前端工程师沟通，把X轴的数值做成动态变换方式，即随着数据的增减，刻度值也随之改变。