[譯] 快速原型設計的新手指南

• 原文地址：A Beginner’s Guide to Rapid Prototyping
• 原文做者：Anant Jain
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Ryden Sun
• 校對者：Ivocin

7分鐘（甚至不到）內瞭解快速原型設計的一切

照片由 Denise Jans 提供於 Unsplash

從一個想法到完整的產品，過程是複雜的。每個想打造本身產品的人都應該具有原型設計的能力，經過原型得到反饋，而後不斷進行迭代。這也是 UX 設計師工做中的重要一環。

原型設計有不少種形式，從紙上簡單的草稿到看起來像最終產品的交互模擬，都屬於原型範疇。這篇指南是寫給那些想理解原型全部相關方面知識的初學者的。

咱們除了會講到一些快速原型設計相關術語的含義以外，還會有如下這些方面：

1. 什麼是快速原型設計？
2. 你須要爲哪些部分設計原型？
3. 快速原型設計的流程
4. 原型須要包含哪些部分？
5. 原型的保真度是什麼意思？
6. 應該如何爲原型挑選合適的保真度？
7. 如何選擇原型設計工具？
8. 原型設計最佳實踐：作什麼和不作什麼

什麼是快速原型設計？

快速原型設計是一個不斷迭代的過程，將網頁或者應用可視化，以此來得到用戶，利益相關者，開發者和設計師的反饋和承認。

當使用的好時，快速原型設計能夠經過增強多方溝通，避免製做出一個用戶不喜歡的產品，以此來提升設計的質量。

你須要爲哪些部分設計原型？

原型設計並非一個系統的完整功能性版本，它只是被用來幫助可視化最終產品的用戶體驗。就像谷歌 Ventures design（風險投資設計， 一種用設計入股創業公司的方式） 合夥人 Daniel Burka 說的：

一個理想的原型應該是 「Goldilocks」（金髮姑娘，用來形容完美平衡，剛恰好）般的質量。若是原型的質量太差，人們不會相信這個原型是一個真正的產品。若是質量過高，會致使你沒日沒夜的工做，而且你完不成。你須要一個 「Goldilocks」 的質量，不須要過高，也不要太差，剛恰好就行。

你不只能夠爲屏幕，移動應用或者網頁進行原型設計，甚至說是任何東西均可以進行原型設計。原型設計能夠極好的測試如下方面（提供了案例）：

• 新功能： 在 Instagram app 中進行 Instagram Stories 模塊的原型設計（在正式發佈以前）。
• 流程上的改動： 在 Medium 引入付費會員以後，對其新的發佈流程進行原型設計
• 新興技術： 爲自動駕駛汽車的旅程進行原型設計！
• 新的交互界面： 爲 Apple Watch 交互界面進行原型設計（當它首次發佈時）

因此，你如今知道快速原型設計是幹什麼的了。可是你怎麼來作呢？咱們後續會講到。

快速原型設計流程

快速原型設計包含了一個 3 步走的流程，根據需求屢次迭代：

1. 原型： 爲你的解決方案或交互界面建立一個可視化的模型。
2. 評審： 跟用戶分享原型，探索它是否知足用戶需求和指望。
3. 改進： 根據用戶反饋，找出須要改善或進一步明確的地方。

原型，評審，改進，迭代。

一個原型一般是從一個簡單的模型開始，只涵蓋關鍵點，隨着用戶反饋的數據收集，經過每一次迭代變得更加完善，複雜。

你的原型須要包含哪些部分？

集中精力在那些關鍵的功能，這些功能是用戶最常使用的。快速原型設計的意義是，在不須要規劃整個產品細節以前，展現一個功能是怎麼工做的，亦或是它看起來是什麼樣的。謹記，咱們的目標是 「Goldilocks」 般的質量！

一次性對整個 用戶流程 進行原型設計。比起一個界面一個界面的設計，原型設計應基於一個用戶使用場景，這個場景包含全部你想進行原型設計的區域。經過這種方法，你會獲得更精準的用戶反饋，由於你的原型會切實的反應用戶真實生活中的場景。好比，將「註冊/登錄/重置密碼」一套流程進行總體原型設計。

除此以外，要記住，心中要有一個迭代計劃。按經驗來講，製做迭代計劃時要從全局入手，而後超更細節的解決方案版本入力。隨着你不斷迭代，原型的保真度和所包含的內容，都會不斷增加。

可是稍等，什麼是保真度？

什麼是原型的保真度？

保真度是指原型與最終產品或解決方案的類似度。你能夠從不一樣等級的準確度中選擇，根據目前流程的階段和原型的目標來選擇。

視覺 (草圖 vs. 設計稿)

佈局和設計是原型保真度中最顯眼的部分。若是一個原型從開始就保持高視覺保真度的產出，用戶會傾向集中於視覺，而不是功能細節，這會偏離早期階段原型的主要目標。

靜態原型有兩種保真度 - 草圖（低保真）和設計稿（高保真）

功能性 (靜態 vs. 可交互)

原型是靜態仍是必需要看起來支持全部功能（可交互）？兩個版本都有好處和壞處：靜態原型能夠更簡單快捷的實現，然而可交互版本後續可被用來作可用性測試和用戶培訓。

一個高保真的可交互的原型。 (來源)

內容 (固定文本 vs. 實際內容)

原型的早期階段，使用統一的固定文本內容能夠有效的避免用戶從提供功能性反饋中偏離，而不是對文本內容進行評論。

然而，隨着原型設計的流程遞進，用實際內容來替代冗餘的文本，這樣用戶能夠感受到總體設計的影響。

使用實際的標籤也是一個很好的機會來測試你「複製的內容」的工做效果。複製對於文本空間和屏幕中信息是一個美妙的術語，就像咱們把「發佈」按鈕叫作「發佈」，「發表」，「發送」，「完成」或者其餘的叫法。

都存在哪些保真度？

• 低保真： 低保真度就像「筆和紙」，草圖會生成靜態的原型圖，包含較低的視覺和內容保真度，以此來支持快捷的改動。這會強制用戶集中於功能以及他們如何使用這個系統，而不是系統看起來怎麼樣。
• 中保真 電腦端的工具好比 Visio 所產出的原型咱們叫作中度保真原型，由界面框架和工做流組成。這個程度的保真是用來展現系統的表現行爲，來判斷用戶的需求是否被知足，以及來評估用戶體驗。
• 高保真 高保真原型有時候會太真實，以致於常常與實際產品搞混。它們的產出也更耗費時間。一些工具像 nVision, Sketch, Figma, Adobe XD, Framer 等容許非技術用戶來創造高保真原型。雖然它們不能被轉換成可用的代碼，可是能夠很順手的被用來作可用性測試和用戶培訓。

從低保真，到中保真再到高保真 (Source)

如何選擇合適的原型保真度？

大多數時間，設計方案的最佳探索方式是從粗略的草圖開始，而後根據系統的複雜度和需求，遷移到更高的保真度。

有些時候，你的選擇多是由客戶需求或所關注的領域所指引。好比，若是你想評估一個界面改動所形成的視覺影像，相對於粗略的草圖，你可能會選擇一個視覺設計稿。或者若是你的解決方案時關注於消息的，你可能會決定使用真實的內容而不是統一的固定文本。

如何選擇原型設計工具？

根據你的需求和方式有不少可用的原型設計工具。選擇工具以前，你要問清楚這些問題：

• 學習使用這個工具要耗費多長時間？
• 工具是否支持產品原型的需求（網頁，應用程序，手機 apps，新科技等等）？
• 工具是否支持分享原型給其餘人而且收集反饋？
• 對原型進行改動是否方便？
• 工具是否支持預約義的模板？

紙筆，Sketch, Figma, Framer, Photoshop, Illustrator, XD, Origami 等等

原型設計最佳實踐：作什麼和不作什麼

作什麼：

• 和用戶與利益相關者交流工做，得到最多的反饋，而且培養他們對於最終產品的主人翁意識。
• 儘早設立指望目標，以確保用戶和利益相關者知道原型設計是一種尋找問題解決方案的方式，並且並不表明最終的產品。
• 讓高保真儘可能真實（包含相應延遲），這樣用戶和利益相關者將原型和最終產品比較時不會失望。
• 保存好模板，能夠在之後的項目中複用。

不作什麼：

• 不要給那些不會出如今最終產品的功能作原型設計。
• 不要作完美主義者，足夠好就能夠了。快速原型設計的目的是給每一個人達成一致。
• 不要任何事情都作原型設計！

若是你好奇應該如何測試你的原型，能夠閱讀個人另外一篇可用性測試的文章：

**極致 UX 體驗背後的祕密：可用性測試 **：不管是一個原型仍是一個徹底成熟的產品，進行幾個月的長時間可用性測試都是很好的選擇

感謝閱讀這篇指南。這篇文章最初是做爲 Commonlounge 上的 UX 設計課程其中一部分發布的，這個平臺有不少小型課程，話題從 Django 涵蓋到 Machine Learning，可讓付出的時間獲得最大的回報。

經過在真實世界的項目上工做進行學習，而且從產業導師身上得到反饋，盡在 commonlounge！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。