產(chǎn)品的原型設(shè)計(jì)實(shí)現(xiàn)一般區(qū)分整體和局部，整體上更多考慮信息架構(gòu)的設(shè)計(jì)，如功能結(jié)構(gòu)、導(dǎo)航、菜單、布局排版等方面的，局部上更多考慮功能上的交互設(shè)計(jì)，如按鈕點(diǎn)擊、反饋、頁面切換、局部模塊的整體展示等。從設(shè)計(jì)實(shí)現(xiàn)的角度來看，由總到分逐漸細(xì)化的過程是比較適合的。下面從整體和局部實(shí)例兩個(gè)部分來講解原型設(shè)計(jì)的步驟。

確定產(chǎn)品的整體結(jié)構(gòu)

猶如現(xiàn)在蓋房子時(shí)的地基和框架結(jié)構(gòu)，整個(gè)結(jié)構(gòu)決定了將來的房型樣子，及房子是否穩(wěn)固。而產(chǎn)品的結(jié)構(gòu)設(shè)計(jì)則決定了產(chǎn)品未來的功能導(dǎo)航結(jié)構(gòu)。一般來講，我們在做需求分析的時(shí)候，都會(huì)把幾個(gè)主要的功能點(diǎn)抓出來，這幾個(gè)功能點(diǎn)就可以濃縮一下形成產(chǎn)品的初步功能結(jié)構(gòu)。比如要做一個(gè)合同管理的功能，要求實(shí)現(xiàn)合同信息管理，合同履約管理，合同統(tǒng)計(jì)報(bào)表等功能，這里列出來的核心功能點(diǎn)就是主要結(jié)構(gòu)。再比如我們要做一個(gè)會(huì)員管理的功能，注冊和登錄是必不可少的功能點(diǎn)，那么就可以將其列為會(huì)員管理下的兩個(gè)基本結(jié)構(gòu)。其實(shí)每個(gè)產(chǎn)品最終確定下來的一級導(dǎo)航欄里面的各個(gè)欄目就是產(chǎn)品的功能結(jié)構(gòu)。

確定產(chǎn)品的布局排版

結(jié)構(gòu)確定了之后，就需要對每一個(gè)產(chǎn)品頁面進(jìn)行元素的排版，排版之前，一般都會(huì)先對頁面進(jìn)行布局設(shè)計(jì)的考慮。通常我們做產(chǎn)品設(shè)計(jì)的時(shí)候，都會(huì)遵循一些已有產(chǎn)品總結(jié)出來的布局結(jié)構(gòu)，比如三行三列布局，三行兩列布局等，再如左導(dǎo)航右內(nèi)容的形式，左內(nèi)容右導(dǎo)航的形式等，這些都是大的布局結(jié)構(gòu)，是整體頁面的布局排版。細(xì)分到具體頁面內(nèi)容的時(shí)候，就需要對每一個(gè)內(nèi)容塊的展示位置進(jìn)行布局，如企業(yè)網(wǎng)站首頁的一般內(nèi)容有圖片新聞，通知通告，公司新聞，產(chǎn)品介紹，產(chǎn)品展示等等，我們需要對這些內(nèi)容塊進(jìn)行一定的設(shè)計(jì)布局，這里的布局結(jié)構(gòu)取決于設(shè)計(jì)人員對內(nèi)容編排的把握，不同的布局會(huì)產(chǎn)生不同的效果。如電子商務(wù)網(wǎng)站，對內(nèi)容塊和廣告塊的布局排版就非常講究，因?yàn)椴灰粯拥牟季郑鶐淼挠脩酎c(diǎn)擊量和轉(zhuǎn)化率是不一樣的。這種情況下，即對某一類產(chǎn)品的布局把握不好的時(shí)候，可以參照已有成熟產(chǎn)品的內(nèi)容布局，因?yàn)樗鼈円呀?jīng)有運(yùn)營數(shù)據(jù)在支撐。

確定產(chǎn)品的功能模塊

布局排版決定了某個(gè)產(chǎn)品功能模塊的放置位置，接著就可以一塊一塊的確定原型設(shè)計(jì)內(nèi)容，使其接近于最終產(chǎn)品的展示樣式。這個(gè)時(shí)候就要用到原型設(shè)計(jì)的實(shí)例了，比如圖片新聞，我們可以用幻燈片效果來做，比如產(chǎn)品展示，我們可以用跑馬燈效果來做，具體采用什么樣的交互效果來實(shí)現(xiàn)功能塊要求展示的內(nèi)容，取決于產(chǎn)品設(shè)計(jì)人員的把握、用戶的需求及用戶體驗(yàn)，其中用戶體驗(yàn)是比較大的一塊，就拿幻燈片效果來說，是否需要設(shè)計(jì)數(shù)字導(dǎo)航鍵，是否需要自動(dòng)播放，是否需要設(shè)計(jì)縮略圖等等，這些都需要仔細(xì)考慮之后再做決定，這個(gè)可以在設(shè)計(jì)產(chǎn)品時(shí)候多多討論溝通，多看看別人的設(shè)計(jì)效果。譬如電子商務(wù)網(wǎng)站首頁的Banner圖片輪播效果，就是幻燈片效果，各大電商網(wǎng)站的設(shè)計(jì)大同小異，就完全可以借鑒參考。

這樣三個(gè)步驟下來，產(chǎn)品的低保真原型就出來了，比較簡單的產(chǎn)品，可以直接拿著低保真原型去做演示和寫PRD文檔，雖然這樣的原型不帶任何交互效果，但基本上還是可以說清楚產(chǎn)品功能的，結(jié)合細(xì)化之后的文檔進(jìn)行說明。然后我們所面對的通常都不是簡單的產(chǎn)品，因此最起碼要到中保真程度原型，結(jié)合交互的效果來達(dá)到我們的設(shè)計(jì)目的。要細(xì)化這樣的交互設(shè)計(jì)，就需要在產(chǎn)品功能模塊的原型設(shè)計(jì)上更進(jìn)一步，把每個(gè)功能模塊的原型完善，補(bǔ)充交互設(shè)計(jì)和基本的內(nèi)容排版樣式，通常可以按照如下的步驟進(jìn)行設(shè)計(jì)：

結(jié)合原型設(shè)計(jì)工具的特性，確定功能模塊實(shí)現(xiàn)的原理

每個(gè)實(shí)例原型都是一個(gè)單獨(dú)的功能模塊或交互效果，當(dāng)你通過某款原型設(shè)計(jì)工具去實(shí)現(xiàn)的時(shí)候，都會(huì)有相應(yīng)的實(shí)現(xiàn)原理。其實(shí)原理就是要讓你自己明白這個(gè)東西到底是怎么做出來的，要怎么去做。如果這個(gè)都不明白的話，后面就無從下手了。因此做實(shí)例原型之前，原型設(shè)計(jì)工具的使用基礎(chǔ)很重要，必須對工具已經(jīng)有了一定的熟悉和了解，否則對著一個(gè)實(shí)現(xiàn)要求，沒有任何想法，腦子一片空白，這樣肯定是做不出東西來的。這個(gè)需要一個(gè)過程來培養(yǎng)，多看看別人設(shè)計(jì)的原型，弄清楚人家是怎么做，然后嘗試著自己做一遍，***想想有沒有可以改進(jìn)的地方。實(shí)際動(dòng)手多了，自然而然的就會(huì)有感覺了，等到你看到一些簡單的功能要求，只要看一下需求，就知道怎么用工具去畫原型的時(shí)候，基本上就差不多了，當(dāng)然對于一些復(fù)雜的功能，還是要好好理清思路的。因此，在做實(shí)例原型之前，一定要想清楚怎么去做，然后才開始動(dòng)工，選擇相應(yīng)的組件把框架搭建出來。

對每個(gè)功能模塊進(jìn)行相對詳細(xì)的交互設(shè)計(jì)

基礎(chǔ)的準(zhǔn)備工作包含添加組件元素，設(shè)置組件排版布局，設(shè)置組件屬性（命名、大小、方位、顏色、文本等）。基礎(chǔ)工作都做完了之后，就可以開始做交互設(shè)計(jì)了。這里的設(shè)計(jì)包括組件自身的可變效果，如鼠標(biāo)移入、移出、懸停等；交互的事件，如鼠標(biāo)單擊的觸發(fā)事件、鼠標(biāo)的移入移出觸發(fā)事件等；邏輯的設(shè)定，包括判斷邏輯，跳轉(zhuǎn)邏輯，反饋邏輯等。這部分對你的邏輯思維能力有比較高的要求，特別是做比較復(fù)雜的交互效果，思路一定要清晰，否則判斷的條件一多，就很容易亂掉。而且在交互設(shè)計(jì)過程當(dāng)中所用到的很多邏輯，最終都需要體現(xiàn)到你的PRD文檔當(dāng)中，因此不管是設(shè)計(jì)前的分析，還是設(shè)計(jì)后的總結(jié)，都是很考驗(yàn)邏輯能力的，要能夠?qū)a(chǎn)品的功能模塊從前到后串聯(lián)起來，這里推薦大家在設(shè)計(jì)原型之前，把對應(yīng)的原型模塊的操作流程圖先畫出來，理清思路，當(dāng)然一定要結(jié)合實(shí)際產(chǎn)品下實(shí)際用戶的操作場景去設(shè)計(jì)，切忌盲目主觀的想當(dāng)然。

交互效果的反復(fù)調(diào)試

很多交互效果都不是一次性設(shè)置之后就能成功的，特別是復(fù)雜的交互效果，都需要做多次的效果嘗試，反復(fù)的進(jìn)行修改調(diào)整，***才達(dá)到最終的效果。這個(gè)過程一定要有耐心，慢工出細(xì)活，思路是對的，想法也有可行性，那就一定能把效果做出來，哪怕最終真的沒有將效果做出來，也可以反過來思考，是自己對工具的特性不了解造成的，還是自己的知識(shí)水平局限性。整個(gè)調(diào)試的過程能讓你學(xué)到很多東西，所以說要多動(dòng)手，動(dòng)手就是為了去學(xué)這些個(gè)過程。這里說明一點(diǎn)，有些需要重復(fù)設(shè)置或者類似設(shè)置的地方，先調(diào)試一個(gè)點(diǎn)，這個(gè)點(diǎn)調(diào)試通過了，你就很清楚了，剩下的點(diǎn)設(shè)計(jì)起來就很快了。這個(gè)部分之所以要把交互效果調(diào)試正確，其主要目的就是為了在原型演示的時(shí)候降低溝通成本，一個(gè)動(dòng)態(tài)的交互效果，你要用文檔去描述的時(shí)候可能需要一頁的文字，還不確定所有的參與人都能看懂，但用原型去描述可能只需要1秒鐘，大家看起來很直觀，一下子就能明白是什么樣的效果。

基于以上步驟，產(chǎn)品的原型設(shè)計(jì)會(huì)簡單很多。對于產(chǎn)品人員來說，做原型不應(yīng)該成為負(fù)擔(dān)，而是要將它變成得心應(yīng)手的溝通工具，溝通成本是無法估量的巨大，如何降低溝通成本是產(chǎn)品整個(gè)研發(fā)周期里面都需要考慮的問題，而產(chǎn)品的需求是源頭，源頭把握住了，后期就會(huì)通暢很多，這也是做原型設(shè)計(jì)最重要的目的。而學(xué)習(xí)原型設(shè)計(jì)最為核心的點(diǎn)就是多動(dòng)手，只看是學(xué)不會(huì)的，一定要?jiǎng)邮植僮鳎嗑毦蜁?huì)了，再加上產(chǎn)品的設(shè)計(jì)思路，產(chǎn)品的雛形就是這么產(chǎn)生的。
2