【系列二】点开文章学套路,轻轻松松做大屏

社区管理员
上次分享了篇大屏数据可视化的文章——大屏做成这样,领导不重用你都难,围绕布局排版、配色、点缀以及动态效果等方面,阐述了帆软的一些经验。

1.gif

2.gif


结果文章中酷炫的大屏效果引起了非常大反响,非常多番薯回帖互动咨询。

9192559b8cd3b1c54e.png

1482359b8cd49ba02a.png

5762059b8cd5bd2571.png

2855859b8cdd351442.png


为了满足大家如此热忱的求知欲,今天就用实际案例来教大家按套路做大屏驾驶舱

3.jpg


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

4.jpg


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

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

由于集团业务遍布全国,所以区域销售数据我们认为用地图展示比较直观,而全国的总销售额这一数字叠加在地图上进行展示。另外,对比类的数据适合用柱形图,占比类的数据适合用饼图,交易明细数据适合用表格。这样,我们就确定了布局里的几个主要元素:地图、数字、柱形图、饼图、表格。

打开 FineReport 设计器(下载地址),按照布局样式,从组件栏拖入对应的图表元素到指定区域并绑定数据,如下图所示。

6.jpg

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

7.jpg


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

8.jpg

9.jpg


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

10.jpg

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

11.jpg

3、点缀
在第四版效果基础上,我们还可以更进一步,为各个组件、标题添加一些边框来提升细节处的观感。
首先是改造顶部大标题,在大标题两侧各拖入一个报表块,为报表块添加背景图片(注意:添加的图片最好是对称的)。

12.jpg

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

13.jpg

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

14.jpg

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

15.jpg 4

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

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

16.jpg

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

17.jpg

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

18.jpg

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

19.gif

最终从设计器上看是这样子的:

20.jpg

5、小结
肿么样,是不是按照套路做大屏驾驶舱,很容易做出漂亮的效果呢?其实在第四步动效环境,我们还可以加入更多交互效果,比如地图钻取,点击某个省份穿透到市级地图;或者比如联动,点击左上角的区域排名柱形图,则产品类别占比饼图联动显示具体省份的数据。其实,做任何事情都有一些基本的套路,就看你有木有用心发现、用心总结。

参与人数 +2 F豆 +2 理由
w1748587889 + 1 太棒了,给你32个赞,么么哒
w帆 + 1 太棒了,给你32个赞,么么哒

查看全部评分

发表于 2017-9-15 13:02:48
交流群中看到有人问报表块为什么可以重叠,操作步骤中应该加上:新建表单,设置表单body的布局方式为绝对布局。
6083559bb5eb8ce955.png
参与人数 +2 F豆 +89 理由
w帆 + 1 太棒了,给你32个赞,么么哒
兔子酱 + 88 棒棒哒

查看全部评分

发表于 2017-9-14 09:47:47
这个背景图和模板可以在哪里找到?
发表于 2017-9-14 13:52:48
认真看了,觉得素材、背景之类的很重要。
发表于 2017-9-14 15:19:36
看后,自己动手设计了。真心觉得楼主不简单!!牛
发表于 2017-9-15 09:51:44
发表于 2017-9-15 13:53:42


想要模板啊
发表于 2017-9-15 13:56:38
橙子,有模板么,提供下,我这边对地图那个动态展示的效果做了验证,没反应,求模板
发表于 2017-9-15 15:10:38
来自手机
cherishdqy 发表于 2017-9-15 13:02
交流群中看到有人问报表块为什么可以重叠,操作步骤中应该加上:新建表单,设置表单body的布局方式为绝对布 ...

8.0版本的不能进行绝对布局啊
发表于 2017-9-15 16:07:30
文末没有看到链接
发表于 2017-9-15 21:00:18
学习了,想请教两个问题:1、大屏每个小版块中的背景尽管用gif图片,但如何才能动?2、右下角有个类似excel表格的小版块的向上滚动的效果如何做的?  希望楼主详细讲讲  谢谢。
目前我能实现的大屏背景用gif图能动,小版块用tab块动态展示,滚动效果用插件 并用富文本添加内容实现,但不能用表格实现滚动。所以想学习下楼主的实现方法。谢谢
发表于 2017-9-19 11:32:04
跪求素材呀,大佬~~~~
发表于 2017-9-20 17:18:07
这个背景图和模板可以在哪里找到?
发表于 2017-9-21 09:13:24
请问有没有模板?
发表于 2017-9-26 16:35:51
发表于 2017-10-6 15:55:41
发表于 2017-10-14 23:59:55
模版、、、模版!
发表于 2017-10-16 14:53:32
请问哪位有了背景图片了?能分享一下不?
发表于 2017-10-21 14:18:59
很棒啊,赞赞赞
发表于 2017-10-21 16:39:03
如果做了联动,报表块的双向自适应会失效
发表于 2017-10-26 13:09:15
说好的领导重用呢,你个骗子
发表于 2017-11-1 11:02:04
跪求模板呀~~~
发表于 2017-11-7 20:03:08
这个模板能放到商城里面么?如果价格合适的话,真心想下载下来学习揣摩一下
发表于 2017-11-8 13:36:26
太棒了!
发表于 2017-11-14 14:07:18
有没有模板啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

60回帖数 10关注人数 48773浏览人数
最后回复于:2020-3-24 10:51

返回顶部 返回列表