線稿式設計工具

好手繪，故本章節首先將探討以手繪筆劃線稿產生元件之相關設計，以及筆劃 及元件之間的對應關係。其次於觀察設計師的設計流程中，發現設計師常利用 現有介面設計模式來提升設計效率以及易用性，因此本章第二節則歸納整理行 動app 常用之介面設計模式，探討如何利用介面設計模式庫（UI Design Library）以及相關案例提升原型設計效率。

本創作由訪談中得知，行動app 設計師在進行高創新性發想時，常以手繪為

（Landay & Myers, 1995）

Landay 在 SILK（Landay & Myers, 1995）的研究中表示使用者介面設計師在 構思初期常以手繪繪製介面雛形。手繪的速度極佳，但所產生的靜態畫面有不易

圖 25 SILK 可辨識的線稿以及對應元件（Landay & Myers, 1995）

從實驗結果得知設計師對於SILK 核心概念——以手繪線稿產生元件的操作 行為——抱持正面評價。其中，於Storyboard 對不同頁面中的元件繪製線段進行 連結，成功將紙面原型繪製時的習慣延續至數位工具之中。但SILK 仍然有許多 可改進以及發展的部分，例如：SILK 會根據線稿之間的關聯性而改變原生成的 元件類型，而SILK 多數的圖形由基本的波浪線段搭配圓形、矩形組成，因此若 設計師繪製checkbox 後再於其右側繪製 textfield，線稿中會有部分的元素重複使 用，該狀況將會影響判讀。再者，當時的演算法僅支援一筆劃的辨識且對應之元 件較少，故以線稿式設計原型之概念於今日仍有許多不同的研究面向可供後人深 入探討。

圖 26 SILK 繪製的應用程式介面

（Landay & Myers, 1995）

圖 27 將圖26 經由 SILK Transformation Process 所產生的應用程式介面

（Landay & Myers, 1995）

UISKEI

同樣地，UISKEI（Segura, Barbosa, & Simões, 2012a）認為根據使用者回饋來 不斷精練設計，是建立流暢的使用介面相當重要的方法：在原型設計的初期，以 畫筆繪製的方式有助於快速探索各種不同的可能，並使設計師專注於建立架構而 繪製精細的元件。因此 UISKEI 將迭代的過程分為三階段，分別為：1）介面建 置、2）行為定義、3）原型評估。

圖 28 UISKEI 的圖形以及對應元件

（Segura, Barbosa, & Simões, 2012a）

因此以使用觸控筆進行操作的UISKEI 不僅可透過線稿繪製快速產生八種網 頁元件以及六種主要圖形，並且藉由所繪製之線稿大小不同產出不同的元件，如：

小矩形是checkbox，大矩形則是 panel。此外更可以第二階段的線稿圖樣編輯，

來達到切換元件類型的效果，以及透過邏輯判斷的陳述式自定義操作元件的行為

（Event、Condition、Action，ECA）。由於UISKEI 著重於快速生成元件以及建立 行為邏輯，強調在設計初期並不需要進行細部的形式設定，因此僅能使用系統預 設之元件來支持高擬真原型的階段。即使對於設計後期需要進行樣式調整時的支 援稍顯不足，UISKEI 的受測設計師們仍然對其結合筆與線稿的應用抱持正面評 價。

Xketch

隨著行動裝置的普及，也開始出現基於行動裝置的線稿式原型設計工具，而 Xketch（徐嘉駿，2014）則是針對能加速設計流程的線稿式。在原型設計階段，

設計師可以透過畫筆指令來產生元件，利用畫筆指令的位置（Position）與外框尺 寸（Bounding Size）決定元件生成的位置與大小，並透過屬性（Property）、行為

（Action）、類型（Type）列表來設定元件以及設定頁面之間的互動行為；當原型 設計完成後也可直接發佈給受測者直接進行測試；在測試階段系統會同步紀錄受 測者的操作過程及放聲思考（think-aloud）的口述資料。

圖 29 Xketch 之操作介面

（徐嘉駿，2014）

除了設計師最常見的線段、矩形圖樣外，Xketch 亦觀察到許多在紙面原型上 繪製較為麻煩的元件，如：清單列表、地圖、多欄選擇器等等，設計師會利用文 字描述說明。為了延續此心智模式，Xketch 可以元件之英文字首作為生成該元件 的筆劃指令，如：Ｍ可生成地圖、Ｔ可生成表格清單等等。

此版的 Xketch 著重於原型設計階段，以畫筆指令產生對應元件後，可於 Storyboard 中編輯互動行為及檢視原型使用流程。受測者普遍認為整體操作簡單 易學，亦表示需要記憶的圖像以五個左右為佳，而實驗的觀察結果顯示：在設計 初期利用Xketch 以紙面原型的操作模式產出 Hi-fi 元件，易使受測者在初期過度 關注元件樣式。然而設計是一個漸進過程，設計初期應著重架構及流程規劃而非 調整視覺細節，因此如何以手繪操作模式進行數位原型設計，並且支援整個前期

之操作模式，但需要記憶的圖像太多時，容易造成記憶負擔。SILK 利用四種基 本線稿來進行組合以代表不同的元件，線稿之間以空間關係判斷，因此在限定 空間的狀況下容易產生誤判。設計師為了避免誤判產生可能需要花費更多心力 在繪製圖形上，因此導致使用者體驗下降。而UISKEI 雖可不考慮圖樣間的空 間關係，於已產生的元件上進行二次繪製來產生與父元件相關的子元件，二次 繪製的操作方式確實能夠改善圖形誤判的狀況。UISKEI 中繪製 button 後可於其 上進行第二次繪製，二次繪製所產生的元件，如：DropDown、SpinBox 以及 TextBox（圖 28）皆與 button 有形象或名稱上的相似之處，以便於設計師聯 想。然而桌上型網頁、行動app 之常用元件中有許多元件並無法形成此關聯性 且數量眾多，因此如和擴充以及記憶、使用，仍然是一個尚待研究的課題。

專注於行動app 原型迭代的 Xketch 則在繪製完成後即生成元件，避免了誤 判問題產生，並且依照iOS 提供的使用介面設計準則（“iOS Human Interface Guidelines: Designing for iOS,” 2014）各種元件的使用方式、限制與關聯，預先 將元件群組化以供設計師快速選擇使用，因此即使是資淺設計師也能設計出符