云和安全管理服务专家新钛云服方章和原创

一、什么是监控大屏

监控大屏也是数据可视化的一种形式，通俗点讲就是将一些复杂的数据、指标通过图形化、图表化以良好的视觉效果集中的放在大屏上去显示，以帮助用户更加直观的了解。

尤其是在政府、电商、金融、制造、运维等行业的业务场景中，它具有日常监测、分析判断、应急指挥、展示汇报等多种功能，方便用户做出预警和决策，在提高科学管理方面发挥着重要作用。

下图所示几种不同行业的大屏应用案例：

政企相关行业

运维行业

电商行业

制造业

结合上面几张图可以得出大屏的几个特点：

· 屏幕面积大且大小固定

· 颜色大多以深色为主

· 重点数据突出展示

· 字体大、对比强烈、层次较多

· 大多都是2D的图表设计

二、设计原则

1、要充分了解相关需求，抽取用户关心且需要展示指标数据。

2、 设计时要简洁直观，切勿展示多余的信息。

3、 要合理的划分布局，展示数据时要有焦点、有主次，最后再去做一些交互设计。

三、开发设计流程

好的流程规范事半功倍，既能保证项目的设计开发质量也能增加项目的开发进度，所以把每一步做好是必要的，这样可以避免开发时不必要的返工。下图为常见的大屏项目开发流程，仅供参考：

四、注意事项

1、图表控件的设计时要注意能否用技术实现

设计师在设计相关图表时要充分的和开发人员沟通，确保能用代码实现，因为实际开发过程中，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要

2、字体的使用

字体优先使⽤系统默认字体，需要嵌⼊字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商⽤。

3、颜色搭配

· ⾊彩明度与饱和度差异显著：

对⽐鲜明，尽量避免使⽤邻近⾊配⾊

· 尽可能使⽤深⾊暗⾊背景：

深⾊暗⾊背景可减少拼缝带来的不适感。由于背景⾯积⼤，使⽤暗⾊背景还能够减少屏幕⾊差对整体表现的影响；同时暗⾊背景更能聚焦视觉，也⽅便突出内容、做出⼀些流光、粒⼦等酷炫的效果。

· 渐变⾊慎重使⽤：

⼤屏普遍⾊域有偏差，显⽰偏⾊，因⽽使⽤渐变⾊需要根据⼤屏反馈确定是否调整，纯⾊最佳。

现实中的屏幕拼接

五、技术实现方案

1、 借助于三方的数据可视化平台，如阿里云的 DataV ， 百度的Sugar 等，这些平台的优缺点：

优点：

（1）拥有大量的模板和组件，开箱即用

（2）灵活数据源配置，所见即所得式的配置方式

（3）支持可视化拖拽、编辑、私有化部署

缺点就不用说了， 花钱！

2、自主研发，如何快速的自己去实现一套大屏呢？

自研需要解决的问题：

（1）解决设计稿布局在不同大屏上的适配问题？

这块可采用CSS3等比缩放属性或rem来解决不同屏幕的适配问题，相关布局图片推荐用SVG矢量图实现，因为矢量图是可伸缩的，它可以被缩放到你想要的任何尺寸,而不会失去质量，所以这里推荐尽可能的使用SVG，防止在大屏上有显示失真的问题。

（2）如何快速开发对象的图表控件？

这里搜集了一下日常开发中常见的图表库：

· echart 百度的老牌开源可视化图表库

· highcharts 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

· Antv 蚂蚁集团全新一代数据可视化解决方案

· D3.js 一个数据驱动的可视化库, 可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作

借助开源的图表可以快速的实现图形图表的开发定制及实现。

（3）如果项目要求不高，开发时间又比较紧的情况下可以结合一些优秀的UI框架

这里推荐一个 [dataV](
http://datav.jiaminghi.com/), 也可以参考github上一些已经开源的大屏监控模版。

六、总结

总的来讲除了购买三方提供的数据可视化平台去实现大屏监控以外，自研去开发实现一个大屏监控也并不是很难，唯一麻烦的是前端开发人员能否完成设计师设计的图表控件，如果开发人员对开源图表定制这块比较熟悉的话，应该是没什么太大的问题。

*本文部分图片源于网络，如有侵权请联系删除