起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品原型三要素：產品老司機如何畫原型？
當我們在畫原型時，我們是在畫什么？在討論這個問題之前，我們應該先明確一個最本質的問題，就是我們畫原型的目的是什么？
原型是產品設計階段最終的交付物，產品經理設計完成的原型要交付給研發團隊、UI團隊、UED團隊進行產品研發階段的相關工作。所以原型的目的就是讓接手下一個階段工作的小伙伴可以清晰了解產品經理的產品設計思想，可以按照產品經理規劃的愿景設計產品，避免打造出一款與最初設想截然相反的產出物。在一般產品流程中，原型都是與PRD文檔一起作為產出物出現的，不過PRD文檔不是本文的討論重點，本文的重點在于如何畫出一個簡潔、清晰易懂的原型。
本文將一份簡潔易懂的原型分為了三個部分：原型元素、元素注釋、功能埋點。這三部分適用于大部分的產品原型組成要素，當然還會有本文沒有涵蓋的內容，可以根據具體產品具體場景個性化”增刪改查”。
一、原型元素
原型元素為原型當中組成的最基本元素，如原型當中的文字、按鈕、圖片等等。這其中依據元素是否會改變、是否可操作又細分成了三類。
1.1展現元素
展現元素為原型當中最基本的元素，文字、圖片等不會發生改變的元素。如原型中的標題、展示圖片等等。
1.2可操作元素
可操作元素指用戶在使用產品過程中，可以與用戶之間發生交互效果的元素。
（1）按鈕
按鈕是原型中比較常出現的元素，如表單的提交按鈕，內容點贊按鈕等等。
（2）跳轉鏈接
跳轉鏈接指通過點擊會跳轉到相應頁面的元素，跳轉鏈接可以是文字、圖片，也可以是產品導航類鏈接，如APP當中的Tab標簽、功能跳轉以及返回、分享功能鏈接等等。
（3）多媒體元素
多媒體元素指產品原型當中需要對用戶展現的音頻、視頻以及動態圖片等多媒體內容所使用的組件。
1.3輸入元素
輸入元素為用戶在使用產品時提供數據輸入功能的元素，最常見的有用戶注冊時需要填寫的表單數據，或者是用戶回復、評論內容的輸入框。
二、元素注釋
單純的元素羅列在原型是無法滿足產品研發團隊的需求，根據元素類型的不同和可能產生的不同狀態，需要對相應的元素加以注釋，盡可能窮舉元素的所有可能出現的狀態和問題。
2.1元素規范
元素規范主要指元素在原型中的展現形式，如大小、位置、排版以及是否自適應屏幕等。另外針對于輸入元素，要明確輸入內容的規則，對輸入內容的驗證以及提示等。
2.2狀態轉換
狀態轉換針對于可操作元素而言，用戶對元素進行操作后，元素會出現幾種狀態。如用戶點擊點贊按鈕后，點贊數自動加一，點贊按鈕變成已贊，當再次點擊點贊按鈕時，點贊數自動減一，點贊按鈕回復初始狀態。
在描述元素狀態轉換時，一定要盡可能將所有可能出現的狀態窮舉羅列，并輔助說明狀態轉換的邏輯以及可能出現的問題。這樣做的目的在于讓研發團隊盡可能明確業務底層邏輯，減少bug出現的幾率。
2.3頁面跳轉
頁面跳轉指用戶點擊相應跳轉鏈接后會跳轉到指定頁面，這類注釋主要針對跳轉鏈接類元素，在注釋時注明要跳轉到的頁面。關于頁面跳轉設計，可以在產品流程設計中的頁面流程設計進行詳細規劃。
2.4交互說明
交互說明指用戶的某些行為是否會對產品產生影響，如資訊類產品在閱讀內容詳情是，在當前頁面從右向左滑動就會自動閱讀下一篇文章。類似這類的交互動作，如單擊、雙擊、屏幕滑動等，如果你的產品對于這些交互有不同的表現，也要在原型中進行相應的注釋。
三、功能埋點
在產品上線后對產品功能、流程進行數據分析時，如果需要從產品自身數據庫中提取數據，就需要在產品設計階段對功能進行埋點。如對于電商原型頁面的功能埋點，在用戶點擊加入購物車、點擊結算等相關動作元素上進行埋點，利于后期對電商業務漏斗模型的數據分析統計提供數據支持。
對于功能的埋點一定要在定義數據關鍵指標時有所明確，這樣在畫原型時，可以對每一個頁面需要埋點的功能進行突出注釋。
四、實戰案例-BPApp
本案例中的原型選自之前產品經理知識體系系列文章中的案例：BestProduct，下面僅選取了幾個頁面進行說明上面提到的畫原型技巧。
#專欄作家#
記小憶，人人都是產品經理專欄作者，野蠻生長的產品經理，運營商大數據產品實踐者，擅長從0-1搭建產品經理知識體系。公眾號：PM龍門陣。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
這種好看的元件在哪哥網址下載，有鏈接嗎？AXURE自帶的不好看
哈，看完還是不太會？你可能需要從Axure基礎開始學
這里推薦你加Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：大禮包
?? 領取適合產品新人的原型設計大禮包哦，cc還會不定期分享Axure免費視頻課程呢！
因為你一上來就用了墨刀，如果你先學習axure或者是sketch，就會不屑用磨刀了
不要盲目的追求axure，墨刀也有墨刀的優勢，要相互結合用，不同的項目或產品使用不同工具。便捷，準確的達到預期才是目的。
axure是交互體驗做的最差的交互工具
zan
本人B端新人一枚，不知道做了這些標注以后還有沒由必要把交互再做出來？比如登錄，這塊以注明密碼錯誤等相關信息，在畫交互時還有必要把每個情況都畫出來嗎？
畫原型的時候把自己能想到的異常情況都做出來，當然你是不可能做出全部的
項目時間緊 沒有那么多時間
開發會說：那要你產品干嘛的
b端產品，用組件就好了，組件會解決一些通用的異常問題，但是具體的異常描述和情景，還是需要產品細想
這種原型是比較適合給開發看的，如果直接做成動態交互，開發很容易漏掉一些交互事件，但是面試的用人單位，就是喜歡你做成很牛逼的交互效果圖，我把原型標注好給面試官看，對方點來點去說怎么沒反應，我也是無語了。
比較認同樓主的思路，簡約的設計、嚴密的邏輯，加上清晰的思路，就足夠了。高保真什么炫技之類的原型，還是平時練習技能和熟悉軟件用用，這才是接地氣的原型設計。
需求描述的方式有很多種。原型，文檔，原型加文檔，表格等等，還是要看跟團隊配合的程度，自己的研發團隊適合那種方式，不過我很喜歡作者的方式，清晰
移動端墨刀會畫起來比較快，但是要復雜的交互還是離不開Axure
axure中要是有將標注一鍵隱藏的功能，就更好了
可以的，我就是把所有的注釋變成一組，然后頁面角落放一個按鈕設置成點擊隱藏這個組就OK了 ??
其實axure上的每個控件都可以做備注的，在右上角的說明里寫就行了，演示的時候就會變成彈窗展示出來
用了一年墨刀，基礎還是AX，效果交互和流暢還是墨刀好
通俗易懂~謝謝呢
老司機把需求文檔都說一遍吧，光說原型~╮(╯▽╰)╭ ?
哈哈 好的呀，等下一篇更新吧
作者文章寫的很好，特別是元素注釋里面將各個元素注意細節都講到了。作為新人有一點想請教各位，功能埋點是什么？作用是什么？
舉個例子，某一個頁面瀏覽量是1000，但頁面上提交按鈕的點擊量只有100，在進行數據統計分析時要通過業務流程去獲取用戶每一個行為的數據。在原型設計時要考慮是否要統計某些元素的點擊行為，有利于產品上線后對產品相關數據的采集和分析。
大概懂了。就是功能埋點利于后期統計和總結功能使用率的數據。
還有你這是畫的蘋果手機的界面么？我看你還畫的電池電量啥的，是不是h5頁面就不用畫那些了？而且瀏覽器本身會有返回什么的。
電量是手機自帶的工具欄，本文中原型是為了更形象生動，理論上你可以不畫的。
我怎么都找不見連線、??這種組件呢？我畫起來老費勁了 ?? 急哭了啊
額 說明你對axure用的不熟練，基礎組件里面會有標注元素。在axure最上面的工具欄有連接選項，點擊連接就可以做連線了。
請問這個是用的什么原型工具？
sketch和axure都可以實現的，ppt也可以
axure
一看就是Axure，熟悉的連線，熟悉的Icon。。。
哈哈，一看就是老司機
同問，連接線是有現成的元件嗎
axure選擇連接就有了
帶數字的圓圈是自己放上去的嗎？
對呀，都是axure里面自帶的組件
哈哈，老司機談不上，只是在設計過4個產品的PRD之后，感覺原型要輕量級一點兒。有些時候PM還是要從“just原型PM”逐漸升級上去的。上文說的幾個PRD要素很精辟，贊起來！