一、前言
科技改变生活,也在改变我们看世界的视角。随着通信、信息和显示技术的高速发展,大屏行业已成为一个快速发展的新兴产业,市场空间巨大,前景广阔,广泛应用于室内外需要进行服务和宣传的公众场所,数据也不再是存储在电脑硬盘中冰冷的数字,也可以生动地展示给大众,大屏显示已成为城市亮化、现代化和信息化社会的一个重要标志。
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提供多种地图控件提升地图展示效果;
图表类控件:大屏界面数据化展示离不开图表类控件展示,PowerUI的图表类控件展示效果和界面样式多样;
b)渲染引擎:PowerUI具有自主研发的渲染引擎,绘图采用纯虚的图像设备上下文对各种图像宣传引擎进行全面的支持;
c)跨平台:PowerUISDK是界面运行支持库,利用该SDK使得我们编辑完成的界面可以在不同的操作系统下运行,为这些界面和控件的运行提供支持;
d)对WPF的支持:拥有PowerUISDK,我们可以支持Linux下界面开发,而且我们可以在一定程度上支持WPF,为WPF提供更多样化的控件,必要的时候还可以迁移WPF控件,使WPF同样具有跨平台功能,可以支持Linux下界面开发;
PowerUI的功能太多太强大,我无法在这篇文章中一一介绍,如果想要详细了解,可以直接搜索UIPower。