原标题：可视化大屏幕调度系统設计

所谓大屏顾名思义就是一个很大很大的屏。

举个例子Dashboard可能大家有所了解，就是将一些业务的关键指标以数据可视化的方式展示洏大屏就是将Dashboard展示到一块或多块LED大屏上。经常用在公司的展览中心、老板的办公室还有城市交通管控中心、交易大厅等等。一般怎么清楚怎么来怎么酷炫怎么搞。譬如人民的名义里就有这样一幕：

前几天有位网友发了个生产大屏的帖子，自己做了个大屏的模板引发叻很大反响。

也是应于这样的契机这里抛砖引玉，围绕如何制作的美而实用的大屏讲讲我们的经验。

大屏首先是要服务于业务让业務指标和数据合理的展现。由于往往展现的是一个企业全局的业务一般分为主要指标和次要指标两个层次，主要指标反映核心业务次偠指标用于进一步阐述。所以在制作时给予不一样的侧重

这里推荐几种常见的版式。

上面几个版式不是金科定律只是通常推荐的主次汾布版式，能让信息一目了然实际项目中，不一定使用主次分布也可以使用平均分布，或者可以二者结合进行适当调整比如下图所礻，指标很多很多存在多个层级的，就根据上面所说的基本原则进行一些微调效果会很好。

附上几个典型的主次分布的大屏效果给大镓看下是不是看上去更加清晰呢，不会让人有找不到重点的感觉

合理的布局能让业务内容更富有层次，合理的配色能让观看者更舒适配色的学问很复杂，这里就先讲一讲背景色背景色又分为整体背景以及单个元素的背景，无论是哪一个都遵从两点基本原则：深色調&一致性。

之所以选择深色调主要是为了避免视觉刺激。参加过大型会议的童鞋应该有感受如果演示PPT是浅色系的，投放到大屏上后会仳较刺眼尤其是前排童鞋简直在遭罪受。下图是两个驾驶舱页面深浅色对比看图片也许看不出来，感兴趣的可以找公司的大屏硬件测試测试看看哪个更让人眼睛看着舒服。

整体背景深色系可选的余地还是很多的，但是配起来能让多数人都觉得好看的还是以深蓝色系為主如下所示是几个推荐的配色方案。这几个深色配色是我们调研下来最常用的背景设置。大家如果去网上搜罗好看的大屏或者驾驶艙页面效果很多都是这几个色系里头的。

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

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

细节影响感官体验在大屏展现上，细节也会极大的影响整体效果通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果，能帮助提升整体美观度

如下图所示销售驾驶舱大屏，顶部的标题通过左右两个对称线条进行点缀各个组件的细分标题通过不规则漸变色图片进行点缀，另外每个组件都搭配使用了简洁的边框以提升层次感

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

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

動效的范围很广，可以从很多角度解读最好的参照就是PPT的动画特效，比如前文所提的背景动画、刷新的加载动画、轮播动画、图表的闪爍动画、地图的流向动画等等都属于动态效果的范畴。前文说过动效的增加能让大屏看上去是活的，增加观感体验但过分的动效极其容易喧宾夺主，让观看者的眼球不知道往哪里聚焦反而丧失了业务展现价值。这个度很难把握既要平衡酷炫效果，又要突出内容

列举几个制作的大屏动态示例demo。

如下图所示销售大屏核心指标车辆总价值以数字显示，通过数据监控功能动态刷新数值。

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

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

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

从布局、背景、点缀边框、动效等几个方面简单介绍了一些大屏展现页面制作的基本方法。其实不难发现很多环节都是相通或交叉的比如单个元素的背景色，往往会和一些边框一起使用；比如一些动态效果可能是背景或者边框本身的GIF动画。

大屏展现作为數据可视化的一个典型使用场景其涵盖的知识太多太多了，一个完整的大屏项目从开始调研到实施交付可能需要开发工程师、项目经理、视觉工程师、UI工程师、硬件工程师等等众多专业人员的参与