軟體UI走入工業設計時代

設計使用者介面（UI）超難。我們根據《視窗風格手冊》或《麥金塔人機介面方針》，小心翼翼地將控件擺設得宜，希望使用者能夠瞭解精心設計的介面，但常常結果未如我們所願。

如果只是遵守各種設計守則，或者模仿既有的應用，可能會建立出二流但還過得去的普通介面。

新時代的設計難題
使用者的期望已經比以前更高了。即使介面遵守所有的標準，你可能會誤解使用者喜好的工作流程，或讓使用者不清楚這個軟體在做什麼。

如果建立一個不好用的網站或Web應用，就更糟了，受到挫折的使用者可能一下子就放棄你的網站，直接連到競爭者的網站去。所以，建立一個二流但還過得去的普通介面，所帶來的不良影響比以前更大。

如果為桌面和Web領域以外的產品設計介面，這就更難了，因為良好的設計建議並不多。PDA、手機、汽車導覽系統、數位電視錄影機，設計者還在摸索怎樣的設計比較好。

這一切讓我們體會到，我們需要學習「操作介面設計模式（UI Design Patterns）」。而Jenifer Tidwell所著作的《Designing Interfaces》（中譯本《操作介面設計模式》歐萊禮）正是討論這樣話題的一本書。

「熟悉」是UI設計的關鍵
過去幾年介面設計工藝有兩大影響，第一個影響是「介面風格」（Interface Idiom）的激增。第二個影響是規則的放寬，將不同風格的介面放在一起。現在，你大可打破老舊視窗風格手冊的限制，只要使用者能夠知道你在做什麼就沒問題。而這就是困難之處。有些應用在行動裝置以及Web應用相當好用，有些則否。

遵守風格手冊不保證可以讓使用者介面變得好用，但是現在設計者比以前有更多的選擇（這也會讓設計困難許多）。

讓我們好好想一想，究竟是哪些特徵讓介面變得好用？

有人說「容易使用的應用，設計上必須相當直覺。」但是「直覺」一詞卻隱藏陷阱。

當我們在軟體領域提到「直覺」，我們真正的意思是「熟悉」。

對於沒見過滑鼠的人，滑鼠第一次操作起來一點都不直覺。但是一旦你花十秒的時間學習使用滑鼠，它馬上變得熟悉，下次你再也不會忘記該怎麼使用它。所以，我們應該改變說法：「容易使用的應用，設計上必須相當熟悉。」

「熟悉」不見得需要讓某個產品的一切，都和微軟的Office產品一致。人其實夠聰明，只要組件足以辨識，組件之間的關係很清楚，那麼人們就能將他們先前的知識運用在新的介面上，並瞭解怎麼一回事。

操作介面也有設計模式
這就是模式（Pattern）存在的目的。「Designing Interfaces」這本書將許多我們所熟悉的UI設計編成型錄（Catalog），讓你可以在許多不同的地方使用它們，保有彈性將可以讓你充分發揮創造力。
如果你知道使用者對你的應用有什麼期盼，而且如果你更加小心地選擇風格、控件與模式，那麼也許就可以有機會設計出「感覺熟悉」，且兼具原創性的介面。

簡而言之，模式是一種結構和行為的特色，可以改進事物的「可用性」。被改進的對象可以是使用者介面、網站、物件導向程式，甚至是一棟建築物。

模式讓事物更容易瞭解或者更漂亮；讓工具更好用更有用。因此，模式可以被描述為某個設計領域內的最好的慣例（Practice）。模式並非可以立即取用的元件，一個模式的每個實踐方式都會有所差異。

模式既不是簡單的規則，也不是用來啟發設計的道理，模式亦無法帶你穿越一連串的設計決策。如果你想要尋找設計介面的完整步驟性描述，在模式型錄中瀏覽是找不到這些目標的。

本書將模式照實描述為設計問題的解決方案，因為模式一部份的價值是「在多個設計狀況下，它們解決張力的方法」，比方說，需要在一個小小的空間內放進許多東西，這個時候可以使用「紙牌堆疊」（Card Stack）模式。

模式的起源與相關發展
使用者介面模式的第一個具有價值的集合，是麻省理工學院「Common Ground」的模式聚集地。許多其他模式型錄隨後出現，值得注意的有Martijn van Welie的《Interaction Design Patterns》，以及Jan Borcher的《A Pattern Approach to Interface Design》（Wiley）。

最近，也有一個巨細靡遺的網站設計模式書籍已經出版了，書名是《The Design of Sites》（Addison-Wesley）。這些書籍都值得一讀。

適用於桌面、Web、數位裝置
本書的模式同時對桌面和Web應用都可行，某些模式也被採用到數位裝置，像是PDA、手機、數位錄影機。

本書有三個章節將焦點放在更常見、一般的風格探討，例如：表單、資訊圖表，以及WYSIWYG編輯器。其他的章節則將重點放在可以同時跨越多個風格的主題，像是組織、導覽、動作，以及視覺風味。

這本書的讀者應該具有關於介面設計概念與術語的一些知識。因為這本書不會涉及許多廣為使用的技巧，像是「複製與貼上」，既然大家都知道的技巧，就沒必要在這裡浪費時間了。這本書也沒有敘述如何建構使用者介面的完整程序（Process）。設計程序的主題超過本書的範圍。

任何設計都不是線性的。本書大部分的章節安排方式多多少少有依據大小、以及設計程序大致上的次序逐一出現：首先是關於內容和範圍的大決策率先浮出臺面、經過確認，其次是導覽，接著是網頁設計，然後是表單和畫布（Canvas）之類的互動細節。

你會發現上述的項目常常會在過程中前後移動。或許你在專案很早期，就已經知道某個螢幕應該看起來如何，而且這是一個「固定點」（Fixed Point），可能得從此點往前回推，以便從整體得知更正確的導覽架構。

本書的範例選擇其中牽涉到相當多的考量因素，最重要的挑選指標是：該範例是否能夠將某個模式和概念表達清楚。

正因為如此，這些範例有相當大的比重取材自市場上相當普及的微軟系統及蘋果應用軟體、特定的網站，以及常見的消費性軟體與裝置。因為展示這些範例的需要，所以本書採用全彩印刷。

透過學習設計模式，啟發自己的設計靈感
如果沒有多年的設計經驗，可以拿這些模式當作學習工具。你可能想要研讀這些模式，以瞭解這樣的構想，或者在有需要的時候，參考特定的模式，正如學會越多詞彙可以讓表達力更豐富，學會更多設計「詞彙」也有助於建立更具有表達力的設計。

本書的模式都至少有一個範例，有些甚至會有多個範例，這些範例可以當作構想上的參考，可以從範例中習得一些知識，是文字無法描述的知識。

如果你和使用者、工程師、經理人討論介面設計或寫規格，那麼就可以使用模式來溝通想法，這是另一個模式語言的優點。（例如：「Singleton」和「Factory」原本是模式的名稱，現在已經變成軟體工程的常用詞彙了。）

每個模式的描述都是用來表達，為何此模式可以讓介面更容易或更有趣。如果懂得原理，想做一些改變，就可以盡量發揮巧思。

活用與內化自己的設計模式
模式型錄並非一份檢查清單，不需要認定使用比較多模式的介面就是比較好的介面。每個設計專案都有一個獨一無二的時空背景，即使是要解決一個普遍的設計問題（例如，如何將兩份內容放進一個頁面），在這樣的環境背景下，某個模式可能反倒是比較差的設計。

就如同沒有一種參考可以代替好的評斷，沒有一種參考可以代替好的設計程序，而一套好的設計程序卻可以幫助你找到設計上的錯誤。

有一天，你會有能力獨自完成好的設計，不再需要參考書。在變成有經驗的設計師過程中，你會將這些想法內化成自己的一部分，很自然地使用這些想法，甚至不知道正在用它們，模式變成了第二本能，從那個時候開始，模式已經變成你工具箱內的工具了。

Designing Interfaces
Jenifer Tidwell/著，
蔡學鏞/譯
O’Reilly出版
售價：49.95美元
推薦：Amazon四顆半星

《作者簡介》蔡學鏞
清華大學資訊工程碩士、元智大學資訊系兼任講師、美商 O'Reilly 出版社技術編輯、臺灣微軟特約專欄作家、寰震科技技術顧問、研討會講師。蔡學鏞先生著譯有多本 Java 書籍，並在臺灣和大陸的多本 IT 雜誌開闢技術專欄，專長的語言為 C/C++、C#、Java、REBOL。他的聯繫方式：xy.cai@msa.hinet.net。