淺談 GUI 和圖像

 

作應用多少會接觸到 GUI、圖像相關的內容，這些領域都蘊含了深厚的內容，本文就從應用軟件開發者的角度淺談一下圖形界面和圖像。

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 想象的起點。