當我們在畫原型時洽损，我們是在畫什么？在討論這個問題之前革半，我們應該先明確一個最本質(zhì)的問題碑定，就是我們畫原型的目的是什么？
原型是產(chǎn)品設計階段最終的交付物又官，產(chǎn)品經(jīng)理設計完成的原型要交付給研發(fā)團隊延刘、UI團隊、UED團隊進行產(chǎn)品研發(fā)階段的相關工作六敬。所以原型的目的就是讓接手下一個階段工作的小伙伴可以清晰了解產(chǎn)品經(jīng)理的產(chǎn)品設計思想碘赖，可以按照產(chǎn)品經(jīng)理規(guī)劃的愿景設計產(chǎn)品，避免打造出一款與最初設想截然相反的產(chǎn)出物觉阅。在一般產(chǎn)品流程中崖疤，原型都是與PRD文檔一起作為產(chǎn)出物出現(xiàn)的，不過PRD文檔不是本文的討論重點典勇，本文的重點在于如何畫出一個簡潔劫哼、清晰易懂的原型。
本文將一份簡潔易懂的原型分為了三個部分：原型元素割笙、元素注釋权烧、功能埋點眯亦。這三部分適用于大部分的產(chǎn)品原型組成要素，當然還會有本文沒有涵蓋的內(nèi)容般码，可以根據(jù)具體產(chǎn)品具體場景個性化”增刪改查”妻率。
一、原型元素
原型元素為原型當中組成的最基本元素板祝，如原型當中的文字宫静、按鈕、圖片等等券时。這其中依據(jù)元素是否會改變孤里、是否可操作又細分成了三類。
1.1展現(xiàn)元素
展現(xiàn)元素為原型當中最基本的元素橘洞，文字捌袜、圖片等不會發(fā)生改變的元素。如原型中的標題炸枣、展示圖片等等虏等。
1.2可操作元素
可操作元素指用戶在使用產(chǎn)品過程中，可以與用戶之間發(fā)生交互效果的元素适肠。
（1）按鈕
按鈕是原型中比較常出現(xiàn)的元素霍衫，如表單的提交按鈕，內(nèi)容點贊按鈕等等迂猴。
（2）跳轉(zhuǎn)鏈接
跳轉(zhuǎn)鏈接指通過點擊會跳轉(zhuǎn)到相應頁面的元素慕淡，跳轉(zhuǎn)鏈接可以是文字、圖片沸毁，也可以是產(chǎn)品導航類鏈接峰髓，如APP當中的Tab標簽、功能跳轉(zhuǎn)以及返回息尺、分享功能鏈接等等携兵。
（3）多媒體元素
多媒體元素指產(chǎn)品原型當中需要對用戶展現(xiàn)的音頻、視頻以及動態(tài)圖片等多媒體內(nèi)容所使用的組件搂誉。
1.3輸入元素
輸入元素為用戶在使用產(chǎn)品時提供數(shù)據(jù)輸入功能的元素徐紧，最常見的有用戶注冊時需要填寫的表單數(shù)據(jù)，或者是用戶回復炭懊、評論內(nèi)容的輸入框并级。
二、元素注釋
單純的元素羅列在原型是無法滿足產(chǎn)品研發(fā)團隊的需求侮腹，根據(jù)元素類型的不同和可能產(chǎn)生的不同狀態(tài)嘲碧，需要對相應的元素加以注釋，盡可能窮舉元素的所有可能出現(xiàn)的狀態(tài)和問題父阻。
2.1元素規(guī)范
元素規(guī)范主要指元素在原型中的展現(xiàn)形式愈涩，如大小望抽、位置、排版以及是否自適應屏幕等履婉。另外針對于輸入元素煤篙，要明確輸入內(nèi)容的規(guī)則，對輸入內(nèi)容的驗證以及提示等毁腿。
2.2狀態(tài)轉(zhuǎn)換
狀態(tài)轉(zhuǎn)換針對于可操作元素而言辑奈，用戶對元素進行操作后，元素會出現(xiàn)幾種狀態(tài)狸棍。如用戶點擊點贊按鈕后身害，點贊數(shù)自動加一，點贊按鈕變成已贊草戈，當再次點擊點贊按鈕時，點贊數(shù)自動減一侍瑟，點贊按鈕回復初始狀態(tài)唐片。
在描述元素狀態(tài)轉(zhuǎn)換時，一定要盡可能將所有可能出現(xiàn)的狀態(tài)窮舉羅列涨颜，并輔助說明狀態(tài)轉(zhuǎn)換的邏輯以及可能出現(xiàn)的問題费韭。這樣做的目的在于讓研發(fā)團隊盡可能明確業(yè)務底層邏輯，減少bug出現(xiàn)的幾率庭瑰。
2.3頁面跳轉(zhuǎn)
頁面跳轉(zhuǎn)指用戶點擊相應跳轉(zhuǎn)鏈接后會跳轉(zhuǎn)到指定頁面星持，這類注釋主要針對跳轉(zhuǎn)鏈接類元素，在注釋時注明要跳轉(zhuǎn)到的頁面弹灭。關于頁面跳轉(zhuǎn)設計督暂，可以在產(chǎn)品流程設計中的頁面流程設計進行詳細規(guī)劃。
2.4交互說明
交互說明指用戶的某些行為是否會對產(chǎn)品產(chǎn)生影響穷吮，如資訊類產(chǎn)品在閱讀內(nèi)容詳情是逻翁，在當前頁面從右向左滑動就會自動閱讀下一篇文章。類似這類的交互動作捡鱼，如單擊八回、雙擊、屏幕滑動等驾诈，如果你的產(chǎn)品對于這些交互有不同的表現(xiàn)缠诅，也要在原型中進行相應的注釋。
三乍迄、功能埋點
在產(chǎn)品上線后對產(chǎn)品功能管引、流程進行數(shù)據(jù)分析時，如果需要從產(chǎn)品自身數(shù)據(jù)庫中提取數(shù)據(jù)就乓，就需要在產(chǎn)品設計階段對功能進行埋點汉匙。如對于電商原型頁面的功能埋點拱烁，在用戶點擊加入購物車、點擊結算等相關動作元素上進行埋點噩翠，利于后期對電商業(yè)務漏斗模型的數(shù)據(jù)分析統(tǒng)計提供數(shù)據(jù)支持戏自。
對于功能的埋點一定要在定義數(shù)據(jù)關鍵指標時有所明確，這樣在畫原型時伤锚，可以對每一個頁面需要埋點的功能進行突出注釋擅笔。
四、實戰(zhàn)案例-BPApp
本案例中的原型選自之前產(chǎn)品經(jīng)理知識體系系列文章中的案例：BestProduct屯援，下面僅選取了幾個頁面進行說明上面提到的畫原型技巧猛们。
