Photo by Denise Jans on Unsplash

原文： https://medium.freecodecamp.org/a-beginners-guide-to-rapid-prototyping-71e8722c17df

從創(chuàng)意走到產(chǎn)品的過程是一條坎坷之路。學習如何用原型展現(xiàn)想法、獲取反饋，以及不斷對其迭代，是每位有志于構(gòu)建自己產(chǎn)品之士應具備的最關(guān)鍵技能。這也是 UX 設(shè)計師最有意義的一項工作。

從一張紙面上的粗糙草圖到一個看起來栩栩如生的可交互仿真程序，原型可以展現(xiàn)為各種形式。這篇指南面向的是想了解原型是怎么一回事的純初學者。

什么是快速原型法？

快速原型法（Rapid Prototyping）是一種用于顯現(xiàn)網(wǎng)站或應用將會被制作成什么樣的迭代過程；目的是獲得反饋，并從用戶、股東、開發(fā)者、設(shè)計師各方得到校驗。

若使用得當，快速原型法將會加強各方之間的交流、并減少構(gòu)建出偽需求的風險，從而提升設(shè)計質(zhì)量。

原型中需要什么？

原型并不會被設(shè)計成一個系統(tǒng)的全功能版本，而僅著眼于將最終產(chǎn)品的用戶體驗可視化。正如 Google Ventures（谷歌風投）的設(shè)計合伙人 Daniel Burka 所說：

理想的原型應該有“恰到好處”的質(zhì)量。如果質(zhì)量過低，人們不會把它和真實產(chǎn)品聯(lián)系起來；如果質(zhì)量過高，那你熬夜加班也搞不定。恰到好處、不高不低，才是最合理的。

不只是屏幕、應用，或是網(wǎng)站，原型可以表現(xiàn)任何東西。使用原型測試以下幾個方面（都提供了例子）是極好的方法。

• 新功能：在正式發(fā)布之前，用原型展示 Instagram app 中的 Instagram Stories
• 工作流的改變：用原型展示成為付費會員后 Medium 的新發(fā)布流
• 新技術(shù)：用原型展示一段自動駕駛汽車之旅！
• 新界面：首發(fā)之前用原型展示 Apple Watch 的界面

那現(xiàn)在你應該了解了快速原型法是干什么的。但怎么動手做起來呢？下面將講到這些。

實現(xiàn)快速原型法的過程

快速原型法包含了一個多次按需迭代的開發(fā)三部曲：

1. 原型（Prototype）：創(chuàng)建一個解決方案或用戶界面的視覺模型
2. 檢視（Review）：將原型分享給用戶，并根據(jù)其需求和期望做出改進
3. 提純（Refine）：根據(jù)反饋，鑒別出需要改進或細化的部分

原型、檢視、提純

一個原型，往往由產(chǎn)品關(guān)鍵部分的非常簡單的模型開始，并在每次迭代中，根據(jù)從用戶反饋中收集到的越來越多的數(shù)據(jù)，變得越來越復雜。

需要往原型中包含多少東西？

聚焦在需要被經(jīng)常用到的緊要功能上 -- 快速原型法的要點在于，在不用事無巨細的設(shè)計出整個產(chǎn)品的原型之前，展示特性將如何工作或設(shè)計將會是看起來什么樣。要時刻拿捏住“恰到好處”的質(zhì)量！

適時地在原型中插入用戶流程圖（User Flow Diagram）。與一屏一屏的用原型展示你的設(shè)計不同的是，設(shè)置一個場景可以讓用戶在故事性的過程中了解要展示的各個部分。通過這種方式，將能夠取得更為精確的反饋。舉例來說，將“注冊->登錄->重置密碼”的流程一起展示在原型中。

用戶流程圖

同時，心里要有一個迭代計劃。關(guān)于如何規(guī)劃迭代計劃的一個很好的經(jīng)驗法則是，先從大面上開始再逐漸細化各種解決方案。在迭代過程中，原型的“保真度”也將隨著包含內(nèi)容的增加逐漸被細化。

但是“保真度”到底是個啥呢？

原型的保真度指的是什么？

保真度指原型和最終產(chǎn)品/解決方案的匹配程度。根據(jù)原型的目的以及所處的階段，可以選擇不同的精度。

視覺上 (草圖 vs. 帶樣式的)

布局和設(shè)計是原型保真度中最容易被矚目的方面。如果原型的視覺保真度起初就很高，那么用戶就很容易糾結(jié)于界面而非功能，從而偏離初始階段原型的主要目標。

兩種保真度的靜態(tài)原型：sketched (低保真的草圖) 和 styled (帶樣式的高保真)

功能上 (靜態(tài)的 vs. 可交互的)

原型應該做成靜態(tài)的，亦或是看起來全功能的（可交互的）呢？兩者各有優(yōu)劣：靜態(tài)原型實現(xiàn)起來簡單快捷，而可交互原型可在稍后用于測試和用戶培訓。

A high-fidelity Interactive Prototype.

內(nèi)容 (無意義假數(shù)據(jù) vs. 真實內(nèi)容)

在原型制作的早期階段，利用合適的“無意義假數(shù)據(jù)”，可以有效避免用戶分心 -- 使之更關(guān)注反饋功能而不是對修改文字評頭論足。

但隨著原型階段的推進，將無意義假數(shù)據(jù)替換為真實內(nèi)容勢在必行；用戶將對其對整體設(shè)計造成的影響心中有數(shù)，也是檢驗原型上的按鈕等元素是否按預期工作良好的試金石。

有哪幾種保真度？

• 低保真：類似紙筆草圖的低保真方法產(chǎn)生的靜態(tài)原型，只保留低程度的視覺效果和內(nèi)容保真度，以利于快速容易的更改。這種方法目的是讓用戶“聚焦于功能”，關(guān)注其如何使用產(chǎn)品，而非讓其關(guān)注產(chǎn)品長什么樣。
• 中保真：用類似 Visio 的軟件產(chǎn)生的原型可以成為中保真的原型，表現(xiàn)形式為線框圖和工作流。這種水平的保真度用于展示系統(tǒng)的行為，以確定用戶需求是否被滿足，并改進用戶體驗。
• 高保真：高保真原型常常會達到“以假亂真”的程度，也是制作原型時的“耗時大戶”。諸如 InVision、Sketch、Figma、Adobe XD、Framer 等工具，讓不懂技術(shù)的用戶也能創(chuàng)建高保真原型。
  雖然這些高保真原型無法轉(zhuǎn)換成真正可用的代碼，但應用在稍后的可用性測試和用戶培訓階段還是非常便利的。

從低保真、中保真，到高保真

如何為原型選擇保真度？

大部分時候，最好是從一個粗糙的草圖開始評估設(shè)計，然后依據(jù)系統(tǒng)的復雜度和需求逐漸往更高的保真度遷移。

有時需要根據(jù)客戶需求或聚焦的局部來做出選擇。比如，如果想評估界面更改造成的視覺影響，可能用帶樣式的原型就比草圖要合適。而如果是以消息為主的解決方案，則應該選擇用真實內(nèi)容填充的原型而非無意義假數(shù)據(jù)。

如何選擇一個原型制作工具？

紙筆, Sketch, Figma, Framer, Photoshop, Illustrator, XD, Origami…

根據(jù)需求和實現(xiàn)途徑，有很多原型制作工具可供選擇。而在選擇工具之前，請先問問自己以下問題：

• 學習工具如何使用會花費多少時間？
• 工具是否支持我的產(chǎn)品所需的原型（web、軟件、應用、移動app、某種新技術(shù)等等）？
• 工具是否支持將原型分享給其他人，并且獲得反饋？
• 改變原型的難易程度如何？
• 是否有預置的模板可供使用？

原型制作最佳實踐：有所為有所不為

有所為：

• 與用戶一起收集反饋，并將其吸收到最終產(chǎn)品中去
• 盡早為用戶設(shè)定預期，那就是原型是一種為特定問題尋求答案的方式，而非表現(xiàn)最終的產(chǎn)品
• 讓高保真原型“以假亂真”，甚至包括響應的延遲也在內(nèi)，以免用戶在和最終產(chǎn)品比較后大失所望
• 保存模板供以后的產(chǎn)品重用

有所不為：

• 不要在原型中提現(xiàn)最終產(chǎn)品中不會有的特性
• 秉持夠用就好的理念，不要當完美主義者?？焖僭头ǖ哪繕耸墙o每個人一個共同的基礎(chǔ)。
• 不要把所有東西都放到原型中！

(end)