做網際網路產品的小夥伴一定不會對“原型”這個詞感到陌生。它就像“使用者體驗”一樣經常被各類人掛在嘴邊。它有許多近義詞，如線框圖、故事板等。那麼究竟什麼是原型設計，我們為什麼需要原型設計，如何進行原型設計呢？

本文將梳理關於原型的前世今生，弄清楚它到底是個啥，我們如何使用它。

原型設計是什麼

原型是一種讓使用者提前體驗產品、交流設計構想、展示覆雜系統的方式。就本質而言，原型是一種溝通工具。

線框圖描繪的是頁面功能結構，它不是設計稿，也不代表最終佈局，線框圖所展示的佈局，最主要的作用是描述功能與內容的邏輯關係。

原型圖是最終系統的代表模型或者模擬，比線框圖更加真實、細緻。

原型設計的目的

很難想象一個沒有原型的產品是如何誕生的。

原型設計的核心目的在於測試產品，沒有哪一家網際網路公司可以不經過測試，就直接上產品和服務。

原型在識別問題、減少風險、節省成本等方面有著不可替代的價值。

雖然需求文件也是可以滿足溝通需求的，通過用例將互動寫到設計描述文件中，但是原型可以更詳細地解釋互動。

你可以用螢幕錄製軟體或者用一隻手機對著螢幕拍攝下你操作原型的過程，邊錄製可以邊評論，比如：“我現在有點暈了，不知道該怎麼操作，或許點選這裡看看……哎呀，好像點錯了。”

原型設計的流程

開始做原型之前，請先考慮清楚以下幾個要素：

• 做這個原型的目的是什麼？
• 這個原型的受眾是誰？
• 這個原型有多大效率幫助我傳達設計或測試設計？
• 有多少時間做原型？需要什麼級別的保真程度？

• 步驟一：畫草圖
  畫草圖的目標是提煉想法，並且最好給畫草圖加上一個時間限制，那就是15分鐘。

  如果你繪畫能力很差，那麼恭喜你，可能你能更好地用好草圖，因為你的注意力沒有放在美化你正在畫什麼上面。

  畫草圖要避免陷入審美細節，儘可能快速的匯出想法才是關鍵。

• 步驟二：演示及評論
  演示和評論的目標是把一些想法拿出來跟大家分享，然後進一步完善想法。在演示過程中，要做好記錄，演示和評論的時間可以對半分。
• 步驟三：做原型
  在明確了想法之後，就可以開始進行原型設計了。這個階段需要考慮很多細節，找出切實可行的方案，運用合適的原型來表達。
• 步驟四：測試
  原型的目標之一是讓受眾來檢驗產品是否達到了預期，因此可以請5-6位測試者，通過音視訊捕捉等方式，看看產品原型是否被順暢地使用了。

原型設計工具

選擇什麼工具來製作原型？主要考慮以下幾個因素（排名分先後）：

• 熟悉程度和獲得工具的便利度；
• 所需的時間和精力；
• 可複用的程式碼/框架；
• 為測試建立可用的原型；
• 價格和學習曲線。

不得不說，這個結果很讓人吃驚，沒想到有那麼多人用Dreamweaver做原型，在這裡我介紹兩種我經常用到的原型設計工具。

PPT和Keynote

• 優點：
  • 技術門檻低，學習曲線不陡峭；
  • 可用幻燈片母版，複用性高；
  • 模擬移動端產品，修改畫板適應手機端尺寸即可；
  • 可匯出為HTML或PDF檔案；
• 缺點：
  • 繪畫工具有限；
  • 互動動作有限；

現在非常流行把Sketch與Keynote放在一起用，簡單說就是把Sketch裡的圖層、部件拖拽到Keynote中，然後新增Action動作，按照劇本完成一套互動。

Axure RP

Axure的優點不用多說，但使用它一個工具就能滿足設計和文件需求（通過註解，生成規格文件）。

Axure自帶的部件庫也給製作過程帶來了便捷，類似Omnigraffle的stencil一樣，避免了重新發明輪子。

要掌握Axure，主要應該弄懂四大核心功能：

• 母版：主要用於製作網頁的頁頭、頁尾，可複用性高；
• 動態皮膚：核心中的核心，“層”的概念很重要；
• 圖片熱區：在一張完整的圖片上通過熱區，建立互動動作；
• 函式和變數：區域性變數和全域性變數的概念以及應用（比如使用者登陸效果）。

Axure 7.0還有中繼器這個功能，但是個人覺得比較雞肋，學習成本也比較高，主要可以用來做搜尋框的搜尋結果聯想的原型。

原型測試流程

原型測試是原型設計過程中的關鍵步驟，是整體流程中主要的里程碑之一。

可用性測試是一個龐大的話題，測試方法有一對一或者遠端測試，難點是從測試中得到有質量的成功。

測試結果取決於測試者，務必招募到合適的人。要找到合適的人，需要對測試者制定一系列的篩選標準，比如一個社交產品絕對不可能找一個連電子郵件都沒有的人來測試。

測試時長可以是一個小時左右，足以測試5個到6個左右的關鍵場景，並列出一些觀察結果和關鍵問題，例如：

• 使用者如何開始任務的？（是搜尋還是瀏覽？）
• 他先做了什麼，再做了什麼？
• 他如何做出最終決定的？
• 他們是否領會了設計意圖？有什麼操作困難？

關於記錄測試結果，可以結合定性和定量兩種方式，做一張計分表，用1-5的程度來表示；同時定性地記錄使用者的一些表達，儘可能地原話記錄。

最後分析這些記錄，改善設計。

產品原型設計或者說產品開發是沒有盡頭的，它是一個不斷髮展，迴圈上升，整合知識和經驗，不斷迭代和完善過程。