GUI開發解疑

「GUI的開發瓶頸」一文得到很多迴響，顯然GUI（Graphic User Interface，圖形使用者介面）開發是許多人共同的困擾。針對大家的疑惑，我覺得有必要寫這篇文章補充說明。

子系統的開發階段
正常情況下，GUI的開發和一般軟體開發一樣，都需要經過需求、分析、設計、實踐、測試這五個階段，分別為：先收集客戶的GUI需求（requirement）；將需求分析成為可行的作法；設計出GUI畫面（紙本手繪、軟體手繪、雛形系統皆可），和客戶進行溝通；接著開始實踐畫面，功能的部分先用假函數（dummy）取代；最後進行測試。

GUI子系統和核心系統功能的開發，可以彼此獨立進行、獨立測試，最後再整合，但兩者之間必須先定義好溝通介面。可以讓GUI子系統當主程式，核心系統當動態連結程式庫DLL。對OOP（物件導向編程）來說，一般還會使用到MVC（Model-View-Controller）模型，來讓資料、呈現、處理分開。

參與者
GUI子系統的開發，需要GUI工程師、美工人員和藝術指導共同參與。美工人員對Photoshop等美工繪圖軟體必須相當熟練，可以根據工程師的需求，做出適當的圖片與動畫。

GUI工程師需要熟悉相關的編程語言與GUI API（Application Programming Interface，例如Java Swing）。我認為GUI工程師可以不用去寫其他領域的程式，光是專精GUI的部分就夠他們忙了。

工程師得專注在程式開發，因此需要有「藝術指導」的參與，協助工程師將抽象的GUI需求，轉換、美化成使用者能夠理解的圖像介面。藝術指導必須有豐富的配色與畫面配置經驗，能從使用者的角度看事情，並適當地和現實需求妥協，不要對藝術有太多無謂的堅持，畢竟GUI只是軟體，而不是要在巴黎美術館展出的藝術品。

我要強調，藝術指導的存在很重要。我看過許多應用軟體，本身核心沒什麼問題，就只是被醜陋且難用的GUI給害了。

技術難度
GUI的技術含量高不高，要看使用什麼技術而定。通常好的GUI API，會讓技術含量變得相當低，因為它已經將複雜的部分隔離起來，一般的GUI工程師不需要知道太多細節。通常越有彈性的GUI，使用起來也就越麻煩，技術含量也就越高，例如Java Swing。

大致上而言，GUI工程師需要熟悉各種元件、Layout（畫面配置）、事件處理模型、繪圖API、雙重緩衝（Double Buffering）。所謂的「雙重緩衝」，是用來減少畫面閃爍的技巧。

框架內部的實作方式
早期GUI編程大多採用Heavy-Weight元件，每個GUI元件（例如按鈕、捲軸）都是一個視窗，都有自己的Window Handle。1990年代後期，Light-Weight元件漸漸成為GUI主流。所謂的Light-Weight元件，是指元件是程式庫自己繪製出來的，而不是OS提供的。這樣的好處是可以自由變化元件的外觀，而不會受到OS的限制。

Light-Weight元件的框架，也會有自己的事件模型。外觀和事件都獨立於OS之外，自然會比較容易移植到其他平臺。為了讓GUI更容易移植，許多GUI套件多少會用到GUI抽象層，來隔絕底下的OS。

設計方式的未來變化
．XML化：雖然我不是很喜歡XML，但是將一部分的GUI設計XML化，確實有一些好處：（1）方便美工人員處理；（2）將外觀設計再往上抽象一層，可以依據不同的裝置產生不同的結果。例如，一樣的XML檔案，可以依據裝置是PC、PDA或手機，產生不同的畫面效果。

．CSS重要性增加：在GUI設計上，CSS（Cascading Style Sheets）會越來越重要。只要改變CSS，就可以呈現出截然不同的視覺效果。CSS不只用在網頁上，連一般的桌面GUI也可以使用。

未來，可能GUI的DSL（Domain-Specific Language）會越來越流行（請參考REBOL和Curl的作法），甚至有機會整合出一套共通的GUIL（GUI Language），能夠用來和底下的GUI Server溝通，以控制GUI的呈現，與利用SQL控制DBMS的概念相類似。

GUI越來越重要
雖然大量的應用漸漸Web化，但是GUI的需求是不會消失的，在講究使用者體驗的今日，GUI的角色將更加關鍵化。雖說美色只是一層皮（Beauty is only skin deep），但良好的GUI，確實會讓人第一眼瞧見就產生好印象，使用起來更是覺得順手。

多花一點時間投資在GUI開發上，是絕對值得且必要的。看看蘋果Mac或iPhone上的各種軟體，你會發現，原來設計良好的GUI是如此地吸引人。

作者簡介：
蔡學鏞－技術顧問
清華大學資訊工程碩士，曾任華碩集團軟體工程師、元智大學資訊系講師、美商歐萊禮出版社技術編輯、臺灣微軟特約專欄作家。