產(chǎn)品原型是將抽象的想法、需求轉(zhuǎn)化為具象產(chǎn)品的過(guò)程，通過(guò)這種高效、低成本的方式來(lái)表達(dá)、測(cè)試并驗(yàn)證產(chǎn)品。

一、原型的定義

先說(shuō)說(shuō)產(chǎn)品原型這個(gè)概念，現(xiàn)在大家聽(tīng)到原型就會(huì)馬上想到互聯(lián)網(wǎng)或者移動(dòng)互聯(lián)網(wǎng)所繪制的網(wǎng)站或app原型。但人類擁有第一個(gè)網(wǎng)頁(yè)是1991年8月6日，是由TimTim Berners-Lee在一臺(tái)NeXT電腦上創(chuàng)建，它解釋了萬(wàn)維網(wǎng)的概念，如何使用網(wǎng)頁(yè)瀏覽器和如何建立一個(gè)網(wǎng)頁(yè)服務(wù)器等普及型的內(nèi)容。

（地址是http://info.cern.ch）

而原型（prototype）這個(gè)概念最早出現(xiàn)在工業(yè)設(shè)計(jì)領(lǐng)域，是設(shè)計(jì)師用來(lái)更好呈現(xiàn)設(shè)計(jì)理念、驗(yàn)證產(chǎn)品、打磨產(chǎn)品的一種方式，同時(shí)也能夠起到節(jié)約成本的效果。

如果設(shè)計(jì)師設(shè)計(jì)了一款杯子，除了手繪圖之外，可以通過(guò)原型真實(shí)感知到這個(gè)杯子握在手中的感覺(jué)，它是否舒適、美觀、合理。也可以拿給朋友，看看他們是否喜歡。如果是燈具設(shè)計(jì)師呢，他除了上面那幾點(diǎn)，還可以檢驗(yàn)產(chǎn)品模型的合理性，是否可以成功連接好內(nèi)部的電路，實(shí)現(xiàn)燈具的功能。

那么當(dāng)這個(gè)概念被引入到互聯(lián)網(wǎng)行業(yè)時(shí)，他所表達(dá)的概念是相同的。

說(shuō)了這么多，敲黑板，原型的定義來(lái)啦！

產(chǎn)品原型是將抽象的想法、需求轉(zhuǎn)化為具象產(chǎn)品的過(guò)程。同時(shí)它可以直觀的呈現(xiàn)給團(tuán)隊(duì)中的其他成員，甚至早期用戶，用于驗(yàn)證產(chǎn)品的合理性，通過(guò)高效、低成本的方式來(lái)表達(dá)、測(cè)試并驗(yàn)證產(chǎn)品。

二、 原型要解決的問(wèn)題

1）為產(chǎn)品經(jīng)理提供更好的方式表達(dá)產(chǎn)品，方便UI、技術(shù)理解產(chǎn)品；

2）產(chǎn)品經(jīng)理可以快速、最小成本的修改調(diào)整原型，避免開(kāi)發(fā)成本的浪費(fèi)；

3）便于產(chǎn)品早期的測(cè)試，產(chǎn)品經(jīng)理可以邀請(qǐng)用戶直接使用體驗(yàn)產(chǎn)品，觀察用戶使用行為，收集用戶反饋。

三、好原型的三要素

1. 明確產(chǎn)品目標(biāo)以及每一個(gè)頁(yè)面的目標(biāo)

我們拿旅游app-攜程和健身類app-keep來(lái)說(shuō)明下這個(gè)問(wèn)題，下面是攜程和KEEP的首頁(yè)截屏：

左圖為攜程，右圖為keep

可以看到攜程的首頁(yè)是酒店、機(jī)票、旅；KEEP的首頁(yè)主要展示的是用戶的運(yùn)動(dòng)時(shí)長(zhǎng)和參加的課程。攜程通過(guò)在首頁(yè)按照?qǐng)鼍昂皖l率例舉出用戶可能要做的事情，直接對(duì)接用戶的需求點(diǎn)。

無(wú)論用戶是來(lái)預(yù)定特價(jià)酒店還是來(lái)定制旅游的，都可以找到直接入口，簡(jiǎn)單直觀。

如果KEEP也按照攜程的產(chǎn)品思路可能會(huì)是這個(gè)樣子：

KEEP沒(méi)有讓用戶直接選擇要解決的問(wèn)題（減肥或肩頸疼痛），而是讓用戶添加課程，恰恰是因?yàn)镵EEP在這個(gè)頁(yè)面的目標(biāo)是激勵(lì)用戶持續(xù)的運(yùn)動(dòng)。

這也是旅游和健身應(yīng)用的區(qū)別所在，無(wú)論購(gòu)票還是參加旅游團(tuán)都是一個(gè)低頻且單次的行為，而健身是一個(gè)持續(xù)行為。那么旅游APP的目標(biāo)就是最快的幫助用戶找到他想要的，健身APP的目標(biāo)是讓用戶產(chǎn)生持續(xù)健身的動(dòng)力。

2. Don‘t make me think

用戶路徑是用戶完成一個(gè)最終目所要進(jìn)行的操作流程。

例如：

情況一：我要買一件優(yōu)衣庫(kù)的襯衣（我知道我要買什么）用戶路徑如下：搜索優(yōu)衣庫(kù)襯衣?選擇商品?選擇顏色型號(hào)? 下單支付?流程結(jié)束。

情況二：我想買新衣服（我不知道要買什么）。這個(gè)時(shí)候用戶路徑就是在淘寶首頁(yè)瀏覽【為你推薦】 找到了一件風(fēng)格比較喜歡的衣服?進(jìn)入店鋪?繼續(xù)瀏覽?查看上新?查看最熱?選擇喜歡的商品?加入到購(gòu)物車，再去循環(huán)上面的操作。

不同的目標(biāo)，將會(huì)對(duì)應(yīng)不同的用戶路徑。好的用戶路徑可以讓用戶直接觸達(dá)自己想做的事情并輕松完成。

3. 原型的可拓展性

保證原型的可拓展性需求全局思考，提前考慮日后的發(fā)展方向，制作合理的MVP，使得現(xiàn)有的方案能夠支撐大部分功能的拓展。

對(duì)于原型可復(fù)用、可擴(kuò)展的意義，起到?jīng)Q定因素的并不是用戶體驗(yàn)，而是對(duì)開(kāi)發(fā)成本的考量。產(chǎn)品是不斷迭代的，如果由于產(chǎn)品可拓展性較差，造成重新規(guī)劃技術(shù)架構(gòu)，那將帶來(lái)很大的成本浪費(fèi)。

這里拿新聞閱讀的兩個(gè)應(yīng)用來(lái)舉例，好奇心日?qǐng)?bào)和今日頭條。

好奇心日?qǐng)?bào)界面很簡(jiǎn)潔，只有頂部的兩個(gè)導(dǎo)航：NEWS和LABS，另一個(gè)就是下面浮動(dòng)的Q字母，里面是個(gè)人中心。

今日頭條頁(yè)面內(nèi)容和板塊分類很多，不僅有底部的導(dǎo)航，每一個(gè)底部的導(dǎo)航還會(huì)對(duì)應(yīng)不同的頂部導(dǎo)航。

在頁(yè)面結(jié)構(gòu)和層級(jí)上，今日頭條的拓展性明顯高于好奇心日?qǐng)?bào)。因?yàn)楹闷嫘娜請(qǐng)?bào)的拓展方式只局限在頂部橫向拓展。

四、繪制原型的步驟

1.? 明確目標(biāo)

繪制原型的第一步是明確目標(biāo)。明確產(chǎn)品的目標(biāo)、頁(yè)面的目標(biāo)、功能模塊的目標(biāo)。只有明確了目標(biāo)才能重點(diǎn)突出，主次分明。這一點(diǎn)我們?cè)诋?huà)好原型的第一要素中已經(jīng)論證了。

2. 繪制產(chǎn)品信息框架圖

產(chǎn)品的信息框架圖可以理解為一本書(shū)的大綱或目錄。

下面是一張微信的信息框架圖。優(yōu)先定義的四個(gè)底導(dǎo)模塊：微信、通訊錄、發(fā)現(xiàn)、我，每一個(gè)底部導(dǎo)航會(huì)包含符合該模塊功能目標(biāo)和定義的子模塊。

3. 產(chǎn)品流程圖

產(chǎn)品流程圖就像書(shū)籍內(nèi)容的故事脈絡(luò)。例如講述一個(gè)女孩兒一步步努力成為一個(gè)成功女士的故事。不同的是產(chǎn)品的流程圖不僅僅把女孩兒成功的流程寫(xiě)出來(lái)，還會(huì)把她失敗的情況也一并模擬寫(xiě)出來(lái)。

附一張牛奶的手繪流程圖：

在繪制原型圖的流程圖有幾條牛奶獨(dú)門總結(jié)的查驗(yàn)秘訣傳授給你。

簡(jiǎn)單四條，要細(xì)細(xì)體驗(yàn)，多多實(shí)踐，就知道我?guī)湍銈兯Φ袅硕嗌倏阱仭?/p>

第一條：驗(yàn)證功能的增、刪、改、查

大部分的產(chǎn)品功能都逃不過(guò)增刪改查這四個(gè)環(huán)節(jié)，要驗(yàn)證每一個(gè)功能是否為用戶提供了這四個(gè)處理窗口，以及如果不提供，那么要想清楚不提供的原因是什么。

我們還拿上面的微信舉例子，我們發(fā)一條朋友圈。那么發(fā)送朋友圈就是增的操作，發(fā)朋友圈是一個(gè)多次操作，那么增加的入口就是持續(xù)存在的。

刪很好理解，你發(fā)了一條朋友圈不想要了，右下角點(diǎn)擊刪除就可以。

改在發(fā)朋友圈這里是不直接存在的，你已經(jīng)發(fā)出的朋友圈是不能修改的，解決方案就是刪掉了重新發(fā)。

查也就是看，發(fā)過(guò)的朋友圈都可以在個(gè)人主頁(yè)查看。

第二條：相關(guān)性查驗(yàn)

當(dāng)增加新的功能時(shí)，要考慮對(duì)原有同類型的影響，也要考慮到流程中涉及的其他功能可能會(huì)產(chǎn)生的變更和影響。

第三條：成功、失敗兩種情況考慮

任何一個(gè)操作，都要按照成功或者失敗的情況考慮，并根據(jù)不同的給用戶進(jìn)行相應(yīng)的反饋。例如，提交成功，發(fā)送失敗等。針對(duì)于失敗的情況也要給用戶合理的解釋，以及引導(dǎo)用戶進(jìn)行正確的操作。

第四條：異常情況

例如搶購(gòu)時(shí)，你購(gòu)買的商品剛好在你點(diǎn)擊確認(rèn)的一霎那被搶空了，同一時(shí)間發(fā)生的兩件事情沖突了，就是異常情況。

4. 原型繪制

原型繪制要做到清晰明了，主次分明。顏色上選用黑白灰就好，不然容易干擾UI的設(shè)計(jì)頁(yè)面中的主次可以通過(guò)字體的大小和粗細(xì)體現(xiàn)，配以適當(dāng)?shù)恼f(shuō)明即可。

工具上選擇也比較自由，Axure、墨刀、sketch都可以。Axure和墨刀是可以繪制包括跳轉(zhuǎn)關(guān)系的原型的，就是可以寄點(diǎn)擊的原型。Sketch只能出頁(yè)面圖，沒(méi)法實(shí)現(xiàn)跳轉(zhuǎn)關(guān)系，可以借助flinto等軟件實(shí)現(xiàn)動(dòng)畫(huà)，但個(gè)人覺(jué)得沒(méi)必要搞得那么復(fù)雜。

上手最快的就是墨刀這類的傻瓜工具，更適合畫(huà)APP。工具提供了很多標(biāo)準(zhǔn)控件、圖標(biāo)，也可以時(shí)間簡(jiǎn)單的跳轉(zhuǎn)關(guān)系。

Axure是繪制原型的元老，功能大而全。剛才提到的墨刀在繪制web等復(fù)雜界面時(shí)就會(huì)顯得力不從心，功能能操作上不那么簡(jiǎn)單，出現(xiàn)很多沒(méi)必要的重復(fù)操作。Axure則游刃有余，用的越久越方便。

信息量滿滿的原型繪制寶典就寫(xiě)到這里了，大家還有什么問(wèn)題歡迎交流學(xué)習(xí)。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議