起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何更好更快地完成設計之快速原型？
一副好圖勝過千言萬語。
“一副好圖勝過千言萬語”，這句老話道出了用戶界面原型的核心內容——使用各種可視化材料直接展示軟件系統和界面細節，遠遠比使用千言萬語口頭描述某些設計及開發規范來得更清楚，更直觀。
而在用戶界面設計迭代的過程中，快速原型就是指設計師迅速地創建原型，模擬網站或軟件系統未來狀態的過程，方便與更多的相關人員，例如用戶，投資者，開發者以及設計師，交流和驗證其設計構思?？焖俚驮O計，能夠幫助設計師盡早的獲得反饋，從而更有效地改進其最終設計，減少在開發過程中需要更改的可能，提高工作效率。
軟件原型種類多樣，從粗略的紙上草圖到無論從外觀還是功能上都能做到與終端產品極其相似的交互原型等，不盡相同。而創建優質快速原型的關鍵，就是需要設計師從用戶提出的意見反饋出發，結合適當的原型化方式，對軟件原型進行快速修改，從而提出更能滿足用戶需求的設計方案。
快速原型設計可以幫助設計師團隊快速地測試和迭代多種設計構思和方法，方便他們在交流討論的過程中使用更加直觀可視的設計材料，而不僅僅是口頭描述。同時也能夠確保參其中的每個人都能獲得一致的認識，降低甚至避免漏掉一些重要需求的風險。最終達到更快更快地完成軟件設計的目的。
快速原型設計過程
快速原型設計包含三個步驟的多次迭代：
1.原型創建階段
將用戶需求轉化成可視原型。 當然，創建原型的過程中，也不要忘記將用戶體驗和一些需求的可行性考慮在內。
2.評價階段
與用戶分享原型，并評估原型是否滿足了他們的需求。
3.完善階段
根據用戶反饋，找出需要改進或進一步完善和明確的地方。
原型通常從模擬軟件部分的關鍵區域開始。然后，隨著一些必要區域的增加，原型也在多次更迭過程中變得更加的全面，且逐漸細化，直到原型完成并交付開發人員最終開發，整個設計過程才得以結束。而整個過程中，隨著原型類型的變化，創建原型的速度也會明顯的發生變化，例如實時變化到長達數天的更迭變化，各不相同。
界定原型范圍
“原型”，這個詞常常使人聯想到一個編碼完整，功能齊全的軟件或界面。但是，快速原型卻并不與任何功能齊全的解決方案相關聯，它僅僅只是為了幫助用戶更加直觀的了解和測試最終產品的用戶體驗而創建。清楚了這一點之后，在創建任何原型之前，你還需要明確幾個關鍵性問題來界定原型范圍：
1.什么需要原型化？
軟件的許多優秀設計可以添加到原型之中，例如復雜的交互，新添加功能以及流程，技術或設計方面的變化等。比如，當你想要為用戶提供與眾不同的搜索體驗時，就需要原型化軟件搜索結果。在原型中，引入多面搜索或添加在不離開搜索頁面的情況下，即可預覽文檔的功能等。
2.多少軟件部件需要原型化？
對于這個問題，一個好的解決方法就是集中添加一些將來80%時間內會使用的20%的功能要素，即原型化一些最常用的關鍵性功能。也請牢記，快速原型設計的目的在于展示軟件如何運行，或者在以后，軟件的外觀將如何。所以，并不需要對整個產品進行原型化。
3.設計原型故事場景
在確定了需要進行原型化的軟件區域之后，你需要將它們組合成一個或多個場景，并且根據原型所模擬的用戶體驗制定一個統一的路徑。例如，對于出售鞋子的網站來說，可能出現的場景是：“無聊的喬”購買了一雙與六個月前購買的鞋子完全相同的耐克跑鞋。又或者可能出現的另外一個場景是：“探索山姆”搜索10號大小的鞋子時，發現了一雙牛津鞋和一雙他很感興趣的樂福鞋。
4.規劃原型迭代
原型通常不可能在單次迭代中成功構建，它需要經過一次次的迭代才能創建并得到完善。而實現快速迭代的一個好方法就是，一開始廣泛全面的對軟件進行原型化，然后逐步深入到解決方案選定區域的原型化，如此由淺入深逐漸完成整個軟件的原型化，加快更迭速度。詳細的說就是，當你為網站制作原型時，在第一次迭代的過程中，首先創建網站的主頁和登錄頁面（有時稱作水平原型），然后緊接著審查和修改這個原型框架。
隨后，原型的迭代可深入到針對網站一個或多個區域的原型化（也稱垂直原型）。而當你為一個媒體下載網站制作原型時，你則需要首先創建用戶查找和下載視屏的步驟的相關頁面，或者是他們該如何在其在線收藏中管理這些媒體的相關頁面等。
5.選擇合適的原型保真度
保真度一般是指原型與最終解決方案的相似程度。它擁有多個維度, 而原型可以位于任何維度的任何地方。在不同的設計階段，根據不同的原型設計目標，為以下各項選擇合適的保真度：
視覺保真度（草圖<->樣式）
視覺和感覺是原型保真中最值得關注的兩個維度。如若選擇不當，會使用戶對于原型的審查偏離本來的設計目標，而提出不太恰當的反饋意見。太快的實現高保真，也會讓用戶會更多的專注于原型的視覺設計，而這在原型設計的早期階段是非常不合適的。從視覺角度來看，原型不一定要擁有完美的像素，但應該是成比例的。
比如，如果左導航區域必須占據1024像素屏幕的五分之一，在原型中其寬度并不需要占足204像素，只需按照一定的比例顯示即可。此外，隨著原型在設計周期中發展和更迭，你也需要添加樣式、顏色、品牌和圖形等元素來提高其視覺保真度。
功能保真度（靜態<->交互式）
這個原型是否揭示了解決方案是如何運作的（靜態的）或者它是否功能完備，并能夠對用戶輸入做出響應（交互式的）？這個維度對用戶來說并沒有什么干擾，但是在隨后的原型迭代過程中需要增加其交互性，提高其功能保真度，以便允許原型用于可用性測試，訓練以及交流之中。
內容保真度（亂數假文<->真實內容）
而另外一個時常干擾用戶的維度是原型中顯示的內容。在原型設計早期，波浪線和虛擬文本，例如亂數假文，是非常有用的。但是，隨著原型的改進，你也需要評估利用真實的內容來替換虛擬文本的必要性，以便了解它將如何影響原型的整體設計。
原型保真度
1.低保真度
最快，最簡單地開始原型制作的方法就是：將筆放在紙上。在紙上繪制原型草圖是所有人都可以做到的一種低保真的方法，無需任何特殊工具或經驗要求。作為設計早期最常使用的方法，草圖是一種能夠快速創建體現設計方法和理念的粗略原型，獲得用戶反饋的方法。
在頭腦風暴和想法概念化的過程中，紙質原型是非常理想的。它可以在僅有寫字板的小房間中進行，也可以在帶有活動掛圖（或白板）和標記的小組中進行。。。
作為低保真原型，紙質原型是靜態的，且通常具有較低視覺和內容保真度。這也迫使用戶更多的集中于如何使用原型系統，而不是其外觀。同時，這也使得設計師更愿意根據用戶的反饋進行修改。
因此，低保真原型更易于快速原型化。它沒有學習曲線，但允許你簡單快速地更改。
2.中保真度
當我們使用Visio和Omnigraffle之類的計算機工具設計創建原型時，原型很多方面的保真度都會得到提升，從而制作出中保真度原型。盡管使用這些工具創建線框圖，任務流和場景需要投入更多的時間和精力, 但制作出來的原型看起來也會更正式，更精煉。雖然可以引入品牌，顏色和風格之類視覺元素, 但原型設計者們往往選擇避免使用他們，更多關注于展示軟件的行為。
原型交互性可以通過鏈接頁面或屏幕的方式模擬，但其功能保真度最好保持在中等會更佳。所以，這些原型最適合用于測試軟件是否滿足用戶需求，以及其用戶體驗是否達到最佳效果。
然后，這里為大家介紹兩個關于人們為什么有意創建一個中保真度原型，而不是一個看起來像中等保真原型的原因:
*首先, 使用Balsamiq或 Visio工具制作出看起來低保真的原型，以便迫使用戶將其視為設計草稿或未完善的設計作品, 而不是經過打磨且制作完成的最終成品。
*然后，給原型添加一個高視覺保真度 (例如, 在Photoshop 中制作完成的全面布局)，以便使用戶專注于原型的視覺和外觀設計，例如其顏色，字體，版式，圖標和圖片等。
中保真度原型的創建速度是通過選擇和使用的模板、模具，可重用的組件以及元素來實現的。因此，隨著你對工具的選擇日益熟練, 原型創建過程也會變得更快。
3.高保真度
高保真原型是三類保真度原型中最真實的，也因此常常被誤認為是軟件的最終成品。但這類原型的制作通常也是非常耗時的。早在幾年前，創建高保真原型的唯一方法就是通過使用編程語言編碼創建，當然這通常也需要設計人員和開發人員共同協作，才能實現。
但是，如今，隨著應用程序仿真工具的出現，非技術人員可以簡單拖拽UI組件，即可創建高保真原型，以模擬最終產品各項功能，甚至包括軟件業務邏輯和數據庫交互的原型化等。
當你需要原型擁有高視覺和功能保真度時，創建高保真原型會更適合。例如，當引入一項新技術時（比如說，當需要將主機應用程序——對，它們仍然存在——轉化成基于Web的解決方案時），高保真原型就會更有用。
盡管大多數高保真原型都不能直接轉換為可用的代碼，但是它們卻是開發人員編寫和完成網頁或軟件提供了很好的參考，而且它們對于最終產品的可用性測試和用戶培訓也非常有用的。
就原型的交互性和保真度而言，創建高保真原型會相對較快，尤其是當你使用拖拽式原型工具制作時（如簡單快速的原型制作工具——?Mockplus）， 其創建速度會更快。此外，這類工具中的一部分還提供了搜集用戶反饋和記錄用戶需求的功能，能夠進一步加速整個設計過程。雖然無需學習一種新的編程語言，這些工具也有一定的學習曲線。
4.為原型選擇一個適當的保真級別
選擇原型保真級別時，沒有一個統一的正確答案。大多數新產品設計最好從繪制草圖開始，然后根據系統的復雜程度和保真度的要求，將其轉化成中或高保真的原型。
例如，當與某個制藥行業的客戶合作時，我們常常需要將草圖轉化成具有功能和內容保真度，但低視覺保真度的交互原型。因為這類客戶更關心的是產品所提及內容是否符合公司相關規定，而不是產品的外觀和感受。
而對于零售商客戶而言，我們設計的交互原型必須具有高視覺和功能保真度。但內容保真度并不是很重要, 因為他們會重復使用這些內容，并且已經很熟悉它們了。對他們來說, 產品的外觀，感覺和互動體驗會更重要。
如何選擇一款高效的原型工具
根據不同的設計需求，你可以選擇和使用不同的原型工具。
一般而言，每個原型工具都有其特色和優勢。所以，根據你的設計需求和所從事項目的特點，評估并選擇一款最適合的工具。而以下是評估工具時需要考慮的一些問題：
- 這款工具學習和使用起來是否容易？
- 這款工具是否支持創建網頁，打包和定制軟件原型以及桌面和移動端軟件原型？
- 這款工具是否提供可重復使用的模具，模板和組件存儲庫？
- 這款工具是否支持簡單的原型分享和審閱功能？是否支持反饋搜集功能？
- 這款工具是否支持實時修改和反饋整合功能？
- 這款工具是否支持允許多人同時處理同一項目的團隊協作功能？
- 這款工具的注冊條件是什么？工具費用又是多少？
注意事項
在下載這類工具制作原型之前，你需要牢記一些關于快速原型制作的注意事項：
應該做些什么
- 在制作快速原型時，盡量與用戶，客戶和其他IT利益相關者協作。因為這樣不僅能夠幫助他們獲得有價值的反饋，還能在參與的過程中對最終產品獲得一種歸屬感。
- 通過預先設定過程期望的方式避免 “prototype creep”，例如預先設定目標，保真度，范圍和周期等。而且，提醒包括你自己在內的所有人，快速原型只是一種達到目的的手段，而不是目的本身。
- 當創建交互式高保真原型和模型時, 設置一些能夠更真實反應現實情況的延遲（例如屏幕刷新可能會出現的顯示延遲和步驟之間轉化可能產生的延遲）。這樣，用戶才不會對最終產品的及時響應期望太高。
- 重用，重用，重用。對于基于計算機的原型工具而言，這就意味著，在創建原型的過程中，實時保存在將來項目創建中可能需要重復使用的模具，模板，樣式和組件等。
- 最重要的是, 開始原型審查之前，明確聲明, 這只是一個模擬原型, 并不是真實可用的解決方案。這樣可以提醒用戶, 這只是尋求最終解決方案過程中的一個環節, 鼓勵用戶積極反饋。而且在高保真原型的情況下, 它也能夠避免用戶將其誤認為是最終解決方案的情況。
不該做什么
- 不要原型化一些原型工具無法實現的特點或功能。如有任何疑問，請提前與產品開放人員確認清楚之后，再開始。
- 不要將原型審查中出現的每一個變更或請求都視為用戶新的需求。盡管快速原型化有助于捕捉未完成的需求，但是每一項新需求都應該經過仔細評估。因為有些可能會采用，而另外一些則可能需要在未來版本中改進之后，再發布。
- 不要在沒有明確的反饋指導方針的情況下開始原型審查。準確的說就是，提前確定和落實你所需要的反饋類型的具體細節。(例如：步驟是否合乎邏輯？導航是否清晰直觀？）如果沒有, 最好不要對獲得的一些無關緊要的用戶反饋太反感，例如 “我不喜歡在標題中的藍色” 或 “我們不能使用這種字體代替原來的字體嗎？” 或者 “你能讓這個組件或部件更大, 更粗, 轉變成紅色并閃爍嗎？”
- 不要過分追求完美。 事實上，在大多數情況下, 快速原型并不需要做到100%的完美, 只需好到足以給大家一個一致的理解即可。
- 不要原型化軟件的所有細節。在大多數情況下, 你本就無需在原型中添加軟件的所有細節。
作者：Lyndon Cerejo
原文鏈接：https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototyping/
本文由@Mockplus團隊翻譯 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
有漢化包嗎？網上一直沒找到呢