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

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

原型用途

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

有些文獻(xiàn)將原型分成低保真、高保真等等。我將原型粗分成：

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

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

紙本原型

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

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

使用時(shí)機(jī)

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

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

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

Wireframe

因?yàn)橛脩舨僮骷埍?原型 和操作電子產(chǎn)品感受和習(xí)慣完全不同，保留快速制作 原型 的優(yōu)點(diǎn)，改善操作落差極大的缺點(diǎn)，延伸出這種制作原型的方式：

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

使用時(shí)機(jī)

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

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

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

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

Mockup

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

使用時(shí)機(jī)

• 已確定 Wireframe，需要測(cè)試視覺(jué)設(shè)計(jì)對(duì)用戶的影響時(shí)。
• 外部測(cè)試最基本的 原型 樣式。

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

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

雖然 Mockup 等級(jí)的 原型 沒(méi)辦法確認(rèn)程序數(shù)據(jù)面的狀況、也沒(méi)辦法測(cè)試當(dāng)使用者操作不是按照規(guī)劃預(yù)期時(shí)產(chǎn)品如何反應(yīng)，但就以視覺(jué)設(shè)計(jì)、內(nèi)容排版、操作易用性來(lái)說(shuō)，Mockup 等級(jí)的 原型 算是不需要?jiǎng)佑霉こ處熥珜懗绦颍恍枰O(shè)計(jì)師執(zhí)行、成本較低的 原型 制作方式了。

Web

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

使用時(shí)機(jī)

• 已確認(rèn) Mockup
• 需確認(rèn)動(dòng)態(tài)效果對(duì)用戶的影響

優(yōu)點(diǎn)

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

缺點(diǎn)

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

幾乎只要?jiǎng)佑玫焦こ處煂懗绦颍谱鞒杀揪蜁?huì)提高，Hype3 能讓設(shè)計(jì)師不用寫程序代碼就產(chǎn)出 HTML、CSS、JS，功能強(qiáng)大、容易上手、支持中文界面。是我愛(ài)用的工具軟件，尤其在制作動(dòng)畫(huà)效果，配合時(shí)間軸和場(chǎng)景、對(duì)象等，可以在短時(shí)間內(nèi)做出假以亂真的 原型。

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

1. 《無(wú)代碼做動(dòng)效神器Hype3入門教程》
2. 《教你用HYPE3做APP原型的基礎(chǔ)過(guò)場(chǎng)（附神器）》
3. 《教你用HYPE無(wú)代碼制作PATH扇形菜單動(dòng)畫(huà)》

Code

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

使用時(shí)機(jī)

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

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

結(jié)語(yǔ)

原型 是拿來(lái)驗(yàn)證、找出問(wèn)題的方法，不是有做就能保平安。原型 只能告訴你問(wèn)題在哪，不會(huì)告訴你問(wèn)題怎么解決。

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

藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)