影像連結式的原型製作工具案例

國

立 政 治 大 學

‧

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 最大的特點莫過於提供了頁面之間的架構流程圖，這一功能讓設計師可 以更方便地與開發團隊說明原型的概念與期望的結果。