标题|政务可视化设计经验——图表习惯( 四 )
文章插图
从上面就能明白看图表的时候千万不要被表面给欺骗,设计师的小心思还是要注意的。需要注意上下限有没有被处理过,特别是没有Y轴的直接在图标上打标签的(dog脸)。
存在即合理,对于处理上下限不做过多评价。只是介绍一个我们常用优化显示效果的办法:
折线图或者柱状图的Y轴使用动态计算,这个很多轮子都实现了,例如Echart或者AntV。举个明显的例子就是,对于Y轴图表中的最大值进行动态计算,比如一排数字中最大的为1790,那么轴标签最高位为1800;一排数字中最大的是1810,那么轴标签最高位为2100。1800还是2100是根据轴上的分段数决定的。
文章插图
我记得我曾经在一篇文章中看到有些把折线的高度控制在图表高度的2/3,或者将柱状的高度控制在图表高度的85%左右。我并不是很明确当时设计师的立意在哪,但是得承认这样子确认会显的好看,做案例可以做真实数据不行。
思前想后我认为这种方式太刻意,并且规则定制的比较细,需要每种图表按照这样的目标制定规则,不仅仅是优化几张图表就够的。
(PS:实际数据有的时候会出现极限情况,比如有些特别大有些特别小,这种情况也适用,请不要处理数据,因为这样的数据就是实际情况。)
四、图例与提示信息图例解释图表区域所有视觉元素的含义,用来映射图形的尺寸、颜色、数值等,是辅助用户进行理解的,由映射图形形状和文本组成。提示信息一般是tap或者hover的时候,图表以交互的方式吐出该位置的数据,帮助用户更深入的了解数据。
老实说,图例会用的比较多,毕竟需要标识信息。提示信息在可视化大屏上就比较用的少,当然我不是说不重要,只是由于人为介入比较多,表达数据的时候对数据进行了初筛。能展示出来的一般也伴随着标签,所以提示信息就显得没那么强需要,可能当层级做的比较深,数据量大的时候会使用来帮助用户了解数据。
当然提示信息作为一种交互方式存在,我们借鉴了这种方式,比如在核心区中用来给结果数据提供详细的背书过程,或者长又长的数据简写后跟上一个小问号。
文章插图
着重介绍下图例,根据数据类型不同,分为连续型图例和分类型图例;根据状态不同,图例可以被设置为静态或可交互态。其中带交互态:分类图例我们使用的最多,能够有效的区分信息。
文章插图
1. 顺从用户视觉本能导向的案例这条是我翻Ant的时候的一个惊喜,从原来的技术支持的12个位置,最后克制收敛为2种方式。不仅遵从的用户的视觉导向,并且对于设计者也更好记忆。整体显得比较“巧”,因此一直沿用下来了。
文章插图
2. 顺从用户阅读习惯的案例对于人来说,四舍五入后的整数比零散的数字更加容易接受;因此我们倾向于一些取整的数字,同样的,这不仅仅适用于图例中的数字,同样适用于坐标轴上下限的数字。
图例中也有竖直图例和水平图例,区分这两种的一般是:带有连续性的倾向于使用水平图例、带有分类属性的倾向于使用竖直图例。
文章插图
五、图形人类从图形中获取信息的效率远远比文本,可以说如今人类早已进入了读图时代。图形是统计图表的视觉通道在形状上映射的视觉展现,是图表的主体部分。
推荐阅读
- 手机银行|漫谈金融产品数据可视化
- 数字人民币|国办:支持在零售交易、生活缴费、政务服务等场景试点使用数字人民币
- 药品监督管理局|提问标题:哪些二类医疗器械免于备
- 政务类|民航局政府网站在第二十届中国政府网站绩效评估中获三个奖项
- 柱状图|数据可视化:基础图表的设计要素剖析
- 政务|贵阳高新区开展2021年政务服务大厅网络安全应急演练活动
- 标题党|不要让投诉伤及“深小卫”的积极创新性
- 深圳卫健委|评论|深圳卫健委公号被投诉,“拷问”政务新媒体尺度
- 低俗|钧正平评“深圳卫健委公号被投诉低俗博流量”:对敢创新的政务新媒体不妨多一点宽容
- 王岭|标题低俗博流量?千万级官方公众号被投诉,回应:会适当收缩尺度