一副好圖勝過千言萬語。

“一副好圖勝過千言萬語”，這句老話道出了用戶界面原型的核心內(nèi)容——使用各種可視化材料直接展示軟件系統(tǒng)和界面細(xì)節(jié)，遠(yuǎn)遠(yuǎn)比使用千言萬語口頭描述某些設(shè)計及開發(fā)規(guī)范來得更清楚，更直觀。

而在用戶界面設(shè)計迭代的過程中，快速原型就是指設(shè)計師迅速地創(chuàng)建原型，模擬網(wǎng)站或軟件系統(tǒng)未來狀態(tài)的過程，方便與更多的相關(guān)人員，例如用戶，投資者，開發(fā)者以及設(shè)計師，交流和驗證其設(shè)計構(gòu)思。快速迭代原型設(shè)計，能夠幫助設(shè)計師盡早的獲得反饋，從而更有效地改進(jìn)其最終設(shè)計，減少在開發(fā)過程中需要更改的可能，提高工作效率。

軟件原型種類多樣，從粗略的紙上草圖到無論從外觀還是功能上都能做到與終端產(chǎn)品極其相似的交互原型等，不盡相同。而創(chuàng)建優(yōu)質(zhì)快速原型的關(guān)鍵，就是需要設(shè)計師從用戶提出的意見反饋出發(fā)，結(jié)合適當(dāng)?shù)脑突绞?，對軟件原型進(jìn)行快速修改，從而提出更能滿足用戶需求的設(shè)計方案。

快速原型設(shè)計可以幫助設(shè)計師團(tuán)隊快速地測試和迭代多種設(shè)計構(gòu)思和方法，方便他們在交流討論的過程中使用更加直觀可視的設(shè)計材料，而不僅僅是口頭描述。同時也能夠確保參其中的每個人都能獲得一致的認(rèn)識，降低甚至避免漏掉一些重要需求的風(fēng)險。最終達(dá)到更快更快地完成軟件設(shè)計的目的。

快速原型設(shè)計過程

快速原型設(shè)計包含三個步驟的多次迭代：

1.原型創(chuàng)建階段

將用戶需求轉(zhuǎn)化成可視原型。 當(dāng)然，創(chuàng)建原型的過程中，也不要忘記將用戶體驗和一些需求的可行性考慮在內(nèi)。

2.評價階段

與用戶分享原型，并評估原型是否滿足了他們的需求。

3.完善階段

根據(jù)用戶反饋，找出需要改進(jìn)或進(jìn)一步完善和明確的地方。

原型通常從模擬軟件部分的關(guān)鍵區(qū)域開始。然后，隨著一些必要區(qū)域的增加，原型也在多次更迭過程中變得更加的全面，且逐漸細(xì)化，直到原型完成并交付開發(fā)人員最終開發(fā)，整個設(shè)計過程才得以結(jié)束。而整個過程中，隨著原型類型的變化，創(chuàng)建原型的速度也會明顯的發(fā)生變化，例如實時變化到長達(dá)數(shù)天的更迭變化，各不相同。

界定原型范圍

“原型”，這個詞常常使人聯(lián)想到一個編碼完整，功能齊全的軟件或界面。但是，快速原型卻并不與任何功能齊全的解決方案相關(guān)聯(lián)，它僅僅只是為了幫助用戶更加直觀的了解和測試最終產(chǎn)品的用戶體驗而創(chuàng)建。清楚了這一點之后，在創(chuàng)建任何原型之前，你還需要明確幾個關(guān)鍵性問題來界定原型范圍：

1.什么需要原型化？

軟件的許多優(yōu)秀設(shè)計可以添加到原型之中，例如復(fù)雜的交互，新添加功能以及流程，技術(shù)或設(shè)計方面的變化等。比如，當(dāng)你想要為用戶提供與眾不同的搜索體驗時，就需要原型化軟件搜索結(jié)果。在原型中，引入多面搜索或添加在不離開搜索頁面的情況下，即可預(yù)覽文檔的功能等。

2.多少軟件部件需要原型化？

對于這個問題，一個好的解決方法就是集中添加一些將來80%時間內(nèi)會使用的20%的功能要素，即原型化一些最常用的關(guān)鍵性功能。也請牢記，快速原型設(shè)計的目的在于展示軟件如何運(yùn)行，或者在以后，軟件的外觀將如何。所以，并不需要對整個產(chǎn)品進(jìn)行原型化。

3.設(shè)計原型故事場景

在確定了需要進(jìn)行原型化的軟件區(qū)域之后，你需要將它們組合成一個或多個場景，并且根據(jù)原型所模擬的用戶體驗制定一個統(tǒng)一的路徑。例如，對于出售鞋子的網(wǎng)站來說，可能出現(xiàn)的場景是：“無聊的喬”購買了一雙與六個月前購買的鞋子完全相同的耐克跑鞋。又或者可能出現(xiàn)的另外一個場景是：“探索山姆”搜索10號大小的鞋子時，發(fā)現(xiàn)了一雙牛津鞋和一雙他很感興趣的樂福鞋。

4.規(guī)劃原型迭代

原型通常不可能在單次迭代中成功構(gòu)建，它需要經(jīng)過一次次的迭代才能創(chuàng)建并得到完善。而實現(xiàn)快速迭代的一個好方法就是，一開始廣泛全面的對軟件進(jìn)行原型化，然后逐步深入到解決方案選定區(qū)域的原型化，如此由淺入深逐漸完成整個軟件的原型化，加快更迭速度。詳細(xì)的說就是，當(dāng)你為網(wǎng)站制作原型時，在第一次迭代的過程中，首先創(chuàng)建網(wǎng)站的主頁和登錄頁面（有時稱作水平原型），然后緊接著審查和修改這個原型框架。

隨后，原型的迭代可深入到針對網(wǎng)站一個或多個區(qū)域的原型化（也稱垂直原型）。而當(dāng)你為一個媒體下載網(wǎng)站制作原型時，你則需要首先創(chuàng)建用戶查找和下載視屏的步驟的相關(guān)頁面，或者是他們該如何在其在線收藏中管理這些媒體的相關(guān)頁面等。

5.選擇合適的原型保真度

保真度一般是指原型與最終解決方案的相似程度。它擁有多個維度, 而原型可以位于任何維度的任何地方。在不同的設(shè)計階段，根據(jù)不同的原型設(shè)計目標(biāo)，為以下各項選擇合適的保真度：

視覺保真度（草圖<->樣式）

視覺和感覺是原型保真中最值得關(guān)注的兩個維度。如若選擇不當(dāng)，會使用戶對于原型的審查偏離本來的設(shè)計目標(biāo)，而提出不太恰當(dāng)?shù)姆答佉庖?。太快的實現(xiàn)高保真，也會讓用戶會更多的專注于原型的視覺設(shè)計，而這在原型設(shè)計的早期階段是非常不合適的。從視覺角度來看，原型不一定要擁有完美的像素，但應(yīng)該是成比例的。

比如，如果左導(dǎo)航區(qū)域必須占據(jù)1024像素屏幕的五分之一，在原型中其寬度并不需要占足204像素，只需按照一定的比例顯示即可。此外，隨著原型在設(shè)計周期中發(fā)展和更迭，你也需要添加樣式、顏色、品牌和圖形等元素來提高其視覺保真度。

功能保真度（靜態(tài)<->交互式）

這個原型是否揭示了解決方案是如何運(yùn)作的（靜態(tài)的）或者它是否功能完備，并能夠?qū)τ脩糨斎胱龀鲰憫?yīng)（交互式的）？這個維度對用戶來說并沒有什么干擾，但是在隨后的原型迭代過程中需要增加其交互性，提高其功能保真度，以便允許原型用于可用性測試，訓(xùn)練以及交流之中。

內(nèi)容保真度（亂數(shù)假文<->真實內(nèi)容）

而另外一個時常干擾用戶的維度是原型中顯示的內(nèi)容。在原型設(shè)計早期，波浪線和虛擬文本，例如亂數(shù)假文，是非常有用的。但是，隨著原型的改進(jìn)，你也需要評估利用真實的內(nèi)容來替換虛擬文本的必要性，以便了解它將如何影響原型的整體設(shè)計。

原型保真度

1.低保真度

最快，最簡單地開始原型制作的方法就是：將筆放在紙上。在紙上繪制原型草圖是所有人都可以做到的一種低保真的方法，無需任何特殊工具或經(jīng)驗要求。作為設(shè)計早期最常使用的方法，草圖是一種能夠快速創(chuàng)建體現(xiàn)設(shè)計方法和理念的粗略原型，獲得用戶反饋的方法。

在頭腦風(fēng)暴和想法概念化的過程中，紙質(zhì)原型是非常理想的。它可以在僅有寫字板的小房間中進(jìn)行，也可以在帶有活動掛圖（或白板）和標(biāo)記的小組中進(jìn)行。。。

作為低保真原型，紙質(zhì)原型是靜態(tài)的，且通常具有較低視覺和內(nèi)容保真度。這也迫使用戶更多的集中于如何使用原型系統(tǒng)，而不是其外觀。同時，這也使得設(shè)計師更愿意根據(jù)用戶的反饋進(jìn)行修改。

因此，低保真原型更易于快速原型化。它沒有學(xué)習(xí)曲線，但允許你簡單快速地更改。

2.中保真度

當(dāng)我們使用Visio和Omnigraffle之類的計算機(jī)工具設(shè)計創(chuàng)建原型時，原型很多方面的保真度都會得到提升，從而制作出中保真度原型。盡管使用這些工具創(chuàng)建線框圖，任務(wù)流和場景需要投入更多的時間和精力, 但制作出來的原型看起來也會更正式，更精煉。雖然可以引入品牌，顏色和風(fēng)格之類視覺元素, 但原型設(shè)計者們往往選擇避免使用他們，更多關(guān)注于展示軟件的行為。

原型交互性可以通過鏈接頁面或屏幕的方式模擬，但其功能保真度最好保持在中等會更佳。所以，這些原型最適合用于測試軟件是否滿足用戶需求，以及其用戶體驗是否達(dá)到最佳效果。

然后，這里為大家介紹兩個關(guān)于人們?yōu)槭裁从幸鈩?chuàng)建一個中保真度原型，而不是一個看起來像中等保真原型的原因:

*首先, 使用Balsamiq或 Visio工具制作出看起來低保真的原型，以便迫使用戶將其視為設(shè)計草稿或未完善的設(shè)計作品, 而不是經(jīng)過打磨且制作完成的最終成品。

*然后，給原型添加一個高視覺保真度 (例如, 在Photoshop 中制作完成的全面布局)，以便使用戶專注于原型的視覺和外觀設(shè)計，例如其顏色，字體，版式，圖標(biāo)和圖片等。

中保真度原型的創(chuàng)建速度是通過選擇和使用的模板、模具，可重用的組件以及元素來實現(xiàn)的。因此，隨著你對工具的選擇日益熟練, 原型創(chuàng)建過程也會變得更快。

3.高保真度

高保真原型是三類保真度原型中最真實的，也因此常常被誤認(rèn)為是軟件的最終成品。但這類原型的制作通常也是非常耗時的。早在幾年前，創(chuàng)建高保真原型的唯一方法就是通過使用編程語言編碼創(chuàng)建，當(dāng)然這通常也需要設(shè)計人員和開發(fā)人員共同協(xié)作，才能實現(xiàn)。

但是，如今，隨著應(yīng)用程序仿真工具的出現(xiàn)，非技術(shù)人員可以簡單拖拽UI組件，即可創(chuàng)建高保真原型，以模擬最終產(chǎn)品各項功能，甚至包括軟件業(yè)務(wù)邏輯和數(shù)據(jù)庫交互的原型化等。

當(dāng)你需要原型擁有高視覺和功能保真度時，創(chuàng)建高保真原型會更適合。例如，當(dāng)引入一項新技術(shù)時（比如說，當(dāng)需要將主機(jī)應(yīng)用程序——對，它們?nèi)匀淮嬖凇D(zhuǎn)化成基于Web的解決方案時），高保真原型就會更有用。

盡管大多數(shù)高保真原型都不能直接轉(zhuǎn)換為可用的代碼，但是它們卻是開發(fā)人員編寫和完成網(wǎng)頁或軟件提供了很好的參考，而且它們對于最終產(chǎn)品的可用性測試和用戶培訓(xùn)也非常有用的。

就原型的交互性和保真度而言，創(chuàng)建高保真原型會相對較快，尤其是當(dāng)你使用拖拽式原型工具制作時（如簡單快速的原型制作工具——?Mockplus）， 其創(chuàng)建速度會更快。此外，這類工具中的一部分還提供了搜集用戶反饋和記錄用戶需求的功能，能夠進(jìn)一步加速整個設(shè)計過程。雖然無需學(xué)習(xí)一種新的編程語言，這些工具也有一定的學(xué)習(xí)曲線。

4.為原型選擇一個適當(dāng)?shù)谋Ｕ婕墑e

選擇原型保真級別時，沒有一個統(tǒng)一的正確答案。大多數(shù)新產(chǎn)品設(shè)計最好從繪制草圖開始，然后根據(jù)系統(tǒng)的復(fù)雜程度和保真度的要求，將其轉(zhuǎn)化成中或高保真的原型。

例如，當(dāng)與某個制藥行業(yè)的客戶合作時，我們常常需要將草圖轉(zhuǎn)化成具有功能和內(nèi)容保真度，但低視覺保真度的交互原型。因為這類客戶更關(guān)心的是產(chǎn)品所提及內(nèi)容是否符合公司相關(guān)規(guī)定，而不是產(chǎn)品的外觀和感受。

而對于零售商客戶而言，我們設(shè)計的交互原型必須具有高視覺和功能保真度。但內(nèi)容保真度并不是很重要, 因為他們會重復(fù)使用這些內(nèi)容，并且已經(jīng)很熟悉它們了。對他們來說, 產(chǎn)品的外觀，感覺和互動體驗會更重要。

如何選擇一款高效的原型工具

根據(jù)不同的設(shè)計需求，你可以選擇和使用不同的原型工具。

一般而言，每個原型工具都有其特色和優(yōu)勢。所以，根據(jù)你的設(shè)計需求和所從事項目的特點，評估并選擇一款最適合的工具。而以下是評估工具時需要考慮的一些問題：

• 這款工具學(xué)習(xí)和使用起來是否容易？
• 這款工具是否支持創(chuàng)建網(wǎng)頁，打包和定制軟件原型以及桌面和移動端軟件原型？
• 這款工具是否提供可重復(fù)使用的模具，模板和組件存儲庫？
• 這款工具是否支持簡單的原型分享和審閱功能？是否支持反饋搜集功能？
• 這款工具是否支持實時修改和反饋整合功能？
• 這款工具是否支持允許多人同時處理同一項目的團(tuán)隊協(xié)作功能？
• 這款工具的注冊條件是什么？工具費(fèi)用又是多少？

注意事項

在下載這類工具制作原型之前，你需要牢記一些關(guān)于快速原型制作的注意事項：

應(yīng)該做些什么

• 在制作快速原型時，盡量與用戶，客戶和其他IT利益相關(guān)者協(xié)作。因為這樣不僅能夠幫助他們獲得有價值的反饋，還能在參與的過程中對最終產(chǎn)品獲得一種歸屬感。
• 通過預(yù)先設(shè)定過程期望的方式避免 “prototype creep”，例如預(yù)先設(shè)定目標(biāo)，保真度，范圍和周期等。而且，提醒包括你自己在內(nèi)的所有人，快速原型只是一種達(dá)到目的的手段，而不是目的本身。
• 當(dāng)創(chuàng)建交互式高保真原型和模型時, 設(shè)置一些能夠更真實反應(yīng)現(xiàn)實情況的延遲（例如屏幕刷新可能會出現(xiàn)的顯示延遲和步驟之間轉(zhuǎn)化可能產(chǎn)生的延遲）。這樣，用戶才不會對最終產(chǎn)品的及時響應(yīng)期望太高。
• 重用，重用，重用。對于基于計算機(jī)的原型工具而言，這就意味著，在創(chuàng)建原型的過程中，實時保存在將來項目創(chuàng)建中可能需要重復(fù)使用的模具，模板，樣式和組件等。
• 最重要的是, 開始原型審查之前，明確聲明, 這只是一個模擬原型, 并不是真實可用的解決方案。這樣可以提醒用戶, 這只是尋求最終解決方案過程中的一個環(huán)節(jié), 鼓勵用戶積極反饋。而且在高保真原型的情況下, 它也能夠避免用戶將其誤認(rèn)為是最終解決方案的情況。

不該做什么

• 不要原型化一些原型工具無法實現(xiàn)的特點或功能。如有任何疑問，請?zhí)崆芭c產(chǎn)品開放人員確認(rèn)清楚之后，再開始。
• 不要將原型審查中出現(xiàn)的每一個變更或請求都視為用戶新的需求。盡管快速原型化有助于捕捉未完成的需求，但是每一項新需求都應(yīng)該經(jīng)過仔細(xì)評估。因為有些可能會采用，而另外一些則可能需要在未來版本中改進(jìn)之后，再發(fā)布。
• 不要在沒有明確的反饋指導(dǎo)方針的情況下開始原型審查。準(zhǔn)確的說就是，提前確定和落實你所需要的反饋類型的具體細(xì)節(jié)。(例如：步驟是否合乎邏輯？導(dǎo)航是否清晰直觀？）如果沒有, 最好不要對獲得的一些無關(guān)緊要的用戶反饋太反感，例如 “我不喜歡在標(biāo)題中的藍(lán)色” 或 “我們不能使用這種字體代替原來的字體嗎？” 或者 “你能讓這個組件或部件更大, 更粗, 轉(zhuǎn)變成紅色并閃爍嗎？”
• 不要過分追求完美。 事實上，在大多數(shù)情況下, 快速原型并不需要做到100%的完美, 只需好到足以給大家一個一致的理解即可。
• 不要原型化軟件的所有細(xì)節(jié)。在大多數(shù)情況下, 你本就無需在原型中添加軟件的所有細(xì)節(jié)。

作者：Lyndon Cerejo

原文鏈接：https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototyping/

本文由@Mockplus團(tuán)隊翻譯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議