分享原型設(shè)計(jì)的基本步驟產(chǎn)品原型設(shè)計(jì)的步驟 _原型

編者按：一個(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)品原型有很多種形式，可能是畫在草稿紙上的粗略草圖，也可能是對(duì)最終產(chǎn)品的交互式模擬。本文是為了想了解產(chǎn)品原型的小白而寫。
我將提到幾個(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)者、開發(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) 。
【分享原型設(shè)計(jì)的基本步驟產(chǎn)品原型設(shè)計(jì)的步驟】現(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ì)模擬開始，隨著每次重復(fù)，你能收集到越來(lái)越多用戶反饋數(shù)據(jù)，原型也隨之越來(lái)越復(fù)雜。
原型應(yīng)該在多大程度上體現(xiàn)產(chǎn)品把注意力都集中在使用最頻繁的功能上。快速制作原型的關(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ì)劃一開始可以比較寬泛，然后將解決方案一步步具體化。在你重復(fù)的時(shí)候，原型的精確度，已經(jīng)體現(xiàn)的完整程度也會(huì)慢慢提高。
但是，原型的精確度指的是什么？

文章插圖
原型的精確度指的是什么精確度指的是原型與最終產(chǎn)品之間有多接近。你可以有多種不同選擇，準(zhǔn)確性方面也有變化空間。這都取決于產(chǎn)品開發(fā)的階段和做原型的目的。
視覺(jué)效果（速寫vs精細(xì)）在原型的精細(xì)程度方面，最顯眼的就是布局和設(shè)計(jì) 。如果產(chǎn)品的原型在視覺(jué)精確度一開始就很高，用戶可能會(huì)把注意力更多的放在視覺(jué)效果上，而不是產(chǎn)品功能上。這么一來(lái)，就違背了早期做原型的初衷，因?yàn)橐曈X(jué)效果太引人注目。

文章插圖
兩種忠實(shí)程度不同的靜態(tài)原型，左側(cè)為速寫效果（忠實(shí)度低），右側(cè)為精細(xì)效果（忠實(shí)度高）
功能（靜態(tài)vs交互）原型應(yīng)該設(shè)計(jì)成靜態(tài)的，還是體現(xiàn)其完全功能呢（交互）？?jī)煞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)越高。
精確度低：精確度較低的原型，比如鉛筆在紙上畫的草圖，通常是靜態(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)者合作，收集盡可能多的反饋意見，將這些意見體現(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)目或許能用上。

不可行做法：