本文同步刊登於 NTUChallenge Blog 挑戰誌
很多專案在開發過程中，會製作 Prototype（原型）測試與驗證構想。專案開發會經過許多階段，也有很多種製作 Prototype 的方式。該如何配合專案開發進度，製作適合的 Prototype？
Prototype 用途
開發者對於產品一定有各式各樣的想法，並盡力讓使用者覺得產品「好用」。但開發者該如何確定目前產品設計走向能讓使用者覺得好用？可透過「使用者測試」這個方法驗證。我們可以透過 Prototype
測試使用者想透過產品完成某項任務時，需經過哪些頁面的流程；觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。
有些文獻將，Prototype（原型）分成低保真、高保真等等。我將 Prtotype 粗分成：
- 紙本 Prototype
- Wireframe
- Mockup
- Web
- Code
每一種 Prototpye 用途、製作方法、成本、使用時機都不相同，各有利弊。
紙本 Prototype
最快速的 Prototype 製作方式，只需要紙筆即可完成，不需要經過耗時的專業訓練即可上手。只要在紙上繪製簡單的 Wireframe （線框圖）就能進行使用者測試。
要製作紙本 Prototype，需先考慮使用者想操作產品完成某一任務時會經過的所有頁面，繪製簡易 Wireframe。
使用時機
- 專案初期，已確定功能，尚未正式開始繪製 Wireframe 文件時
- 適合內部討論。
優點
- 製作成本低
- 製作容易、速度快
- 修改方便
- 產品開發初期就能確認操作流程，在尚未投入大量人力進行開發前即時修改設計
缺點
- 失真嚴重，和最後上架產品落差極大
- 使用者操作紙本 Prototype 和操作電子產品感受和習慣完全不同
- 使用者有可能看不懂 Wireframe
這是我最少使用的製作 Prototype 方式，雖然只要紙、筆、便利貼…等文具就可以完成，但和最終產品落差太大，主要拿來測試 Wireframe 內容版面配置、檢查有沒有漏頁面。
或者是和 PM 或 RD 討論過程中各執一詞僵持不下時，為了說服他人而製作的簡易 Prototype，開發團隊內部討論使用。但也和實際手機或網站上操作落差太大，效果不佳。
UI Stencils | iPhone Stencil Kit 這間公司提供很炫的金屬樣板，包含 iOS、Android、Web 等等，可以手繪出漂亮整齊的 Wireframe 。不見得好用，但擺在桌上看起來就很專業。我手上的是第一代，目前樣板已經更新很多次版本了。
Wireframe
因為使用者操作紙本 Prototype 和操作電子產品感受和習慣完全不同，保留快速製作 Prototype 的優點，改善操作落差極大的缺點，延伸出這種製作 Prototype 的方式：
- 繪製紙本 Wireframe
- 拍照
- 在照片上設定觸控範圍、Link
使用時機
- 專案初期，已確定功能，尚未正式開始繪製 Wireframe 文件時。
- 適合內部討論，或和有經驗的客戶溝通。
優點
- 改善使用者操作紙本 Prototype 和操作電子產品感受和習慣完全不同
- 製作成本低、容易、速度快
- 修改還算方便
- 產品開發初期就能確認操作流程，在尚未投入大量人力進行開發前即時修改設計
缺點
- 失真嚴重，和最後上架產品落差極大
- 和真實使用者情境幾乎不同
- 使用者有可能看不懂 Wireframe
真要拿手繪 Wireframe 製作 Prototype，我會使用 POP - Prototyping on Paper ，可以在極短時間內將手繪紙本 Wireframe 製作成可操作的 Prototype。減少紙本和電子產品在操作上的落差，盡量接近實際使用情境。
我大多拿來測試「單一任務」的操作流程，不會把整個產品都做成 Prototype，頁面太多管理不易，要修改也麻煩。
手繪 Wireframe 等級的 Prototype 我都不會當成是正式測試，頂多拿來確定「這樣做使用者能夠順利完成任務嗎」，和最後產品落差實在太大。而且就算是資訊公司，主管、老闆、甚至開發團隊裡看不懂 Wireframe 的人也是有，看不懂也沒辦法拿這個和對方溝通討論。
早期經驗不足時，會依賴這種作法來驗證自己的設計，幾年下來會發現工具型 App 介面大同小異、操作方式就那幾套。除非是遊戲類、創新/找不到參考的介面設計，不然我不會製作 Wireframe 等級的 Prototype。
Mockup
許多使用者看不懂 Wireframe，直到 Mockup 階段才能理解。若要對外部進行使用者測試，Prototype 盡量拿接近最終發佈的產品，得到的結果較精準。
使用時機
- 已確定 Wireframe，需要測試視覺設計對使用者的影響時。
- 外部測試最基本的 Prototype 樣式。
優點
- 擬真度高，接近最終發表產品。
- 使用者容易理解
- 可測試視覺設計對使用者的影響。
缺點
- 修改較麻煩
- 只能驗證預期內的操作任務
- 和最終產品仍有落差
- 當使用者有預料外的操作時無法反應
現況我最常做的 Prototype 是這類型，用 Mockup 製作出來的 Prototype 不管對內或對外，使用者都看得懂。
目前業界不少人製作 Mockup 等級的 Prototype 時，會使用 InVision ，簡易快速易上手，且支援團隊協作。可免費試用，對於初次接觸 Prototype 的開發者來說，短短時間就能做出有模有樣的 Prototype。
雖然 Mockup 等級的 Prototype 沒辦法確認程式資料面的狀況、也沒辦法測試當使用者操作不是按照規劃預期時產品如何反應，但就以視覺設計、內容排版、操作易用性來說，Mockup 等級的 Prototype 算是不需要動用工程師撰寫程式，只需要設計師執行、成本較低的 Prototype 製作方式了。
Web
介於 Mockup 和程式製作間，靜態 HTML，尚未套後台串資料庫，使用假資料。能測試動態效果對使用者的影響。
使用時機
- 已確認 Mockup
- 需確認動態效果對使用者的影響
優點
- 有數值的動態效果，供開發者參考
- 比 Mockup 更精準的 Prototype
- 可掛 GA 讓外部使用者進行封測、收集數據
缺點
- 開發時間較長
- 專業技術需求較高
- 修改不易
幾乎只要動用到工程師寫程式，製作成本就會提高，Hype3 能讓設計師不用寫程式碼就產出 HTML、CSS、JS，功能強大、容易上手、支援中文介面。是我愛用的工具軟體，尤其在製作動畫效果，配合時間軸和場景、物件等，可以在短時間內做出假以亂真的 Prototype。
如果要測試動態效果，最低限度的 Prototype 要做到 Web 這個等級。順帶一提，Hype3 的物理引擎非常有趣，不在意產出的程式碼和效能的話，做簡單的小遊戲很有意思，單純拿來做 Prototype 有點大材小用了。
Code
離上架產品只差一步，已套程式資料庫。到這一步再來測「好不好用」已經來不及了，真要修改勞師動眾。在這階段要測的是各種「錯誤」，比如使用者操作錯誤；GPS、Wifi 不通時產品怎麼回應使用者等等，還有程式 Bug。
使用時機
- 產品上架前的最後測試
優點
- 幾近於最終產品，測試結果最貼近上架後的使用者反應
缺點
- 開發時間最長，成本高
- 專業技術需求較高
- 修改不易
無論是 Wireframe、Mockup、Web 產出的 Prototype，都沒辦法完整檢視整個產品。只有到了程式碼階段、工程師套好程式串資料庫，才能測試產品各個面向對使用者操作上的影響。
動用人力多、成本極高，一旦發現問題要修改會燒更多錢，但每個產品上架前最好都要經過這個步驟。
結語
Prototype 是拿來驗證、找出問題的方法，不是有做就能保平安。Prototype 只能告訴你問題在哪，不會告訴你問題怎麼解決。
不管是什麼樣子的 Prototype、修改再多次，產品上架後一定會有更多出乎意料的各種狀況。公開發佈前有先做 Prototype 測試，起碼開發團隊知道問題出在哪、有機會改善它。不做 Prototype 就直接上架，產品的問題在哪就是由使用者透過一星評價或客訴來告訴你了。
