antv图表 根据屏幕大小响应式_政务可视化设计经验图表习惯

前言

页面视觉只是表现层的组成之一。作为政务可视化的设计师，需要站在用户的角度去面向业务理解数据。数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息，因此合理的表述才是我们的核心。我们听过无数的道理，但真正意义上面向业务理解数据是很多设计师都迈不过去的坎，这就是C端设计师进入B端市场的现象。

通过复盘设计师参与过的项目时，发现仔细研究图表的选择和组成元素的行为，可以有效提升设计师对于业务和数据的渗透。和客户敲定指标内容，其实也就是钻研业务的过程。凡是有个过程，敲定指标内容往往伴随的都是阵痛。时间久了就能总结自己的方法论和技巧，面对客户的时候也不会生涩，与君同勉。

本章主要讲一下有关制作图表的一些习惯和偏好，希望钻研业务的过程中这些内容能有所帮助。以下内容收集了Ant对于数据的处理和互联网上成功的案例。自己看的时候感觉比较凌乱，所以重新梳理总结了一遍，加上了自己平时工作中的理解，和大家分享。特别建议刚刚起步的同学去看下G2Plot的系统性介绍，有助于对于基础知识的了解。        

一、图表布局

可视化的大屏主要是让使用的人快速、准确、清晰地理解数据的意义，即而进行分析趋势、驱动决策。政务可视化的大屏倾向观赏展示型，针对的对象也是偏向决策者的，重点是描述型的指标结果页面。因此，确定核心指标间的联系和优先级，合理并有层级的进行图表布局，把结论和最重要的指标放在醒目的位置。

我们之前说过获取信息点取决于用户需求，而传播信息点又受传播媒介影响，图表就是这个媒介之一。

虽然我们倾向观赏展示型，决定使用数据概览。政务的数据有许多方面，当业务不断下钻时也会经常出现需要数据分析，那么如何合理并且有层级的进行图表布局？

我们总结了一些经验：① 概述第一，突出重点，表达准确；② 先具体再趋势，信息粒度从大至小。

第一梯队：大指标区域

第二梯队：趋势图(折线图)+排行类图表(条形图)

第三梯队：细分类型图表(这个梯队如果数据支持，建议从大到小，一目了然)

第四梯队：表格+大量文本

由于汇报的特殊性，又要讲成果又要细分下去讲过程做新意。可能这边讲的有点玄，我打算这么解释。你细想你们的项目是怎么接到，你们的客户过往都是拿PPT汇报的啊！细想怎么接到项目就是在钻研客户的需求，客户为啥想要过程，是因为要背书自己的成果，有理有据。你的可视化大屏就是客户不满意以前的ppt，想要再往上走一步，但是也要保留以前ppt汇报的习惯。

PS：同一信息面中的图表数量5-9(7±2)个，避免用户在使用过程中的记忆出错。

这四个梯队如此安排，其实是观察客户在使用大屏的习惯而得。层层递进过程中，第一梯队讲重点，第二梯队一眼看出趋势和排名。等到需要展开重点了，再用第三第四梯队诠释。往往这步就是看看而已，优先级最高的还是前面的重点、趋势、排名。没人能在短时间内记住那么多诠释的资料，最有印象的还是前面的内容。经过我在现场维稳的观察，客户其实使用大屏是介于Infographic还是Visualization之间的。

知道图表的布局原则了，接下来告诉你怎么挑选对应的图表。下面是一张多篇文章都引用过的，来自设计师Abela对图表的各种特征进行了大致的概括总结。这边借花献佛，留个印象。

上述图表选择器还是比较专业的，我们最经常使用的还是六件套 — 柱状图、条形图、折线图、饼图、散点图、地图。经常翻阅的还是Echart和AntV上的具体图表，因为已经实现了，所以靠谱且生动。

二、标题与注释

讲这个前面我们先了解一下图表完整的样子是怎样的：

一个完整的图表是由标题、副标题、注释、图例、X轴标题(单位)、X轴标签、X轴刻度线、Y轴标题(单位)、Y轴标签、Y轴刻度线、网格线、提示信息等构成的。在平常使用的过程中，会根据场景去修饰删减一些内容。我在此列出来的原因是希望各位在使用图表的时候能把这12个组成元素在大脑中轮一遍，确保修饰删减的时候是为更好的展示信息去处理，而不是因为遗忘。

标题为了言简意赅的对图表主题进行阐述。注释则是表明数据来源，给数据背书用的。均是用来更直观的了解图表主题和内容来源。那么举两个例子来解释这块内容是如何进行修饰删减的。

(一)标题中文案修饰删减的案例

通常图表的标题是根据图表需要表达的内容决定，大多数同学可能认为命名没有太多问题。根据概述第一、突出重点、表达准确的原则，我们建议将概括的标题中加入结论性的信息点。这样让阅读者在最初接触信息的时候就能通晓图表说明了什么，不过前提是这个图表的结论是单一且唯一的。