國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
二、數位原型
由專家訪談中得知，設計師進行原型設計時可分為三階段：（一）以紙筆繪 製主要功能，採紙面原型進行產品概念測試、（二）使用數位工具建構可點擊的 線稿原型（Clickable Wireframe），進行功能流程測試、（三）製作接近真實成品 樣貌以及互動細節的高擬真度原型，進行使用者體驗測試。現有數位原型工具繁 多，本研究將此分為「影像連結式」、「元件產生式」、「線稿式」三類，前兩 類於本節介紹，第三類「線稿式」於第三節簡介。
1. 影像連結式原型設計工具（Image-Based Prototyping Tool）
圖 25 匯入圖檔、框選觸發區域、建立頁面連結式意圖（取自於 POP 編輯畫面）
主要目的是將草圖製作成可點擊的線稿原型（Clickable Wireframe）。在工 具上匯入圖片後，透過在影像上框選觸發區域、建立頁面連結、設定切換動畫，
來模擬行動應用程式運作，其影像可能是手繪稿照片或是平面設計工具製成的圖 檔，由於這類原型工具只能在影像上設立連結，若要修改原型版面內容較不方便，
需重新匯入更新影像，並再次設定觸發區域、轉換頁面及切換動畫。
圖 26 影像連結式工具的使用流程（本研究整理）
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
在此以常用的影像連結式原型設計工具——「Marvel」為例，如下圖呈現單 頁互動的製作流程。
（一）匯入已製作完畢的單頁互動影像。
圖 27 影像連結式原型設計工具匯入檔案（取至於 Marvel iOS version）
（二）點擊主頁面，進入後可新增連結，設定轉換頁面。
圖 28 影像連結式原型設計工具建立換頁連結（取至於 Marvel iOS version）
影像連結式原型設計工具以頁面為單位，因此模擬單頁互動需要分割成不同 頁面進行模擬，因此這類型工具在製作單頁動畫的效率較差。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
2. 元件產生式原型設計工具（Component-Based Prototyping Tool）
圖 29 左為平面設計導向（Adobe XD）、右為具備元件庫（Blueprint ）示意圖
設計師可 以在這類 原型工 具上直 接產生 介 面元件， 藉由設定 元件行為
（Action）轉換頁面，製作出可互動原型。其核心價值在「元件庫」，內含風格 一致的常用元件圖示以及常用的元件組合，相較以往使用圖形工具拼湊元件樣貌，
具備豐富的元件庫能大幅減輕設計師的負擔，但也較為要求介面設計的背景知識 和經驗，若設計師對於元件的認知不足，可能發生找不到所需元件的窘境 (徐嘉 駿, 2015)。
圖 30 元件產生式數位工具的使用流程（本研究整理）
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
在此以常用的元件產生式原型設計工具——「Adobe XD」為例，如下圖呈 現單頁互動的製作流程。
（一）以複製頁面堆疊圖層的方式製作單頁動畫，視元件為單位，建立轉頁連結。
圖 31 Adobe XD Prototype 模式之建立連結示意圖
（二）轉換連結建立完成。
圖 32 Adobe XD Prototype 模式之流程圖示意圖
Adobe XD 的頁面和元件都可以設定轉頁行為，能模擬更多種類的單頁互動，
這是影像連結式原型工具難以突破的限制，值得參考的是，流線型的線條、一致
性的鍵頭，美觀又便於掌握整體流程的走向。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
元件產生式原型工具—— Justinmind，製作單頁互動的方式上略有不同。此 工具最早應用於網頁原型的製作，設定元件行為的邏輯類似於網頁語言，透過將 彈出式介面隱藏，以設定顯示時機來模擬單頁互動，詳細說明如下：
下圖範例是刪除聯絡人的流程，透過「左滑」聯絡清單中的一人，便會「顯 示 」 刪除 警示 ，點 擊確 認 刪除 或取 消刪 除後 ， 該警 示便 會「 隱藏 」 。使 用 Justinmind 製作這一段單頁互動，需要在元件庫中找出矩形、相片、按鈕等元件，
組成刪除警示的彈跳介面，如圖 33 左所示。接著設定觸發元件，當使用者把聯絡 人往左滑，刪除警示便會「顯示」，點刪除/取消按鈕，刪除警示便會「隱藏」。
圖 33 左圖為 Justinmind 製作彈跳介面示意圖，右圖為設定單頁互動示意圖
Justinmind 將單頁互動視為圖層，透過控制圖層的顯示與否來模擬單頁互動，
值得學習的是，Justinmind 不必複製多個主畫面，然而測試前需要將彈跳介面先 予以隱藏，這部分操作較不直觀。此外，元件庫項目多元雜亂，不易尋找。