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

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

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

一、 布局排版

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

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

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

二、 色彩

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

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

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

三、 点缀

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

首先是改造顶部大标题&＃xff0c;在大标题两侧各拖入一个报表块&＃xff0c;为报表块添加背景图片&＃xff08;注意&＃xff1a;添加的图片最好是对称的&＃xff09;。

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

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

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

四、 动效

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

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

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

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

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

小结

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

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