本教程將從整體和局部實例兩個部分來講解原型設計的步驟。產品的原型設計一般是基於文檔的形式所表達出來的形象設計，想要把產品原型設計做好其實並不容易，想把原型做得比文檔好更不容易，這里會結合一些產品原型設計的方法以及技巧來介紹原型設計的步驟，希望可以幫到有需要的朋友。
設計原型也是講究方法步驟的，一是要提升原型設計的合理性，避免出現頭重腳輕的保真程度不一致的情況；二是要減少原型設計所占用的時間，大家各自的工作時間都是很寶貴的，不可能在原型設計上投入過多的時間，因此掌握一些原型設計的方法和技巧相當必要。在產品的整體研發流程中，需求分析部分結束后，就應該形成明確的產品需求了，而此時要做的，是需要把這些產品需求表達出來，從表達效果來看，原型要好於文檔的形式。
產品的原型設計實現一般區分整體和局部，整體上更多考慮信息架構的設計，如功能結構、導航、菜單、布局排版等方面的，局部上更多考慮功能上的交互設計，如按鈕點擊、反饋、頁面切換、局部模塊的整體展示等。從設計實現的角度來看，由總到分逐漸細化的過程是比較適合的。下面從整體和局部實例兩個部分來講解原型設計的步驟。
第一、確定產品的整體結構
不管是哪種工作，由總到分逐漸細化的過程通常都是最好的方法，就比如現在蓋房子時的地基和框架結構，整個結構決定了將來的房型樣子，及房子是否穩固。而產品的結構設計則決定了產品未來的功能導航結構。一般來講，我們在做需求分析的時候，都會把幾個主要的功能點抓出來，這幾個功能點就可以濃縮一下形成產品的初步功能結構。比如要做一個合同管理的功能，要求實現合同信息管理，合同履約管理，合同統計報表等功能，這里列出來的核心功能點就是主要結構。再比如我們要做一個會員管理的功能，注冊和登錄是必不可少的功能點，那么就可以將其列為會員管理下的兩個基本結構。其實每個產品最終確定下來的一級導航欄里面的各個欄目就是產品的功能結構。
第二、確定產品的布局排版
確定產品的整體結構之后，一般都會先對頁面進行布局設計的考慮，然后再考慮對每一個產品頁面進行元素的排版。通常我們做產品設計的時候，都會遵循一些已有產品總結出來的布局結構，比如三行三列布局，三行兩列布局等，再如左導航右內容的形式，左內容右導航的形式等，這些都是大的布局結構，是整體頁面的布局排版。
細分到具體頁面內容的時候，就需要對每一個內容塊的展示位置進行布局，如企業網站首頁的一般內容有圖片新聞，通知通告，公司新聞，產品介紹，產品展示等等，我們需要對這些內容塊進行一定的設計布局，這里的布局結構取決於設計人員對內容編排的把握，不同的布局會產生不同的效果。如電子商務網站，對內容塊和廣告塊的布局排版就非常講究，因為不一樣的布局，所帶來的用戶點擊量和轉化率是不一樣的。這種情況下，即對某一類產品的布局把握不好的時候，可以參照已有成熟產品的內容布局，因為它們已經有運營數據在支撐。
第三、確定產品的功能模塊
功能模塊是指數據說明、可執行語句等程序元素的集合，它是指單獨命名的可通過名字來訪問的過程、函數、子程序或宏調用。功能模塊化是將程序划分成若干個功能模塊，每個功能模塊完成了一個子功能，再軟件結構圖示把這些功能模塊總起來組成一個整體。以滿足所要求的整個系統的功能。功能模塊化的根據是，如果一個問題有多個問題組合而成，那么這個組合問題的復雜程度將大於分別考慮這個問題時的復雜程度之和。
確定產品的布局排版就相當於決定了某個產品功能模塊的放置位置，接着就可以一塊一塊的確定原型設計內容，使其接近於最終產品的展示樣式。這個時候就要用到原型設計的實例了，比如圖片新聞，我們可以用幻燈片效果來做，比如產品展示，我們可以用跑馬燈效果來做，具體采用什么樣的交互效果來實現功能塊要求展示的內容，取決於產品設計人員的把握、用戶的需求及用戶體驗，其中用戶體驗是比較大的一塊，就拿幻燈片效果來說，是否需要設計數字導航鍵，是否需要自動播放，是否需要設計縮略圖等等，這些都需要仔細考慮之后再做決定，這個可以在設計產品時候多多討論溝通，多看看別人的設計效果。譬如電子商務網站首頁的Banner圖片輪播效果，就是幻燈片效果，各大電商網站的設計大同小異，就完全可以借鑒參考。
按照以上三個步驟一步步坐下來的話，其實產品的低保真原型就出來了，比較簡單的產品，可以直接拿着低保真原型去做演示和寫PRD文檔，雖然這樣的原型不帶任何交互效果，但基本上還是可以說清楚產品功能的，結合細化之后的文檔進行說明。然后我們所面對的通常都不是簡單的產品，因此最起碼要到中保真程度原型，結合交互的效果來達到我們的設計目的。
要細化這樣的交互設計，就需要在產品功能模塊的原型設計上更進一步，把每個功能模塊的原型完善，補充交互設計和基本的內容排版樣式，通常可以按照如下的步驟進行設計：
第四、結合原型設計工具的特性，確定功能模塊實現的原理
其實原理就是要讓你自己明白這個東西到底是怎么做出來的，要怎么去做。因為每個實例原型都是一個單獨的功能模塊或交互效果，當你通過某款原型設計工具去實現的時候，都會有相應的實現原理。如果這個都不明白的話，后面就無從下手了。因此做實例原型之前，原型設計工具的使用基礎很重要，必須對工具已經有了一定的熟悉和了解，否則對着一個實現要求，沒有任何想法，腦子一片空白，這樣肯定是做不出東西來的。這個需要一個過程來培養，多看看別人設計的原型，弄清楚人家是怎么做，然后嘗試着自己做一遍，最后想想有沒有可以改進的地方。
實踐是檢驗真理的唯一標准，只有動手實際操作得多了，才能自然而然的會有感覺了，等到你看到一些簡單的功能要求，只要看一下需求，就知道怎么用工具去畫原型的時候，基本上就差不多了，當然對於一些復雜的功能，還是要好好理清思路的。因此，在做實例原型之前，一定要想清楚怎么去做，然后才開始動工，選擇相應的組件把框架搭建出來。
第五、對每個功能模塊進行相對詳細的交互設計
確定功能模塊實現的原理，我們就要對每個功能模塊進行相對詳細的交互設計。基礎的准備工作包含添加組件元素，設置組件排版布局，設置組件屬性（命名、大小、方位、顏色、文本等）。基礎工作都做完了之后，就可以開始做交互設計了。
從用戶角度來說，交互設計是一種如何讓產品易用，有效而讓人愉悅的技術，它致力於了解目標用戶和他們的期望，了解用戶在同產品交互時彼此的行為，了解"人"本身的心理和行為特點，同時，還包括了解各種有效的交互方式，並對它們進行增強和擴充。交互設計還涉及到多個學科，以及和多領域多背景人員的溝通。
這里的設計包括組件自身的可變效果，如鼠標移入、移出、懸停等；交互的事件，如鼠標單擊的觸發事件、鼠標的移入移出觸發事件等；邏輯的設定，包括判斷邏輯，跳轉邏輯，反饋邏輯等。這部分對你的邏輯思維能力有比較高的要求，特別是做比較復雜的交互效果，思路一定要清晰，否則判斷的條件一多，就很容易亂掉。而且在交互設計過程當中所用到的很多邏輯，最終都需要體現到你的PRD文檔當中，因此不管是設計前的分析，還是設計后的總結，都是很考驗邏輯能力的，要能夠將產品的功能模塊從前到后串聯起來，這里推薦大家在設計原型之前，把對應的原型模塊的操作流程圖先畫出來，理清思路，當然一定要結合實際產品下實際用戶的操作場景去設計，切忌盲目主觀的想當然。不然可能把工作進行到一半就因為靈感的缺失而不能繼續下去，最后只能拋棄整個方案，這樣的話對時間和精力都是非常大的損失。
第六、交互效果的反復調試
確定功能模塊實現的原理，也對每個功能模塊進行相對詳細的交互設計，那么我們就想看到真實的交互效果。很多交互效果都不是一次性設置之后就能成功的，特別是復雜的交互效果，都需要做多次的效果嘗試，反復的進行修改調整，最后才達到最終的效果。這個過程一定要有耐心，慢工出細活，思路是對的，想法也有可行性，那就一定能把效果做出來，哪怕最終真的沒有將效果做出來，也可以反過來思考，是自己對工具的特性不了解造成的，還是自己的知識水平局限性。
這個部分之所以要把交互效果調試正確，其主要目的就是為了在原型演示的時候降低溝通成本，一個動態的交互效果，你要用文檔去描述的時候可能需要一頁的文字，還不確定所有的參與人都能看懂，但用原型去描述可能只需要1秒鍾，大家看起來很直觀，一下子就能明白是什么樣的效果。在整個調試的過程能讓你學到很多東西，所以說要多動手，動手就是為了去學這些個過程。這里說明一點，有些需要重復設置或者類似設置的地方，先調試一個點，這個點調試通過了，你就很清楚了，剩下的點設計起來就很快了。
結語：
以上是產品原型設計過程六大步驟，按照這個步驟的話，再進行產品的原型設計會簡單很多。對於產品人員來說，做原型不應該成為負擔，而是要將它變成得心應手的溝通工具，溝通成本是無法估量的巨大，如何降低溝通成本是產品整個研發周期里面都需要考慮的問題，而產品的需求是源頭，源頭把握住了，后期就會通暢很多，這也是做原型設計最重要的目的。而學習原型設計最為核心的點就是多動手，只看是學不會的，一定要動手操作，多練就會了，再加上產品的設計思路，產品的雛形就是這么產生的。
產品的原型設計所起到的不僅是溝通的作用，更有體現之效。通過內容和結構展示，以及粗略布局，能夠說明用戶將如何與產品進行交互，體現開發者及UI設計師的idea，體現用戶所期望看到的內容，體現內容相對優先級等等。產品原型設計對於設計師來說也是一個非常好的學習過程。