1. 概述
在大屏需求规划阶段,我们就要了解清楚大屏的使用方式,分析展示需求,决定大屏是否需要一些动态效果。
本文所指的动态效果均为大屏上自动的动态效果,即不需要人为操作就可以展示在大屏上。
2. 学习资料归纳
大屏常见的动态效果包括各种轮播、滚动和闪烁动画等,以下是学习资料归纳:
动态效果分类 | 动态效果 | 帮助文档 | 讲解视频 |
轮播类 | 图表轮播: | 图表轮播 | |
tab页轮播: | FVS_Tab组件 | ||
图表数据提示点轮播: | 图表开启自动数据点提示轮播接口 | 图表数据点轮播 | |
地图数据提示点轮播: | 地图开启数据点提示轮播 | 地图数据点轮播 | |
滚动类 | 表格跑马灯效果: | 表格跑马灯效果 | |
闪烁动画类 | 文本条件变色: 指标卡或表格中的某值达到警示值时变色以引起重视 | 单元格添加预警,间隔背景色 | —— |
3. 应用场景
3.1 图表轮播
使用场景:
图表轮播是帆软图表中内置的功能,其作用是在同一区域轮播显示两个以上图表,图表之间有一定的关联关系或共同组成一个小的主题模块。
如下模板中,有三组图表自动轮播的效果。每组轮播中都有相关的两个图表,如“整体情况-去年”、“整体情况-今年”分别描述了托管规模与收入的整体情况。
点击下载该示例模板:信托投资驾驶舱
正常情况下,图表自动轮播,若需要单独关注某个图表,可将鼠标悬浮在图表上,让轮播暂停。
自动轮播更适合参观展示大屏场景,也可以添加按钮做手动轮播,在驾驶舱大屏中有较多的应用场景:
3.2 tab块实现模板轮播
使用场景:
模板轮播在大屏上也是常见的需求,以驾驶舱大屏为例,领导需要在会议室电视机上查看的数据可能不止某一方面,门店运营数据、销售回款数据等都要关注,而一张大屏无法排布这么多的数据指标时,通常可以制作多张大屏,用轮播的效果展示。
以下图中的模板为例,一共有3张模板要轮播,结合了场景地图自带的场景切换按钮,在切换或轮播场景的同时轮播了模板,整个模板形成了逻辑上的连贯,同时又展示了三张模板的信息。
点击下载该示例模板:零售行业3D场景大屏
3.3 图表数据提示点轮播
使用场景:
为了大屏视觉设计的美观整洁,我们通常隐藏掉了大量的图表标签,但又希望图表信息展示全面,此时可以使用图表数据提示点轮播的方式,依次轮播图表中每个系列的具体数值。
如下图中的模板,为了大屏美观我们使用了扩展图表中的特殊形状柱形图,并隐藏掉标签,使用图表数据点轮播提示,让图表具体数据也能被展示出来。
点击下载该示例模板:酒店展示大屏(原模板无图表轮播效果,可根据帮助文档中的方法添加)
3.4 表格跑马灯效果
使用场景:
表格是大屏上常见的元素,但表格在大屏上的面积占比不宜过大,那么表格信息无法展示全的时候,就可以应用表格滚动效果(3形式像跑马灯)。
如下图中的模板,产品销售排名明细表中,需要展示的产品记录数超过表格高度,使用表格跑马灯效果使数据能展示完全。
点击下载该示例模板:综合管理驾驶舱