做互聯(lián)網(wǎng)產(chǎn)品的小伙伴一定不會對“原型”這個詞感到陌生。它就像“用戶體驗”一樣經(jīng)常被各類人掛在嘴邊。它有許多近義詞，如線框圖、故事板等。那么究竟什么是原型設(shè)計，我們?yōu)槭裁葱枰驮O(shè)計，如何進行原型設(shè)計呢？

本文將梳理關(guān)于原型的前世今生，弄清楚它到底是個啥，我們?nèi)绾问褂盟?/p>

原型設(shè)計是什么

原型是一種讓用戶提前體驗產(chǎn)品、交流設(shè)計構(gòu)想、展示復(fù)雜系統(tǒng)的方式。就本質(zhì)而言，原型是一種溝通工具。

線框圖描繪的是頁面功能結(jié)構(gòu)，它不是設(shè)計稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與內(nèi)容的邏輯關(guān)系。

原型圖是最終系統(tǒng)的代表模型或者模擬，比線框圖更加真實、細(xì)致。

原型設(shè)計在產(chǎn)品設(shè)計中所處的位置

原型設(shè)計的目的

很難想象一個沒有原型的產(chǎn)品是如何誕生的。

原型設(shè)計的核心目的在于測試產(chǎn)品，沒有哪一家互聯(lián)網(wǎng)公司可以不經(jīng)過測試，就直接上產(chǎn)品和服務(wù)。

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

雖然需求文檔也是可以滿足溝通需求的，通過用例將交互寫到設(shè)計描述文檔中，但是原型可以更詳細(xì)地解釋交互。

你可以用屏幕錄制軟件或者用一只手機對著屏幕拍攝下你操作原型的過程，邊錄制可以邊評論，比如：“我現(xiàn)在有點暈了，不知道該怎么操作，或許點擊這里看看……哎呀，好像點錯了?！?/p>

原型設(shè)計的流程

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

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

原型設(shè)計流程

步驟一：畫草圖

畫草圖的目標(biāo)是提煉想法，并且最好給畫草圖加上一個時間限制，那就是15分鐘。如果你繪畫能力很差，那么恭喜你，可能你能更好地用好草圖，因為你的注意力沒有放在美化你正在畫什么上面。

畫草圖要避免陷入審美細(xì)節(jié)，盡可能快速的導(dǎo)出想法才是關(guān)鍵。

用紙筆畫的用戶個人賬戶的草圖示例

用HTML代碼制作的相親網(wǎng)站個人收集頁面草圖

步驟二：演示及評論

演示和評論的目標(biāo)是把一些想法拿出來跟大家分享，然后進一步完善想法。在演示過程中，要做好記錄，演示和評論的時間可以對半分。

步驟三：做原型

在明確了想法之后，就可以開始進行原型設(shè)計了。這個階段需要考慮很多細(xì)節(jié)，找出切實可行的方案，運用合適的原型來表達。

步驟四：測試

原型的目標(biāo)之一是讓受眾來檢驗產(chǎn)品是否達到了預(yù)期，因此可以請5-6位測試者，通過音視頻捕捉等方式，看看產(chǎn)品原型是否被順暢地使用了。

原型設(shè)計工具

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

• 熟悉程度和獲得工具的便利度；
• 所需的時間和精力；
• 可復(fù)用的代碼/框架；
• 為測試創(chuàng)建可用的原型；
• 價格和學(xué)習(xí)曲線。

常用原型設(shè)計工具調(diào)查結(jié)果（2013年），出處：toddwarfel.com

不得不說，這個結(jié)果很讓人吃驚，沒想到有那么多人用Dreamweaver做原型，在這里我介紹兩種我經(jīng)常用到的原型設(shè)計工具。

PPT和Keynote

優(yōu)點：

• 技術(shù)門檻低，學(xué)習(xí)曲線不陡峭；
• 可用幻燈片母版，復(fù)用性高；
• 模擬移動端產(chǎn)品，修改畫板適應(yīng)手機端尺寸即可；
• 可導(dǎo)出為HTML或PDF文件；

缺點：

• 繪畫工具有限；
• 交互動作有限；

現(xiàn)在非常流行把Sketch與Keynote放在一起用，簡單說就是把Sketch里的圖層、部件拖拽到Keynote中，然后添加Action動作，按照劇本完成一套交互。

Axure RP

Axure的優(yōu)點不用多說，但使用它一個工具就能滿足設(shè)計和文檔需求（通過注解，生成規(guī)格文檔）。

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

要掌握Axure，主要應(yīng)該弄懂四大核心功能：

• 母版：主要用于制作網(wǎng)頁的頁頭、頁尾，可復(fù)用性高；
• 動態(tài)面板：核心中的核心，“層”的概念很重要；
• 圖片熱區(qū)：在一張完整的圖片上通過熱區(qū)，建立交互動作；
• 函數(shù)和變量：局部變量和全局變量的概念以及應(yīng)用（比如用戶登陸效果）。

Axure 7.0還有中繼器這個功能，但是個人覺得比較雞肋，學(xué)習(xí)成本也比較高，主要可以用來做搜索框的搜索結(jié)果聯(lián)想的原型。

原型測試流程

原型測試是原型設(shè)計過程中的關(guān)鍵步驟，是整體流程中主要的里程碑之一。

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

測試結(jié)果取決于測試者，務(wù)必招募到合適的人。要找到合適的人，需要對測試者制定一系列的篩選標(biāo)準(zhǔn)，比如一個社交產(chǎn)品絕對不可能找一個連電子郵件都沒有的人來測試。

測試時長可以是一個小時左右，足以測試5個到6個左右的關(guān)鍵場景，并列出一些觀察結(jié)果和關(guān)鍵問題，例如：

• 用戶如何開始任務(wù)的？（是搜索還是瀏覽？）
• 他先做了什么，再做了什么？
• 他如何做出最終決定的？
• 他們是否領(lǐng)會了設(shè)計意圖？有什么操作困難？

關(guān)于記錄測試結(jié)果，可以結(jié)合定性和定量兩種方式，做一張計分表，用1-5的程度來表示；同時定性地記錄用戶的一些表達，盡可能地原話記錄。

最后分析這些記錄，改善設(shè)計。

產(chǎn)品原型設(shè)計或者說產(chǎn)品開發(fā)是沒有盡頭的，它是一個不斷發(fā)展，循環(huán)上升，整合知識和經(jīng)驗，不斷迭代和完善過程。

#專欄作家#

粽小喵，微信公眾號：zong_xiaomiao，人人都是產(chǎn)品經(jīng)理專欄作家。騰訊產(chǎn)品經(jīng)理。一個學(xué)傳播出身的產(chǎn)品新人，愛好研究原型設(shè)計工具。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。