之前,老李分享了:全网最详细教程(上):教你如何从0-1制作出一张可视化大屏!粉丝觉得干货满满,催着老李我尽快出教程后半段,这不今天就来了,这篇依旧干货十足,先收藏!
我们主要讲了大屏制作的第一步和第二步,在开始前我们再回顾一下。
- 第一步:跟业务人员进行需求调研,确定3份文档的准备,确保我们在设计开发初期就明确了设计方向
- 第二步:大屏视觉设计准备,主要是确定好大屏的布局方案、配色方案、字体及组件样式
今天在(下)篇,我们会继续讲第三步到第七步,从大屏模板制作→动态特效补充→细节调整→大屏视觉及硬件调试→上线运行,原创不易,如果有帮助的话,请点赞支持~
————————————正文开始———————————
第三步:大屏制作
(主要思路:新建空白大屏画布→选择大屏主题→选定图表组件并绑定相应数据→预览大屏)
在第一二步的需求确定+数据整理+素材准备都做好后,我们就可以开始第三步的大屏制作了。用到的工具还是FineReport,获取方式见文末。
废话不多说,直接开搞!
- step1:打开FineReport,新建一张空白的可视化大屏画布/直接选择一个布局模板
如果你是想自己设计大屏布局,就直接新建空白模板,如果懒得自己设计,可以直接选择FR里自带的布局模板(即图中选择模板处),像我一般就直接选自带的模板,比较方便。
- step2:在选完大屏布局后,选择大屏主题
新建画布时,会有一个默认的主题,但是我们一般会根据实际情况去选一个合适的主题。
比如如果是需要展示用的大屏,我一般就会选用下面下面3个深蓝绿色系的风格,如果是日常报表展示的话,我个人就会更偏向上面四个浅色系的,因为比较经常看,如果选择视觉冲击比较强的深色系的话,会比较压抑。
- step3:新建数据集,绑定大屏中各个组件的数据来源
当我们选择完大屏主题后,就该把大屏中每个组件与其需要展示的数据绑定起来。具体操作的话,就是通过sql语句取出要用到的数据集,简单的大屏用select … from语句就足矣。
- step4:拖拽组件到画布中,调整大屏整体样式
在第三步,我们将组件和其数据源绑定起来,那第四步要做的就是从参数面板、空白块、图表块、控件面板中选择想要的组件拖拽到画布中,并调整可视化大屏的整体样式。
- step5:确定最终的组件图表类型/样式/特效
第五步主要就是对拉到画布上的组件,进行设计,主要包括组件的图表类型、数据、样式、特效等。
- step6:预览大屏,调试组件及最终布局
在确定完组件样式后,就可以预览可视化大屏,能直接在浏览器中调整组件的位置大小。
第四步:动态特效补充
对于特定的大屏场景,我们是需要添加一些动态轮播、消息滚动、告警线/图表闪烁动画的效果补充。
以高速监控为例,在下图的大屏中,依次遍历了山东省每个市的高速收费数据,通过动态轮播引导观看者了解每个市区的信息,做到信息表达完整的同时,也让大屏界面保持整洁。
以政府平台为例,一天内会有多条通知发布,这时候就可以使用“消息滚动“,去显示多条消息文本(例如下图右下角的“最新动态”),以滚动的形式展示即不需要太大的空间,又可以通过动态效果引起注意。
以生产监控为例,在生产过程中需要非常注意异常数据,保证生产的顺利。所以我们在做监控看板时,常需要对监控用的图表设置一条警戒线,同时对低于警戒线数值的系列,设置条件变色和闪烁动画效果,突出异常数据,例如下图的左半部分,就是用警戒线和红色来提醒观看者数据的变化。
第五步:细节调整
大屏制作好后,还需要经过一些细节调整,让大屏整体效果更ok。
下面6点是我总结的大屏常见视觉问题,你们在做完后可以对照检查下,是否有踩坑:
- 1.组件不对齐
- 2.模块间无边框感
- 3.图表或图片拉伸变形
- 4.没有留白
- 5.使用过多色块/配色太亮眼/太不显眼
- 6.文字之间无对比区别
第六步:大屏视觉及硬件调试
视觉方面
主要看下关键视觉元素、字体字号、页面动效、图表是否有按预期显示、有无变形、错位等情况,在上方细节调整的基础上再次优化。
硬件性能与数据方面
- 图形图表动画是否流畅、数据加载和刷新有无异常;
- 页面长时间展示是否会存在崩溃、卡死的情况;
- 后台控制系统能否正常切换前端页面显示。
大屏投屏电脑推荐配置:
硬件 |
配置 |
CPU |
Intel(R) Core(TM) i7-10700CPU @ 2.90GHZ 2.90GHz |
内存 |
16.0GB |
显卡 |
独立显卡 GeFORCE GTX 1660 SUPER 0 SUPER |
操作系统 |
Windows 10 |
第七步:大屏上线运行
按照经验来看,这部分主要关注两个问题:
1、熄屏问题:由于投屏电脑的屏保限制,大屏运行一段时间后有可能会自动熄屏,大屏上线运行前要提前设置好熄屏时长;
2、播放周期问题:如果大屏需要轮播演示,那就要提前测试好演示者和大屏轮播的配合度,调整轮播时间的间隔。例如下图这张销售数据大屏,一共有3张模板要轮播,在切换或轮播场景的同时轮播了模板,所以需要提前测试好演示者和大屏轮播的配合度。
小结:
对于可视化大屏的制作,其实我已经写过很多了,但是平常写的比较分散,大都是针对各流程模块写的,比如图表颜色的选取,大屏模板如何套用,怎么制作动态特效等。所以也让很多我的读者还不太清楚整个可视化大屏的完整制作流程。
花了好几个晚上,把一套完整制作流程写了出来,可能还有些缺漏,但整体来说差不多够用了,有想补充的,可以收藏一波等我更新,我会后续再补上,
看了这么多,不如自己动手做一张吧,回复“模板”即可获取工具+40套大屏模板!
创业项目群,学习操作 18个小项目,添加 微信:jjs406 备注:小项目!
如若转载,请注明出处:https://www.xmfxquan.com/4258.html