• 关于监控大屏的一些技术调研

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

    一、什么是监控大屏

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

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

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

    政企相关行业

    运维行业

    电商行业

    制造业

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

    · 屏幕面积大且大小固定

    · 颜色大多以深色为主

    · 重点数据突出展示

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

    · 大多都是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上一些已经开源的大屏监控模版。

    六、总结

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

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

    «
    »
以专业成就每一位客户,让企业IT只为效果和安全买单

以专业成就每一位客户,让企业IT只为效果和安全买单