先期專家訪談

查，理解該類型 app 可能的功能以便確立建立工作清單（Functional Map）做為 原型的架構。當完成工作清單的條列後，則會利用各種設計資源，如：Pinterest、

Behance 等等尋找常見的頁面佈局（圖 5），並以手繪方式建構原型。兩位設計師 在進行原型設計的任務當中，一致選擇了手繪作為主要的原型設計方式，並且認 為：雖後續仍會進入各種慣用工具進行數位原型的設計，但若要快速建置可討論 的原型，手繪仍為首選。

圖 5 受訪設計師參考 Pinterest 上的設計資源

圖 6 受訪設計師在白板上 手繪行動app 介面

圖 7 受訪設計師完成的紙面原型設計

設計師在繪製過程初期會先利用許多意義不明確的線段、矩形，大致區分出 介面佈局後，再以其他顏色標註該線稿意義為何（圖7）。除了利用簡單的線段代 表文字、矩形表示圖片外，本創作觀察到設計師會繪製較精細的圖示，以代表特 定的操作行為，如：以推車的圖示代表購物app 中的購物車功能，或以人像表示 會員資料等等。完成手繪介面設計後，設計師將依照專案需求的不同，選擇不同 的數位工具設計數位原型。

表格 2 圖形與其代表的功能或元件

相對應關係，完成構思後方執行極為短暫的繪製過程。若有修改的需求，設計師 則會於上述構思的過程同時擦除物件，完成後即可進行下一階段的繪製（圖8）。

圖 8 線稿式工具與元件、圖層式工具構思比較圖

元件式數位工具為了能夠將設計師的思緒逐一轉換為實際的操作指令，因此 產生了使用數位工具的五個階段：構思概念、選擇工具、產生物件、調整物件、

刪除物件。設計師先在腦中構思欲繪製的物件種類、位置、尺寸及外觀後，選擇 工具產生物件再利用物件的屬性來調整物件大小、位置及外觀等視覺樣式。

在建構原型的過程中以手繪或者數位工具來產生物件，兩者的操作方式有相 當大的不同（圖8）。手繪的過程中，在構思階段設計師已完成種類、位置、大小、

樣式的構思，因此繪製物件所花費時間佔整體時間較少。若需要重製物件，設計 師腦中可同時進行下一階段的概念構思。在使用數位工具的產生物件過程中，系 統會依照選擇的工具來產生制式的物件，再藉由物件的屬性來逐步調整成理想的 佈局，而期間設計師的思緒將因工具所提供的操作模式而切分成多段，且由構思、

繪製、調整或刪除再到構思，數位工具完成一次循環的時間較手繪工具長，因此

創新性高的發想期間，設計師偏好採取手繪方式進行。

因此相較於其他類型的原型設計工具，手繪模式操作的線稿式原型設計工具

（Sketch-Based Prototyping Tools）更能順暢銜接構思過程，並將低擬真原型轉換 為中、高擬真原型。過去有許多線稿式工具如：提供Mac 平台視窗應用程式的原 型設計工具SILK（Landay, 1996）、UISKEI（Segura, Barbosa, & Simões, 2012）以 及提供行動app 原型設計工具的 Xketch（徐嘉駿，2014）等等。前述之研究已逐 步拓展筆畫產生元件的可能性，但截至目前為止，多數線稿式設計工具所能產生 的元件相當有限，且使用者能夠記憶的筆畫數量有限（約為 5 個），因此如何以 線稿式工具提升原型設計的使用者體驗仍然有待開發。