4步教你玩转可视化大屏设计|内附实际操作

4步教你玩转可视化大屏设计|内附实际操作

上次写了篇大屏数据可视化的文章《大屏做成这样,领导不重用你都难!》,围绕布局排版、配色、点缀以及动态效果等方面,阐述了帆软的一些经验,文章中酷炫的大屏效果引起了很大反响,非常多热心的用户留言咨询是怎么做的。为了满足大家如此热忱的求知欲,今天小编就用实际工作案例来教大家按套路做大屏驾驶舱。

上图是一张设计稿,也是今天要教大家实现的内容。

开做之前,先做点准备工作:确认需求、准备数据、整理素材。

这里假定需求已由业务部敲定,数据IT部也整理好了,而需要的背景、边框等素材已经事先都整理过,如下图所示。

准备工作就绪,那就开始动手了。

按照上次的总结,我们设计大屏驾驶舱遵循四个基本套路:布局排版——色彩——点缀效果——动画。

一、 布局排版

业务部门的需求,是要重点展现集团销售总额数据以及各地区的数据,其他次要内容包括历年销售对比、各产品线销售、热门产品、实时交易、新老客户占比等。这里从常见的几种主次分布排版样式里挑选了一种作为此次的版面,如下图所示。

由于集团业务遍布全国,所以区域销售数据我们认为用地图展示比较直观,而全国的总销售额这一数字叠加在地图上进行展示。另外,对比类的数据适合用柱形图,占比类的数据适合用饼图,交易明细数据适合用表格。这样就确定了布局里的几个主要元素:地图、数字、柱形图、饼图、表格。打开FineReport设计器,按照布局样式,从组件栏拖入对应的图表元素到指定区域并绑定数据,如下图所示。

点击预览按钮,浏览器端的效果如下图所示。到这里第一版效果就出来了,主次排版让界面看上去很规范,但配色没有经过改良所以效果一般。


二、 色彩

之前说过,大屏的主体背景建议用深色系,这样可以有效避免视觉刺激。如此,我们把第一版demo背景调一下,这里我们从五个推荐的背景颜色里头随便选了一种(R6 G64 B102),得到第二版效果。


由于整体背景是深色的,使得我们的一些标题文字还看上去不明显,而且图表有种沉闷的感觉,这里稍微调整了下,把文字内容改成浅色、图表则换稍微明亮一点的颜色,得到第三版效果。

到第三版,其实demo已经做的差不多了,排版合理有层次、色彩也符合多数人的阅读习惯。但是,做人要有追求,不能就此止步,小编要把demo改造得更炫一点。根据上次文章里的总结,用一些带有星空、条纹等的图片作为整体背景,可以让效果富有科技感。于是小编从自己事先整理的素材库里,挑选了几张图片进行尝试,果然分分钟变得高大上了呀。如下图所示第四版效果,顶部标题处的光耀有木有非常nice? !

三、 点缀

在第四版效果基础上,我们还可以更进一步,为各个组件、标题添加一些边框来提升细节处的观感。

首先是改造顶部大标题,在大标题两侧各拖入一个报表块,为报表块添加背景图片(注意:添加的图片最好是对称的)。

预览,大标题改造后的效果如下,左右对称线条极大提升美感。

其次是改造各个组件的小标题,方法很简单,直接为小标题所在的报表块组件添加合适的背景就行。这里又从事先准备好的素材库里挑了个元素出来,最后选定效果如下。

再接下来,给各个组件添加边框元素,我们从事先准备好的素材库里调了几个边框出来,最后得到第五版效果如下。

四、 动效

在第五版效果之后,整个demo基本上可以交付了,但是由于大屏本身场景特殊,纯粹静态展示让人感觉大屏是死的,缺乏活力。为此,小编给demo加上一些动画效果,提升一下demo的活力及视觉观感。

首先我们来为销售总额设置数据监控,让其每隔1秒获取最新数据,这样销售总额数字会实时动态变化,操作如下图所示。

然后呢,再给图表添加闪烁动画,设置起来非常简单哈,不涉及到任何代码。

再接着,咱们来给地图添加一个数据监控,让各区域数据在地图上自动弹出提示。

最后,右下角的明细数据展示,我如果用滚动轮播的形式会更好,于是就加上了。由此,第六版,也就是本次demo的最后一版终于可以交付啦,大家看GIF效果,求点赞!!!

小结

肿么样,是不是按照套路做大屏驾驶舱,很容易做出漂亮的效果呢?其实在第四步动效环境,还可以加入更多交互效果,比如地图钻取,点击某个省份穿透到市级地图;或者比如联动,点击左上角的区域排名柱形图,则产品类别占比饼图联动显示具体省份的数据。

最后如果你对大屏数据可视化感兴趣,可以自己尝试着用finereport制作,或是有更多的想法和经验,都可以在下方评论。

工具下载:FineReport

学习文档:FineReport帮助文档

编辑于 2018-08-30