對(duì)于在互聯(lián)網(wǎng)行業(yè)的各位來(lái)講，應(yīng)該很清楚原型設(shè)計(jì)在應(yīng)用開(kāi)發(fā)中的重要性。它所起到的不僅是溝通的作用，更有體現(xiàn)之效。通過(guò)內(nèi)容和結(jié)構(gòu)展示，以及粗略布局，能夠說(shuō)明用戶將如何與產(chǎn)品進(jìn)行交互，體現(xiàn)開(kāi)發(fā)者及UI設(shè)計(jì)師的idea，體現(xiàn)用戶所期望看到的內(nèi)容，體現(xiàn)內(nèi)容相對(duì)優(yōu)先級(jí)等等。

原型設(shè)計(jì)可以幫助我們更細(xì)致的思考，并做各項(xiàng)需求的評(píng)估，同時(shí)也是將自己腦海里的想法進(jìn)行輸出，通過(guò)原型設(shè)計(jì)后，我們就可以進(jìn)行產(chǎn)品宣講了。相對(duì)于之前抽象的文字描述，原型則更加清晰產(chǎn)品的需求，設(shè)計(jì)和技術(shù)人員或者老板也能夠更加直觀的了解到產(chǎn)品意圖。

原型設(shè)計(jì)是將結(jié)構(gòu)化的需求進(jìn)行框架化，因此原型也被稱為線框圖，具體的表現(xiàn)手法有很多種，相關(guān)的輔助軟件也有很多，例如：產(chǎn)品經(jīng)理常用的Axure RP。

當(dāng)?shù)搅嗽驮O(shè)計(jì)這一步時(shí)，已經(jīng)不僅僅是構(gòu)思了，我們需要更加深入的了解每個(gè)頁(yè)面上的元素和這些元素的屬性。

例如按鈕元素，我們就需要考慮這個(gè)按鈕的功能，并且這個(gè)功能操作后帶給后端和前端的反饋。

比如注冊(cè)按鈕，用戶操作后，第一步邏輯是驗(yàn)證用戶輸入的信息是否合法，不合法則給出前端反饋；合法則和后端通信驗(yàn)證是否已經(jīng)存在同樣信息，已經(jīng)存在則給出前端反饋，不存在則進(jìn)入下一步，注冊(cè)成功；注冊(cè)成功后的反饋是跳轉(zhuǎn)頁(yè)面，還是彈出層提示用戶完善資料，這些都是需要更詳情的考慮的。

當(dāng)然這些更細(xì)致的思考是留在需求文檔撰寫時(shí)的，而此時(shí)我們需要做的就是把這些元素通過(guò)原型表現(xiàn)出來(lái)。

很多同學(xué)在做原型的時(shí)候，不太清楚應(yīng)該怎么做，可以怎么做。這個(gè)不僅僅是我們的學(xué)員的困惑，也是很多參與交流的朋友的困惑。那我們一起來(lái)看看，原型設(shè)計(jì)分為什么類型，各種類型分別有什么特點(diǎn)。了解了之后，就能夠知道，我們要可以怎么設(shè)計(jì)原型了。

原型設(shè)計(jì)的表現(xiàn)手法主要有三種：手繪原型、灰模原型、交互原型

?

1、手繪原型

因?yàn)樵鸵脖环Q為線框圖，因此手繪是最簡(jiǎn)單直接的方法，也是最快速的表現(xiàn)產(chǎn)品輪廓的手法。也有人把手繪成為“2B+A4”的方法。

手繪原型圖畫起來(lái)很快，并且覺(jué)得不行的話，可以立刻丟掉，不會(huì)覺(jué)得可惜。團(tuán)隊(duì)其他人有什么想法，都可以隨時(shí)拿起筆在上面畫出來(lái)。手繪原型在初期驗(yàn)證想法時(shí)非常高效，也方便討論和重構(gòu)，同時(shí)也適合敏捷開(kāi)發(fā)時(shí)快速出原型。

這種方式能快速直觀地展現(xiàn)當(dāng)下地想法和呈現(xiàn)效果，能及時(shí)跟上跳躍的思維。也可以對(duì)原型設(shè)計(jì)的優(yōu)劣進(jìn)行快速的比對(duì)，得出結(jié)論，在團(tuán)隊(duì)項(xiàng)目中是比較常見(jiàn)的原型方法。

?

2、灰模原型

灰模原型是由圖形設(shè)計(jì)軟件制作而成，相對(duì)手繪原型，灰模更加清晰和整潔。

灰模原型常用于交互需求復(fù)雜的原型。手繪原型難以高效的表達(dá)需求，對(duì)于交互需求也無(wú)法準(zhǔn)確表達(dá)，因此我們?cè)谠O(shè)計(jì)的時(shí)候通常是灰模原型加交互文檔組合成PRD文檔。

比起交互原型，灰模原型能夠充分節(jié)省原型制作的時(shí)間。簡(jiǎn)單的頁(yè)面展示和交互文字說(shuō)明可以將軟件重要的交互、功能、需求等解釋清楚。所以有些公司在制作原型的時(shí)候選擇了灰模原型作為設(shè)計(jì)方法。

3、交互原型

交互原型是使用原型設(shè)計(jì)軟件完成的原型，產(chǎn)品經(jīng)理常用軟件是Axure RP，它也是比較強(qiáng)大的原型設(shè)計(jì)工具。

交互原型的設(shè)計(jì)是產(chǎn)品經(jīng)理想法推演的最后一步，是對(duì)于產(chǎn)品設(shè)計(jì)的最終體現(xiàn)。通過(guò)Axure PR之類的交互原型軟件制作出來(lái)的產(chǎn)品原型，在功能需求與交互需求的表現(xiàn)和正式產(chǎn)品幾乎是一致的，所以有時(shí)交互原型也被稱為產(chǎn)品Demo。

這種類型的原型，通常是用于和老板、客戶進(jìn)行溝通，能夠極大地展示完整的效果，看到最終的成果如何。

有交互設(shè)計(jì)師的公司，是交由交互設(shè)計(jì)師制作。如果沒(méi)有交互設(shè)計(jì)師這個(gè)職位的話，最終則是由產(chǎn)品經(jīng)理來(lái)負(fù)責(zé)的。

?

以上三種方法并不是漸進(jìn)的流程，不是說(shuō)一定要先做哪種再做哪種。而是三種原型設(shè)計(jì)的方法，具體取決于你的產(chǎn)品需求和團(tuán)隊(duì)要求。

產(chǎn)品原型設(shè)計(jì)同樣并不是一刀切，只能使用某一種設(shè)計(jì)方法。具體怎么設(shè)計(jì)原型，一樣也是根據(jù)實(shí)際情況，產(chǎn)品的需求、團(tuán)隊(duì)的要求甚至是上層領(lǐng)導(dǎo)的要求等，靈活安排，選擇合適的方法。

?

PS：文中所用圖片為陪學(xué)網(wǎng)學(xué)員的學(xué)習(xí)成果，請(qǐng)勿隨意使用。