标题|政务可视化设计经验——图表习惯( 五 )_

按照组件原子化的思路来定义现在千奇百怪的图表，大致可以分为六种基础样式：折线，面积，散点，气泡，饼/环，柱形，条形。

文章插图
其实我们在工作中一直有个想法，较早之前利用原子理论结合自身业务并借助AntD的开源力量实现了公司内部的后台组件库。大屏可视化这块确实因为组件比较多样，多样在每个组件有颜色、体饰、基础样式等多个纬度的变化，目前暂时做到内部源文件整理了多套组件库。但是实际研发中，成本还是比较高，高在组件重复使用，并且做出来的源文件比较大。
与DataV不同的是我们的项目均是高定制化，我目前想的是每个项目单独成立自己的组件库，组件库中自我维护自我升级，视觉稿定义整体色调、响应方案、组件容器块等。通过分镜、脚本来定义核心区交互方式，前期定义规则，减少重复制作成本，这套方案已经慢慢推动，看到这边的同学有好的想法也可以联系我。
1. 强化图表信息表达的案例强化图表信息表达的过程就是体现主次顺序，处理层次关系，简化用户获取信息的成本。主要通过大小、明暗、标识三种方式来处理这部分需求。但是同时得注意“数据油墨比”的处理，在合适的场合使用合适的技巧。
在政务可视化中，人为干预强化图表信息表达，不做假的情况下，给人最直接的传达。
1）大小对比
通过大小对比是最直接的一种方式，之前我们也说过如果数据支持，一般都会处理成这样，便于用户理解信息。
比如柱状图和条形图以分类轴为主、饼状图从大至小等这些场景。

文章插图
2）明暗对比
通过明暗对比可以有效的区分信息，在视觉层级上也是明显的处理了视觉噪音，便于用户区分信息。

文章插图
3）标识对比
通过标识对比，人为去干预信息的表达，多用于一前一后的标识，便于用户识别信息。

文章插图
2. 折线图图表习惯的相关案例折线图用于表示连续时间跨度内的数据，它通常用于显示数据在一个连续的时间间隔或者时间跨度上的变化。相对于独立的数据点，折线图关注的是全局趋势，反映事物随时间或有序类别而变化，是上升了？还是下降了？针对数据做传达。
1）折线图适合用于时序数据，使用合适的时间间隔，使锯齿状的线条平滑
折线图适合在一个连续的时间上显示数据，而不是在不同类型的分类上。使用合适的时间间隔只是让折线更加容易观赏，但是如果有强需求说是一定要在某个范围，这条略过。注意平滑并不是圆滑的曲线，并且注意慎用曲线，先不说样本量的问题，就单单说曲线在一定程度上削减折线的变化程度。

文章插图
2）善用数据点标记、标记、辅助区域，注意数据油墨比，重点是反应变化
全部标清数据点在大多数情况下标记出来的意义不大，从视觉上来看会显得非常琐碎。标记、辅助区域也是，一般都是伴随交互触发出来的，大规模的显示会挤占数据表达的层级，数据的变化会被遮盖。

文章插图
3）添加“比较”的数据，加强线与线直接的对比，提高重要性层级
折线表达的是趋势，单独的一条线是比较单薄的，通过加入比较的信息，可以加强这块内容的表达。但是同时得注意元素与元素间的层级关系，避免信息繁杂。