相比文字而言，图形的可视化效果更佳，什么时候用到柱状图？交互设计师在设计柱状图时应该注意哪些细节？
1.柱状图的定义
柱状图，又称条形统计图，是一种以长方形的长度表示数值图形，通常以2个或者两个以上的长方形表示一段时间内的数据变化或显示各项之间的比较情况。
柱状图包括几个方面的要素：横坐标（选项）、纵坐标（单位）、长方形、数据标签（直接标识或者悬浮展示）。
2.柱状图的应用
见上文定义，一般柱状图有两种应用方向，一种是用于一段时间内的数据变化，例如某公司近4年的销售额比较，这里采用了时间段的对比；一种是各项之间的比较情况，例如某公司各团队的销售对比，这里反应了几个项之间的比较情况。
3.柱状图的类别
（1）普通柱状图
普通的柱状图，最常用的柱状图，直观反应各项数值的比较情况。
（2）普通条状图
与普通柱状图数值作为Y轴不同的是，条状图通常是数值坐标作为X轴。条状图通常用于各项数值从大到小排序，直观看出排名的情况。
（3）堆积柱状图
单个长方形数据有细分数值时，用堆积柱状图来表示，例如下图中，每年中包括APP渠道销售额还有Web渠道销售额。
4.设计一个柱状图
上面都是基本的一些概念普及，属于交互设计基本功的修炼，下面才是真正的重点，都是交互设计容易忽略的细节。以设计一个按照时间区间反映个人支付宝月消费变化的柱状图为例，要求能切换近1个月，近3个月，近半年，近1年进行查看。
（1）横坐标设计
不注意细节的交互设计师，通常都是直接扔下一张柱形图就跑了，但是按照要求，需要切换近1个月，近3个月，近半年，近1年进行查看，这里横坐标就需要交互设计师来定义，否则会让开发工程师摸不着头脑：近一个月按照自然日用30根柱子，那近1年用360根柱子？一个页面中能放得下吗？
所以，我们需要设计横坐标，例如：
近1个月：按照自然日，最少28根，最多31根柱子
近3个月：按照每月1号、18号、18号、28号，一共12根柱子
近6个月：同近3个月，一共24根柱子
近1年：按照每月期末值，一共12根柱子
（2）纵坐标设计
主要是定义数值单位，如果数值过大，定义的单位过小，会导致坐标轴的数值过大，坐标难以阅读，如下图所示。
个人消费，可以默认用元；如果是企业消费，可以定义为万元。
（3）数据标签
系统中的柱状图一般不会默认展示数据标签，而是采用鼠标悬浮展示数据浮层的方式来展示，交互设计师需要定义浮层展示的内容，数据的精确位数等，如下图所示。
（4）提高柱状图的可读性
属于交互设计、视觉设计交叉范畴，大致了解一下，如何提高柱状图的可读性。
①柱子的宽度不能设置太宽，柱子和柱子之间可以留出更多的空间，参考留白设计原则；
②柱子和坐标轴的间隔一般为柱子间隔的一半，留出一些空间的同时，也有规律；
③浮层一般带阴影效果，浮在图表上方时更容易区分；
④除堆积柱状图外，柱子一般用一种显眼的纯色填充。
姊妹篇：
网友评论