如何更好更快地完成設計之快速原型

如下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

「一副好圖賽過千言萬語」，這句老話道出了用戶界面原型的核心內容——使用各類可視化材料直接展現軟件系統和界面細節，遠遠比使用千言萬語口頭描述某些設計及開發規範來得更清楚，更直觀。而在用戶界面設計迭代的過程當中，快速原型就是指設計師迅速地建立原型，模擬網站或軟件系統將來狀態的過程，方便與更多的相關人員，例如用戶，投資者，開發者以及設計師，交流和驗證其設計構思。快速迭代原型設計，可以幫助設計師儘早的得到反饋，從而更有效地改進其最終設計，減小在開發過程當中須要更改的可能，提升工做效率。

軟件原型種類多樣，從粗略的紙上草圖到不管從外觀仍是功能上都能作到與終端產品極其類似的交互原型等，不盡相同。而建立優質快速原型的關鍵，就是須要設計師從用戶提出的意見反饋出發，結合適當的原型化方式，對軟件原型進行快速修改，從而提出更能知足用戶需求的設計方案。

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

快速原型設計過程：

快速原型設計包含三個步驟的屢次迭代：

1.原型建立階段

將用戶需求轉化成可視原型。 固然，建立原型的過程當中，也不要忘記將用戶體驗和一些需求的可行性考慮在內。

2.評價階段

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

3.完善階段

根據用戶反饋，找出須要改進或進一步完善和明確的地方。

 

原型一般從模擬軟件部分的關鍵區域開始。而後，隨着一些必要區域的增長，原型也在屢次更迭過程當中變得更加的全面，且逐漸細化，直到原型完成並交付開發人員最終開發，整個設計過程才得以結束。而整個過程當中，隨着原型類型的變化，建立原型的速度也會明顯的發生變化，例如實時變化到長達數天的更迭變化，各不相同。

 

界定原型範圍

「原型」，這個詞經常令人聯想到一個編碼完整，功能齊全的軟件或界面。可是，快速原型卻並不與任何功能齊全的解決方案相關聯，它僅僅只是爲了幫助用戶更加直觀的瞭解和測試最終產品的用戶體驗而建立。清楚了這一點以後，在建立任何原型以前，你還須要明確幾個關鍵性問題來界定原型範圍：

1.什麼須要原型化？

軟件的許多優秀設計能夠添加到原型之中，例如複雜的交互，新添加功能以及流程，技術或設計方面的變化等。好比，當你想要爲用戶提供不同凡響的搜索體驗時，就須要原型化軟件搜索結果。在原型中，引入多面搜索或添加在不離開搜索頁面的狀況下，便可預覽文檔的功能等。

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

對於這個問題，一個好的解決方法就是集中添加一些未來80%時間內會使用的20%的功能要素，即原型化一些最經常使用的關鍵性功能。也請牢記，快速原型設計的目的在於展現軟件如何運行，或者在之後，軟件的外觀將如何。因此，並不須要對整個產品進行原型化。

 

3.設計原型故事場景

在肯定了須要進行原型化的軟件區域以後，你須要將它們組合成一個或多個場景，而且根據原型所模擬的用戶體驗制定一個統一的路徑。例如，對於出售鞋子的網站來講，可能出現的場景是：「無聊的喬」購買了一雙與六個月前購買的鞋子徹底相同的耐克跑鞋。又或者可能出現的另一個場景是：「探索山姆」搜索10號大小的鞋子時，發現了一雙牛津鞋和一雙他很感興趣的樂福鞋。

 

4.規劃原型迭代

原型一般不可能在單次迭代中成功構建，它須要通過一次次的迭代才能建立並獲得完善。而實現快速迭代的一個好方法就是，一開始普遍全面的對軟件進行原型化，而後逐步深刻到解決方案選定區域的原型化，如此由淺入深逐漸完成整個軟件的原型化，加快更迭速度。詳細的說就是，當你爲網站製做原型時，在第一次迭代的過程當中，首先建立網站的主頁和登陸頁面（有時稱做水平原型），而後緊接着審查和修改這個原型框架。 隨後，原型的迭代可深刻到針對網站一個或多個區域的原型化（也稱垂直原型）。而當你爲一個媒體下載網站製做原型時，你則須要首先建立用戶查找和下載視屏的步驟的相關頁面，或者是他們該如何在其在線收藏中管理這些媒體的相關頁面等。

 

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

保真度通常是指原型與最終解決方案的類似程度。它擁有多個維度, 而原型能夠位於任何維度的任何地方。在不一樣的設計階段，根據不一樣的原型設計目標，爲如下各項選擇合適的保真度：

 

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

視覺和感受是原型保真中最值得關注的兩個維度。如若選擇不當，會使用戶對於原型的審查偏離原本的設計目標，而提出不太恰當的反饋意見。太快的實現高保真，也會讓用戶會更多的專一於原型的視覺設計，而這在原型設計的早期階段是很是不合適的。從視覺角度來看，原型不必定要擁有完美的像素，但應該是成比例的。好比，若是左導航區域必須佔據1024像素屏幕的五分之一，在原型中其寬度並不須要佔足204像素，只需按照必定的比例顯示便可。此外，隨着原型在設計週期中發展和更迭，你也須要添加樣式、顏色、品牌和圖形等元素來提升其視覺保真度。

 

*功能保真度（靜態<->交互式）

這個原型是否揭示瞭解決方案是如何運做的（靜態的）或者它是否功能完備，並可以對用戶輸入作出響應（交互式的）？這個維度對用戶來講並無什麼干擾，可是在隨後的原型迭代過程當中須要增長其交互性，提升其功能保真度，以便容許原型用於可用性測試，訓練以及交流之中。

 

*內容保真度（亂數假文<->真實內容）

而另一個時常干擾用戶的維度是原型中顯示的內容。在原型設計早期，波浪線和虛擬文本，例如亂數假文，是很是有用的。可是，隨着原型的改進，你也須要評估利用真實的內容來替換虛擬文本的必要性，以便了解它將如何影響原型的總體設計。

 

原型保真度

1.低保真度

最快，最簡單地開始原型製做的方法就是：將筆放在紙上。在紙上繪製原型草圖是全部人均可以作到的一種低保真的方法，無需任何特殊工具或經驗要求。做爲設計早期最常使用的方法，草圖是一種可以快速建立體現設計方法和理念的粗略原型，得到用戶反饋的方法。在頭腦風暴和想法概念化的過程當中，紙質原型是很是理想的。它能夠在僅有寫字板的小房間中進行，也能夠在帶有活動掛圖（或白板）和標記的小組中進行。。。

做爲低保真原型，紙質原型是靜態的，且一般具備較低視覺和內容保真度。這也迫使用戶更多的集中於如何使用原型系統，而不是其外觀。同時，這也使得設計師更願意根據用戶的反饋進行修改。

所以，低保真原型更易於快速原型化。它沒有學習曲線，但容許你簡單快速地更改。

2.中保真度

當咱們使用Visio和Omnigraffle之類的計算機工具設計建立原型時，原型不少方面的保真度都會獲得提高，從而製做出中保真度原型。儘管使用這些工具建立線框圖，任務流和場景須要投入更多的時間和精力, 但製做出來的原型看起來也會更正式，更精煉。雖然能夠引入品牌，顏色和風格之類視覺元素, 但原型設計者們每每選擇避免使用他們，更多關注於展現軟件的行爲。

原型交互性能夠經過連接頁面或屏幕的方式模擬，但其功能保真度最好保持在中等會更佳。因此，這些原型最適合用於測試軟件是否知足用戶需求，以及其用戶體驗是否達到最佳效果。

 

而後，這裏爲你們介紹兩個關於人們爲何有意建立一箇中保真度原型，而不是一個看起來像中等保真原型的緣由:

 

*首先, 使用Balsamiq或 Visio工具製做出看起來低保真的原型，以便迫使用戶將其視爲設計草稿或未完善的設計做品, 而不是通過打磨且製做完成的最終成品。

 

*而後，給原型添加一個高視覺保真度 (例如, 在Photoshop 中製做完成的全面佈局)，以便使用戶專一於原型的視覺和外觀設計，例如其顏色，字體，版式，圖標和圖片等。

 

中保真度原型的建立速度是經過選擇和使用的模板、模具，可重用的組件以及元素來實現的。所以，隨着你對工具的選擇日益熟練, 原型建立過程也會變得更快。

 

3.高保真度

高保真原型是三類保真度原型中最真實的，也所以經常被誤認爲是軟件的最終成品。但這類原型的製做一般也是很是耗時的。早在幾年前，建立高保真原型的惟一方法就是經過使用編程語言編碼建立，固然這一般也須要設計人員和開發人員共同協做，才能實現。可是，現在，隨着應用程序仿真工具的出現，非技術人員能夠簡單拖拽UI組件，便可建立高保真原型，以模擬最終產品各項功能，甚至包括軟件業務邏輯和數據庫交互的原型化等。

 

當你須要原型擁有高視覺和功能保真度時，建立高保真原型會更適合。例如，當引入一項新技術時（好比說，當須要將主機應用程序——對，它們仍然存在——轉化成基於Web的解決方案時），高保真原型就會更有用。儘管大多數高保真原型都不能直接轉換爲可用的代碼，可是它們倒是開發人員編寫和完成網頁或軟件提供了很好的參考，並且它們對於最終產品的可用性測試和用戶培訓也很是有用的。

就原型的交互性和保真度而言，建立高保真原型會相對較快，尤爲是當你使用拖拽式原型工具製做時（如簡單快速的原型製做工具—— Mockplus）， 其建立速度會更快。此外，這類工具中的一部分還提供了蒐集用戶反饋和記錄用戶需求的功能（例如Mockplus團隊協做項目的在線評論和備註功能），可以進一步加速整個設計過程。雖然無需學習一種新的編程語言，這些工具也有必定的學習曲線。

 

4.爲原型選擇一個適當的保真級別

選擇原型保真級別時，沒有一個統一的正確答案。大多數新產品設計最好從繪製草圖開始，而後根據系統的複雜程度和保真度的要求，將其轉化成中或高保真的原型。

例如，當與某個製藥行業的客戶合做時，咱們經常須要將草圖轉化成具備功能和內容保真度，但低視覺保真度的交互原型。由於這類客戶更關心的是產品所說起內容是否符合公司相關規定，而不是產品的外觀和感覺。

而對於零售商客戶而言，咱們設計的交互原型必須具備高視覺和功能保真度。但內容保真度並非很重要, 由於他們會重複使用這些內容，而且已經很熟悉它們了。對他們來講, 產品的外觀，感受和互動體驗會更重要。

 

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

根據不一樣的設計需求，你能夠選擇和使用不一樣的原型工具。

通常而言，每一個原型工具都有其特點和優點。因此，根據你的設計需求和所從事項目的特色，評估並選擇一款最適合的工具。而如下是評估工具時須要考慮的一些問題：

*這款工具學習和使用起來是否容易？

*這款工具是否支持建立網頁，打包和定製軟件原型以及桌面和移動端軟件原型？

*這款工具是否提供可重複使用的模具，模板和組件存儲庫？

*這款工具是否支持簡單的原型分享和審閱功能？是否支持反饋蒐集功能？

*這款工具是否支持實時修改和反饋整合功能？

*這款工具是否支持容許多人同時處理同一項目的團隊協做功能？

*這款工具的註冊條件是什麼？工具費用又是多少？

 

注意事項

在下載這類工具製做原型以前，你須要牢記一些關於快速原型製做的注意事項：

 

應該作些什麼：

 

*在製做快速原型時，儘可能與用戶，客戶和其餘IT利益相關者協做。由於這樣不只可以幫助他們得到有價值的反饋，還能在參與的過程當中對最終產品得到一種歸屬感。

 

*經過預先設定過程指望的方式避免 「prototype creep」，例如預先設定目標，保真度，範圍和週期等。並且，提醒包括你本身在內的全部人，快速原型只是一種達到目的的手段，而不是目的自己。

 

*當建立交互式高保真原型和模型時, 設置一些可以更真實反應現實狀況的延遲（例如屏幕刷新可能會出現的顯示延遲和步驟之間轉化可能產生的延遲）。這樣，用戶纔不會對最終產品的及時響應指望過高。

 

*重用，重用，重用。對於基於計算機的原型工具而言，這就意味着，在建立原型的過程當中，實時保存在未來項目建立中可能須要重複使用的模具，模板，樣式和組件等。

 

*最重要的是, 開始原型審查以前，明確聲明, 這只是一個模擬原型, 並非真實可用的解決方案。這樣能夠提醒用戶, 這只是尋求最終解決方案過程當中的一個環節, 鼓勵用戶積極反饋。並且在高保真原型的狀況下, 它也可以避免用戶將其誤認爲是最終解決方案的狀況。

 

不應作什麼：

*不要原型化一些原型工具沒法實現的特色或功能。若有任何疑問，請提早與產品開放人員確認清楚以後，再開始。

 

*不要將原型審查中出現的每個變動或請求都視爲用戶新的需求。儘管快速原型化有助於捕捉未完成的需求，可是每一項新需求都應該通過仔細評估。由於有些可能會採用，而另一些則可能須要在將來版本中改進以後，再發布。

 

*不要在沒有明確的反饋指導方針的狀況下開始原型審查。準確的說就是，提早肯定和落實你所須要的反饋類型的具體細節。(例如：步驟是否合乎邏輯？導航是否清晰直觀？）若是沒有, 最好不要對得到的一些可有可無的用戶反饋太反感，例如 「我不喜歡在標題中的藍色」 或 「咱們不能使用這種字體代替原來的字體嗎？」 或者 「你能讓這個組件或部件更大, 更粗, 轉變成紅色並閃爍嗎？」

 

*不要過度追求完美。 事實上，在大多數狀況下, 快速原型並不須要作到100%的完美, 只需好到足以給你們一個一致的理解便可。

 

*不要原型化軟件的全部細節。在大多數狀況下, 你本就無需在原型中添加軟件的全部細節。

 

做者：Lyndon Cerejo

原文連接:

https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototyping/