做互聯(lián)網(wǎng)產(chǎn)品的小伙伴一定不會(huì)對(duì)“原型”這個(gè)詞感到陌生。它就像“用戶體驗(yàn)”一樣經(jīng)常被各類人掛在嘴邊。它有許多近義詞，如線框圖、故事板等。那么究竟什么是原型設(shè)計(jì)，我們?yōu)槭裁葱枰驮O(shè)計(jì)，如何進(jìn)行原型設(shè)計(jì)呢？
本文將梳理關(guān)于原型的前世今生，弄清楚它到底是個(gè)啥，我們?nèi)绾问褂盟?/p>
原型設(shè)計(jì)是什么
原型是一種讓用戶提前體驗(yàn)產(chǎn)品、交流設(shè)計(jì)構(gòu)想、展示復(fù)雜系統(tǒng)的方式。就本質(zhì)而言，原型是一種溝通工具。
線框圖描繪的是頁(yè)面功能結(jié)構(gòu)，它不是設(shè)計(jì)稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與內(nèi)容的邏輯關(guān)系。
原型圖是最終系統(tǒng)的代表模型或者模擬，比線框圖更加真實(shí)、細(xì)致。
原型設(shè)計(jì)在產(chǎn)品設(shè)計(jì)中所處的位置
原型設(shè)計(jì)的目的
很難想象一個(gè)沒(méi)有原型的產(chǎn)品是如何誕生的。
原型設(shè)計(jì)的核心目的在于測(cè)試產(chǎn)品，沒(méi)有哪一家互聯(lián)網(wǎng)公司可以不經(jīng)過(guò)測(cè)試，就直接上產(chǎn)品和服務(wù)。
原型在識(shí)別問(wèn)題、減少風(fēng)險(xiǎn)、節(jié)省成本等方面有著不可替代的價(jià)值。
雖然需求文檔也是可以滿足溝通需求的，通過(guò)用例將交互寫到設(shè)計(jì)描述文檔中，但是原型可以更詳細(xì)地解釋交互。
你可以用屏幕錄制軟件或者用一只手機(jī)對(duì)著屏幕拍攝下你操作原型的過(guò)程，邊錄制可以邊評(píng)論，比如：“我現(xiàn)在有點(diǎn)暈了，不知道該怎么操作，或許點(diǎn)擊這里看看……哎呀，好像點(diǎn)錯(cuò)了。”
原型設(shè)計(jì)的流程
開始做原型之前，請(qǐng)先考慮清楚以下幾個(gè)要素：
做這個(gè)原型的目的是什么？
這個(gè)原型的受眾是誰(shuí)？
這個(gè)原型有多大效率幫助我傳達(dá)設(shè)計(jì)或測(cè)試設(shè)計(jì)？
有多少時(shí)間做原型？需要什么級(jí)別的保真程度？
原型設(shè)計(jì)流程
步驟一：畫草圖
畫草圖的目標(biāo)是提煉想法，并且最好給畫草圖加上一個(gè)時(shí)間限制，那就是15分鐘。
如果你繪畫能力很差，那么恭喜你，可能你能更好地用好草圖，因?yàn)槟愕淖⒁饬](méi)有放在美化你正在畫什么上面。
畫草圖要避免陷入審美細(xì)節(jié)，盡可能快速的導(dǎo)出想法才是關(guān)鍵。
用紙筆畫的用戶個(gè)人賬戶的草圖示例
用HTML代碼制作的相親網(wǎng)站個(gè)人收集頁(yè)面草圖
步驟二：演示及評(píng)論
演示和評(píng)論的目標(biāo)是把一些想法拿出來(lái)跟大家分享，然后進(jìn)一步完善想法。在演示過(guò)程中，要做好記錄，演示和評(píng)論的時(shí)間可以對(duì)半分。
步驟三：做原型
在明確了想法之后，就可以開始進(jìn)行原型設(shè)計(jì)了。這個(gè)階段需要考慮很多細(xì)節(jié)，找出切實(shí)可行的方案，運(yùn)用合適的原型來(lái)表達(dá)。
步驟四：測(cè)試
原型的目標(biāo)之一是讓受眾來(lái)檢驗(yàn)產(chǎn)品是否達(dá)到了預(yù)期，因此可以請(qǐng)5-6位測(cè)試者，通過(guò)音視頻捕捉等方式，看看產(chǎn)品原型是否被順暢地使用了。
原型設(shè)計(jì)工具
選擇什么工具來(lái)制作原型？主要考慮以下幾個(gè)因素（排名分先后）：
熟悉程度和獲得工具的便利度；
所需的時(shí)間和精力；
可復(fù)用的代碼/框架；
為測(cè)試創(chuàng)建可用的原型；
價(jià)格和學(xué)習(xí)曲線。
常用原型設(shè)計(jì)工具調(diào)查結(jié)果（2013年），出處：toddwarfel.com
不得不說(shuō)，這個(gè)結(jié)果很讓人吃驚，沒(méi)想到有那么多人用Dreamweaver做原型，在這里我介紹兩種我經(jīng)常用到的原型設(shè)計(jì)工具。
PPT和Keynote
優(yōu)點(diǎn)：
技術(shù)門檻低，學(xué)習(xí)曲線不陡峭；
可用幻燈片母版，復(fù)用性高；
模擬移動(dòng)端產(chǎn)品，修改畫板適應(yīng)手機(jī)端尺寸即可；
可導(dǎo)出為HTML或PDF文件；
缺點(diǎn)：
繪畫工具有限；
交互動(dòng)作有限；
現(xiàn)在非常流行把Sketch與Keynote放在一起用，簡(jiǎn)單說(shuō)就是把Sketch里的圖層、部件拖拽到Keynote中，然后添加Action動(dòng)作，按照劇本完成一套交互。
Axure RP
Axure的優(yōu)點(diǎn)不用多說(shuō)，但使用它一個(gè)工具就能滿足設(shè)計(jì)和文檔需求（通過(guò)注解，生成規(guī)格文檔）。
Axure自帶的部件庫(kù)也給制作過(guò)程帶來(lái)了便捷，類似Omnigraffle的stencil一樣，避免了重新發(fā)明輪子。
要掌握Axure，主要應(yīng)該弄懂四大核心功能：
母版：主要用于制作網(wǎng)頁(yè)的頁(yè)頭、頁(yè)尾，可復(fù)用性高；
動(dòng)態(tài)面板：核心中的核心，“層”的概念很重要；
圖片熱區(qū)：在一張完整的圖片上通過(guò)熱區(qū)，建立交互動(dòng)作；
函數(shù)和變量：局部變量和全局變量的概念以及應(yīng)用（比如用戶登陸效果）。
Axure 7.0還有中繼器這個(gè)功能，但是個(gè)人覺(jué)得比較雞肋，學(xué)習(xí)成本也比較高，主要可以用來(lái)做搜索框的搜索結(jié)果聯(lián)想的原型。
原型測(cè)試流程
原型測(cè)試是原型設(shè)計(jì)過(guò)程中的關(guān)鍵步驟，是整體流程中主要的里程碑之一。
可用性測(cè)試是一個(gè)龐大的話題，測(cè)試方法有一對(duì)一或者遠(yuǎn)程測(cè)試，難點(diǎn)是從測(cè)試中得到有質(zhì)量的成功。
測(cè)試結(jié)果取決于測(cè)試者，務(wù)必招募到合適的人。要找到合適的人，需要對(duì)測(cè)試者制定一系列的篩選標(biāo)準(zhǔn)，比如一個(gè)社交產(chǎn)品絕對(duì)不可能找一個(gè)連電子郵件都沒(méi)有的人來(lái)測(cè)試。
測(cè)試時(shí)長(zhǎng)可以是一個(gè)小時(shí)左右，足以測(cè)試5個(gè)到6個(gè)左右的關(guān)鍵場(chǎng)景，并列出一些觀察結(jié)果和關(guān)鍵問(wèn)題，例如：
用戶如何開始任務(wù)的？（是搜索還是瀏覽？）
他先做了什么，再做了什么？
他如何做出最終決定的？
他們是否領(lǐng)會(huì)了設(shè)計(jì)意圖？有什么操作困難？
關(guān)于記錄測(cè)試結(jié)果，可以結(jié)合定性和定量?jī)煞N方式，做一張計(jì)分表，用1-5的程度來(lái)表示；同時(shí)定性地記錄用戶的一些表達(dá)，盡可能地原話記錄。
最后分析這些記錄，改善設(shè)計(jì)。
產(chǎn)品原型設(shè)計(jì)或者說(shuō)產(chǎn)品開發(fā)是沒(méi)有盡頭的，它是一個(gè)不斷發(fā)展，循環(huán)上升，整合知識(shí)和經(jīng)驗(yàn)，不斷迭代和完善過(guò)程。
