找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

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

兔子酱 社区微信达人帆软员工 管理员
发表于 2017-9-13 14:48:39 | 显示全部楼层 |取消关注该作者的回复
上次分享了篇大屏数据可视化的文章——大屏做成这样,领导不重用你都难,围绕布局排版、配色、点缀以及动态效果等方面,阐述了帆软的一些经验。

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

评分

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

查看全部评分

此帖共有 4196 位番薯登录后查看

已有4人关注本帖

怼我Pagegle
回复

使用道具 举报

cherishdqy 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP2
发表于 2017-9-15 13:02:48 | 显示全部楼层 |取消关注该作者的回复
交流群中看到有人问报表块为什么可以重叠,操作步骤中应该加上:新建表单,设置表单body的布局方式为绝对布局。
6083559bb5eb8ce955.png

评分

参与人数 2F豆 +89 收起 理由
w帆 + 1 太棒了,给你32个赞,么么哒
兔子酱 + 88 棒棒哒

查看全部评分

  • 评论

回复 支持 反对

使用道具 举报

Donotkillme1 社区微信达人 初学乍练(Lv1)
发表于 2017-9-14 09:47:47 | 显示全部楼层 |取消关注该作者的回复
这个背景图和模板可以在哪里找到?
  收起(4)
  • Donotkillme1 Donotkillme1 : 回复 橙子君 :已经回复过了,没有反应---
    2017-09-14 09:52 评论
  • 橙子君 橙子君 : 回复 Donotkillme1 :由于咨询人数较多,现在产品组的同事在逐一联系处理,还请耐心等待,一定会给您回复的
    2017-09-14 09:55 评论
  • Donotkillme1 Donotkillme1 : 回复 橙子君 :好的好的,蟹蟹啦
    2017-09-14 10:41 评论
  • 橙子君 橙子君 : 回复 Donotkillme1 :不客气哒~~
    2017-09-14 10:42 评论
  • 评论

回复 支持 反对

使用道具 举报

BooooBoooo 社区微信达人 渐入佳境(Lv2)
发表于 2017-9-14 13:52:48 | 显示全部楼层 |取消关注该作者的回复
认真看了,觉得素材、背景之类的很重要。
  收起(1)
  • 橙子君 橙子君 这样大屏效果才能锦上添花
    2017-09-14 13:57 评论
  • 评论

回复 支持 反对

使用道具 举报

xyq189215  初学乍练(Lv1)
发表于 2017-9-14 15:19:36 | 显示全部楼层 |取消关注该作者的回复
看后,自己动手设计了。真心觉得楼主不简单!!牛
  收起(2)
  • 橙子君 橙子君 : 大师兄知道会很高兴的
    2017-09-14 15:35 评论
  • Donotkillme1 Donotkillme1 : 你已经有模板了吗
    2017-09-15 13:56 评论
  • 评论

回复 支持 反对

使用道具 举报

cccx 社区微信达人 初学乍练(Lv1)
发表于 2017-9-15 09:51:44 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

dingliping  渐入佳境(Lv2)
发表于 2017-9-15 13:53:42 | 显示全部楼层 |取消关注该作者的回复


想要模板啊
  • 评论

回复 支持 1 反对 0

使用道具 举报

阿迪 社区微信达人番薯互助团队 帆软插件开发者 互助叫兽
发表于 2017-9-15 13:56:38 | 显示全部楼层 |取消关注该作者的回复
橙子,有模板么,提供下,我这边对地图那个动态展示的效果做了验证,没反应,求模板
  收起(2)
  • 橙子君 橙子君 : 我这木有模板,我只是文章的搬运工
    2017-09-15 14:34 评论
  • dingliping dingliping : 回复 橙子君 :莫名的心疼你一秒
    2017-09-15 16:05 评论
  • 评论

回复 支持 反对

使用道具 举报

一夜郎  初学乍练(Lv1)
发表于 2017-9-15 15:10:38 来自手机 | 显示全部楼层 |取消关注该作者的回复
cherishdqy 发表于 2017-9-15 13:02
交流群中看到有人问报表块为什么可以重叠,操作步骤中应该加上:新建表单,设置表单body的布局方式为绝对布 ...

8.0版本的不能进行绝对布局啊
  收起(1)
  • cherishdqy cherishdqy : jar包版本不支持,更新jar包
    2017-09-15 15:16 评论
  • 评论

回复 支持 反对

使用道具 举报

dingliping  渐入佳境(Lv2)
发表于 2017-9-15 16:07:30 | 显示全部楼层 |取消关注该作者的回复
文末没有看到链接
  • 评论

回复 支持 反对

使用道具 举报

maoer8783  初学乍练(Lv1)
发表于 2017-9-15 21:00:18 | 显示全部楼层 |取消关注该作者的回复
学习了,想请教两个问题:1、大屏每个小版块中的背景尽管用gif图片,但如何才能动?2、右下角有个类似excel表格的小版块的向上滚动的效果如何做的?  希望楼主详细讲讲  谢谢。
目前我能实现的大屏背景用gif图能动,小版块用tab块动态展示,滚动效果用插件 并用富文本添加内容实现,但不能用表格实现滚动。所以想学习下楼主的实现方法。谢谢
  收起(3)
  • 橙子君 橙子君 : 你好,我只是文章的分享者,所以具体的技术操作问题建议可以前往论坛问题求助板块提问,互助团队成员会给你比我更专业的技术指导
    http://bbs.fanruan.com/plugin.php?id=hux_zhidao:hux_zhidao
    2017-09-18 09:44 评论
  • Donotkillme1 Donotkillme1 : http://help.finereport.com/
    你说的是这个跑马灯的效果吗
    2017-09-19 08:31 评论
  • maoer8783 maoer8783 : 回复 Donotkillme1 :  非常感谢你  在这里找到了答案
    2017-09-19 20:04 评论
  • 评论

回复 支持 1 反对 0

使用道具 举报

huangj7166163  初学乍练(Lv1)
发表于 2017-9-19 11:32:04 | 显示全部楼层 |取消关注该作者的回复
跪求素材呀,大佬~~~~
  • 评论

回复 支持 反对

使用道具 举报

谢海明 社区微信达人 初学乍练(Lv1)
发表于 2017-9-20 17:18:07 | 显示全部楼层 |取消关注该作者的回复
这个背景图和模板可以在哪里找到?
  收起(1)
  • 我是风儿你是沙 我是风儿你是沙 : 是啊,背景图真的作用很大,哪了有,能分享一下?
    2017-09-29 09:31 评论
  • 评论

回复 支持 反对

使用道具 举报

momo123456  初学乍练(Lv1)
发表于 2017-9-21 09:13:24 | 显示全部楼层 |取消关注该作者的回复
请问有没有模板?
  • 评论

回复 支持 反对

使用道具 举报

dingliping  渐入佳境(Lv2)
发表于 2017-9-26 16:35:51 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

好望角 实名认证 渐入佳境(Lv2)
发表于 2017-10-6 15:55:41 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

nianhua2016 社区微信达人 初学乍练(Lv1)
发表于 2017-10-14 23:59:55 | 显示全部楼层 |取消关注该作者的回复
模版、、、模版!
  • 评论

回复 支持 反对

使用道具 举报

小胖爱学习  初学乍练(Lv1)
发表于 2017-10-16 14:53:32 | 显示全部楼层 |取消关注该作者的回复
请问哪位有了背景图片了?能分享一下不?
  • 评论

回复 支持 1 反对 0

使用道具 举报

mufeng001  初学乍练(Lv1)
发表于 2017-10-21 14:18:59 | 显示全部楼层 |取消关注该作者的回复
很棒啊,赞赞赞
  • 评论

回复 支持 反对

使用道具 举报

njxzwhh 实名认证 初学乍练(Lv1)
发表于 2017-10-21 16:39:03 | 显示全部楼层 |取消关注该作者的回复
如果做了联动,报表块的双向自适应会失效
  • 评论

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

联系管理员@兔子酱|联系帆软|免责声明|手机版|帆软社区|Copyright © 帆软软件有限公司 ( 苏ICP备14031611号-3 )

GMT+8, 2018-11-15 08:17 , Processed in 1.098704 second(s), 217 queries , Gzip On.

返回顶部 返回列表