浅谈 GUI 和图像

做应用多少会接触到 GUI、图像相关的内容,这些领域都蕴含了深厚的内容,本文就从应用软件开发者的角度浅谈一下图形界面和图像。

It's about the network
Cairo on WinCE

GUI

图形用户界面,大部分应用程序的界面都是由操作系统的 GUI 创建的,也有一些是自己生成的,后者一般自带了界面图形引擎,其绘图能力及界面描述部分都不依赖操作系统,在各种平台都有一致的表现(前面提到的 Flutter 就属于这一类),不过人机交互的信息输入及展示内容的承载还得依赖操作系统,也就是说它依赖鼠标、键盘、触屏、语音等输入设备和事件管理,在展示方面 App 也需要一个承载其内容的 Window 或是 Activity 才能将界面图形引擎创建的图像显示出来,音频信息输出内容也得依赖系统的声音设备。

在早期 Windows CE/Mobile 的时代,系统 GUI 的图形能力相对单纯,绘制线条、填充平面、解码及渲染图片、解析及渲染字体(显示文本)这些能力就能创建基础的图形界面,很多的早期的图形界面都分解为这些基础的图形元素构成。而一些比较深度的能力像曲线、绘图抗锯齿、复杂梯度填充、图像透明(Alpha)通道、字体的 Style 等等,GUI 要么不关注要么 API 零散难用,对界面质量有要求的 App 则要自己实现。

在我的印象里,那个时期 Microsoft 对于界面的图像质量似乎不太关心。灰色的界面、凸起的按钮、死板的列表。。。似乎应用程序的界面都是这样,只能这样。一些追求变化和体验的 App 直接从 Win32 SDK 出发,自己处理背景,自己绘制控件,自己去实现交互动画,孜孜不倦的打造精致的应用程序。那时有让开发者津津乐道的 GDI 双缓冲还有 DDraw 界面动画,甚至有开发者试图设计基于 XML 描述的图形界面自动生成系统,而这一切 Microsoft 似乎无动于衷,或许他是投入 .NET,在酝酿一次更彻底的变革吧。

在那样的背景下公共的图形界面库显得格外引人注目,有流行的 QT 也有很少被提到的 GTK,使用这些库不需要依赖操作系统的 GUI 就可以创造漂亮的图形界面,这些库还可以通过源代码移植的方式来实现跨平台,而且有的开源库官方就提供了不同系统平台的版本,对于 App 开发者来说那是一次迁移永久收益。我也曾将 GTK 的图形核心 Cairo 移植到 Windows CE 上,封面图片是一个绘图演示,理论上可以拓展为一套独立可控的界面图形系统,不过我觉得图形系统不是一个人一个团队或是一个小公司能够玩得起来的。另外一方面,引入 Web 技术的 Hybrid 跨平台应用程序框架也初具雏形。

Android 的出现打破了这一局面,Skia 图形引擎在直接将高质量的图形界面带到了人们的面前,除了丰富的绘图能力外还支持模糊、阴影等界面图像处理,对图像资源的支持也非常友好,能自动适应设备屏幕做插值(缩放)处理,而且还内置了基于 XML 的界面描述,不需要软件参与绘图,编写 XML 就能创建高质量的图形交互界面,更让人兴奋的是界面交互也非常流畅。

移动端操作系统平台迅速从 Windows 时代跨越到了 Android 和 iOS 的时代,接下来,开发者已经不需要思考如何去加入一些绘图能力来提升界面交互的体验,也不需要思考如何设计一套界面描述机制将软件逻辑和界面绘图分离,App 只需要把注意力放在本身的创造上即可,其他事情交给操作系统。而 QT 一类的原生图形界面库却坚持了下来,延续至今作为各种平台可选的界面组件。

过去的十年,平台应用程序的图形界面从操作系统 GUI 到公共界面组件再到混合模式,经历了几代的跨越。而引入 Web 技术,更关注跨平台和可描述性的 Hybrid 框架在近些年取得了快速发展,从早期的基于浏览器的雏形到现代复杂的原生“容器”设计,甚至对接图形加速接口,框架越来越高效,架构越来越先进,该模式越来越显现出未来主角的特质。

图像

GUI 的目标是在屏幕上生成一副图像,向人类展示一些信息,根据交互来更新那幅图像。要说图形是描述,告知机器如何产生图,那么图像则是呈现,直观的可见的图。如果你是一名专业开发者,我不建议你将图形和图像混为一谈,因为“图形”和“图像”是不同的概念,技术上两者的交集也不广泛。

很多时候,图像技术是用来存储和分享影像信息,摄像头采集下图像后将其压缩存储为 JPEG 图片文件,将文件传输到另外一个设备,它上面的照片程序开打图片解码显示图片,完成一个影像信息存储和分享的过程。图像压缩在图像的存储和传输中起着重要作用,图像信息数据量很大,压缩能有效减少存储消耗并提高信息传输效率。

JPEG 格式对色彩丰富而且离散的图(如自然风景照片)有着很好的压缩效果,即便是图像信息损失的情况下也能保持很好的视觉感知。而色彩不多且变化又不频繁的图(如界面屏幕截图)则更适合用 PNG 格式压缩,这种场景下它能用较低的存储空间存储所有的图像信息。GIF 格式很老了,放到现代来说它能够高效编码的影像范围已经比较狭窄,不过它支持多帧并且受到浏览器等应用的广泛支持所以仍然用在动图场合。TIFF 则对图像信息准确性敏感,一般用在无损图像的场景里。当然了,还有不少图像格式用在比较专业的场合。

图像编解码格式都有对应的 Codec,如 libjpeg、libpng、libtiff 等等,操作系统会集成一些常用的 Codec 并提供 API 以支持一些图像相关的应用。专业的图像处理应用则会自带很多的 Codec,以广泛的支持各种图片格式。除了专注于图像编解码算法外 Codec 还关注编解码运算的硬件加速,因为图像的编解码也是运算量不小的任务。

近些年图像技术已经不仅仅用来存储和分享影像信息,以前图是给人看的,现在人类也试着让机器看图。最常见的就是二维码扫描,A 设备通过二维码算法将文本信息编码为二维码图像并显示,然后 B 设备通过摄像头采集并分析图像得到文本信息,完成机器“看图”的过程,即通过图像生成和图像分析技术实现了文本信息从 A 设备传递到了 B 设备。

类似的技术也有图像文本识别和基于 AI 的图像分析,从人机交互的维度看这是一项质的飞跃。以前,人类需要看 A 设备上的文本然后输入到 B 设备,需要记忆文本然后小心翼翼的输入文本,事实上信息是从 A 传递到了人脑再从人脑传递到 B。而现在,人类只需要将 B 的摄像头对着图像即可,其他的事情交给机器去完成。

当代,基于 AI 的图像技术应用有着革新人机交互的趋势。我觉得 Google 眼镜是个有些超前时代产品,结合图像、AI、大数据和智能化的人机交互的应用未来还会出现。《钢铁侠》大胆的想象了人类和机器的交互方式,不需要按钮,不需要列表,所有的影像信息都是根据人机交互动态生成,和机器交互就像和人说话一样。

跳出屏幕和 Touch 的束缚,跳出距离的限制,语音、机器视觉、机器智能、大数据、5G 或许可以成为新一代智能设备 GUI 想象的起点。


2021-01-31