模式庫

Damask 的研究則是進一步將其導入設計工具中，加速原型製作，但也面臨設計 模式數量龐大，設計師花費許多時間在尋找所需模式上。

本創作於前期專家訪談發現：除線段、矩形外，設計師亦常繪製已具 備共識的符號代表某些流程，因此僅繪製重點功能頁面即可建立app 的整體印 象，進入數位原型製作後再逐步完成後續頁面。為降低設計師於登入流程、搜 尋等常用介面、流程的設計時間，將可使用於app 核心設計的時間最大化，本 創作將行動介面設計模式（mobile user interface pattern，以下簡稱 pattern）導入 Xketch⁺中，以筆劃產生元件後，依據元件類型列出相關pattern 供引用，以降低 查找pattern 的時間成本及操作負擔。

本創作以「利用pattern 建構一常見購物消費、內容型行動 app」為基 準，選擇八個pattern 作為第一版本 pattern library（模式資料庫）。此八個 pattern 可分為三類：

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

l 導覽類：side bar, swipe container.

l 列表類：collection, waterfall.

流程模式（Flow Pattern）

隨著行動介面設計的成熟，許多具備共識、易用性的流程已成為介面設計 常見模式，廣泛使用在各種app 中，如：多數 app 皆有的登入及註冊流程、社 交類型app 的拍照流程，行動購物 app 的結帳流程等等。此類型的流程變化 小、非產品設計重點，但為串接流程及架構的重要環節，故在原型設計階段，

設計師常需參考相關資料。本創作將上述流程稱之為「流程模式」，定義為：經 多頁操作以完成某任務之流程。如：登入及註冊流程（Sign in）、結帳流程

（Checkout）、攝影流程（Capture）及搜尋及顯示流程（Search）。

為改善Damask 不易尋找適當 pattern 的狀況，本創作以元件類別、元件內 文字作為分類篩選pattern 的第一步。上述之流程常以按鈕觸發，故將按鈕作為 觸發流程模式的元件。其觸發過程流程由圖62 可得知：設計師繪製之筆劃經系 統判斷後，產生最適元件作為預設（圖62 中的 Step 1），並於右側顯示可變更 的待選元件清單（圖62 中的 Step 2）。確認元件類型後，則進入第三步驟選擇

圖 62 元件初次設定流程

受訪設計師表示：在原型製作時，可能會先擺放元件至約略位置，佈局完 成後再逐一進行編輯修改。故除上述元件產生時即告知相關pattern，當設計師 於具備文字欄位的元件輸入與pattern 關鍵字，如：於按鈕元件輸入「Sign in」，或使用登入相關的人頭圖標，系統將提醒有相關 pattern 可供選用（圖 63）。

圖 63 依照元件的文字欄位提醒是否使用相關 pattern

以攝影流程模式為例：當設計師於初始頁面（圖64 左一）的相機圖標上套

場設定，所建立之頁面及元件，已滿足行動裝置攝影所需的基礎功能，如：觀 景窗、快門鍵、前後鏡頭轉換、閃燈開關，讓設計師能自行添加所需功能（圖 64）。隨著行動支付普及，結帳付款的流程也相當常見，故本創作將其視為「結 帳流程模式」加入至Xketch⁺，協助設計師完成繁瑣的基本結帳頁面（圖65）。

圖 64 Xketch⁺提供的capture pattern 流程示意

圖 65 Xketch⁺提供的Checkout pattern 示意

由攝影及結帳流程模式中可發現，若利用系統預設元件建置相同頁面，就 要要耗費不少時間，再加上視覺樣式調整則更可觀。類似的介面模式皆已成 熟，設計師卻仍須在每一次的原型設計過程中重複繪製。因此於Xketch⁺加入 pattern 概念可免除建置基礎流程的成本，提升原型設計時的效率，為設計師爭 取更多時間可專注於核心功能的設計。

導覽模式（Navigation Pattern）

導覽模式定義為：展開於資訊架構中位於相同層級的功能，以便使用者切 換瀏覽，建立對於該app 之心智模式。如：App Store 的 tab bar 即清楚呈現數個 主要功能，並讓使用者快速理解所在位置，及可前往之頁面。因此Xketch⁺加入 了side bar 以及 swipe container 兩種導覽模式降低逐一建置頁面的成本。

Side bar 常以菜單圖標觸發，本創作擬當設計師以相關圖標引用 side bar pattern 後產生 side bar 並自動展開 side bar 編輯器（圖 66），其中包含已建立的 表格及對應頁面供設計師變更使用。

圖 66 引用 side bar 的菜單圖標以及 side bar 編輯器

Swipe container 顧名思義即為利用手勢水平滑動切換內容，以繪製 S 字母

圖 67 Swipe container 四種不同的指示器

圖 68 Swipe container 的編輯模式

列表模式（List Pattern）

列表佈局其定義為：具備相同格式的大量資料。本創作擬將兩種行動介面 設計常用的列表佈局：collection 及 waterfall 作為 Xketch⁺中的列表模式，以協 助設計師處理列表類型的資料，分別以繪製C 及 W 字母產生。

片、標題、次標、轉場效果、連結頁面、相同的控制項等等，以及相同視覺樣 式，如：顏色、位置、文字大小等，但具備不同的內容，如：文字內容不同、

圖片不同等等。其概念與第三節的複合元件（一）表格極為類似，差異在於表 格提供了每列重複及不重複的元件佈局，但列表模式僅提供每一項目重複的元 件佈局，無法逐一自定義，但佈局自由度較表格高。

因此列表模式也沿用表格的編輯方式。以collection 為例：設計師繪製Ｃ產 生預設collection 樣式，其中每一項目（item）具備一張圖片。此時設計師可於 任何一個項目，利用基礎筆劃建立元件，如：於圖片下方繪製線段，建立兩行 文字。當文字建立後，Xketch⁺將同步所有項目的元件佈局（圖69）。

當列表模式項目中的元件佈局、結構完成後，則可著手進行內容的調整。

設計師可逐一調整每一項目中與顯示資訊相關的屬性，如：文字、圖片內容等 等。

圖 70 編輯 collection item 的寬高