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