制作原型是產(chǎn)品汪們?nèi)粘＠泄ぷ鳎彩且幻a(chǎn)品經(jīng)理需要具備的基礎(chǔ)技能复颈。也許是一個(gè)大功能模塊，需要制作整個(gè)業(yè)務(wù)流程的原型沥割；也許只是個(gè)別頁(yè)面的增加耗啦。作者比較喜歡的方式：在梳理好需求和流程后，先采用紙筆手繪原型机杜，進(jìn)行修改大致得出定稿之后帜讲，再采用工具（Axure RP）參照手繪原型制圖。在需求設(shè)計(jì)階段椒拗，最終交付物是原型似将。之后，開(kāi)發(fā)團(tuán)隊(duì)和UX設(shè)計(jì)師蚀苛，會(huì)參照原型來(lái)開(kāi)展工作在验。產(chǎn)品經(jīng)理需要在這份原型里表達(dá)清晰產(chǎn)品愿景和一些注意事項(xiàng)，以免后續(xù)團(tuán)隊(duì)走偏堵未。一般產(chǎn)品流程中腋舌，原型會(huì)與PRD文檔一起作為產(chǎn)出物出現(xiàn)。
本文重點(diǎn)講一下如何畫(huà)出一份簡(jiǎn)潔渗蟹、易懂的原型侦厚。
首先我們把原型分為三個(gè)部分：原型元素、元素注釋拙徽、功能埋點(diǎn)。這三部分是絕大多數(shù)產(chǎn)品原型組成要素诗宣，若是本文沒(méi)有涵蓋的內(nèi)容膘怕，讀者可以根據(jù)具體場(chǎng)景個(gè)性化”增刪改”哈，歡迎提出建議~
原型元素
1.原型元素主要包括三種形式：文字召庞、按鈕岛心、圖片等来破。
1.1元素分類：依據(jù)元素會(huì)否改變、可否操作又細(xì)分成了三類 展現(xiàn)元素忘古、可操作元素徘禁、輸入元素。
1.1.1展現(xiàn)元素（不會(huì)發(fā)生改變）:一般為：文字髓堪、圖片等不會(huì)發(fā)生改變的元素送朱。如頁(yè)面標(biāo)題、展示圖片等干旁。
1.1.2可操作元素（交互元素）：指用戶在使用產(chǎn)品過(guò)程中驶沼，可以與用戶之間發(fā)生交互效果的元素。
a.按鈕：如表單的提交按鈕争群，內(nèi)容點(diǎn)贊按鈕回怜，頻道切換等。
b.跳轉(zhuǎn)鏈接：指通過(guò)點(diǎn)擊會(huì)跳轉(zhuǎn)到相應(yīng)頁(yè)面的元素换薄，跳轉(zhuǎn)鏈接可以是文字玉雾、圖片，也可以是導(dǎo)航類鏈接轻要，如APP當(dāng)中的Tab標(biāo)簽复旬、功能跳轉(zhuǎn)以及返回、分享功能鏈接等伦腐。
c.多媒體元素：指產(chǎn)品原型當(dāng)中需要對(duì)用戶展現(xiàn)的音頻赢底、視頻以及動(dòng)態(tài)圖片等多媒體內(nèi)容所使用的組件。
1.1.3輸入元素：用戶在使用產(chǎn)品時(shí)提供數(shù)據(jù)輸入功能的元素柏蘑，最常見(jiàn)的有用戶注冊(cè)時(shí)需要填寫(xiě)的表單數(shù)據(jù)幸冻，或者是用戶回復(fù)、評(píng)論內(nèi)容的輸入框咳焚。
元素注釋
如果我們只是提供一張不加說(shuō)明的原型圖給研發(fā)人員洽损，設(shè)計(jì)人員，他們是很難理解的革半。所以碑定，我們需要加以注釋說(shuō)明，根據(jù)元素的類型和可能性不同場(chǎng)景下的狀態(tài)又官，對(duì)相應(yīng)元素加以注釋延刘，盡可能窮舉元素的所有可能出現(xiàn)的狀態(tài)及異常case。
2.1元素規(guī)范
元素規(guī)范主要指元素在原型中的展現(xiàn)形式六敬，如大小碘赖、位置、排版以及是否自適應(yīng)屏幕等。另外針對(duì)輸入元素普泡，要明確輸入內(nèi)容的規(guī)則播掷，對(duì)輸入內(nèi)容的校驗(yàn)以及出錯(cuò)時(shí)的提示等。
2.2狀態(tài)轉(zhuǎn)換
狀態(tài)轉(zhuǎn)換針對(duì)可操作元素而言撼班，用戶對(duì)元素進(jìn)行操作后歧匈，元素會(huì)出現(xiàn)幾種狀態(tài)。如用戶點(diǎn)擊關(guān)注按鈕后砰嘁，關(guān)注數(shù)自動(dòng)加一件炉，關(guān)注按鈕變成已關(guān)注（或取消關(guān)注），當(dāng)點(diǎn)擊取消關(guān)注按鈕時(shí)般码，關(guān)注數(shù)自動(dòng)減一妻率，關(guān)注按鈕回復(fù)初始狀態(tài)。
在描述元素狀態(tài)轉(zhuǎn)換時(shí)板祝，一定要盡可能將所有可能出現(xiàn)的狀態(tài)窮舉羅列宫静，并輔助說(shuō)明狀態(tài)轉(zhuǎn)換的邏輯以及可能出現(xiàn)的問(wèn)題。這樣做的目的在于讓研發(fā)團(tuán)隊(duì)盡可能明確業(yè)務(wù)底層邏輯券时，減少bug出現(xiàn)的幾率孤里。
2.3頁(yè)面跳轉(zhuǎn)
頁(yè)面跳轉(zhuǎn)指用戶點(diǎn)擊相應(yīng)跳轉(zhuǎn)鏈接后會(huì)跳轉(zhuǎn)到指定頁(yè)面，這類注釋主要針對(duì)跳轉(zhuǎn)鏈接類元素橘洞，在注釋時(shí)注明要跳轉(zhuǎn)到的頁(yè)面捌袜。關(guān)于頁(yè)面跳轉(zhuǎn)設(shè)計(jì)，可以在產(chǎn)品流程設(shè)計(jì)中的頁(yè)面流程設(shè)計(jì)進(jìn)行詳細(xì)規(guī)劃炸枣。
2.4交互說(shuō)明
交互說(shuō)明指用戶的某些行為是否會(huì)對(duì)產(chǎn)品產(chǎn)生影響虏等，如在查看產(chǎn)品的資訊第一個(gè)欄目時(shí)，在資訊區(qū)域從右向左滑動(dòng)就會(huì)自動(dòng)切換到下一個(gè)資訊欄目适肠。類似這類的交互動(dòng)作霍衫，如單擊、雙擊侯养、屏幕滑動(dòng)等敦跌，如果你的產(chǎn)品對(duì)于這些交互有不同的表現(xiàn)，也要在原型中進(jìn)行相應(yīng)的注釋逛揩。
功能埋點(diǎn)
在產(chǎn)品上線后對(duì)產(chǎn)品功能柠傍、頁(yè)面進(jìn)行數(shù)據(jù)分析時(shí)，如果需要從產(chǎn)品自身數(shù)據(jù)庫(kù)中提取數(shù)據(jù)辩稽，就需要在產(chǎn)品設(shè)計(jì)階段對(duì)某些功能和頁(yè)面進(jìn)行埋點(diǎn)惧笛。如對(duì)于電商原型頁(yè)面的功能埋點(diǎn)，在用戶點(diǎn)擊加入購(gòu)物車徐紧、點(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í)有所明確并级，這樣在畫(huà)原型時(shí)，可以對(duì)每一個(gè)頁(yè)面需要埋點(diǎn)的功能進(jìn)行突出注釋侮腹。
原型實(shí)例分享
請(qǐng)參見(jiàn)本案例中嘲碧，左邊部分為原型圖，右邊為注解說(shuō)明（部分有連接線）父阻，仔細(xì)的同學(xué)可以將每個(gè)注釋指向?qū)?yīng)區(qū)域愈涩。僅供參考。
............................................................................... The End.........................................................................
如需轉(zhuǎn)載加矛，請(qǐng)與作者聯(lián)系履婉，謝謝~
