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

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

上图是一张视觉设计稿，也是小编今天要教大家实现的内容。开做之前，我们先做点准备工作：确认需求、准备数据、整理素材。这里假定需求已由业务部敲定，数据IT部也整理好了，而需要的背景、边框等素材小编事先都整理过，如下图所示。

OK，准备工作就绪，那就开始动手了。按照上次帖子的总结，我们设计大屏驾驶舱遵循四个基本套路：1）布局排版2）色彩3）点缀效果4）动画。

一、 布局排版

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

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

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

二、 色彩

在上次帖子里，我们总结过，大屏的主体背景建议用深色系，这样可以有效避免视觉刺激。如此，我们把第一版demo背景调一下，小编从五个推荐的背景颜色里头随便选了一种（R6 G64 B102），得到第二版效果。

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

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

三、 点缀

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

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

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

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

再接下来，我们给各个组件添加边框元素，小编叒又从事先准备好的素材库里调了几个边框出来（现在知道为啥小编在文章开头就强调素材的重要性了吧），最后我们得到第五版效果如下。

四、 动效

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

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

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

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

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

小结

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

其实，做任何事情都有一些基本的套路，就看你有木有用心发现、用心总结。如果你对大屏数据可视化感兴趣，有类似的项目需求希望合作，或者是有更多的想法和经验愿意跟我们分享，又或者是有任何的疑问，都可以在下方评论。