上一篇我们整理了数据图表设计的十大原则,这一篇将进一步分享可视化仪表板的设计原则。
什么是可视化仪表板
可视化仪表板是指显示在单一面板的多个图表和支持信息的集合,作用是便于同时查看和监测主题相关的各种数据,获得较为全面的信息。精心设计的可视化仪表盘可以帮助发现关键的见解,并加快商业决策速度。
可视化仪表板设计有哪些原则?
可视化仪表板是数据图表的集合面板,因此数据图表十大设计原则均适用于可视化仪表板设计。除此以外由于可视化仪表板往往包含多幅数据图表,组合的时候有一些需要额外注意的地方,我们提出了八条原则供大家参考。
- 区分观众
- 设计故事线
- 图表恰当、详略得当
- 仪表板要素增减
- 数据保持一致
- 注意显示问题
- 增加互动性
- 美化仪表板
区分观众
在设计单幅数据图表的时候,考虑的主要是不同观众对于不同图表的接受程度,有些专业性图表未必符合大众认知,应当选择与观众的认知能力相匹配的图表。而在设计可视化仪表板的时候,区分观众则更多考虑的是不同的观众群体所关心的分析角度。
观众是接受我们所传递信息的人。在开始可视化仪表板设计之前,你需要以观众的角度来思考一个问题:如果我是观众,最关心什么?显然不同的观众群体所关心的问题是不一样的。这时,你就需要区分观众,为他们定制各自所需的仪表板。
• 高层管理者的视角是全局性的,他们通常关心企业核心指标,如整体的收入、利润、达成情况、增长情况等。这个时候他们想看的往往是一些关键数字以及高度概括的图表。
• 中层管理者的工作承上启下,既需要了解整体的情况,也需要了解自己部门实际经营情况。于是他们既对多维分析图表感兴趣,也希望图表可以展开或者下钻到他们关心的维度,便于了解问题的原因,即时调整管理策略。
• 普通业务人员则最为关注和自己切身相关的数据。比如自己负责的客户或产品的销售数据,比起图表,他们更需要带有明细数据的表格,以便即时查询到相关信息并采取行动。
设计故事线
在明确观众需求以后,我们就需要设计故事线,帮助观众更好的理解需要传递给他们的信息。一个逻辑清晰的故事线,可以帮助受众理解、记忆、推导作者或演讲者想要传递的信息,让结论变得更加有理有据。简单来说,故事线(Story line)是指叙事的线索。
常见的故事线类型有总分、时间线、钻取、对比、放大、假设等。
总分:
总分、分总、总分总这几种是最常用的故事线结构了。通过将主题分成不同类型或类别进行解释,让观众从不同的角度理解主题,得出结论。
比如,分析一家公司的经营状况,可以从营业额、利润、增长、市场份额等各个度量入手,也可以从地区、产品线、渠道、时间段等各个维度进行分析,最终得出一个整体性的结论。
时间线:
随着时间线描述事件的发展过程也是常用的故事结构,结合具体场景,可以使用顺叙、倒叙、插叙等方法。
比如,描述全球新冠疫情是如何发展的,可以使用倒叙的方式:先说明目前最新的状况,然后沿着时间线从事件的最初开始描述发展过程。
钻取:
设置上下文,以便观众更好地了解特定类别中发生的事件。在面对本身就有层次的多维数据时,我们可以设定数据的层级结构,通过上查和下钻来掌握这些数据的「上下文」,从而抽丝剥茧找到我们所需要的原因或者概括数据的特征。
比如,梳理商品销售数据,你可以在商品类别层级了解整体情况,进而下钻到各个子类别和商品层级了解详细情况。
对比:
表明两个或多个分类的差异,对比是一种基本的分析方法。所谓“无对比,无分析”,对比能够引发受众诸多思考:两个东西有什么不一样?为什么这两个东西不一样?应该选择哪个方案?我们如何将A做起来像B?
比如,互联网公司,可能经常会把自己的数据和竞品公司的数据作比较,看看自己哪方面做得好,哪方面不足需要改进。
放大:
描述受众关注的内容与大局的关系。放大可以帮助观众理解我们现在所展现的数据从宏观角度谈是怎样的,也可以用于让他们感知到现在所呈现数据的变化,将会给全局产生多大的影响。
比如,我们视图分析上海市机动车的数据,那么分析者完全可以放大视角,将其放在上海市居民出行中机动车的地位角度给受众一个宏观理解。
假设:
针对未来情况的预测,我们可以采用假设的方法,列举各类影响因素,并做出合理的假设,在每一种假设条件下推理可能产生的情况。
比如,预测明年的销售情况,首先需要分析哪些因素对销售产生影响,影响力多少,再假设这些因素明年会呈现怎样的变化,从而预测明年的销售情况。
图表恰当,详略得当
故事线是仪表板的框架,而图表就是仪表板的原料。两者结合,仪表板就基本构建而成了。
图表恰当:
首先,我们要根据故事线的编排选择恰当图表,贴切的说明每一个问题或分析角度。如何设计单幅图表已经在上一篇《数据图表设计实践原则》中已经详细阐述,这里我们所需要做的是把最为合适的那幅图表挑选出来。
问题:为经营分析仪表板选择一幅图表说明公司当年整体销售额、同比增长以及目标达成情况,你觉得哪幅图更好呢?
答案:图3或图5。
解析:需要展示的整体销售额、增长和达成是企业核心KPI,是整个经营分析仪表板上最为重要的信息。对于这类将所有数据汇总成一个数据点的信息,通常应当采用更为简单粗暴的方式,即直接用数值表达。
图1:这幅图是图示与数值的结合,视觉上十分好看,但是考虑到同时要展现增长和达成,外圈环形图会比较迷惑,到底表达的是同比的含义还是达成的含义,以及超额完成的情况下环形图难以表达该含义,还是弃用为妙。
图2和图4:尽管子弹图是达成分析的最佳实践,但是对于单条数据,呈现效果不佳,同理条形图还需要用户自己去比较增长和达成情况,不够明了。
图3和图5:图3的重点在于说明销售额,附带表达增长和达成的信息。图5则将三个信息设置为同等重要。两幅图都非常简单明了的传递三个数值,侧重点各有不同。最后用哪幅图取决于三个KPI是否同样重要。
详略得当:
选完图表后,还需要配合故事线对于图表进行合理的排版。你要确定如何摆放你的标题、图表、筛选器(如果有)、图例和备注的位置,可以按照阅读顺序,从上到下横向展示自己的结果,标题主要放在左侧,图例和备注按照图表的变化来找到空当摆放。将重要的图表放大突出显示,引导观众将注意力集中到重要的信息上。
上图的仪表板主要使用环形展现数据,标题和图例放在左上角,注释信息放在左边。把视觉中心留给最具表现力的环形,右侧则放置更多的细节信息。详略搭配十分合适。
仪表板要素增减
《数据图表设计实践原则》一文中我们盘点过单幅图表所需要素。仪表板要素在图表要素的基础上稍有增加,同时要注意整体的简化。
仪表板要素:
• 标题:标题的作用是概括仪表板的分析主题,是仪表板的必要信息。
• 图表:仪表板通常由多幅图表依据一定故事线组合而成,图表数量在2-6幅最为合适,仪表板上还经常会有一些汇总说明的数字,让观众一眼看懂整体情况。
• 交互控件:筛选器、参数、突出显示工具、播放按钮等仪表板交互式控件,让仪表板不仅是静态图片,还可以与观众进行互动,根据要求查看数据。
• 图例:说明仪表板上各种颜色、形状符号、大小所代表的含义。
• 说明:对于仪表板来说,往往有多幅图表以及一些交互控件,因此向观众解释仪表板查看的方法十分必要。
• 注释:补充说明更多的信息,帮助观众阅读。
• 结论:仪表板的结论或总结,这项要素是可选的。大多数情况下仪表板是一个分析工具而不是一个分析作品,随着数据的动态更新,往往可以发现不同的问题,得出不同的结论。设计师的重点是引导观众去发现问题,找寻答案,而得出结论的部分可以交给观众。
仪表板要素的简化:
每个仪表盘都会有自己关注的主题,并且空间有限,我们需要考虑好放哪些内容,以及内容的呈现形式。在众多仪表板要素中,有些必须,有些则可以省略。这里我们可以尝试做加法做减法以达到更好的效果。
以下是可以做加法的地方:
• 仪表板标题
• 其他相关图片
• 仪表板描述、说明、结论性文字
• 巧妙的设计元素
以下是可以做减法的地方:
• 多余图表标题
• 多余图例
• 多余筛选器
• 多余标签
• 多余网格线或其他辅助元素
数据保持一致
可视化仪表板通常由多幅图表围绕一个主题展开描述,这就要求这些图表拥有相同口径可比的数据,且遵循一致的分析方法。
数据一致:
对于同一个主题,各幅图表应当采用口径一致的数据,并建立统一的数据模型。比如,各个平台新冠疫情分析可视化仪表板会存在一定的差异,这主要是因为他们使用了不同来源或者不同时间点的数据。同一幅可视化仪表板,如果使用了口径不一致的数据,图表所表达的含义就可能产生分歧。
数据定义一致:
对于口径一致的数据,我们依然要注意字段的定义是否相同。比如,销售额指的是含税还是不含税,折前还是折后;离职率是以期初人数还是当期新进总人数,或者期初人数加当期新进总人数作为分母;企业对于流失客户的定义又是什么等等。当数据的定义发生偏差,分析结论可能完全不同。
简化筛选器:
每幅图表都有各自的筛选器,而仪表板上的多幅图表的筛选器重叠在一起会产生什么效果?观众的感受很有可能是:到底这些筛选器作用于哪些图表?为什么同一个筛选器出现了多次?当一个筛选器变化的时候,其他筛选器的选项会不会跟着联动?总之答案是观众很有可能会懵。
解决方案是:尽可能减少、简化仪表板上的筛选器。如果一定要放,也尽量使用全局性筛选器(作用于仪表板上所有图表的筛选器),并且数量越少越好,至于其他的筛选就交给图表间联动来完成。
图例一致:
和筛选器一样,将每幅图表各自的图例放置在一幅仪表板上的时候,也很有可能会“打架”。准确的说不是图例打架,而是当同一幅仪表板上同一种颜色、形状表示了多个含义的时候,观众就会难以区分。因此同一仪表板对于颜色、形状的示意应当一致。
作者为了追求仪表板色彩的和谐使用同样一组颜色表示不同含义。左边的图几种颜色表示年份,右边同样的几种颜色则表示区域。事实上,观众难以区分左右两幅图相同颜色代表了不同含义,往往会解读错误图表的意思。
注意显示问题
在制作单幅图表的时候,我们不太容易留意到图表大小、分辨率的问题。而在仪表板上将这些图表进行组合的时候,受制于版面大小,每幅图表的空间受到压缩,经常会出现显示不完整,出现滚动条的现象。这里有一些注意点是仪表板排版时需要特别考虑的。
为仪表板选择适合的分辨率:
仪表板的大小首要考虑观众如何查看,如果观众用笔记本电脑看,通常选用全屏分辨率;而如果观众主要通过手机查看,则要考虑竖屏的分辨率。有一些分析工具也会提供自适应分辨率,根据观众的设备进行切换。常用的仪表板分辨率有:
• 台式机浏览器(1000*800)
• 全屏(1024*768)
• PPT(1600*900)
• A4(1169*827)
• 手机(720*1080)
• 电视机大屏
为选定的分辨率选择合适的布局和体验:
以手机端查看为例,人们通常会用手在屏幕上上下滚动,因此设计的时候不必拘泥于屏幕长度,而宽度必须适配手机屏幕宽度。同时由于观众习惯自上而下阅读,以及手机端不方便点下拉框,在设计图表顺序以及筛选器形式的时候都需要考虑。而对于A4大小的仪表板来说,最后很有可能会打印在一张A4纸上,观众往往不能进行放大缩小等任何操作,因此仪表板要力求每个部分都能清晰展现。
仪表板整体以及图表避免出现滚动条:
滚动条是仪表板的敌人。原本希望一图读懂信息的,在仪表板上出现滚动条后,非但不能一眼看懂,体验甚至不如将图表分散摆放。大家在制作仪表板时要非常注意这一点。
增加互动性
《数据图表设计实践原则》一文中我们介绍了诸多图表互动方式,如:筛选、高亮、钻取、排序、动态播放等。这些方法同样适用于仪表板。与之不同的,仪表板除了考虑单幅图表的互动以外还应考虑图表间的联动以实现更强大的互动。
提示功能:
在仪表板上选定某个数据点时,浮窗展现更多信息或其他图表,帮助观众更好的理解其他补充信息。
操作功能:
当点动仪表板上某个数据点时,该数据将作为筛选条件传递给其他图表,实现联动的效果。
美化仪表板
“仪表板有多美,观众就有多爱看“,笔者以为这句话不假。好吧,我们整个系列都是关于如何让商业数据呈现的更好、更美的讨论,这里只是轻点要领。
对于商业仪表板的设计,我们需要考虑整体性和一致的排版风格。比如优化布局、字体、颜色。
布局:
使用网格布局是一种基本的设计方法。简单来说,就是把一个需要设计的页面以网格的方式拆分出来,然后基于网格线绘制自己所需要的东西。如下图所示:
根据故事线类型进行构图,结合网格线的使用,设计出各种结构的布局。如对称结构、九宫格结构、非对称结构、大屏结构等。
字体:
也是影响视觉呈现的重要因素之一。除了标题之外的正文部分,必须对艺术字体「避之唯恐不及」⸺艺术字体很难阅读,容易给读者造成阅读的障碍。大标题、小标题和文字解释部分,应当选用不一样的字号来区分开来,形成阅读的层次感。
• 顶部选用大号字体,中标题用中号字体,小标题就选用识别性强的小号字体。
• 保持字体的一致性。标题字体可以和标注所用字体不一样,比如说标题字体使用黑体,标注字体使用宋体等以表现层次感,但是一张图表最好不要超过三种字体,显得凌乱。
• 合理利用加粗或斜体,强调真正需要强调的内容。值得注意的是,和字母不一样的是,中文一般来说没有所谓的斜体,因此不应当使用系统按照算法强制使字体倾斜的做法。这种做法不仅不会起到强调的作用,反而适得其反,造成阅读障碍。加粗也是如此。
• 不要使用黑底白字或者其他底色显示字。
• 不要使用艺术字体。
颜色:
我们可以用颜色区分不同的数据;也可能用颜色表达数据;我们还可以用数据高亮,让读者更好地注意到。
仪表盘的颜色不宜过于复杂⸺过多的颜色容易导致用户迷失自己的方向,从而让图表变得更混乱了,有效将图表所要呈现的信息传递给受众就变得不太可能了。
总结
精心设计的仪表盘可以很好的协调组织数据,可以让观众找到探究数据问题的乐趣和价值,发现数据的见解,并加快决策速度。
生活中大大小小的事情,都离不开决策。我们相信数据驱动的决策行为不仅理性,而且更具有说服力。