大屏模板教程

编辑
文档创建者:caixiaolan (69992 )     浏览次数:8883次     编辑次数:11次     最近更新:jiangsr 于 2018-01-23     

目录:

1. 描述编辑

帆软为企业提供数字大屏解决方案,通过帆软的数据分析产品,用户可以构建强大、全面的“管理驾驶舱”,无需专门设计,就可以将企业的数据管理信息完美地投放在任何屏幕,比如交易大厅、管控中心、生产车间、展览中心等地的LED大屏上。

可以实现完美的自适应效果,对于大屏实时监控的信息,比如股价,双11类活动实时交易状况,都可以通过图表属性的自动刷新功能实时同步数据库数据。

也支持用户对于大屏的展现内容进行DIY的设计,持接近20种图表类型和延伸的多种图表样式,支持添加文本、图片、Web信息实现各种DIY的布局样式。

222

那么该如何制作一个好看又能体现功能的大屏呢?

2. 布局排版编辑

首先要遵循一个基准:不要为了做大屏而做大屏,不要为了展现而展现。就是说要明确大屏展现的目的,首要是服务于业务的。要让业务内容、数据合理的展现,就要避免误入疯狂堆砌指标,要分清主次。

主要指标:反应核心业务内容的。

次要指标:用于进一步阐述主要指标的。

下面推荐几种常用的布局:

222
上面几个布局,只是通常推荐的主次分布布局,能让信息一目了然。实际项目中,不一定使用主次分布,也可以使用平均分布,或者可以二者结合进行适当调整。

比如下图所示,指标很多很多,存在多个层级的,就根据上面所说的基本原则进行一些微调:
222


222

附上几个典型的主次分布布局的大屏效果图:

222


222

222

3. 配色编辑

合理的布局能让业务内容更富有层次,合理的配色能让观看者更舒适。
这里讲解一下背景色,背景色又分为整体背景以及单个元素的背景,无论是哪一个,都遵从两点基本原则:深色调&一致性。
一般大屏会选择深色系,主要是为了避免视觉刺激。浅色系的,投放到大屏上后会比较刺眼。
下图以两个驾驶舱页面深浅色对比来做说明:
222

222
整体背景深色系,一般还是以深蓝色系为主,如下所示是几个推荐的配色方案。

222
背景不一定要用颜色的,也可以用图片。图片的使用依旧遵从整体深色的原则,同时搭配其他一些现实特性可以让整体看着更有科技感。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片。
222

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

222


222

4. 点缀编辑

在大屏展现上,细节也会极大的影响整体效果,通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果,能帮助提升整体美观度。
如下图所示销售驾驶舱大屏,顶部的标题通过左右两个对称线条进行点缀,各个组件的细分标题通过不规则渐变色图片进行点缀,另外每个组件都搭配使用了简洁的边框以提升层次感。

222

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

222

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

222

5. 动效编辑

动效的范围很广,可以从很多角度解读,比如背景动画,比如刷新的加载动画,比如轮播动画,比如图表的闪烁动画,地图的流向动画等等,都属于动态效果的范畴。
动效的增加能让大屏看上去是活的,增加观感体验。但过分的动效极其容易喧宾夺主,让观看者的眼球不知道往哪里聚焦,反而丧失了业务展现价值。这个度很难把握,既要平衡酷炫效果,又要突出内容。
如下图所示销售大屏,核心指标车辆总价值以数字显示,通过FineReport 的数据监控功能,动态刷新数值。
222

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

222

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

222

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

222

注:想要设置动态背景,可以参考JS设置动态背景/边框

附件列表


主题: 大屏教程
标签: 暂无标签 编辑/添加标签
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: