前言：產(chǎn)品老手可以點(diǎn)“X”不用看了，這是給新手的原型手冊(cè)。

在QQ群里混跡的兩年里我收到許多新同學(xué)的問(wèn)題，諸如：“原型需不需要高保真??？”“原型里都要些什么內(nèi)容啊？”“有了原型還要文檔嗎？”“原型怎么畫(huà)?。俊薄霸褪潜匦杵穯?？”等等。

以上問(wèn)題在本文中都能得到解答。

一、原型的必要性和作用

原型是什么？

原型是我們的產(chǎn)品的剛出生時(shí)的“模樣”，它還是一個(gè)剛從想法階段逐漸完善的小家伙，也是產(chǎn)品經(jīng)理在產(chǎn)品開(kāi)發(fā)過(guò)程中產(chǎn)出最直觀的東西，現(xiàn)在的原型在很大一部分公司中已經(jīng)完全替代了之前的PRD文檔。

畢竟圖文加上一些可交互的事件可以讓開(kāi)發(fā)更直觀的了解自己的任務(wù)，并且讓設(shè)計(jì)開(kāi)發(fā)不用去對(duì)著那堆干巴巴的文字。（加班還容易犯困Zzz…）

原型相對(duì)于文檔來(lái)說(shuō)直接很多，在項(xiàng)目協(xié)作中也更加效率，畢竟一個(gè)已經(jīng)開(kāi)始逐步具現(xiàn)化的demo便于大家開(kāi)會(huì)的時(shí)候評(píng)估需求可行性，避免不切實(shí)際的想法出現(xiàn)。

二、原型應(yīng)該包含哪些內(nèi)容

產(chǎn)品結(jié)構(gòu)

在我們的原型里首先需要把產(chǎn)品的結(jié)構(gòu)給展示出來(lái)，方便給設(shè)計(jì)開(kāi)發(fā)等人員一個(gè)整體的了解——我們要做什么。

（點(diǎn)擊圖片放大按“F”鍵查看原圖）

在這里我們只需要標(biāo)明產(chǎn)品所擁有的頁(yè)面，登錄前后（也可能是某個(gè)可以影響全局的選項(xiàng)，根據(jù)所選的不同，展示的內(nèi)容不同。）展示的內(nèi)容差異過(guò)大需要分兩幅圖來(lái)表示。

如果原型內(nèi)的頁(yè)面與腦圖不沖突的話【比如一些狀態(tài)的展示可能會(huì)放在一個(gè)頁(yè)面里，或者某些狀態(tài)在腦圖里是一個(gè)頁(yè)面但是在原型里卻鋪開(kāi)展示】可以右擊左上角的站點(diǎn)地圖中層級(jí)最高的一項(xiàng)，點(diǎn)擊生成流程圖即可。

生成的流程圖如下：

頁(yè)面元素（基礎(chǔ)布局）

在這一點(diǎn)我想不用太過(guò)去說(shuō)明，大家都知道原型就是一個(gè)簡(jiǎn)略的沒(méi)有做過(guò)視覺(jué)美化的線框，所以在原型上圖片/按鈕/文字段落/選項(xiàng)等都是需要去標(biāo)明出來(lái)的，但是請(qǐng)注意在原型中組件保持統(tǒng)一樣式。

比如：

頁(yè)面內(nèi)的圖片樣式都為占位符時(shí)，如：

在其他頁(yè)面盡量不要再用其他部件表示圖片，如：

或者彈窗樣式都用了下圖的展現(xiàn)方式：

就盡量不要再用這種樣式去表現(xiàn)彈窗了：

容易讓開(kāi)發(fā)對(duì)于前端規(guī)范產(chǎn)生理解誤差。

其實(shí)在畫(huà)原型時(shí)最好有一套自有的原型組件樣式，比如時(shí)間控件、篩選器、富文本框、彈窗、導(dǎo)航欄等，防止團(tuán)隊(duì)內(nèi)的成員在原型的樣式表現(xiàn)上不統(tǒng)一，導(dǎo)致開(kāi)發(fā)理解錯(cuò)誤等。

功能狀態(tài)

產(chǎn)品的一個(gè)功能下可能延伸出不同的狀態(tài)頁(yè)面，此時(shí)就比較考驗(yàn)一位產(chǎn)品人的邏輯能力以及經(jīng)驗(yàn)了。

最常見(jiàn)的有退單、支付、訂單、登錄等，拿退單舉例子吧，退單通常是：

在這個(gè)邏輯下，出現(xiàn)的狀態(tài)有：請(qǐng)求退款—退款中—退款后，看似簡(jiǎn)單的流程就經(jīng)常會(huì)有同學(xué)忘了在退款中加入取消退款，或者在退款中的時(shí)候忘了提示開(kāi)發(fā)根據(jù)接口字段更新退款狀態(tài)等情況。在退款中也根據(jù)不同狀態(tài)需要標(biāo)注的頁(yè)面情況，

1. 我方是否受理
2. 支付平臺(tái)是否受理

因?yàn)橛锌赡茏陨順I(yè)務(wù)的緣故，我方不受理的情況下是不允許用戶重新發(fā)起退款請(qǐng)求的。

然而在支付平臺(tái)不受理退款的情況下允許用戶重新發(fā)起退款請(qǐng)求，那么這又是兩種不同的退款失敗判斷。

所以作為一只合格的產(chǎn)品狗需要精確的想到每一個(gè)頁(yè)面狀態(tài)的情況，不能把所有的退款中狀態(tài)都叫做一個(gè)退款中，不能把所有的訂單詳情都叫做訂單詳情，至少在自己的概念里以及原型里要做出區(qū)分。

標(biāo)注邏輯

在沒(méi)有了說(shuō)明文檔之后，大家都開(kāi)始在原型里加上了標(biāo)注。

然而標(biāo)注應(yīng)該加哪些內(nèi)容呢？

如何加標(biāo)注呢？

對(duì)于某些新手產(chǎn)品同學(xué)，沒(méi)有參照沒(méi)有人帶自我摸索的情況下還是比較茫然的。標(biāo)注的目的是告訴開(kāi)發(fā)我這個(gè)頁(yè)面甚至我這個(gè)功能有什么內(nèi)容/邏輯，比如：

在頁(yè)面中需要核對(duì)的字段，頁(yè)面中可能觸發(fā)的交互樣式：

某一功能的標(biāo)注簡(jiǎn)介，可延伸的小狀態(tài)、狀態(tài)的出現(xiàn)條件、字段的格式、字段的說(shuō)明

或者這個(gè)功能觸發(fā)的后續(xù)邏輯

還有一些可以全局標(biāo)出的字段和樣式，這塊在原型中可以特別標(biāo)出一個(gè)交互說(shuō)明頁(yè)

這些都是在原型標(biāo)注中需要標(biāo)出的內(nèi)容，有助于開(kāi)發(fā)理解產(chǎn)品邏輯，以免溝通不到位遺漏流程、功能等情況。

修改記錄

修改記錄是你產(chǎn)品迭代的證明，即使是你的第一版正式原型，之前和設(shè)計(jì)、開(kāi)發(fā)、運(yùn)營(yíng)等討論修改的元素也最好加進(jìn)去。首先避免工作上溝通的矛盾，因?yàn)橛袝r(shí)候大家都記不清，直接記在原型上的一個(gè)頁(yè)面里也便于大家查閱。

三、畫(huà)原型時(shí)需要注意的

做不做高保真？

以前總有同學(xué)問(wèn)我產(chǎn)品畫(huà)原型要不要畫(huà)高保真，在常規(guī)的項(xiàng)目流程中原型只不過(guò)是一個(gè)用來(lái)表示自己想法的東西。

非常細(xì)節(jié)的交互效果和視覺(jué)表現(xiàn)不是產(chǎn)品在原型里去追求的，那些是交給交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師去追求表現(xiàn)的。在沒(méi)有交互設(shè)計(jì)師的時(shí)候想要去規(guī)定表達(dá)一些交互動(dòng)效也盡量通過(guò)文字描述去敘述情況，畢竟兩句話能解決的事情就不要自己冥思苦想花倆鐘頭去死摳了。

比如現(xiàn)在的中繼器之類的，或者多個(gè)動(dòng)態(tài)面板的嵌套拖拉效果，我記得之前自己為了做監(jiān)測(cè)鼠標(biāo)滾輪方向來(lái)翻頁(yè)想了一個(gè)晚上【本人不會(huì)代碼，設(shè)計(jì)出身】。雖然最后還是用不會(huì)代碼的方式解決了問(wèn)題，但是實(shí)在耗費(fèi)了不少時(shí)間。

我其實(shí)只需要一句標(biāo)注【當(dāng)前頁(yè)面一屏內(nèi)容為1080*560，根據(jù)鼠標(biāo)滾動(dòng)方向，一次翻動(dòng)一屏】寫(xiě)在旁邊就好了，但是你花了這么多的時(shí)間去鉆研這個(gè)效果。

獲得了一點(diǎn)點(diǎn)的成就感以外，失去了更多寶貴的時(shí)間，也打斷了自己思考其他功能邏輯的思路，加長(zhǎng)了工作周期，晚上又得繼續(xù)熬夜加班在各種群里訴苦。

自作孽，不可活。

視覺(jué)表現(xiàn)方面，不是到那種非你出不可的情況下，產(chǎn)品還是沒(méi)有義務(wù)出視覺(jué)稿的，所以在視覺(jué)表現(xiàn)方面我們只需要區(qū)分好按鈕種類、圖片、分類選項(xiàng)等，方便視覺(jué)設(shè)計(jì)師理解原型。

標(biāo)注樣式需統(tǒng)一

我們?cè)跇?biāo)注時(shí)的樣式需要統(tǒng)一，比如：

在一開(kāi)始就標(biāo)注好說(shuō)明文字，后續(xù)的標(biāo)注都根據(jù)此頁(yè)來(lái)進(jìn)行編寫(xiě)，也能有效減少開(kāi)發(fā)對(duì)于產(chǎn)品理解的學(xué)習(xí)成本

畫(huà)原型的時(shí)候注意觀看者的體驗(yàn)

（此部分非原創(chuàng)，已忘出處，侵改。）

首先通過(guò)顏色來(lái)區(qū)分不同模塊，別弄得整個(gè)屏幕都是白快快和白叉叉。

比如：導(dǎo)航欄深色 上面的button為淺色，視覺(jué)層級(jí)比較好區(qū)分一點(diǎn)。

盡量用不同程度的黑白灰去做顏色區(qū)分，顏色太多的話更加影響閱讀效果。畫(huà)原型和文檔一起標(biāo)注的時(shí)候，別用太多線牽來(lái)牽去，也比較影響閱讀體驗(yàn)，會(huì)讓人眼花繚亂。

像蜘蛛網(wǎng)一樣的原型我覺(jué)得是誰(shuí)看了都會(huì)頭大吧。

畢竟開(kāi)發(fā)也是人，可憐可憐那些在我們成長(zhǎng)道路中被坑的程序猿們吧QAQ

作者：Kyo.Chen阿浩，UIBANG專欄作者，www.uibang.cn，魔都中二產(chǎn)品狗。

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