當(dāng)我們?cè)诋嬙蜁r(shí)，我們是在畫什么？在討論這個(gè)問題之前，我們應(yīng)該先明確一個(gè)最本質(zhì)的問題，就是我們畫原型的目的是什么？

原型是產(chǎn)品設(shè)計(jì)階段最終的交付物，產(chǎn)品經(jīng)理設(shè)計(jì)完成的原型要交付給研發(fā)團(tuán)隊(duì)、UI團(tuán)隊(duì)、UED團(tuán)隊(duì)進(jìn)行產(chǎn)品研發(fā)階段的相關(guān)工作。所以原型的目的就是讓接手下一個(gè)階段工作的小伙伴可以清晰了解產(chǎn)品經(jīng)理的產(chǎn)品設(shè)計(jì)思想，可以按照產(chǎn)品經(jīng)理規(guī)劃的愿景設(shè)計(jì)產(chǎn)品，避免打造出一款與最初設(shè)想截然相反的產(chǎn)出物。在一般產(chǎn)品流程中，原型都是與PRD文檔一起作為產(chǎn)出物出現(xiàn)的，不過PRD文檔不是本文的討論重點(diǎn)，本文的重點(diǎn)在于如何畫出一個(gè)簡(jiǎn)潔、清晰易懂的原型。

本文將一份簡(jiǎn)潔易懂的原型分為了三個(gè)部分：原型元素、元素注釋、功能埋點(diǎn)。這三部分適用于大部分的產(chǎn)品原型組成要素，當(dāng)然還會(huì)有本文沒有涵蓋的內(nèi)容，可以根據(jù)具體產(chǎn)品具體場(chǎng)景個(gè)性化”增刪改查”。

一、原型元素

原型元素為原型當(dāng)中組成的最基本元素，如原型當(dāng)中的文字、按鈕、圖片等等。這其中依據(jù)元素是否會(huì)改變、是否可操作又細(xì)分成了三類。

1.1展現(xiàn)元素

展現(xiàn)元素為原型當(dāng)中最基本的元素，文字、圖片等不會(huì)發(fā)生改變的元素。如原型中的標(biāo)題、展示圖片等等。

1.2可操作元素

可操作元素指用戶在使用產(chǎn)品過程中，可以與用戶之間發(fā)生交互效果的元素。

（1）按鈕

按鈕是原型中比較常出現(xiàn)的元素，如表單的提交按鈕，內(nèi)容點(diǎn)贊按鈕等等。

（2）跳轉(zhuǎn)鏈接

跳轉(zhuǎn)鏈接指通過點(diǎn)擊會(huì)跳轉(zhuǎn)到相應(yīng)頁面的元素，跳轉(zhuǎn)鏈接可以是文字、圖片，也可以是產(chǎn)品導(dǎo)航類鏈接，如APP當(dāng)中的Tab標(biāo)簽、功能跳轉(zhuǎn)以及返回、分享功能鏈接等等。

（3）多媒體元素

多媒體元素指產(chǎn)品原型當(dāng)中需要對(duì)用戶展現(xiàn)的音頻、視頻以及動(dòng)態(tài)圖片等多媒體內(nèi)容所使用的組件。

1.3輸入元素

輸入元素為用戶在使用產(chǎn)品時(shí)提供數(shù)據(jù)輸入功能的元素，最常見的有用戶注冊(cè)時(shí)需要填寫的表單數(shù)據(jù)，或者是用戶回復(fù)、評(píng)論內(nèi)容的輸入框。

二、元素注釋

單純的元素羅列在原型是無法滿足產(chǎn)品研發(fā)團(tuán)隊(duì)的需求，根據(jù)元素類型的不同和可能產(chǎn)生的不同狀態(tài)，需要對(duì)相應(yīng)的元素加以注釋，盡可能窮舉元素的所有可能出現(xiàn)的狀態(tài)和問題。

2.1元素規(guī)范

元素規(guī)范主要指元素在原型中的展現(xiàn)形式，如大小、位置、排版以及是否自適應(yīng)屏幕等。另外針對(duì)于輸入元素，要明確輸入內(nèi)容的規(guī)則，對(duì)輸入內(nèi)容的驗(yàn)證以及提示等。

2.2狀態(tài)轉(zhuǎn)換

狀態(tài)轉(zhuǎn)換針對(duì)于可操作元素而言，用戶對(duì)元素進(jìn)行操作后，元素會(huì)出現(xiàn)幾種狀態(tài)。如用戶點(diǎn)擊點(diǎn)贊按鈕后，點(diǎn)贊數(shù)自動(dòng)加一，點(diǎn)贊按鈕變成已贊，當(dāng)再次點(diǎn)擊點(diǎn)贊按鈕時(shí)，點(diǎn)贊數(shù)自動(dòng)減一，點(diǎn)贊按鈕回復(fù)初始狀態(tài)。

在描述元素狀態(tài)轉(zhuǎn)換時(shí)，一定要盡可能將所有可能出現(xiàn)的狀態(tài)窮舉羅列，并輔助說明狀態(tài)轉(zhuǎn)換的邏輯以及可能出現(xiàn)的問題。這樣做的目的在于讓研發(fā)團(tuán)隊(duì)盡可能明確業(yè)務(wù)底層邏輯，減少bug出現(xiàn)的幾率。

2.3頁面跳轉(zhuǎn)

頁面跳轉(zhuǎn)指用戶點(diǎn)擊相應(yīng)跳轉(zhuǎn)鏈接后會(huì)跳轉(zhuǎn)到指定頁面，這類注釋主要針對(duì)跳轉(zhuǎn)鏈接類元素，在注釋時(shí)注明要跳轉(zhuǎn)到的頁面。關(guān)于頁面跳轉(zhuǎn)設(shè)計(jì)，可以在產(chǎn)品流程設(shè)計(jì)中的頁面流程設(shè)計(jì)進(jìn)行詳細(xì)規(guī)劃。

2.4交互說明

交互說明指用戶的某些行為是否會(huì)對(duì)產(chǎn)品產(chǎn)生影響，如資訊類產(chǎn)品在閱讀內(nèi)容詳情是，在當(dāng)前頁面從右向左滑動(dòng)就會(huì)自動(dòng)閱讀下一篇文章。類似這類的交互動(dòng)作，如單擊、雙擊、屏幕滑動(dòng)等，如果你的產(chǎn)品對(duì)于這些交互有不同的表現(xiàn)，也要在原型中進(jìn)行相應(yīng)的注釋。

三、功能埋點(diǎn)

在產(chǎn)品上線后對(duì)產(chǎn)品功能、流程進(jìn)行數(shù)據(jù)分析時(shí)，如果需要從產(chǎn)品自身數(shù)據(jù)庫中提取數(shù)據(jù)，就需要在產(chǎn)品設(shè)計(jì)階段對(duì)功能進(jìn)行埋點(diǎn)。如對(duì)于電商原型頁面的功能埋點(diǎn)，在用戶點(diǎn)擊加入購物車、點(diǎn)擊結(jié)算等相關(guān)動(dòng)作元素上進(jìn)行埋點(diǎn)，利于后期對(duì)電商業(yè)務(wù)漏斗模型的數(shù)據(jù)分析統(tǒng)計(jì)提供數(shù)據(jù)支持。

對(duì)于功能的埋點(diǎn)一定要在定義數(shù)據(jù)關(guān)鍵指標(biāo)時(shí)有所明確，這樣在畫原型時(shí)，可以對(duì)每一個(gè)頁面需要埋點(diǎn)的功能進(jìn)行突出注釋。

四、實(shí)戰(zhàn)案例-BPApp

本案例中的原型選自之前產(chǎn)品經(jīng)理知識(shí)體系系列文章中的案例：BestProduct，下面僅選取了幾個(gè)頁面進(jìn)行說明上面提到的畫原型技巧。

#專欄作家#

記小憶，人人都是產(chǎn)品經(jīng)理專欄作者，野蠻生長的產(chǎn)品經(jīng)理，運(yùn)營商大數(shù)據(jù)產(chǎn)品實(shí)踐者，擅長從0-1搭建產(chǎn)品經(jīng)理知識(shí)體系。公眾號(hào)：PM龍門陣。

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

題圖來自PEXELS，基于CC0協(xié)議