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

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。