|
如何制作可视化大屏？ 大家一定都好奇，类似双十一的大屏是怎么做出来的？ 制作可视化大屏，一般有这么几种方案： - 1、传统制作方法：写代码调用数据和图表库，比如写JS+Echarts ；
- 2、省时省力方法：用现成的数据可视化工具
前者简单直接，直接写代码就完事。但对于大部分人来说门槛较高，维护成本也很大。如果涉及大量的动态可视化，大数据量，没有底层技术，性能就会大打折扣。而且投到不同尺寸的屏幕，调试起来非常麻烦。所以这种方案常常是定制。 后者则简单不少，直接用数据可视化工具，可以快速设计样式呈现效果、自适应不同大小的屏幕、而且还可以实时刷新数据。 可视化大屏如何设计？无论技术上采用那种方式，要想大屏做得漂亮，都要一番精心的视觉设计。 1、布局排版大屏首先是要服务于业务，让业务指标和数据合理的展现。 由于往往展现的是一个企业全局的业务，一般分为主要指标和次要指标两个层次，主要指标反映核心业务，次要指标用于进一步阐述分析。所以在制作时给予不一样的侧重。 这里推荐5种常见的版式。
上面几个版式不是金科定律，只是通常推荐的主次分布版式，能让信息一目了然。实际项目中，不一定使用主次分布，也可以使用平均分布，或者可以二者结合进行适当调整。比如下图所示，指标很多很多，存在多个层级的，就根据上面所说的基本原则进行一些微调，效果会很好。
附上几个典型的主次分布的大屏效果给大家看下，是不是看上去更加清晰呢，不会让人有找不到重点的感觉。
2、配色合理的布局能让业务内容更富有层次，合理的配色能让观看者更舒适。配色的学问很复杂，这里就先讲一讲背景色。背景色又分为整体背景以及单个元素的背景，无论是哪一个，都遵从两点基本原则：深色调&一致性。 之所以选择深色调，主要是为了避免视觉刺激。参加过大型会议的童鞋应该有感受，如果演示PPT是浅色系的，投放到大屏上后会比较刺眼，尤其是前排童鞋简直在遭罪受。 下图是两个驾驶舱页面深浅色对比，实际效果可能看图片也许看不出来，需要投放到实际的LED屏幕检验测试。
整体背景深色系，可选的余地还是很多的，但是配起来能让多数人都觉得好看的还是以深蓝色系为主，如下所示是几个推荐的配色方案。这几个深色配色，是我们调研下来最常用的背景设置。大家如果去网上搜罗好看的大屏或者驾驶舱页面效果，很多都是这几个色系里头的。
当然，背景不一定要用颜色的，也可以用图片。图片的使用依旧遵从整体深色的原则，同时搭配其他一些现实特性可以让整体看着更有科技感。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片。
单个元素的背景，首先是要和整体背景色系保持一致性，避免突兀。另外一个小技巧，就是透明度的使用。根据实际项目经验，这里极其推荐大家为单个的组件元素搭配一些透明色，透明度设置在10%上下为宜，具体以实际效果微调。如下几个模板，组件增加透明效果后，整体效果有质的提升。
3、点缀细节影响感官体验，在大屏展现上，细节也会极大的影响整体效果。通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果，能帮助提升整体美观度。 如下图所示销售驾驶舱大屏，顶部的标题通过左右两个对称线条进行点缀，各个组件的细分标题通过不规则渐变色图片进行点缀，另外每个组件都搭配使用了简洁的边框以提升层次感。
比如下面图所示大屏，给组件及其标题增加一些不规则的渐变色边框，让整体看上去更富有科技感。
如下图所示的航空大屏，给元素增加一些飞机图标、图画之类的拟物效果，让大屏更真实生动。
4、动态特效动态特效的范围很广，可以从很多角度解读，最好的参照就是PPT的动画特效，比如前文所提的背景动画、刷新的加载动画、轮播动画、图表的闪烁动画、地图的流向动画等等，都属于动态效果的范畴。前文说过，动效的增加能让大屏看上去是活的，增加观感体验。但过分的动效极其容易喧宾夺主，让观看者的视线不知道该往哪里聚焦，反而丧失了展现业务数据的价值。这个度很难把握，既要平衡酷炫效果，又要突出内容，需要不断调试。 列举几个用FineReport制作的大屏动态示例demo。 如下图所示酒店大屏，核心指标营销、房间情况以数字显示，通过FineReport的数据监控功能，可实时动态刷新数值。
再如下图所示的园区监控，右下角有实时的紧急消息滚动。
如下图所示金融大屏的轮播动画，借助轮播效果，来实现同一个位置滚动播放不同的指标内容，避免平铺展开所有指标把大屏界面挤满。
再比如下面两个驾驶舱，通过边框动画、地图流向动画，来增加大屏展示的整体活力。
最后今天主要从大屏的整体布局、背景、点缀边框、动效这四个方面，简单介绍了一些大屏展现页面制作的基本方法。其实不难发现很多环节都是相通或交叉的，比如单个元素的背景色，往往会和一些边框一起使用。比如一些动态效果，可能是背景或者是边框本身的GIF动画。 大屏作为数据可视化的一个典型使用场景，很多人会觉得这样的大屏是“面子工程“，不难制作，常常对它嗤之以鼻，认为这只是用华丽的视效堆叠起来博人眼球。但实际上，从制作难度来说，一个完整的大屏项目从开始调研到实施交付可能需要开发工程师、项目经理、视觉工程师、UI工程师、硬件工程师等众多专业人员的参与才能顺利完成；而从业务价值来说，要明白大屏只是最后的终端展示，前面的数据填报收集、数据处理、指标选择、数据实时同步等都需要一步一步做清楚（通过FineReport均可实现），才能让数据大屏发挥真正的价值，否则都是空谈。 | 
