如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

@Akane_Lee ：很多項目在開發(fā)過程中，會制作原型測試與驗證構(gòu)想。但項目開發(fā)會經(jīng)過許多階段，也有很多種制原型的方式。該如何配合項目開發(fā)進度，制作適合的 原型呢？這篇文章列出了每一個設計階段對應的原型設計，能解決不少設計師的困惑。

原型用途

開發(fā)者對于產(chǎn)品一定有各式各樣的想法，并盡力讓用戶覺得產(chǎn)品「好用」。但開發(fā)者該如何確定目前產(chǎn)品設計走向能讓用戶覺得好用？可透過「使用者測試」這個方法驗證。我們可以透過原型測試用戶想透過產(chǎn)品完成某項任務時，需經(jīng)過哪些頁面的流程；觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。

有些文獻將原型分成低保真、高保真等等。我將原型粗分成：

1. 紙本 原型
2. Wireframe
3. Mockup
4. Web
5. Code

每一種 原型 用途、制作方法、成本、使用時機都不相同，各有利弊。

紙本原型

最快速的原型制作方式，只需要紙筆即可完成，不需要經(jīng)過耗時的專業(yè)訓練即可上手。只要在紙上繪制簡單的 Wireframe （線框圖）就能進行使用者測試。

要制作紙本 原型，需先考慮用戶想操作產(chǎn)品完成某一任務時會經(jīng)過的所有頁面，繪制簡易 Wireframe。

使用時機

• 項目初期，已確定功能，尚未正式開始繪制 Wireframe 文件時
• 適合內(nèi)部討論。

優(yōu)點

• 制作成本低
• 制作容易、速度快
• 修改方便
• 產(chǎn)品開發(fā)初期就能確認操作流程，在尚未投入大量人力進行開發(fā)前實時修改設計

缺點

• 失真嚴重，和最后上架產(chǎn)品落差極大
• 用戶操作紙本原型和操作電子產(chǎn)品感受和習慣完全不同
• 使用者有可能看不懂 Wireframe

這是我最少使用的制作原型方式，雖然只要紙、筆、便利貼…等文具就可以完成，但和最終產(chǎn)品落差太大，主要拿來測試 Wireframe 內(nèi)容版面配置、檢查有沒有漏頁面。

或者是和 PM 或 RD 討論過程中各執(zhí)一詞僵持不下時，為了說服他人而制作的簡易 原型，開發(fā)團隊內(nèi)部討論使用。但也和實際手機或網(wǎng)站上操作落差太大，效果不佳。

UI Stencils | iPhone Stencil Kit 這間公司提供很炫的金屬樣板，包含 iOS、Android、Web 等等，可以手繪出漂亮整齊的 Wireframe 。不見得好用，但擺在桌上看起來就很專業(yè)。我手上的是第一代，目前樣板已經(jīng)更新很多次版本了。

Wireframe

因為用戶操作紙本 原型 和操作電子產(chǎn)品感受和習慣完全不同，保留快速制作 原型 的優(yōu)點，改善操作落差極大的缺點，延伸出這種制作原型的方式：

1. 繪制紙本 Wireframe
2. 拍照
3. 在照片上設定觸控范圍、Link

使用時機

• 項目初期，已確定功能，尚未正式開始繪制Wireframe文件時。
• 適合內(nèi)部討論，或和有經(jīng)驗的客戶溝通。

優(yōu)點

• 改善用戶操作，紙本原型和操作電子產(chǎn)品感受和習慣完全不同
• 制作成本低、容易、速度快
• 修改還算方便
• 產(chǎn)品開發(fā)初期就能確認操作流程，在尚未投入大量人力進行開發(fā)前實時修改設計

缺點

• 失真嚴重，和最后上架產(chǎn)品落差極大
• 和真實使用者情境幾乎不同
• 使用者有可能看不懂 Wireframe

真要拿手繪 Wireframe 制作 原型，我會使用 POP – Prototyping on Paper，可以在極短時間內(nèi)將手繪紙本 Wireframe 制作成可操作的 原型。減少紙本和電子產(chǎn)品在操作上的落差，盡量接近實際使用情境。

我大多拿來測試「單一任務」的操作流程，不會把整個產(chǎn)品都做成 原型，頁面太多管理不易，要修改也麻煩。

手繪 Wireframe 等級的原型我都不會當成是正式測試，頂多拿來確定「這樣做用戶能夠順利完成任務嗎」，和最后產(chǎn)品落差實在太大。而且就算是信息公司，主管、老板、甚至開發(fā)團隊里看不懂 Wireframe 的人也是有，看不懂也沒辦法拿這個和對方溝通討論。

早期經(jīng)驗不足時，會依賴這種作法來驗證自己的設計，幾年下來會發(fā)現(xiàn)工具型 App 界面大同小異、操作方式就那幾套。除非是游戲類、創(chuàng)新/找不到參考的界面設計，不然我不會制作 Wireframe 等級的原型。

Mockup

許多使用者看不懂 Wireframe，直到 Mockup 階段才能理解。若要對外部進行使用者測試，原型盡量拿接近最終發(fā)布的產(chǎn)品，得到的結(jié)果較精準。

使用時機

• 已確定 Wireframe，需要測試視覺設計對用戶的影響時。
• 外部測試最基本的 原型 樣式。

優(yōu)點

• 擬真度高，接近最終發(fā)表產(chǎn)品。
• 使用者容易理解
• 可測試視覺設計對用戶的影響。

缺點

• 修改較麻煩
• 只能驗證預期內(nèi)的操作任務
• 和最終產(chǎn)品仍有落差
• 當使用者有預料外的操作時無法反應

現(xiàn)況我最常做的 原型 是這類型，用 Mockup 制作出來的 原型 不管對內(nèi)或?qū)ν猓褂谜叨伎吹枚?/span>

目前業(yè)界不少人制作 Mockup 等級的 原型 時，會使用 InVision，簡易快速易上手，且支持團隊協(xié)作。可免費試用，對于初次接觸 原型 的開發(fā)者來說，短短時間就能做出有模有樣的 原型。

雖然 Mockup 等級的 原型 沒辦法確認程序數(shù)據(jù)面的狀況、也沒辦法測試當使用者操作不是按照規(guī)劃預期時產(chǎn)品如何反應，但就以視覺設計、內(nèi)容排版、操作易用性來說，Mockup 等級的 原型 算是不需要動用工程師撰寫程序，只需要設計師執(zhí)行、成本較低的 原型 制作方式了。

Web

介于 Mockup 和程序制作間，靜態(tài) HTML，尚未套后臺串數(shù)據(jù)庫，使用假數(shù)據(jù)。能測試動態(tài)效果對用戶的影響。

使用時機

• 已確認 Mockup
• 需確認動態(tài)效果對用戶的影響

優(yōu)點

• 有數(shù)值的動態(tài)效果，供開發(fā)者參考
• 比 Mockup 更精準的 原型
• 可掛 GA 讓外部使用者進行封測、收集數(shù)據(jù)

缺點

• 開發(fā)時間較長
• 專業(yè)技術(shù)需求較高
• 修改不易

幾乎只要動用到工程師寫程序，制作成本就會提高，Hype3 能讓設計師不用寫程序代碼就產(chǎn)出 HTML、CSS、JS，功能強大、容易上手、支持中文界面。是我愛用的工具軟件，尤其在制作動畫效果，配合時間軸和場景、對象等，可以在短時間內(nèi)做出假以亂真的 原型。

如果要測試動態(tài)效果，限度的 原型 要做到 Web 這個等級。順帶一提，Hype3 的物理引擎非常有趣，不在意產(chǎn)出的程序代碼和效能的話，做簡單的小游戲很有意思，單純拿來做 原型 有點大材小用了。

1. 《無代碼做動效神器Hype3入門教程》
2. 《教你用HYPE3做APP原型的基礎過場（附神器）》
3. 《教你用HYPE無代碼制作PATH扇形菜單動畫》

Code

離上架產(chǎn)品只差一步，已套程序數(shù)據(jù)庫。到這一步再來測「好不好用」已經(jīng)來不及了，真要修改勞師動眾。在這階段要測的是各種「錯誤」，比如使用者操作錯誤；GPS、Wifi 不通時產(chǎn)品怎么響應用戶等等，還有程序 Bug。

使用時機

• 產(chǎn)品上架前的最后測試

優(yōu)點

• 幾近于最終產(chǎn)品，測試結(jié)果最貼近上架后的使用者反應

缺點

• 開發(fā)時間最長，成本高
• 專業(yè)技術(shù)需求較高
• 修改不易

無論是 Wireframe、Mockup、Web 產(chǎn)出的 原型，都沒辦法完整檢視整個產(chǎn)品。只有到了程序代碼階段、工程師套好程序串數(shù)據(jù)庫，才能測試產(chǎn)品各個面向?qū)κ褂谜卟僮魃系挠绊憽?/span>

動用人力多、成本極高，一旦發(fā)現(xiàn)問題要修改會燒更多錢，但每個產(chǎn)品上架前最好都要經(jīng)過這個步驟。

結(jié)語

原型 是拿來驗證、找出問題的方法，不是有做就能保平安。原型 只能告訴你問題在哪，不會告訴你問題怎么解決。

不管是什么樣子的 原型、修改再多次，產(chǎn)品上架后一定會有更多出乎意料的各種狀況。公開發(fā)布前有先做 原型 測試，起碼開發(fā)團隊知道問題出在哪、有機會改善它。不做 原型 就直接上架，產(chǎn)品的問題在哪就是由使用者透過一星評價或客訴來告訴你了。

藍藍設計( m.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務