提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

大屏做成这样,领导不重用你都难

兔子酱 社区微信达人帆软员工 管理员
发表于 2017-8-16 14:06:44 | 显示全部楼层 |取消关注该作者的回复
前言:
以下大屏展示均为基于finereport制作的效果图,图中数据并非真实数据。

前两天番薯@天狮座 在帆软论坛发了生产大屏的帖子,自己用FineReport做了个大屏的模板,引发了很大反响。

104806ypo3peabmaphopjd.png

他表示大屏需要动态效果才好看,这个说的确实很在理。静止的图像在大屏上感觉是死的,增加一些动画效果,能让人觉得大屏活起来了,感官享受是完全不一样的。但是,影响大屏展示效果的因素有很多,动画只是其中一方面。今天,大师兄就抛砖引玉,围绕大屏展现方面的一些基本套路,讲讲帆软的经验。我们用 FineReport 可以做出很多炫酷的大屏的,比如:

2.gif

3.jpg

在这里希望能引发更多粉丝们的讨论、分享以及思维碰撞。

01   布 局 排 版
先讲一个基准:不要为了做大屏而做大屏,不要为了展现而展现。啥意思,就是说要明确大屏展现的目的,首要是服务于业务的。要让业务内容、数据合理的展现,就要避免误入疯狂堆砌指标的歧途,要分清主次。主要指标是什么?是反应核心业务内容的。次要指标是什么?通常是用于进一步阐述主要指标的。

OK,明确了前面的基准点,那制作大屏的时候就要给予主要指标和次要指标不一样的侧重。推荐几种常见的版式给大家。

4.jpg
5.jpg

上面几个版式,不是金科定律,只是通常推荐的主次分布版式,能让信息一目了然。实际项目中,不一定使用主次分布,也可以使用平均分布,或者可以二者结合进行适当调整。比如下图所示,指标很多很多,存在多个层级的,就根据上面所说的基本原则进行一些微调,效果很好。

6.jpg

7.jpg

附上几个典型的主次分布的大屏效果给大家看下,是不是看上去很清晰呢,不会让人有找不到重点的感觉。

8.jpg

9.jpg


02  配色

合理的布局能让业务内容更富有层次,合理的配色能让观看者更舒适。配色的学问很复杂,我们这里就先讲一讲背景色。背景色又分为整体背景以及单个元素的背景,无论是哪一个,都遵从两点基本原则:深色调&一致性。

之所以选择深色调,主要是为了避免视觉刺激。参加过大型会议的童鞋应该有感受,如果演示PPT是浅色系的,投放到大屏上后会比较刺眼,尤其是前排童鞋简直在遭罪受。下图是两个驾驶舱页面深浅色对比,看图片也许看不出来,感兴趣的可以找公司的大屏硬件测试测试,看看哪个更让人眼睛看着舒服。

10.jpg

11.jpg

整体背景深色系,可选的余地还是很多的,但是配起来能让多数人都觉得好看的,还是以深蓝色系为主,如下所示是几个推荐的配色方案。这几个深色配色,是我们调研下来最常用的背景设置。大家如果去网上搜罗好看的大屏或者驾驶舱页面效果,很多都是这几个色系里头的。帆软官方的大屏演示系统,主要背景色均是如此。

12.jpg

当然,背景不一定要用颜色的,也可以用图片。图片的使用依旧遵从整体深色的原则,同时搭配其他一些现实特性可以让整体看着更有科技感。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片,帆软官方有常用的背景图片,需要的可以联系我们索取。在文章开头提到的那个帖子里,原作者就是用了动态流星雨背景图,给整体加分不少。

13.jpg

单个元素的背景,首先是要和整体背景色系保持一致性,避免突兀。另外一个小技巧,就是透明度的使用。根据实际项目经验,我们极其推荐大家为单个的组件元素搭配一些透明色,透明度设置在10%上下为宜,具体以实际效果微调。如下几个模板,组件增加透明效果后,整体效果有质的提升。

14.jpg

15.jpg

16.jpg


03  点缀
细节决定成败,这样的大道理已经被宣扬过无数次了。在大屏展现上,细节也会极大的影响整体效果,通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果,能帮助提升整体美观度。

如下图所示销售驾驶舱大屏,顶部的标题通过左右两个对称线条进行点缀,各个组件的细分标题通过不规则渐变色图片进行点缀,另外每个组件都搭配使用了简洁的边框以提升层次感。

17.jpg

比如下面图所示大屏,给组件及其标题增加一些不规则的渐变色边框,让整体看上去更富有科技感。

18.jpg

135221ol5gbgbbj9g01wdk.jpg.thumb.jpg

如下图所示的航空大屏,给元素增加一些飞机图标、图画之类的拟物效果,让大屏更真实生动。

20.jpg


04  动效
动效的范围很广,可以从很多角度解读,比如前文所提帖子里的背景动画,比如刷新的加载动画,比如轮播动画,比如图表的闪烁动画,地图的流向动画等等,都属于动态效果的范畴。前文说过,动效的增加能让大屏看上去是活的,增加观感体验。但过分的动效极其容易喧宾夺主,让观看者的眼球不知道往哪里聚焦,反而丧失了业务展现价值。这个度很难把握,既要平衡酷炫效果,又要突出内容,欢迎更多的粉丝们参与讨论、互相学习。

碍于篇幅原因,动效部分我们不过多展开阐述,此处仅列举几个制作的大屏动态示例demo供大家参考,在后期的大屏相关文章中我们继续讨论,大家可以关注帆软微信公众号及论坛。

如下图所示销售大屏,核心指标车辆总价值以数字显示,通过FineReport 的数据监控功能,动态刷新数值。

21.gif

再如下图所示IT运维大屏,中间地图上模拟的呼吸动画,底部的滚动消息等。

22.gif

如下图所示金融大屏的轮播动画,借助轮播效果,来实现同一个位置滚动播放不同的指标内容,避免平铺展开所有指标把大屏界面挤满。

23.gif

再比如这个销售驾驶舱,通过边框动画、地图流向动画,来增加大屏展示的整体活力。

24.jpg



05   总结
从布局、背景、点缀边框、动效等几个方面,大师兄简单介绍了一些大屏展现页面制作的基本方法。如果您认真阅读,不难发现其实很多环节是相通或者交叉的,比如单个元素的背景色,往往会和一些边框一起使用;比如一些动态效果,可能是背景或者边框本身的GIF动画。

大屏展现作为数据可视化的一个典型使用场景,其涵盖的知识太多太多了,一个完整的大屏项目从开始调研到实施交付可能需要开发工程师、项目经理、视觉工程师、UI工程师、硬件工程师等等众多专业人员的参与。帆软作为国内领先的商业智能及分析平台提供商,也一直致力于为客户提供更好的数据可视化落地指导,我们后续会在公众号及论坛陆续发布更多的交流文章。如果您有关于大屏数据可视化方面的任何需求、建议,欢迎和我们讨论;也非常希望能看到更多番薯分享自己相关领域的经验和知识,大家共同成长。

欢迎关注帆软论坛,会陆续发布其他大屏相关交流文章


评分

参与人数 10F豆 +20 收起 理由
郑金星 + 1 骚年,我看好你哦
彭文源 + 1 <font style="vertical-align: inh
darter + 10 太棒了,给你32个赞,么么哒
flyfranker + 1 太棒了,给你32个赞,么么哒
w1748587889 + 1 太棒了,给你32个赞,么么哒
JW_Holy + 1 骚年,我看好你哦
y473825961 + 1 太棒了,给你32个赞,么么哒
huiluxin_he + 1 太棒了,给你32个赞,么么哒
wfqs163 + 1 太棒了,给你32个赞,么么哒
星际 + 2 骚年,我看好你哦

查看全部评分

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

已有22人关注本帖

n4K3zz庞阿浪
回复

使用道具 举报

为中华之崛起 帆软员工 渐入佳境(Lv2)
发表于 2017-8-17 11:31:04 | 显示全部楼层 |取消关注该作者的回复
alu 发表于 2017-8-17 10:34
1、有所有大屏截图的所有demo文件吗?如果能提供,大家学起来就快多了。
2、帆软官方有常用的背景图片,需 ...

为了避免大面积公开流传,demo源文件及文中提到的部分素材暂时不公开,后期会整理好可以对外的并打包到设计器自带demo工程里或者发到论坛中。
  收起(3)
  • 打咕基 打咕基 : 楼主,怎么先到先得啊?
    2017-08-18 15:02 评论
  • 圣体叶小凡 圣体叶小凡 : 请问怎么联系您
    2017-08-23 11:12 评论
  • 吴志康 吴志康 : 能否教教我们怎么做呢?
    2018-12-11 15:00 评论
  • 评论

回复 支持 3 反对 0

使用道具 举报

传说哥 实名认证 番薯互助团队 帆软员工 管理员
发表于 2017-8-16 15:58:53 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

天狮座 实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-16 17:03:30 | 显示全部楼层 |取消关注该作者的回复
哇,你发表这个贴都是精华帖了,我的帖子还不是精华帖
  收起(1)
  • 橙子君 橙子君 : 别捉急,别捉急
    2017-08-16 17:15 评论
  • 评论

回复 支持 反对

使用道具 举报

星痕 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP1
发表于 2017-8-16 17:22:00 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

zolahu 实名认证 渐入佳境(Lv2)
发表于 2017-8-16 17:32:31 | 显示全部楼层 |取消关注该作者的回复
youDEMO 提供就更好了 !牛!
  • 评论

回复 支持 反对

使用道具 举报

kmzxh 社区微信达人 渐入佳境(Lv2)
发表于 2017-8-16 17:51:19 | 显示全部楼层 |取消关注该作者的回复
真的很牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛
  收起(1)
  • 橙子君 橙子君 : {:8_210:}{:8_210:}{:8_210:}
    2017-08-16 18:31 评论
  • 评论

回复 支持 反对

使用道具 举报

兔子酱 社区微信达人帆软员工 管理员
发表于 2017-8-16 18:32:57 | 显示全部楼层 |取消关注该作者的回复
zolahu 发表于 2017-8-16 17:32
youDEMO 提供就更好了 !牛!

111111111111.png
更多demo请查阅,也可以联系文末总监QQ进行沟通~~{:8_220:}
  • 评论

回复 支持 反对

使用道具 举报

qyf  VIP1
发表于 2017-8-16 22:42:31 | 显示全部楼层 |取消关注该作者的回复
有没有实现教程啊?有没有模板可以分享啊?
  • 评论

回复 支持 反对

使用道具 举报

cherishdqy 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP2
发表于 2017-8-17 00:12:51 来自手机 | 显示全部楼层 |取消关注该作者的回复
qyf 发表于 2017-8-16 22:42
有没有实现教程啊?有没有模板可以分享啊?

找杨总啊~
  收起(1)
  • qyf qyf : 模板demo里发现两个{:8_198:}
    2017-08-17 00:20 评论
  • 评论

回复 支持 反对

使用道具 举报

xiaoxian  初学乍练(Lv1)
发表于 2017-8-17 08:34:57 | 显示全部楼层 |取消关注该作者的回复
支持,这个厉害了
  • 评论

回复 支持 反对

使用道具 举报

finereport911 实名认证 渐入佳境(Lv2)
发表于 2017-8-17 09:14:18 | 显示全部楼层 |取消关注该作者的回复
这个学习下大屏就知道咋玩才合理了
  • 评论

回复 支持 反对

使用道具 举报

dojo  初学乍练(Lv1)
发表于 2017-8-17 09:31:45 | 显示全部楼层 |取消关注该作者的回复
求实现教程
  收起(1)
  • 橙子君 橙子君 : 可以私戳杨总QQ:2851322936交流
    2017-08-17 09:59 评论
  • 评论

回复 支持 反对

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-17 10:34:20 | 显示全部楼层 |取消关注该作者的回复
1、有所有大屏截图的所有demo文件吗?如果能提供,大家学起来就快多了。
2、帆软官方有常用的背景图片,需要的可以联系索取。希望公开提供好的背景图片资源、尤其是动画图片资源。
3、翻卡效果是怎么实现的?使用的是"超酷3D翻页式计"这个插件吗?稳定吗?
4、滚动控件是使用的“滚动消息控件”吗?怎么绑定数据集呢?一直搞不明白。
  • 评论

回复 支持 反对

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-17 12:04:52 | 显示全部楼层 |取消关注该作者的回复
68127599515dc4981e.png
  • 评论

回复 支持 1 反对 0

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-17 12:10:31 | 显示全部楼层 |取消关注该作者的回复
4075599517327f6ce.png
  • 评论

回复 支持 反对

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-17 12:15:18 | 显示全部楼层 |取消关注该作者的回复
为中华之崛起 发表于 2017-8-17 11:31
为了避免大面积公开流传,demo源文件及文中提到的部分素材暂时不公开,后期会整理好可以对外的并打包到设 ...

请查看我的后续跟帖中的总结和建议
  • 评论

回复 支持 1 反对 0

使用道具 举报

kmzxh 社区微信达人 渐入佳境(Lv2)
发表于 2017-8-17 13:48:48 | 显示全部楼层 |取消关注该作者的回复
很牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛
  • 评论

回复 支持 反对

使用道具 举报

fczll008  初学乍练(Lv1)
发表于 2017-8-17 14:01:34 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

zolahu 实名认证 渐入佳境(Lv2)
发表于 2017-8-17 14:10:07 | 显示全部楼层 |取消关注该作者的回复
动画效果如何实现!求代码?杨总
  收起(1)
  • 橙子君 橙子君 : 杨总信息要爆了!查看文章末尾联系
    2017-08-17 16:55 评论
  • 评论

回复 支持 反对

使用道具 举报

yiminglian 社区微信达人实名认证 番薯互助团队 互助新人
发表于 2017-8-17 16:13:01 | 显示全部楼层 |取消关注该作者的回复
表白大橙子 ,杨总么么哒
  收起(1)
  • 橙子君 橙子君
    2017-08-17 16:54 评论
  • 评论

回复 支持 反对

使用道具 举报

星际  渐入佳境(Lv2)
发表于 2017-8-17 17:30:57 | 显示全部楼层 |取消关注该作者的回复
赞,做很漂亮啊
  • 评论

回复 支持 反对

使用道具 举报

星际  渐入佳境(Lv2)
发表于 2017-8-17 18:01:49 | 显示全部楼层 |取消关注该作者的回复
再仔细阅读,觉得好像用了不少时间。厉害
  • 评论

回复 支持 反对

使用道具 举报

我不认识锐雯  初学乍练(Lv1)
发表于 2017-8-17 18:39:24 | 显示全部楼层 |取消关注该作者的回复
从知乎上看到的,很棒的设计,灵感大发!学习学习!
  收起(9)
  • 橙子君 橙子君 : 祝早日学成,欢迎来投稿啊!{:8_210:}{:8_210:}
    2017-08-18 09:42 评论
  • 我不认识锐雯 我不认识锐雯 : 回复 橙子君 :其实用帆软已经做了N多表了,用的公司商用版,但都是直观反映数据的,像这种的还没有用过,可否有demo学习一下!谢谢。
    2017-08-18 10:57 评论
  • 橙子君 橙子君 : 回复 我不认识锐雯 :论坛首页蓝色banner—finereport下拉菜单中有demo例子,欢迎查看;论坛中也有很多番薯的大屏投稿,右上角搜索关键字即可
    2017-08-18 11:02 评论
  • 我不认识锐雯 我不认识锐雯 : 回复 橙子君 :昨天在最火的那个大屏稿子中,有个填写邮箱之类信息的,说会发送部分学习资料,请问何时会审核发送呢?{:8_198:}
    2017-08-18 11:07 评论
  • 橙子君 橙子君 : 回复 我不认识锐雯 :是填写了文末的表单信息吗?消息比较多所以需要时间进行处理,若是合作客户可以直接联系当地的销售同事索要哈
    2017-08-18 11:16 评论
  • 还有4条评论 点击查看

    评论

回复 支持 反对

使用道具 举报

fujiwen  初学乍练(Lv1)
发表于 2017-8-18 09:28:52 | 显示全部楼层 |取消关注该作者的回复
不得不说,我就是为了这篇文章认识了finereport.新人,以后请多多指教!
  收起(1)
  • 橙子君 橙子君 : 新人加入,欢迎欢迎!除了大屏,帆软精彩多到想不到{:8_220:}{:8_220:}
    2017-08-18 09:43 评论
  • 评论

回复 支持 反对

使用道具 举报

打咕基 社区微信达人 初学乍练(Lv1)
发表于 2017-8-18 14:51:35 | 显示全部楼层 |取消关注该作者的回复
楼主,那个信息系统滚动轮播怎么做?请问可以求一个Demo吗?
  收起(1)
  • 橙子君 橙子君 : 感兴趣的话可以关注一下文末留下的交流方式哈~~
    2017-08-23 13:48 评论
  • 评论

回复 支持 反对

使用道具 举报

finereport911 实名认证 渐入佳境(Lv2)
发表于 2017-8-18 16:19:35 | 显示全部楼层 |取消关注该作者的回复
今天摇一摇太少了,没攒够500f豆,下不了高大上的模板,只能先看看方法
  收起(1)
  • 天狮座 天狮座 : 现在下不了咯,等模板出来再发
    2017-08-21 13:44 评论
  • 评论

回复 支持 反对

使用道具 举报

lishuang 社区微信达人 初学乍练(Lv1)
发表于 2017-8-18 16:37:29 | 显示全部楼层 |取消关注该作者的回复
收藏一个
  • 评论

回复 支持 反对

使用道具 举报

qjfcy  初学乍练(Lv1)
发表于 2017-8-20 19:24:30 | 显示全部楼层 |取消关注该作者的回复
想要楼主发布的demo文件学习,如果能提供,那真的非常感谢了~
  收起(1)
  • 天狮座 天狮座 : 之后会提供的
    2017-08-21 13:43 评论
  • 评论

回复 支持 反对

使用道具 举报

天都峰  初学乍练(Lv1)
发表于 2017-8-23 13:27:41 | 显示全部楼层 |取消关注该作者的回复
期待,Demo, 真炫,做个让领导喜欢的
  收起(1)
  • 天狮座 天狮座 : 希望把
    2017-08-25 13:42 评论
  • 评论

回复 支持 反对

使用道具 举报

Michacl 社区微信达人 初学乍练(Lv1)
发表于 2017-8-23 20:49:58 | 显示全部楼层 |取消关注该作者的回复
最近也在设计大屏 初稿刚完成一半 UI设计都还没做
不过抽时间了解了下帆软帮助文档和视频教程  一个感觉就里面文档都写的好简单 希望能完善下
  不然真全弄明白了也发现其实没有省多少事
  收起(2)
  • 橙子君 橙子君 : 因为每个人的水平和擅长的学习方式不一样,所以看帮助文档时可能会存在这样或那样的问题,其实最主要的是对遇到的问题多问多求助,番问题求助版块,技术支持都可以利用。除了文档类,我们也正在不断丰富论坛额学习资源类型,可以多多关注一下~~
    2017-08-25 17:29 评论
  • renfist renfist : 帮助我看懂了,但是还是不会做这个大屏
    2017-09-21 23:14 评论
  • 评论

回复 支持 反对

使用道具 举报

谢海明 社区微信达人 渐入佳境(Lv2)
发表于 2017-8-23 22:28:17 | 显示全部楼层 |取消关注该作者的回复
有demo吗?跪求
  收起(1)
  • 天狮座 天狮座 : 之后我会给大家的
    2017-08-25 13:42 评论
  • 评论

回复 支持 反对

使用道具 举报

zhshuang  初学乍练(Lv1)
发表于 2017-8-25 14:21:01 | 显示全部楼层 |取消关注该作者的回复
学习了
  • 评论

回复 支持 反对

使用道具 举报

xypeng78 实名认证 初学乍练(Lv1)
发表于 2017-9-3 13:47:56 | 显示全部楼层 |取消关注该作者的回复
好强大啊!太厉害了!
  • 评论

回复 支持 反对

使用道具 举报

gaoqun2  初学乍练(Lv1)
发表于 2017-9-4 15:45:40 | 显示全部楼层 |取消关注该作者的回复
看看  DEMO的例子会对产品的理解更加深入        
  • 评论

回复 支持 反对

使用道具 举报

Damon-y 社区微信达人 渐入佳境(Lv2)
发表于 2017-9-11 11:16:57 | 显示全部楼层 |取消关注该作者的回复