模式庫

App原型設計是一個逐步建構的過程，數個元件構成頁面，數個頁面構成流程，數個 流程構成功能，最終形成完整的App。為了提升原型設計的體驗，有許多元件產生式設計工 具提供元件庫，供拖曳元件快速建構頁面。文獻探討中的介面設計模式庫，則是提供了建構 頁面的參考。Damask的研究則是進一步將此頁面佈局，甚至是使用流程導入至設計工具中

，設計師可以利用此更快速的完成原型設計，但也面臨設計模式數量龐大，如何使設計師精 準找到所需模式的問題。

本研究於文獻探討以及專家訪談發現：除線段、矩形外，設計師亦常繪製已具備共識 的符號代表某些流程，因此僅繪製重點功能的頁面即可建立App的整體印象，進入數位原型 製作後方逐步繪製後續頁面。為降低設計師於登入流程、搜尋等常用介面、流程的設計時間

，將可利用於迭代核心設計的時間最大化，本研究將行動介面設計模式（Pattern）導入 Xketch中，並延續上一節以筆畫圖樣產生元件之設計，擬利用元件針對可能的Pattern進行 一次篩選，將較不可能的選項刪除，給予設計師符合該元件使用情境的Pattern供使用。

為實驗以上概念之可行性，本研究以「利用Pattern建構一常見購物消費、內容型行 動App」為基準選擇十個Pattern作為第一版本測試使用。此十個Pattern可分為四類：

● 流程類：sign in, checkout, capture, search.

● 導覽類：side bar, scope bar, swipe content.

● 列表類：collection, waterfall.

● 控制項類：picker.

介面設計模式會不斷改變，為了更直覺且有效率的提取使用，Xketch擬以觸發元件分 類Pattern並引用。以登入（Sign in）Pattern為例：當設計師於Xketch中的編輯區域繪製一 矩形，並將其設定為按鈕後，左側的工具列將顯示各種按鈕可編輯之屬性，以及按鈕可觸發 的Pattern（圖44）。在Pattern選擇畫面中，設計師可預覽使用該Pattern後的效果並引用。

當引用登入此Pattern後，系統將產生七頁的登入流程，其中包含：登入頁面、加入會員頁 面、忘記密碼等等，各頁面中的元件皆與設計師手會產生的元件相同，且皆為最低樣式，故 能以此為基礎，修改至符合設計所需。

圖44 Button元件可觸發之Pattern列表（本研究整理）

行動App中常出現的列表型資料，在原型設計時常以繪製一個項目後大量複製，然而 設計師常需以相同資料格式嘗試不同版面配置，以達到最佳使用體驗，但以複製的方式來呈

現列表資料有不易更改版型的問題。因此本研究針對列表資料以形狀（shape）觸發的 collection pattern（圖45）改善列表資料的設計體驗，使設計師能利用collection pattern提 供之佈局作為基礎，修改列表中單一項目的格式（圖46），於編輯結束後同步collection中 的所有項目，以達到編修一次即可完成列表中所有項目的佈局變更。

以App Store介面為參考，使用Xketch可以筆畫快速繪製元件完成類似的原型設計，

但仍無法提供App Store中常使用的左右、垂直滾動效果。引入Pattern的Xketch可使用較少 的筆劃即可產生相同的原型設計，並且達到左右、垂直滾動效果，故設計師能以較有效率的 方式產生原型，進入測試階段，加速迭代過程（圖47）。

圖45 垂直及水平的Collection pattern。（本研究整理）

圖46 Collection pattern的編輯模式。（本研究整理）

a. App Store b. 以Xketch繪製App Store c. 以Xketch繪製App Store 圖47 相同介面於Xketch及Xketch的筆畫數量比較圖（本研究整理）