music unfamous original game design efficient software wtf
life ui algorithm fix programming

UI 架构技术

作者:frinity  Misc    2016-6-3  标签:  ui 

     自从苹果手机发布以来,软件UI被空前重视起来,大家一夜之间知道:原来图标是可以舔的。美工也不叫美工了,叫设计师。每一个设计师都应该感谢乔布斯。

    GUI 一般包含三个层面,首先是渲染技术,包含引擎技术,DMA等;其次是软件实现架构层面;然后是界面布局,效果设计,交互设计。本文针对软件实现的架构层面。

    理论上,UI最早是CUI,也就是命令行。直到 Windows 的普及之后,GUI 才进入大众视野,也就成为了开发界重视的部分。其实直到明天,也有一部分人认为 CUI 才是有效率的。当然了,GUI 出现的目的除了美观,主要还是去除“极客”的味道。----技术的归技术,商业的归商业。

    从Windows 系统的 GUI 软件设计说起,最早的GUI 设计当然是用原生 Win32 SDK。大段的逻辑代码切割到一个主消息循环内部,打碎在 if else 或 switch case 的不同部分,开发语言主要是 C 或 C++,那些年,设计模式还没有那么著名,但仍然有些工程师把这些被打碎的代码封装了一下。

    然后是 Borland 的 Windows Frameword 叫 OWL (Object Windows Library),应该没多少人用过,因为 MS 很快出了 MFC (Microsoft Foundation Classes)。

    GUI 设计是 MFC 的一部分,但却几乎是主要部分,最知名的是 CWnd,真不知道有多少控件以此为父类。虽然 MFC 是很官方,使用范围很广的类库,但不代表它很易于使用,Visual Studio 对 MFC GUI 的支持是使用一个“所见即所得”的界面设计器,不幸的是:如果你要给某个控件贴个 PNG 背景图片,或者几幅状态图片,则很不容易,对于每种控件,绘图机制不是那么一样,而且,绘图响应回调在每个控件类里面。而后来知道,MFC的控件类继承关系不那么理想。这时候的GUI技术几乎不需要美工,GUI 主要使用 MFC 那一套对 Win32 SDK 蹩脚的封装。

    之后除了那些再次封装 MFC 支持贴图的那些类库。伴随这 Web 的兴起,出现了一些嵌入 Web 技术的 GUI 架构技术,这让 GUI 的实现难度降低了至少一个数量级。有嵌入 Win32 IE COM 接口的,有嵌入裁剪 webkit 引擎的,嵌入 Google libcef 的;还有一个很有趣的 dll,可以支持载入HTML,CSS,JS 代码,优点是体积非常小,缺点是跟标准浏览器支持不太兼容。使用 HTML 布局是一个重要的架构分支,它有一个明显的好处是制作简单,而且升级简单。加载远程页面轻而易举。缺点是跟 native 交互稍复杂,而且有点混乱的感觉,往往还需要一些 native 实现的页面,来回的套有点坎坷。如果功能逻辑上能和 native 页面分开则是极佳的,比如最常见的 Help,About 打开一个远程页面。

    而后一个重要的GUI 架构技术是 Windowless UI,最早由 Vikso 提出一个构想,同时提供了开源的实现代码DirectUI。封装逻辑是极好的,因为 MFC 的控件继承自 CWnd,用Spy++能扫到窗口句柄,而 DirectUI 的控件是继承自 Control,用Spy++什么也扫不出来,所以叫 Windowless,而后参照这个思路和代码,涌现了一大批的界面框架。比如 DUILib,删除了 DirectUI 的动画部分,把 XML 字符串配置界面部分抽离为 XML 文件,实现了一个界面设计器。迅雷一个 Bold,金山一个,腾讯一个。还有XUI,基于 DUILib,MagicUI 基于 DUILib。这套GUI 封装首先类设计大大不同于 MFC,Customize 自己的控件极其简便(当然 MFC 不仅仅用于支持UI),而且用XML布局界面是一个重要的预言,后来的 Android 真的是一日上手。

    其间,也有Qt,wxWidget 等跨平台的GUI框架。

    看看现在的Android,和 DirectUI 如出一辙。之前和朋友讨论的时候,他说既然发展到XML布局界面那么界面的未来应该是HTML。但是XML的表达能力明显比HTML更强,HTML算是XML的一个真子集,而且HTML的效果依赖CSS和JS会更通顺。如果HTML是未来,那相当于Web是未来。这不能看HTML的表现,得看浏览器和JS的。