数据可视化大屏界面解决方案

发布日期：2021-01-29浏览次数：570

一、前言

科技改变生活，也在改变我们看世界的视角。随着通信、信息和显示技术的高速发展，大屏行业已成为一个快速发展的新兴产业，市场空间巨大，前景广阔，广泛应用于室内外需要进行服务和宣传的公众场所，数据也不再是存储在电脑硬盘中冰冷的数字，也可以生动地展示给大众，大屏显示已成为城市亮化、现代化和信息化社会的一个重要标志。

UIPower经常会接到大屏设计的项目，比如卡斯柯大屏监测系统设计及开发、申能集团可视化大数据综合展示平台设计、视频监控系统大屏界面设计、浙江运达风电信息化界面设计与开发等等。在项目过程中我们积累了大量的经验，总结出大屏设计的特点及数据可视化的表达方式，今天就和大家一起分享交流~

二、大屏显示应用的领域和行业

大屏显示应用领域非常广泛，有安防行业、数字标牌商用显示、展览、娱乐文化领域、演出和集会、体育领域、调度指挥中心信息显示、证券交易、金融信息显示，除此之外，在交通诱导系统，教育领域，机场航班、汽车站、港口、车站动态信息显示等等也多有应用。

三、大屏界面的应用场景

随着企业数据的海量积累，大屏数据可视化需求正在逐步扩大：一些监控中心、指挥调度中心需要依据实时数据快速做出决策；企业展厅、展览中心需要数据展示平台；电商平台在大促活动时，通过对外公布实时销售数据作为广告手段；演示中心如会议厅、演播厅、购物中心、车站、机场需要通过大屏进行信息展示、宣传广告等等。数据大屏可视化的具体展示形式多种多样，分为带触摸、交互式操作、单向信息展示等，已经被越来越多的企业应用。例如去年双十一购物狂欢节，阿里采用的实时数据大屏，就带给了观众更加准确、震撼和清晰的体验。

四、大屏界面的设计语言和设计方向

大屏幕显示及大数据可视化的确有其特点，可以形成特定的设计语言。通过分析，确定设计的风格，有科技感，有的需要展示出丰富的信息层次、新颖的图标和动效，有的是需要展示数据的权威性。

1、布局栅格化

拼接的大屏尤其适合栅格化的设计。大屏上内容的模块化可以任意拼接组成一屏画面的形式，用栅格化的形式也可以发挥得很好。每一个模块是一个单元格，彼此统一又独立，可以放大和随意摆放。每一模块遵循统一的设计风格、UI规范。

2、色彩对比强，暗色为主

在室内，如果色彩鲜艳、画面动效不断，就成了24小时长时间播放的电影，人的本能就会注意力集中在其上。在监控中心的工作人员，一排排桌椅直对着大屏，长期如此，工作人员会受不了的。因此，屏幕内容需要动静之分；大屏以暗色为主，这样人们的视觉更容易集中在亮色为主的信息之上。

3、地图、线路图及上面地点概况信息的设计、动效渲染

一个好的流程可以让我们事半功倍，可视化的设计流程主要有分析数据、匹配图形、优化图形、检查测试。

a）通过对原始数据进行标准化、结构化的处理，把它们整理成数据表。

b）将这些数值转换成视觉结构（包括形状、位置、尺寸、值、方向、色彩、纹理等），通过视觉的方式把它表现出来。例如将高中低的风险转换成红黄蓝等色彩，数值转换成大小。想要清楚地展现数据，就要先了解所要绘制的数据，如元数据、维度、元数据间关系、数据规模等。

c）将视觉结构进行组合，把它转换成图形传递给用户，用户通过人机交互的方式进行反向转换，去更好地了解数据背后有什么问题和规律。这需要程序员和设计师配合。

d）大屏的实时效果是加入数据之后才能看到整体，是一个不断的调整过程，进一步优化维度、动效和数量。

e）对于维度：每个维度，只用一种表现，清晰易懂；动效：考虑时间和情感的把控，从原来的1.5ms改为3.5ms。

f）最后还需要检查测试，从头到尾过一遍是否满足需求；实地投放大屏幕后，用户是否方便阅读；动效能否达到预期，色差是否能接受；用户能否理解。

五、UIPower大屏开发技术的核心点——PowerUI

在真正了解PowerUI之前，先给大家介绍目前市面上主流的大屏开发技术：

1、首先要说的是WPF，WPF（WindowsPresentationFoundation）是微软推出的基于Windows的用户界面框架，一经上线就受到广大程序员的热烈追捧，虽然用WPF做出的界面效果可以很炫，但同时也伴随着很多问题，我简单说几条：

a) 首先就是绘图效率低。如果你使用WPF来做界面开发，肯定对这点痛心疾首，但又无可奈何，毕竟WPF的绘图机制决定了它的渲染效率不会高，而且绘图机制是不容易改变的。所以用WPF来制作界面，就意味着对大屏硬件设备有更高的要求，考虑到动辄成百上千万的大屏硬件设备采购费用，可以说是非常不划算的；

b) 其次WPF不支持Linux，毕竟WPF是微软推出的，肯定是为微软的Windows系统服务的，至于Linux系统完全不在他们的考虑之列。但是目前很多项目，包含科研院所、军工类等，他们支持的系统只有Linux，因为安全是第一要素。Linux是开源的，在开源基础上，可以做很多安全防护；而Windows系统，毕竟是M国的不是吗，本文是技术讨论，就不涉及政治了……要继续强调的是，现阶段除了上面提到的这些大型科研类或军工类项目，也有很多公司为了适应客户需要，采用Linux系统。

2、第二个要提到的技术就是现在很火的Html5，Html5技术现在这么火，我就不赘述了，涉及过或者正在使用Html5来做大屏UI开发的话，肯定会遇到这样几个问题：

a) 刷新效率低：大多数大屏界面开发都伴随着大数据可视化，多数据多图表展示，而Html5的数据获取方式是基于web请求来获取的，获取的效率取决于后台计算、网络状况等多个方面，很大程度上影响了数据刷新效率，从而影响数据展示的实时性，这一点是由于Html5自身机制决定的；

b) 展示效果单一、不灵活：Html5目前有Highcharts 和 Echarts ，提供了很多绚丽的“控件”，可以让大屏展示更上一层楼。这里的“控件”我为什么要打上引号呢，原因很简单，其实Highcharts 和 Echarts 里的控件并不是像我们理解的控件那样灵活多变、效果丰富，他们使用起来没那么灵活，而且性能低、也无法做到内存控制。控件应该具有的属性，而他们都不具备，所以针对这些“控件”，如果你直接套用可以满足最低要求，但是想做灵活定制，基本改变不了。

3、最后要给大家介绍大屏解决方案中运用的秘密武器—PowerUI，在大屏界面设计和开发过程中，它到底发挥了哪些强大的功能呢？

a) 强大控件库：大屏界面展示需要复杂多样的控件，PowerUI提供了上千种控件。与Highcharts 和 Echarts不同，PowerUI提供的所有控件都具有丰富的展示效果和界面样式，并且可以根据需求灵活定制、随意调整。接下来就给大家简单地介绍几种常用控件：

地图控件：大屏界面多数会采用地图来展示数据，PowerUI提供多种地图控件提升地图展示效果；