介面設計庫

模式（pattern）最初的概念源自於建築師 Alexander, C.（Alexander, 1978），

其對於 pattern 的定義為：在一特定情境之下，對於一個問題的解決方法。此概 念於 1990 年代由 Erich Gamma 引入至計算機科學中。軟體工程中的設計模式

（Design pattern）意指：針對軟體設計中普遍存在或反覆出現的問題所提出的解 決方案。此概念也逐漸由初始的程式設計開始擴散至介面設計、互動設計等領域，

而形成各種互動設計模式（Interaction design pattern）。

本創作於先期專家訪談中分析設計師的紙面原型發現：設計師利用特定的符 號代表某些流程，如：頭像代表會員資料、放大鏡是搜尋功能、購物車則代表一 連串的結帳流程。上述符號在行動app 使用者中已形成共識，使用者可藉由圖像 快速理解代表的功能。此外，在設計原型時，設計師亦會參考各種UI design pattern。

為提升設計師於原型設計過程之體驗，本節將探討目前常見的設計模式庫

（Design pattern library）做為系統設計之參考。

Yahoo Design Pattern Library

設計師們查閱，而設計研究小組也會定期審查pattern library 中的 pattern 並且提 出改進建議，因此Yahoo Design Pattern Library 是一個因使用行為改變而不斷更 新的模式庫。於Yahoo 所提供的模式庫列表當中可發現：即使主題相同，多數 pattern library 都使用不同的名稱來分類，因此設計師在尋找可用 pattern 時會花 費不少時間。

圖 30 Yahoo Design Pattern Library

（資料來源：https://goo.gl/YBEQbz）

Mobile Design Pattern Gallery

Theresa Neil 在 Mobile Design Pattern Gallery（Neil, 2014）一書中匯集了 iOS、Android 以及 Windows Phone 三大平台的 UI Design pattern，並且將其分類 為十大類，以及一類反模式。書中將類似的Pattern 分類後進行討論，其分類僅 呈現使用流程中的單一頁面，非完整的使用流程（圖31）。藉由此書中蒐集整 理的pattern library，新手設計師得以學習並引用至行動 app 原型設計中，確保 產生俱備一定程度可用性與易學性之行動app；而資深設計師則可透過引用

圖 31 Mobile Design Pattern Gallery 中 Springboard 模式的比較圖

（Neil, 2014）

UXPin

由UXPin 團隊推出的電子書 Mobile UI Design Patterns（Bank & Zuberi, 2014）則納入了基本的手勢及動畫作為 THE INTERACTIVE IMPERATIVE 分 類、為傳達使用者動作的 GETTING INPUT 分類，進入至整個行動裝置 app 的 NAVIGATION 分類，最終則是產生回饋的 SOCIAL 分類，以及顯示資料的 DATA & CONTENT MANAGEMENT 分類。每一模式皆概述問題以及使用方 法，然此方法對於新手設計師雖可迅速理解該模式之設計概念，但其文字編排 方式較Yahoo Design Pattern Library 不易搜尋可用資訊。

圖 32 Mobile UI Design Patterns 的 Social Login 模式

（Bank & Zuberi, 2014）

Damask

Damask（Lin & Landay, 2008b）是一款以筆畫進行 PC、手機兩種裝置的跨 裝置app 原型設計工具，設計師只需對其一進行以筆觸的方式進行原型設計，

Damask 會同時對另一裝置產生相同的設計，設計完成後可進入「Run

window」進行測試。Damask 提供了 90 個模式供設計師使用，每一模式都包含 了：名稱、背景、圖像、問題、解決方案，並且提供了相關模式的顯示。假若 設計師正在進行商業網站介面之設計而欲使用「CLEAN PRODUCT DETAILS」

模式，只需進入模式瀏覽器（圖33）中選取所需的模式名稱，並將其拖曳放置 於畫面之中，Damask 則會將該模式就地貼上，供設計師進行後續編輯調整。

圖 33 Damask 的模式選擇畫面

（Lin & Landay, 2008b）

在使用者測試中，因Damask 提供了高達 90 組模式，設計師花費逾尋找模 式的時間約佔該設計時間的16%。即使如此，使用模式進行設計的設計師相較 於未使用者，仍大幅縮短20%的設計時間。可得知在設計工具中提供模式庫，

可有效減輕設計師的負擔，若可提升選擇的效率則效果將更為顯著。

小結