可视化大屏哪家做的好?效果怎么样?

【可视化大屏哪家做的好?效果怎么样?】何为大屏?Dashboard可能大家有所了解,就是将一些业务的关键指标以数据可视化的方式展示 。而大屏就是将Dashboard展示到一块或多块LED大屏上 。经常用在公司的展览中心、老板的办公室专业大屏幕布租赁,还有城市交通管控中心、交易大厅等等 。一般怎么清楚怎么来,怎么酷炫怎么搞 。
帆软算在行业内已经有了一定的名气了 。公司的fineBI、finereport报表、FineMobile等技术,有着14年的经验和技术,可以说已经得到了市场认可 。产品的样式也很不错,同时使用方便,大大提高了工作效率,制作大屏嘛也是很有经验,比如下面这些:
大家一定都好奇,类似双十一的大屏是怎么做出来的?
制作可视化大屏 , 一般有这么几种方案:
前者简单直接,直接写代码就完事 。但对于大部分人来说门槛较高,维护成本也很大 。如果涉及大量的动态可视化,大数据量,没有底层技术,性能就会大打折扣 。而且投到不同尺寸的屏幕,调试起来非常麻烦 。所以这种方案常常是定制 。
后者则简单不少 , 直接用数据可视化工具,可以快速设计样式呈现效果、自适应不同大小的屏幕、而且还可以实时刷新数据,比如FineReport 。
可视化大屏设计
无论技术上采用那种方式,要想大屏做得漂亮,都要一番精心的视觉设计 。
1、布局排版
大屏首先是要服务于业务,让业务指标和数据合理的展现 。
由于往往展现的是一个企业全局的业务,一般分为主要指标和次要指标两个层次,主要指标反映核心业务,次要指标用于进一步阐述分析 。所以在制作时给予不一样的侧重 。
这里推荐5种常见的版式 。
上面几个版式不是金科定律,只是通常推荐的主次分布版式 , 能让信息一目了然 。实际项目中,不一定使用主次分布,也可以使用平均分布,或者可以二者结合进行适当调整 。比如下图所示,指标很多很多 , 存在多个层级的,就根据上面所说的基本原则进行一些微调,效果会很好 。
附上几个典型的主次分布的大屏效果给大家看下,是不是看上去更加清晰呢,不会让人有找不到重点的感觉 。
2、配 色
合理的布局能让业务内容更富有层次,合理的配色能让观看者更舒适 。配色的学问很复杂 , 这里就先讲一讲背景色 。背景色又分为整体背景以及单个元素的背景,无论是哪一个,都遵从两点基本原则:深色调&一致性 。
之所以选择深色调,主要是为了避免视觉刺激 。参加过大型会议的童鞋应该有感受,如果演示PPT是浅色系的,投放到大屏上后会比较刺眼,尤其是前排童鞋简直在遭罪受 。
下图是两个驾驶舱页面深浅色对比,实际效果可能看图片也许看不出来,需要投放到实际的LED屏幕检验测试 。
整体背景深色系,可选的余地还是很多的,但是配起来能让多数人都觉得好看的还是以深蓝色系为主,如下所示是几个推荐的配色方案 。这几个深色配色 , 是我们调研下来最常用的背景设置 。大家如果去网上搜罗好看的大屏或者驾驶舱页面效果 , 很多都是这几个色系里头的 。
当然,背景不一定要用颜色的 , 也可以用图片 。图片的使用依旧遵从整体深色的原则,同时搭配其他一些现实特性可以让整体看着更有科技感 。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片 。

可视化大屏哪家做的好?效果怎么样?

文章插图
单个元素的背景 , 首先是要和整体背景色系保持一致性,避免突兀 。另外一个小技巧,就是透明度的使用 。根据实际项目经验,这里极其推荐大家为单个的组件元素搭配一些透明色,透明度设置在10%上下为宜专业大屏幕布租赁 , 具体以实际效果微调 。如下几个模板,组件增加透明效果后,整体效果有质的提升 。
3、点缀
细节影响感官体验,在大屏展现上,细节也会极大的影响整体效果 。通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果,能帮助提升整体美观度 。
如下图所示销售驾驶舱大屏,顶部的标题通过左右两个对称线条进行点缀,各个组件的细分标题通过不规则渐变色图片进行点缀 , 另外每个组件都搭配使用了简洁的边框以提升层次感 。
比如下面图所示大屏,给组件及其标题增加一些不规则的渐变色边框,让整体看上去更富有科技感 。
如下图所示的航空大屏 , 给元素增加一些飞机图标、图画之类的拟物效果,让大屏更真实生动 。
4、动效
动效的范围很广,可以从很多角度解读 , 最好的参照就是PPT的动画特效,比如前文所提的背景动画、刷新的加载动画、轮播动画、图表的闪烁动画、地图的流向动画等等,都属于动态效果的范畴 。前文说过,动效的增加能让大屏看上去是活的 , 增加观感体验 。但过分的动效极其容易喧宾夺主,让观看者的眼球不知道往哪里聚焦,反而丧失了业务展现价值 。这个度很难把握,既要平衡酷炫效果,又要突出内容 。
列举几个制作的大屏动态示例demo 。
如下图所示销售大屏,核心指标车辆总价值以数字显示,通过FineReport 的数据监控功能 , 动态刷新数值 。
再如下图所示的园区监控,右下角有实时的紧急消息滚动 。
如下图所示金融大屏的轮播动画,借助轮播效果,来实现同一个位置滚动播放不同的指标内容,避免平铺展开所有指标把大屏界面挤满 。
再比如下面两个驾驶舱,通过边框动画、地图流向动画,来增加大屏展示的整体活力 。
最后
从布局、背景、点缀边框、动效等几个方面,简单介绍了一些大屏展现页面制作的基本方法 。其实不难发现很多环节都是相通或交叉的,比如单个元素的背景色,往往会和一些边框一起使用 。比如一些动态效果,可能是背景或者边框本身的GIF动画 。
大屏作为数据可视化的一个典型使用场景 , 其涵盖的知识太多太多了,一个完整的大屏项目从开始调研到实施交付可能需要开发工程师、项目经理、视觉工程师、UI工程师、硬件工程师等等众多专业人员的参与 。
也许大家对这样的大屏会嗤之以鼻,眼花缭乱,毫无实用 , 用华丽的视效堆叠起来博人眼球 。
在效果之外,还是提倡大家更注重可视化能否经得住业务价值的推敲?数据是否带来了价值?是否为企业经营提供了帮助?
本文到此结束,希望对大家有所帮助!

猜你喜欢