編者按：一個(gè)產(chǎn)品從概念到成為現(xiàn)實(shí)，實(shí)際制作的過(guò)程是很麻煩的。所以，如果你想做好自己的產(chǎn)品，就要學(xué)會(huì)將點(diǎn)子做成原型，得到他人反饋，重復(fù)這個(gè)過(guò)程，對(duì)于完善設(shè)計(jì)很有益處。這也是用戶設(shè)計(jì)師工作的一個(gè)重要部分。本文編譯自medium的原題為“A Beginner’s Guide to Rapid Prototyping”的文章。

 

 

產(chǎn)品原型有很多種形式，可能是畫(huà)在草稿紙上的粗略草圖，也可能是對(duì)最終產(chǎn)品的交互式模擬。本文是為了想了解產(chǎn)品原型的小白而寫(xiě)。

我將提到幾個(gè)與快速制造原型相關(guān)的術(shù)語(yǔ)，以及解決以下的問(wèn)題。

快速制造原型入門

快速制造原型是什么?

制作原型需要什么?

快速制作原型的過(guò)程

原型應(yīng)該在多大程度上體現(xiàn)產(chǎn)品?

原型的精確度指的是什么?

如何選擇制作原型的工具?

原型如何做到最好：可行與不可行的做法

快速制作原型是什么?

快速制作原型是指一個(gè)重復(fù)性的過(guò)程，用來(lái)將網(wǎng)站或應(yīng)用的樣子視覺(jué)化，從而得到用戶、利益相關(guān)者、開(kāi)發(fā)者和設(shè)計(jì)師的反饋和認(rèn)可。

如果做得好，快速制造原型可以提高你的設(shè)計(jì)質(zhì)量，因?yàn)檫@個(gè)過(guò)程可以加強(qiáng)不同方面的溝通，減少有人不喜歡最終產(chǎn)品的風(fēng)險(xiǎn)。

制作原型需要什么?

設(shè)計(jì)一個(gè)產(chǎn)品原型的目的，不是為了做出完全功能版的系統(tǒng)，完全是出于視覺(jué)化的目的，看到呈現(xiàn)在用戶面前的最終產(chǎn)品的樣子。正如GV(谷歌風(fēng)投)的設(shè)計(jì)合伙人博卡(Daniel Burka)說(shuō)：

“理想的原型應(yīng)該是有著‘金發(fā)姑娘般的質(zhì)量’。如果質(zhì)量太差，那沒(méi)人會(huì)相信原型是真的產(chǎn)品。如果質(zhì)量太好，那你就得沒(méi)日沒(méi)夜地干，而且你還做不完。你要的就是‘金發(fā)姑娘’般 的質(zhì)量，不太好，不太壞，足夠好就行了。”

 

 

“金發(fā)姑娘原則”源自童話《金發(fā)姑娘和三只熊》的故事：迷路了的金發(fā)姑娘未經(jīng)允許就進(jìn)入了熊的房子，她嘗了三只碗里的粥，試了三把椅子，又在三張床上躺了躺，最后決定小碗里的粥最可口，小椅子坐著最舒服，小床上躺著最愜意，因?yàn)槟鞘亲钸m合她的，不大不小剛剛好。故事的寓意是，凡事要有度。

你幾乎能把所有設(shè)計(jì)都做出原型來(lái)，不管是屏幕也好，應(yīng)用也好。做原型是一個(gè)很好的方法，可以測(cè)試以下的項(xiàng)目：

新功能：在Instagram應(yīng)用中做的Instagram Stories原型(在上線之前)

工作流程的變化：將Medium引入付費(fèi)版之后。把新的文章發(fā)布情況作出原型。

新技術(shù)：將無(wú)人駕駛汽車的行駛路線原型做出來(lái)。

新界面：將Apple Watch的界面做出來(lái)。

現(xiàn)在你了解了做原型的目的，你該怎么做呢?

快速制作原型的過(guò)程

快速制造原型的過(guò)程有三個(gè)步驟，可以按照自己的需要重復(fù)進(jìn)行，次數(shù)不限。

制造原型：把你的解決方案或者潔面視覺(jué)化，做一個(gè)視覺(jué)模擬版。

回顧：將原型與用戶分享，對(duì)產(chǎn)品做出評(píng)價(jià)，看看是否能滿足用戶需求和期望。

改良：基于得到的反饋，找出需要改善或者更清楚呈現(xiàn)的部分。

 

 

一個(gè)原型一般從對(duì)關(guān)鍵部分對(duì)模擬開(kāi)始，隨著每次重復(fù)，你能收集到越來(lái)越多用戶反饋數(shù)據(jù)，原型也隨之越來(lái)越復(fù)雜。

原型應(yīng)該在多大程度上體現(xiàn)產(chǎn)品

把注意力都集中在使用最頻繁的功能上?？焖僦谱髟偷年P(guān)鍵就在于，讓看者知道一個(gè)功能的運(yùn)行機(jī)制，或設(shè)計(jì)看起來(lái)什么樣子，而不是說(shuō)要把整個(gè)產(chǎn)品都具體做出來(lái)。記住，只要做的足夠好就行了。

用戶流程做成一個(gè)原型：與其做成PPT，一頁(yè)頁(yè)介紹自己的產(chǎn)品，倒不如用一個(gè)故事將要做原型的產(chǎn)品功能串聯(lián)起來(lái)，這樣，你得到的反饋也會(huì)更準(zhǔn)確，因?yàn)槟愕脑褪怯鞋F(xiàn)實(shí)基礎(chǔ)的，在現(xiàn)實(shí)生活場(chǎng)景中有體現(xiàn)。比方說(shuō)，將“注冊(cè)/登陸/重設(shè)密碼”作為一個(gè)用戶流程。

同時(shí)，也要做好重復(fù)流程的計(jì)劃。一般來(lái)說(shuō)，對(duì)重復(fù)的計(jì)劃一開(kāi)始可以比較寬泛，然后將解決方案一步步具體化。在你重復(fù)的時(shí)候，原型的精確度，已經(jīng)體現(xiàn)的完整程度也會(huì)慢慢提高。

但是，原型的精確度指的是什么?

 

 

原型的精確度指的是什么

精確度指的是原型與最終產(chǎn)品之間有多接近。你可以有多種不同選擇，準(zhǔn)確性方面也有變化空間。這都取決于產(chǎn)品開(kāi)發(fā)的階段和做原型的目的。

視覺(jué)效果(速寫(xiě)vs精細(xì))

在原型的精細(xì)程度方面，最顯眼的就是布局和設(shè)計(jì)。如果產(chǎn)品的原型在視覺(jué)精確度一開(kāi)始就很高，用戶可能會(huì)把注意力更多的放在視覺(jué)效果上，而不是產(chǎn)品功能上。這么一來(lái)，就違背了早期做原型的初衷，因?yàn)橐曈X(jué)效果太引人注目。

 

 

兩種忠實(shí)程度不同的靜態(tài)原型，左側(cè)為速寫(xiě)效果(忠實(shí)度低)，右側(cè)為精細(xì)效果(忠實(shí)度高)

功能(靜態(tài)vs交互)

原型應(yīng)該設(shè)計(jì)成靜態(tài)的，還是體現(xiàn)其完全功能呢(交互)?兩種版本都各有優(yōu)劣——靜態(tài)的原型做起來(lái)比較簡(jiǎn)單，比較快捷，而交互式原型可以在可用性測(cè)試和用戶培訓(xùn)時(shí)候用。

 

 

高清交互式原型

內(nèi)容(隨機(jī)假文vs真實(shí)內(nèi)容)

在產(chǎn)品早期的原型制作過(guò)程中，可以用Lorem ipsum(隨機(jī)假文)，以免轉(zhuǎn)移了用戶的注意力。這樣，用戶的反饋就不會(huì)集中在文本上，而是給出功能方面的反饋.

 

 

Lorem ipsum是指一篇常用于排版設(shè)計(jì)領(lǐng)域的拉丁文文章，主要的目的為測(cè)試文章或文字在不同字型、版型下看起來(lái)的效果。中文的類似用法則稱為亂數(shù)假文、隨機(jī)假文。

但是，隨著原型制作的推進(jìn)，你可以不再用假文，而是用真實(shí)的內(nèi)容，讓用戶看到內(nèi)容對(duì)設(shè)計(jì)整體有什么影響。

你也可以通過(guò)使用標(biāo)簽來(lái)測(cè)試自己的“copy”有沒(méi)有用。“copy”指的是文本標(biāo)簽和你在屏幕上看到的信息。

精確度有哪些等級(jí)?

 

 

從左至右， 精確度越來(lái)越高。

精確度低：精確度較低的原型，比如鉛筆在紙上畫(huà)的草圖，通常是靜態(tài)的，內(nèi)容和視覺(jué)效果上精確度都不高，該動(dòng)起來(lái)很快捷，很方便。這樣的原型也會(huì)讓用戶把注意力都放在功能和系統(tǒng)的運(yùn)作機(jī)制方面，而不是視覺(jué)效果上。

精確度中：電腦端的工具，比如Visio能夠借由三維線框和工作流程，制作中等精確度的原型。這樣的精確度水平可以展示系統(tǒng)的表芯，用以確定用戶上需求是否達(dá)到了，還可以用來(lái)評(píng)價(jià)用戶體驗(yàn)。

精確度高：精確度高的原型可能非常真實(shí)，讓人覺(jué)得它就是最終產(chǎn)品的效果。做這類原型是很花時(shí)間的。用InVision、Sketch、Figma、Adobe XD、Framer等等工具，即使不是技術(shù)人員也可以做出高保真的原型。雖說(shuō)這樣的原型沒(méi)法被轉(zhuǎn)化成可使用的代碼，但是在后面的可用性測(cè)試或者用戶訓(xùn)練中可能很有用處。

如何選擇原型的精確度?

很多時(shí)候，用粗略的草圖衡量設(shè)計(jì)的效果是最好的。接著根據(jù)系統(tǒng)的復(fù)雜程度或要求，再慢慢提高精確度

有時(shí)候，具體選擇什么精確度，還是要看客戶具體需求，或者需要突出哪些部分。比如，如果你想評(píng)估界面上的一個(gè)變動(dòng)對(duì)整體視覺(jué)效果的影響，那么你應(yīng)該用精細(xì)的設(shè)計(jì)圖，而非粗略的草圖。或者，假如說(shuō)你需要傳遞信息，那么你可能會(huì)用真實(shí)內(nèi)容，而不是隨機(jī)假文。

如何選擇制作原型的工具?

根據(jù)你的不同需求和方法，有一系列工具可以使用。在選擇工具之前，先問(wèn)自己幾個(gè)問(wèn)題：

學(xué)會(huì)使用該工具需要花費(fèi)多長(zhǎng)時(shí)間?

這個(gè)工具是否滿足我的產(chǎn)品的需要(網(wǎng)頁(yè)、軟件應(yīng)用、移動(dòng)端應(yīng)用、新興技術(shù)等等)?

這個(gè)工具能否讓我和他人分享原型并收集他們的反饋?

如果要改動(dòng)原型，方不方便?

這個(gè)工具能否使用模版和印刷模版?

紙筆、Sketch、Figma、Framer、Photoshop、Illustrator、XD、折紙等等

原型如何做到最好：可行與不可行的做法

可行做法：

和用戶以及利益相關(guān)者合作，收集盡可能多的反饋意見(jiàn)，將這些意見(jiàn)體現(xiàn)在最終產(chǎn)品中。

在設(shè)計(jì)早期就跟用戶和利益相關(guān)者說(shuō)清楚，原型只是個(gè)樣板，不能完整全面地體現(xiàn)最終產(chǎn)品，也不是最終產(chǎn)品。

精確度高的原型還是要做的，做的越真實(shí)越好，這樣用戶和利益相關(guān)者在最后對(duì)比最終產(chǎn)品和高精確度原型時(shí)，才不會(huì)覺(jué)得失望。

模版和印刷模版要保存好，以后其他項(xiàng)目或許能用上。

不可行做法：

不要為最終產(chǎn)品中沒(méi)有的功能做原型。

不要太完美主義。做到足夠好就夠了?？焖僦谱髟偷哪繕?biāo)是為了讓大家達(dá)成共識(shí)。

不要什么都做出原型來(lái)。