监控大屏配置方案：关于监控大屏的一些技术调研
监控大屏配置方案：关于监控大屏的一些技术调研结合上面几张图可以得出大屏的几个特点：制造业政企相关行业运维行业电商行业
云和安全管理服务专家新钛云服方章和原创
一、什么是监控大屏监控大屏也是数据可视化的一种形式，通俗点讲就是将一些复杂的数据、指标通过图形化、图表化以良好的视觉效果集中的放在大屏上去显示，以帮助用户更加直观的了解。
尤其是在政府、电商、金融、制造、运维等行业的业务场景中，它具有日常监测、分析判断、应急指挥、展示汇报等多种功能，方便用户做出预警和决策，在提高科学管理方面发挥着重要作用。
下图所示几种不同行业的大屏应用案例：
政企相关行业
运维行业
电商行业
制造业
结合上面几张图可以得出大屏的几个特点：
· 屏幕面积大且大小固定
· 颜色大多以深色为主
· 重点数据突出展示
· 字体大、对比强烈、层次较多
· 大多都是2D的图表设计
二、设计原则1、要充分了解相关需求，抽取用户关心且需要展示指标数据。2、 设计时要简洁直观，切勿展示多余的信息。3、 要合理的划分布局，展示数据时要有焦点、有主次，最后再去做一些交互设计。
好的流程规范事半功倍，既能保证项目的设计开发质量也能增加项目的开发进度，所以把每一步做好是必要的，这样可以避免开发时不必要的返工。下图为常见的大屏项目开发流程，仅供参考：
设计师在设计相关图表时要充分的和开发人员沟通，确保能用代码实现，因为实际开发过程中，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要
2、字体的使用字体优先使⽤系统默认字体，需要嵌⼊字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商⽤。
3、颜色搭配· ⾊彩明度与饱和度差异显著：
对⽐鲜明，尽量避免使⽤邻近⾊配⾊
· 尽可能使⽤深⾊暗⾊背景：
深⾊暗⾊背景可减少拼缝带来的不适感。由于背景⾯积⼤，使⽤暗⾊背景还能够减少屏幕⾊差对整体表现的影响；同时暗⾊背景更能聚焦视觉，也⽅便突出内容、做出⼀些流光、粒⼦等酷炫的效果。
· 渐变⾊慎重使⽤：
⼤屏普遍⾊域有偏差，显⽰偏⾊，因⽽使⽤渐变⾊需要根据⼤屏反馈确定是否调整，纯⾊最佳。
现实中的屏幕拼接
五、技术实现方案1、 借助于三方的数据可视化平台，如阿里云的 DataV ， 百度的Sugar 等，这些平台的优缺点：优点：
（1）拥有大量的模板和组件，开箱即用
（2）灵活数据源配置，所见即所得式的配置方式
（3）支持可视化拖拽、编辑、私有化部署
缺点就不用说了， 花钱！
自研需要解决的问题：
（1）解决设计稿布局在不同大屏上的适配问题？
这块可采用CSS3等比缩放属性或rem来解决不同屏幕的适配问题，相关布局图片推荐用SVG矢量图实现，因为矢量图是可伸缩的，它可以被缩放到你想要的任何尺寸 而不会失去质量，所以这里推荐尽可能的使用SVG，防止在大屏上有显示失真的问题。
（2）如何快速开发对象的图表控件？
这里搜集了一下日常开发中常见的图表库：
· echart 百度的老牌开源可视化图表库
· highcharts 兼容 IE6 、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
· Antv 蚂蚁集团全新一代数据可视化解决方案
· D3.js 一个数据驱动的可视化库 可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作
借助开源的图表可以快速的实现图形图表的开发定制及实现。
（3）如果项目要求不高，开发时间又比较紧的情况下可以结合一些优秀的UI框架
这里推荐一个 [dataV](http://datav.jiaminghi.com/) 也可以参考github上一些已经开源的大屏监控模版。
六、总结总的来讲除了购买三方提供的数据可视化平台去实现大屏监控以外，自研去开发实现一个大屏监控也并不是很难，唯一麻烦的是前端开发人员能否完成设计师设计的图表控件，如果开发人员对开源图表定制这块比较熟悉的话，应该是没什么太大的问题。
*本文部分图片源于网络，如有侵权请联系删除
