前言
页面视觉只是表现层的组成之一。作为政务可视化的设计师,需要站在用户的角度去面向业务理解数据。数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息,因此合理的表述才是我们的核心。我们听过无数的道理,但真正意义上面向业务理解数据是很多设计师都迈不过去的坎,这就是C端设计师进入B端市场的现象。
通过复盘设计师参与过的项目时,发现仔细研究图表的选择和组成元素的行为,可以有效提升设计师对于业务和数据的渗透。和客户敲定指标内容,其实也就是钻研业务的过程。凡是有个过程,敲定指标内容往往伴随的都是阵痛。时间久了就能总结自己的方法论和技巧,面对客户的时候也不会生涩,与君同勉。
本章主要讲一下有关制作图表的一些习惯和偏好,希望钻研业务的过程中这些内容能有所帮助。以下内容收集了Ant对于数据的处理和互联网上成功的案例。自己看的时候感觉比较凌乱,所以重新梳理总结了一遍,加上了自己平时工作中的理解,和大家分享。特别建议刚刚起步的同学去看下G2Plot的系统性介绍,有助于对于基础知识的了解。
一、图表布局
可视化的大屏主要是让使用的人快速、准确、清晰地理解数据的意义,即而进行分析趋势、驱动决策。政务可视化的大屏倾向观赏展示型,针对的对象也是偏向决策者的,重点是描述型的指标结果页面。因此,确定核心指标间的联系和优先级,合理并有层级的进行图表布局,把结论和最重要的指标放在醒目的位置。
我们之前说过获取信息点取决于用户需求,而传播信息点又受传播媒介影响,图表就是这个媒介之一。
虽然我们倾向观赏展示型,决定使用数据概览。政务的数据有许多方面,当业务不断下钻时也会经常出现需要数据分析,那么如何合理并且有层级的进行图表布局?
我们总结了一些经验:① 概述第一,突出重点,表达准确;② 先具体再趋势,信息粒度从大至小。
第一梯队:大指标区域
第二梯队:趋势图(折线图)+排行类图表(条形图)
第三梯队:细分类型图表(这个梯队如果数据支持,建议从大到小,一目了然)
第四梯队:表格+大量文本
由于汇报的特殊性,又要讲成果又要细分下去讲过程做新意。可能这边讲的有点玄,我打算这么解释。你细想你们的项目是怎么接到,你们的客户过往都是拿PPT汇报的啊!细想怎么接到项目就是在钻研客户的需求,客户为啥想要过程,是因为要背书自己的成果,有理有据。你的可视化大屏就是客户不满意以前的ppt,想要再往上走一步,但是也要保留以前ppt汇报的习惯。
PS:同一信息面中的图表数量5-9(7±2)个,避免用户在使用过程中的记忆出错。
这四个梯队如此安排,其实是观察客户在使用大屏的习惯而得。层层递进过程中,第一梯队讲重点,第二梯队一眼看出趋势和排名。等到需要展开重点了,再用第三第四梯队诠释。往往这步就是看看而已,优先级最高的还是前面的重点、趋势、排名。没人能在短时间内记住那么多诠释的资料,最有印象的还是前面的内容。经过我在现场维稳的观察,客户其实使用大屏是介于Infographic还是Visualization之间的。
知道图表的布局原则了,接下来告诉你怎么挑选对应的图表。下面是一张多篇文章都引用过的,来自设计师Abela对图表的各种特征进行了大致的概括总结。这边借花献佛,留个印象。
上述图表选择器还是比较专业的,我们最经常使用的还是六件套 — 柱状图、条形图、折线图、饼图、散点图、地图。经常翻阅的还是Echart和AntV上的具体图表,因为已经实现了,所以靠谱且生动。
二、标题与注释
讲这个前面我们先了解一下图表完整的样子是怎样的:
一个完整的图表是由标题、副标题、注释、图例、X轴标题(单位)、X轴标签、X轴刻度线、Y轴标题(单位)、Y轴标签、Y轴刻度线、网格线、提示信息等构成的。在平常使用的过程中,会根据场景去修饰删减一些内容。我在此列出来的原因是希望各位在使用图表的时候能把这12个组成元素在大脑中轮一遍,确保修饰删减的时候是为更好的展示信息去处理,而不是因为遗忘。
标题为了言简意赅的对图表主题进行阐述。注释则是表明数据来源,给数据背书用的。均是用来更直观的了解图表主题和内容来源。那么举两个例子来解释这块内容是如何进行修饰删减的。
(一)标题中文案修饰删减的案例
通常图表的标题是根据图表需要表达的内容决定,大多数同学可能认为命名没有太多问题。根据概述第一、突出重点、表达准确的原则,我们建议将概括的标题中加入结论性的信息点。这样让阅读者在最初接触信息的时候就能通晓图表说明了什么,不过前提是这个图表的结论是单一且唯一的。