2.1 線稿式設計
2.1.2 線稿式設計工具
Herbsleb 的研究中指出設計師非常依賴在紙面草圖上的註解與設計更動記錄 (Herbsleb & Kuwana, 1993)
Goel 將設計分為四個階段：問題結構化、初步設計、改進和細節；即是歸 的設定(Vinod Goel, 1995)。Newman 的研究中則表示設計師將會在某個時刻，將 手繪草稿透過如illustrator 或 photoshop 之類的數位化工具，將其重新創建並轉換 為數位形式，而轉換之後除了在草稿上的文字註記外，草稿本身就已經失去用途 (Newman, Lin, Hong, & Landay, 2003)。
在過去的研究中(Coyette, Faulkner, Kolp, Limbourg, & Vanderdonckt, 2004;
Walker, Takayama, & Landay, 2002)，也證明了線稿式設計擁有以下的特色：它沒 有限於某種的表達方式，設計師可以嘗試各式不同設計的可能性，手繪草稿與數
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
稿圖樣作為生成元件的筆畫指令，其設計規則與使用方式之相關研究。
SILK（Sketching Interfaces Like Krazy）
圖 15 SILK 從線稿模式到執行模式 資料來源：Landay & Myers, 1995
Landay 在研究中明確指出設計師偏好使用紙筆素描設計原型，但此方式製 作的原型卻有不易重複修改設計與測試的缺點。為了延續設計師偏好的設計方式，
結合數位化工具在元件編輯與可重複使用性較佳的優勢，開發了一款適用於設計 初期並運行於Windows 平台針對視窗應用程式的原型設計工具「SILK」；設計 師可透過繪製線稿圖樣的方式生成元件，SILK 會根據圖樣之間的形象或空間判 定最有可能的元件類型（圖16）(Landay & Myers, 1995)。Landay 也是首位提出 上述之設計規則的研究者。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 16 SILK 圖樣辨識機制的流程 資料來源：Landay & Myers, 1995
設計師除了利用SILK 繪製線稿圖樣做介面設計以外，也可透過 Storyboard 設定原型的使用流程。SILK 的操作主要由四個視窗（圖 17）構成，：
l Storyboard：可觀看整個原型的使用流程，在兩頁面間繪製箭頭即可設 定換頁的操作行為。
l Sketch：供設計師進行線稿式設計的視窗。
l Controls：負責切換線稿元件的狀態（Sketch、Run、Annotate、Decorate），
並顯示辨識線稿（Primitive Type）所組成的真實元件類型（Widget Type）。
l Finished：透過 Transfrom 將元件的線稿模式轉為真實元件的樣式。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 17 SILK 的四個操作視窗（Storyboard、Sketch、Controls、Finished）
資料來源：Landay & Myers, 1995
Controls Window 是 SILK 中最核心的部分，它可以隨時切換選取元件的狀 態，Sketch Mode 是線稿設計階段使用的，Run Mode 提供以目前元件的樣式（線 稿或真實）進行測試操作的功能，Annotate Mode 為設計說明時用的註解模式，
Decorate Mode 是讓元件可以進行客製化的設定。
從研究結果得知，設計師對於SILK 這個原型設計工具抱持正面的回饋，尤 其是SILK 的筆畫指令是基於象形與空間的關聯所構成，也是延續紙面原型的設 計行為模式。此外，可以隨時將元件轉為線稿或真實元件的樣式，以及透過 Storyboard 即可建立頁面連結是方便且有助於設計架構與討論，這些都是設計師 所喜好的功能。不過SILK 仍有些許值得改進的部分。例如：SILK 受限於當時 演算法的發展，僅能支援一筆畫的圖樣辨識機制，由於SILK 並不是畫完線稿即 生成元件，而會根據圖樣間與空間的關聯隨時地變動判定生成的元件類型；如圖 18 所示，系統會不知道要生成的元件是 Check-Box 或 TextField。事實上，上述
‧
之舉例系統是會判定成Check-Box，因為 SILK 是以第一個生成的元件類型優先 判定，此時若設計師想要的是TextField，須先選取已生成的 Check-Box，然後按 下“New Guess”，才可修正為 TextField 類型。
圖 18 系統辨識錯誤的案例 資料來源：Landay & Myers, 1995
UISKEI（User Interface Sketching and Evaluation Instrument）
圖 19 未辨識的筆畫圖樣轉換成元件，與行為定義說明圖 資料來源：Segura, Barbosa, & Simões, 2012
「UISKEI」是一套以觸控筆操作為主的原型設計工具，透過繪製線稿圖樣 以生成元件（圖19），除了判別線稿圖樣決定元件類型以外，圖樣的尺寸差異 也會影響到生成的元件類型，像是小矩形是Checkbox，大矩形是 Panel，其特別 之處在於可以進行第二階段的線稿圖樣編輯，以達到切換元件類型的效果，並可 透過邏輯判斷的陳述式自行定義元件的操作行為（Event、Condition、Action , ECA）
(Segura et al., 2012)。此研究注重在快速生成元件與建立行為邏輯，僅能使用系 統預設的元件樣式。因此，當需要較為客製化的元件樣式時，UISKEI 則稍嫌功 能不足；但受測的設計師對於UISKEI 結合筆與線稿的應用仍抱持正面的評價。
‧
(“iOS Human Interface Guidelines: Designing for iOS,” 2014)中各式元件生成條件 的限制與關聯，預先將元件群組化以供設計師快速切換圖樣對應到的元件類型，即使是經驗較少的設計師也能作出符合設計準則的佈局樣式。
2.2 App 原型製作的案例探討
在現有App 應用程式開發專用的原型製作工具中，主要可分為影像連結式
（Linking Images）與元件產生器（UI Builder）這兩種風格的工具。前者注重於
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
將紙面原型掃描成影像後建立頁面連結，以快速做出互動式原型並改善原先紙面 原型的使用體驗；後者提供豐富的元件庫並可從中選取元件加入頁面，可製作較 客製化的元件樣式，提供較為一致的介面風格。本節將列出市面上常見的原型製 作工具，作為本研究系統設計之參考。
2.2.1 影像連結式的原型製作工具案例
POP
POP 是一款協助設計師快速將紙面原型轉置到互動式原型的 App。設計師只 需透過POP 建立專案後匯入圖片，再設定圖片之間的連結切換樣式與手勢，即 可快速地建立Lo-fi 原型讓測試者進行實機模擬或以網址的方式分享給其他人使 用，點擊畫面時會出現操作提示，讓測試者不需要有人在一旁引導也可使用。
圖 20 POP 透過掃描草稿連結各個頁面 資料來源：https://popapp.in/
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y FileSquare
FileSquare 則是一款讓設計師在網站中建立專案與上傳圖片的服務，可以設 定頁面轉換時的目的地與動畫，當透過網站設定好專案之後，可以透過線上預覽 或手機的App 直接進行專案功能展示；特別的是，FileSquare 提供了團隊中的協 同創作與新增備註的功能，讓團隊進行原型設計時可以保留足夠彈性的討論與修 改空間。
圖 21 FileSquare 透過網站服務設定專案並進行模擬 資料來源：https://itunes.apple.com/hk/app/filesq/id578218260
Concept.ly
Concept.ly 是 Yodiz 推出的一款原型設計工具，同時提供了網站服務與 App 供設計師進行原型製作。除了具備影像連結的功能外，特別注重於記錄使用回饋 的功能，設計者或受測者都可以直接在頁面上選取一個範圍進行回報，並提供了
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
註解、建議、問題、想法四個分類選擇。此外，不同於其他案例的分享功能，它 提供了分享整個App 與分享獨立頁面的兩種選擇，前者可以專注於 App 整體使 用流程體驗外，後者可以針對特定的頁面或功能進行測試與改良。
圖 22 Concept.ly 的 App 編輯與使用者回饋畫面 資料來源：http://concept.ly/
整體而言，影像連結式的原型本質上其實還是屬於Lo-fi 原型，只是將其掃 描數位化後進行連結，並改善Lo-fi 原型於測試階段的體驗；Lo-fi 原型需要有受 測者、主持者、電腦、觀察者這四個角色，當每個頁面影像都被連結在一起時，
在功能層面就相當於是Hi-fi 原型（取代扮演電腦角色的人），並透過操作提示 的輔助，讓受測者可以自行在行動裝置上操作原型。但是在修改原型較為不方便，
因為當頁面有做調整時，就必須重新匯入一次頁面圖檔，並重新設定頁面連結。
圖 23 影像連結式工具的使用流程（本研究整理）
‧
Blueprint
Blueprint 是由 Groosoft 團隊在 2010 年所開發，特別針對 iOS 平台設計的原 型製作工具，它提供許多iOS 原生的元件給設計師使用，而元件圖形化的表示法 可幫助設計師更直覺地使用，並以拖曳方式新增至頁面。並可以透過動作（Action）
設定對應的事件或行為，與其他的頁面進行連結，元件的手繪模式可讓設計師做 一些元件額外的設計修改或說明；專案設計完時，可以透過E-mail、DropBox、
iTunes 匯出成 Blueprint 專有格式、PDF 或圖片，若匯出為 Blueprint 時可以透過 另一個App : Blueprint Viewer 進行開啟與進行原型測試，並回報使用心得。而整 個App 最大的特點莫過於提供了頁面之間的架構流程圖，這一功能讓設計師可 以更方便地與開發團隊說明原型的概念與期望的結果。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 24 Blueprint 提供 iOS 元件樣式，並透過 Storyboard 連接各個頁面 資料來源：https://itunes.apple.com/us/app/blueprint-ios-mockup/id405203705?mt=8
Mockups.me Wireframes
Mockups.me Wireframes 是一款將元件用偏手繪風格呈現的原型製作工具，
也因為如此它所提供的元件樣式並不會被行動裝置平台限制，元件的設計原則是 以常用的樣式當作群組元件（Group Component），甚至還有支援到圖表的樣式，
再透過屬性設定元件的文字、數量、條件等…⋯…⋯。
相較於其他元件模式的原型製作工具，它是先選取元件再透過選取範圍的方 式將元件放置到頁面中，並根據選取範圍設定其預設大小；除此之外，其提供了
“Sketch Mode”可辨識使用者繪製的圖樣，產生出對應的元件，其缺點是圖樣 與元件對應關係並不直覺，需要額外記憶這些圖樣，且繪製的位置並不等同元件 產生的位置，使得設計師必須多做一個調整的步驟。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 25 Mockups.me 以 Wireframe 方式呈現，可透過 Stroke Gesture 產生元件 資料來源：https://itunes.apple.com/us/app/mockups.me-wireframes/id473617271?ls=1&mt=8
EzoApp
EZoApp 是中冠資訊與華碩合作開發的一個前端 UI 設計工具，以 jQuery Mobile Component 為基礎，適合開發行動裝置上的行動應用，以純 HTML5 輸出 原型將不受限於行動裝置的作業系統。目前可以透過網路服務JQMdesigner 讓設 計師可以在線上直接以拖曳的方式將元件加入，並同時於右側可以觀看到HTML、
Javascript 和 CSS 的語法已進行進一步的設定，也可透過開發團隊持續在新增額 外元件庫中使用圖表、內嵌YouTube 和 Google Map 等…⋯…⋯。
開發完畢之後可透過EZoApp LiveView 掃描 QRCode 直接在行動裝置上測 試，亦或者輸出HTML 程式碼跟產出 Android APK 檔供人測試。而以 Web 為基
開發完畢之後可透過EZoApp LiveView 掃描 QRCode 直接在行動裝置上測 試，亦或者輸出HTML 程式碼跟產出 Android APK 檔供人測試。而以 Web 為基