分享原型設計的基本步驟「產品原型設計的步驟」

編者按：一個產品從概念到成為現實，實際製作的過程是很麻煩的。所以，如果你想做好自己的產品，就要學會將點子做成原型，得到他人反饋，重複這個過程，對於完善設計很有益處。這也是用戶設計師工作的一個重要部分。本文編譯自medium的原題為「A Beginner』s Guide to Rapid Prototyping」的文章。

產品原型有很多種形式，可能是畫在草稿紙上的粗略草圖，也可能是對最終產品的互動式模擬。本文是為了想了解產品原型的小白而寫。

我將提到幾個與快速製造原型相關的術語，以及解決以下的問題。

快速製造原型入門

快速製造原型是什麼？
製作原型需要什麼？
快速製作原型的過程
原型應該在多大程度上體現產品？
原型的精確度指的是什麼？
如何選擇製作原型的工具？
原型如何做到最好：可行與不可行的做法

快速製作原型是什麼？

快速製作原型是指一個重複性的過程，用來將網站或應用的樣子視覺化，從而得到用戶、利益相關者、開發者和設計師的反饋和認可。

如果做得好，快速製造原型可以提高你的設計質量，因為這個過程可以加強不同方面的溝通，減少有人不喜歡最終產品的風險。

製作原型需要什麼？

設計一個產品原型的目的，不是為了做出完全功能版的系統，完全是出於視覺化的目的，看到呈現在用戶面前的最終產品的樣子。正如GV（谷歌風投）的設計合伙人博卡（Daniel Burka）說：

「理想的原型應該是有著『金髮姑娘般的質量』。如果質量太差，那沒人會相信原型是真的產品。如果質量太好，那你就得沒日沒夜地干，而且你還做不完。你要的就是『金髮姑娘』般的質量，不太好，不太壞，足夠好就行了。」

「金髮姑娘原則」源自童話《金髮姑娘和三隻熊》的故事：迷路了的金髮姑娘未經允許就進入了熊的房子，她嘗了三隻碗里的粥，試了三把椅子，又在三張床上躺了躺，最後決定小碗里的粥最可口，小椅子坐著最舒服，小床上躺著最愜意，因為那是最適合她的，不大不小剛剛好。故事的寓意是，凡事要有度。

你幾乎能把所有設計都做出原型來，不管是屏幕也好，應用也好。做原型是一個很好的方法，可以測試以下的項目：

新功能：在Instagram應用中做的Instagram Stories原型（在上線之前）

工作流程的變化：將Medium引入付費版之後。把新的文章發布情況作出原型。

新技術：將無人駕駛汽車的行駛路線原型做出來。

新界面：將Apple Watch的界面做出來。

現在你了解了做原型的目的，你該怎麼做呢？

快速製作原型的過程

快速製造原型的過程有三個步驟，可以按照自己的需要重複進行，次數不限。

製造原型：把你的解決方案或者潔面視覺化，做一個視覺模擬版。
回顧：將原型與用戶分享，對產品做出評價，看看是否能滿足用戶需求和期望。
改良：基於得到的反饋，找出需要改善或者更清楚呈現的部分。

一個原型一般從對關鍵部分對模擬開始，隨著每次重複，你能收集到越來越多用戶反饋數據，原型也隨之越來越複雜。

原型應該在多大程度上體現產品

把注意力都集中在使用最頻繁的功能上。快速製作原型的關鍵就在於，讓看者知道一個功能的運行機制，或設計看起來什麼樣子，而不是說要把整個產品都具體做出來。記住，只要做的足夠好就行了。

用戶流程做成一個原型：與其做成PPT，一頁頁介紹自己的產品，倒不如用一個故事將要做原型的產品功能串聯起來，這樣，你得到的反饋也會更準確，因為你的原型是有現實基礎的，在現實生活場景中有體現。比方說，將「註冊/登陸/重設密碼」作為一個用戶流程。

同時，也要做好重複流程的計劃。一般來說，對重複的計劃一開始可以比較寬泛，然後將解決方案一步步具體化。在你重複的時候，原型的精確度，已經體現的完整程度也會慢慢提高。

但是，原型的精確度指的是什麼？

原型的精確度指的是什麼

精確度指的是原型與最終產品之間有多接近。你可以有多種不同選擇，準確性方面也有變化空間。這都取決於產品開發的階段和做原型的目的。

視覺效果（速寫vs精細）

在原型的精細程度方面，最顯眼的就是布局和設計。如果產品的原型在視覺精確度一開始就很高，用戶可能會把注意力更多的放在視覺效果上，而不是產品功能上。這麼一來，就違背了早期做原型的初衷，因為視覺效果太引人注目。

兩種忠實程度不同的靜態原型，左側為速寫效果（忠實度低），右側為精細效果（忠實度高）

功能（靜態vs交互）

原型應該設計成靜態的，還是體現其完全功能呢（交互）？兩種版本都各有優劣——靜態的原型做起來比較簡單，比較快捷，而互動式原型可以在可用性測試和用戶培訓時候用。

高清互動式原型

內容（隨機假文vs真實內容）

在產品早期的原型製作過程中，可以用Lorem ipsum（隨機假文），以免轉移了用戶的注意力。這樣，用戶的反饋就不會集中在文本上，而是給出功能方面的反饋.

Lorem ipsum是指一篇常用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。中文的類似用法則稱為亂數假文、隨機假文。

但是，隨著原型製作的推進，你可以不再用假文，而是用真實的內容，讓用戶看到內容對設計整體有什麼影響。

你也可以通過使用標籤來測試自己的「copy」有沒有用。「copy」指的是文本標籤和你在屏幕上看到的信息。

精確度有哪些等級？

從左至右，精確度越來越高。

精確度低：精確度較低的原型，比如鉛筆在紙上畫的草圖，通常是靜態的，內容和視覺效果上精確度都不高，該動起來很快捷，很方便。這樣的原型也會讓用戶把注意力都放在功能和系統的運作機制方面，而不是視覺效果上。

精確度中：電腦端的工具，比如Visio能夠藉由三維線框和工作流程，製作中等精確度的原型。這樣的精確度水平可以展示系統的表芯，用以確定用戶上需求是否達到了，還可以用來評價用戶體驗。

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

如何選擇原型的精確度？

很多時候，用粗略的草圖衡量設計的效果是最好的。接著根據系統的複雜程度或要求，再慢慢提高精確度

有時候，具體選擇什麼精確度，還是要看客戶具體需求，或者需要突出哪些部分。比如，如果你想評估界面上的一個變動對整體視覺效果的影響，那麼你應該用精細的設計圖，而非粗略的草圖。或者，假如說你需要傳遞信息，那麼你可能會用真實內容，而不是隨機假文。