UIPower界面开发 - 《UI的革命》文字版

小编的话:时间一晃已经到了2013年的元旦，距过去的2011年10月份UIPower启动的《UI的革命》全国巡回演讲已经过去了1年多的时间。在这1年多的时间里，每天都能接到很多有关与演讲相关的电话和邮件。为了方便广大网友在不打开视频的情况下也可以了解演讲的内容，本站小编认真聆听并整理了演讲的内容形成了完整的演讲稿。现在将这些稿件发到本站的新闻栏目里面来，以供查阅。

文章的具体情况可至：www.uipower.com进行浏览

大家好，今天在这里跟大家一起探讨软件界面的开发方法，分享我们在软件界面开发上的解决方案，并为大家介绍革命性的软件界面开发工具DirectUI，以及DirectUI的思想、开发流程和功能特性。

 我接触到很多软件项目经理和程序员，他们在界面开发上最苦恼的问题是：当软件界面的版本需要升级、有新控件的需要开发或者产品部门提出新的界面交互方案要求的时候，开发部门实现这些需求存在各种各样的障碍，无法按时的完成相关的开发工作。

为什么他们会在界面开发上遇到这样的阻碍呢？

原因有两点，第一他们没有积累界面开发的方法，采用传统的开发模式无法适应如今不断变化的用户需求，第二他们没有一款优秀的界面开发工具来提高他们在界面开发的效率和质量。

通常的软件开发商是如何进行界面开发的呢？他们大多采用传统的界面开发模型。

大致的流程是这样的：

1）首先产品经理会收集并分析用户的需求

2）接着产品经理会根据用户的需求完成产品的《需求规格说明书》，并交付给软件开发部门。

3）软件开发部门根据《需求规格说明书》开始着手产品的开发，开发部门根据效果图和控件切图完成项目中所需要控件与窗体的开发工作。

软件的界面开发通常和产品的功能开发交替进行。

然而我要说的是这种开发模式是无法适应如今软件界面开发的需求，主要存在着以下的几点问题：

1）这种开发模式是以开发部门为中心进行产品界面的开发，而开发部门在开发过程中往往会脱离产品部门最初的需求，导致最终开发出来的产品无法达到用户所希望的要求。

2）开发部门会为这个项目开发大量的控件和窗口，而这些控件和窗口很难被其他的项目所重用，无法重用的开发会导致新项目开发成本和周期的上升。

3）由于软件界面开发与业务开发处于串行交替进行，造成界面模块与业务模块耦合度很大。当软件进行调整时需要对代码进行一定的修改才可以满足需求。

这种高耦合也无法方便的进行产品功能的修改和升级。

由于这种传统界面开发模型的不灵活性促使了界面库的产生，软件开发商通过界面库来弥补传统开发模式的不足，界面库的发展经历了三个阶段的演变。下面我会依依介绍界面库演变的历史。

第一代界面库是指以BCG、Codejoke为代表的派生类界面库。

这一代界面库出现于2000至2002年，其的特点是利用控件的派生关系实现统一的控件外观和扩展的控件功能。这一代界面库大多是在MFC控件的基础上进行派生，并且代码质量也是相当的不错的。

BCGSoft也被微软收购，它们的BCGControlBar也被整合到了VisualStudio当中。

但是同时我们也可以看到第一代界面库的存在的弊端：

1、不提供可视化的界面开发工具，无法大幅提高界面的开发速度。

2、提供的控件外观效果也是非常有限的

3、这代界面库利用GDI 完成绘图工作，其绘制效率一般，并且修改控件外观具有一定的难度。

4、派生的控件数量有限，如果需要开发新的控件依然具有一定难度；

5、利用这代界面库，界面与业务逻辑的耦合度没有发生任何改变；

6、这代界面仅仅局限于基于MFC这样的VC++项目。

在2004年出现了第二代界面库，第二代界面库是以Skin++为代表的换肤类界面库，它们流行于2004年到2005年。这一代界面库的特点是使用方便，我们无需对原有的代码进行任何的调整，就可以让我们的产品具有统一界面外观，并可以提供丰富的主题外观效果。

这种开发的便利性使得这一代界面库在那一时期得到了广泛的应用，像PPS、浩方对战平台都是利用Skin++完成其界面的开发工作。同样我们也注意到这一代界面库的所存在的问题，主要是以下三点：

1）首先换肤类界面库使用了HOOK技术作为其实现的基础，这样的技术对产品的性能和功能都会产生负面的影响。

比如我们开发使用了一个自定义控件，如果不经过特殊的处理，换肤类界面库可能会对我们这个自定义控件应用了换肤效果，导致这个自定义控件原有的外观面部全飞。同时使用HOOK技术也会降低绘图API调用的性能。

2）其次这代界面库对界面的资源，像图片，控件属性进行了一定程度的剥离，但是界面与业务逻辑的耦合度依旧很高。

3）最后这种界面库仅仅只能提供标准控件的支持，对于自定义的非标准控件这代界面库则无法对其进行统一的换肤。

针对上两代界面库的问题出现了第三代的界面库，第三代界面库是指以DirectUI为代表的纯自绘类界面库，这一代界面库出现于2005年并流行至今。

这一代界面库最重要的目标是实现“界面与业务逻辑彻底分离”

那么什么是“界面与业务逻辑彻底分离”呢?

它是指：界面模块与业务逻辑模块具有近乎0的耦合度，无论怎么修改界面外观或界面功能，都不会影响到应用程序的修改与重新编译。

我们为什么需要让界面库做到逻辑与业务彻底分离呢？他的优势在什么地方呢？

优势有以下4点:

1、彻底分离使得我们可以在产品实际开发前，进行界面模块的开发。也就可以让我们的产品部门先于开发阶段来制作产品原型。

2、在整个软件的开发过程中，这种分离还可以让我们的界面模块与业务逻辑模块可以处于并行开发的过程中，从而可以缩短我们项目的开发周期。

3、彻底分离使得所有的界面资源独立于我们的业务逻辑，像界面中的控件、布局、颜色、图片、字体、文本、甚至界面逻辑都可以完全独立于我们的业务逻辑，使得我们无需修改任何业务代码就可以对界面进行更新。

4、彻底分离使得界面控件不依赖于任何的项目，可以独立于产品进行开发，并且具有很强的通用性，通过修改控件切图就可以使得开发出的控件具有适用于各种项目的特性。

正是由于这种彻底分离的优势使得广大的软件开发商采用第三代界面库DirectUI来开发自己的软件产品，例如QQ、迅雷、飞信、360安全卫士等等。

因此我要说的是我们衡量一款界面库好坏的标准，不仅仅应当从其运行性能、界面实现质量、界面库的功能上来判断，还应该考虑使用界面库让产品达到“逻辑与界面分离”的程度。

下面我们来分析对比一下这三代的界面库与传统的开发模式。

大家来看看这张三维图

这张图中X轴代表界面库在界面与业务逻辑分离上可以达到的程度；

Y轴代表界面库的质量、效果和功能；

Z轴代表界面库的运行性能。

正方向越大代表在这个方面的性能越好

而在第一象限的立方体越大，则代表界面库的综合性能也就越好

从这个图我们可以看到第三代界面库DirectUI是远远优于前两代界面库和传统的界面开发模式的。

那么接下来让我将从这三个方面来分析一下DirectUI的界面库，看看为什么它可以远远优于其他的界面库的。

1、DirectUI平台插件模式具有灵活的控件设置及控件扩展方法

目前DirectUI提供四大系列共计42个控件。

DirectUI的构架采用平台加插件的模型，所有的控件都是一个个的插件，我们可以根据自己的需要扩展出不同类型的控件。DirectUI提供插件开发向导，利用开发向导生成控件工程及基础代码。

DirectUI的控件具有统一的属性设置方法。

2、DirectUI提供灵活强大的脚本支持

DirectUI可以支持通过脚本语言来编写界面逻辑，因此我们可以利用其完成界面逻辑的开发工作。例如窗口关闭，控件布局的调整等等。

并且脚本可以控制所有的界面资源，包括控件，图片，字体，颜色，布局等等。当需要进行界面逻辑调整时，不需要重新编译产品，通过更新皮肤文件中的脚本逻辑就可以了。

3、DirectUI提供界面接口及界面事件自动提取工具

DirectUI提供界面抽象精灵，当我们完成界面皮肤的制作后，利用此工具将可以自动提取和实现界面的接口和事件。

我们知道界面与逻辑的交互是双向的，我们称之为“接口”和“事件”,用户点击某一个按钮这样的操作我们称为一个”事件“，业务程序操作控件呈现一系列数据，我们称这种操作为”接口“。

而DirectUI的抽象精灵工具就是将这种事件与接口自动提取出来。

当我们利用DirectUI集成业务逻辑的时候，先利用界面抽象精灵完成自动抽取，然后调用相应的接口实现界面事件的处理就可以完成与界面的对接工作。

 基于以上三个主要的机制确保了DirectUI达到界面与业务逻辑的彻底分离。

1、首先DirectUI提供可见即所得的界面编辑工具DirectUI Builder。

DirectUI Builder采用拖拽式的界面拼装方法来完成界面的制作。

这种拼接流程我们可以理解为

DirectUI 控件是我们拼装的零件；

控件切图是我们零件的油漆；

而DirectUI Builder则是我们的拼装车间。

界面皮肤制作流程也就是选择不同的零件和油漆然后根据效果图在我们的拼装工厂中进行组装。

这种界面拼装相对于传统的界面开发方法是快速而高效的。

传统界面开发模式一个月的界面开发工作量，采用DirectUI Builder的拼装方法可以缩短到2~3天内时间完成。

2、其次，DirectUI控件支持多控件多层级Aplha混合效果

传统的控件是无法与他的父窗口背景图像进行混合的，而在DirectUI当中，当我们选用带透明通道的图片作为一个按钮的背景时，我们可以看到这个按钮背景会自动和他下层控件的图像进行混合。（20、配图混合效果）

通过这种特性我们可以实现丰富的视觉效果，设计师在PhotoShop中完成的效果都可以利用DirectUI在我们的界面上表现出来。

3、最后DirectUI提供多种控件布局插件

目前DirectUI提供父子布局插件和Grid布局插件，并且这种布局规则支持扩充，以插件的方式扩展到DirectUI平台当中。使用这种丰富的布局效果可以确保实现任何布局规则的界面。

正是这三个特性保证了任何交互和界面效果都可以利用DirectUI实现出来。

1、DirectUI提供自动化测试工具，我们通过窗口句柄就可以获得到这个窗口上的所有的DirectUI控件对象，然后通过调用控件对象的接口就可以完成控件的设置工作。

2、采用DirectUI Builder的拼装方法和布局插件将可以支持像素级别的界面效果比对，也就可以做出与效果图一摸一样的界面。

3、DirectUI提供样式级别的换肤，普通的换肤我们知道只能可以改变控件的外观，而样式级别的换肤，除了控件的外观外还可以让控件的布局、表现形式、控件的文字内容都可以进行更换。

4、DirectUI支持动态的语言切换。我们知道英文和中文的常用字体是不同的，DirectUI可以支持不同语言动态选用不同的文字字体，从而可以保证语言切换后的界面效果。

5、使用DirectUI可以做到一个皮肤到处使用，DirectUI支持C/S，B/S, 手机移动以及嵌入式平台的开发，我们利用同一套皮肤可以生成多种平台的界面代码。

 通过对DirectUI开发流程和功能的分析我们可以看到DirectUI确实保证了界面的功能、质量和效果。 

1、DirectUI具有自主研发的高速渲染引擎来提高界面绘制的效率。

2、高速渲染引擎优化了图像平铺，图像拉伸，Alpha混合绘制速度。

大家看大屏幕，通过测试我们可以看到，高速渲染引擎

平铺图片，性能上高于GDI方式24倍

拉伸同样大小的图片，高于GDI 15倍

AlphaBlend混合两张图片1000次比GDI  AlphaBlend 所用时间缩短了12倍

接下来我们分析一下高速渲染引擎是如何保证其高性能贴图的？

高速渲染引擎利用三个机制来保证其绘制速度的

1）具有脏区域擦除机制，当我们的界面需要刷新时仅仅只会更新之前有毁坏的区域。

2）我们目前的计算机大多采用多核的CPU，高速渲染引擎将会将界面分为64块，会利用多线程来分块绘制，利用不同的线程同步完成绘图工作最后合并，从而加快绘图效率。3）利用CPU指令进行了绘制优化，使用MMX指令提高数据填充速度。

因此我们看到利用高速渲染引擎绘制的界面，当拉伸窗口大小的时候我们会发现是拉伸是非常平滑的，并且当界面中有大量透明控件时，依然可以快速响应用户的操作。

今天我在这里给他们介绍了界面开发的各种方法和分析了三代界面库的特性，并重点分析了DirectUI的功能和内部机制。

通过分析我们看到DirectUI确实可以适应新时期用户对软件界面的开发要求。如果大家想进一步了解DirectUI的话，可以登录UIPower的网站来下载相关资料进行学习。网址：www.uipower.com