起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識產(chǎn)品原型的目的所在：給新手的原型手冊
前言：產(chǎn)品老手可以點“X”不用看了，這是給新手的原型手冊。
在QQ群里混跡的兩年里我收到許多新同學(xué)的問題，諸如：“原型需不需要高保真?。俊薄霸屠锒家┦裁磧?nèi)容??？”“有了原型還要文檔嗎？”“原型怎么畫啊？”“原型是必需品嗎？”等等。
以上問題在本文中都能得到解答。
一、原型的必要性和作用
原型是什么？
原型是我們的產(chǎn)品的剛出生時的“模樣”，它還是一個剛從想法階段逐漸完善的小家伙，也是產(chǎn)品經(jīng)理在產(chǎn)品開發(fā)過程中產(chǎn)出最直觀的東西，現(xiàn)在的原型在很大一部分公司中已經(jīng)完全替代了之前的PRD文檔。
畢竟圖文加上一些可交互的事件可以讓開發(fā)更直觀的了解自己的任務(wù)，并且讓設(shè)計開發(fā)不用去對著那堆干巴巴的文字。（加班還容易犯困Zzz…）
原型相對于文檔來說直接很多，在項目協(xié)作中也更加效率，畢竟一個已經(jīng)開始逐步具現(xiàn)化的demo便于大家開會的時候評估需求可行性，避免不切實際的想法出現(xiàn)。
二、原型應(yīng)該包含哪些內(nèi)容
產(chǎn)品結(jié)構(gòu)
在我們的原型里首先需要把產(chǎn)品的結(jié)構(gòu)給展示出來，方便給設(shè)計開發(fā)等人員一個整體的了解——我們要做什么。
（點擊圖片放大按“F”鍵查看原圖）
在這里我們只需要標明產(chǎn)品所擁有的頁面，登錄前后（也可能是某個可以影響全局的選項，根據(jù)所選的不同，展示的內(nèi)容不同。）展示的內(nèi)容差異過大需要分兩幅圖來表示。
如果原型內(nèi)的頁面與腦圖不沖突的話【比如一些狀態(tài)的展示可能會放在一個頁面里，或者某些狀態(tài)在腦圖里是一個頁面但是在原型里卻鋪開展示】可以右擊左上角的站點地圖中層級最高的一項，點擊生成流程圖即可。
生成的流程圖如下：
頁面元素（基礎(chǔ)布局）
在這一點我想不用太過去說明，大家都知道原型就是一個簡略的沒有做過視覺美化的線框，所以在原型上圖片/按鈕/文字段落/選項等都是需要去標明出來的，但是請注意在原型中組件保持統(tǒng)一樣式。
比如：
頁面內(nèi)的圖片樣式都為占位符時，如：
在其他頁面盡量不要再用其他部件表示圖片，如：
或者彈窗樣式都用了下圖的展現(xiàn)方式：
就盡量不要再用這種樣式去表現(xiàn)彈窗了：
容易讓開發(fā)對于前端規(guī)范產(chǎn)生理解誤差。
其實在畫原型時最好有一套自有的原型組件樣式，比如時間控件、篩選器、富文本框、彈窗、導(dǎo)航欄等，防止團隊內(nèi)的成員在原型的樣式表現(xiàn)上不統(tǒng)一，導(dǎo)致開發(fā)理解錯誤等。
功能狀態(tài)
產(chǎn)品的一個功能下可能延伸出不同的狀態(tài)頁面，此時就比較考驗一位產(chǎn)品人的邏輯能力以及經(jīng)驗了。
最常見的有退單、支付、訂單、登錄等，拿退單舉例子吧，退單通常是：
在這個邏輯下，出現(xiàn)的狀態(tài)有：請求退款—退款中—退款后，看似簡單的流程就經(jīng)常會有同學(xué)忘了在退款中加入取消退款，或者在退款中的時候忘了提示開發(fā)根據(jù)接口字段更新退款狀態(tài)等情況。在退款中也根據(jù)不同狀態(tài)需要標注的頁面情況，
- 我方是否受理
- 支付平臺是否受理
因為有可能自身業(yè)務(wù)的緣故，我方不受理的情況下是不允許用戶重新發(fā)起退款請求的。
然而在支付平臺不受理退款的情況下允許用戶重新發(fā)起退款請求，那么這又是兩種不同的退款失敗判斷。
所以作為一只合格的產(chǎn)品狗需要精確的想到每一個頁面狀態(tài)的情況，不能把所有的退款中狀態(tài)都叫做一個退款中，不能把所有的訂單詳情都叫做訂單詳情，至少在自己的概念里以及原型里要做出區(qū)分。
標注邏輯
在沒有了說明文檔之后，大家都開始在原型里加上了標注。
然而標注應(yīng)該加哪些內(nèi)容呢？
如何加標注呢？
對于某些新手產(chǎn)品同學(xué)，沒有參照沒有人帶自我摸索的情況下還是比較茫然的。標注的目的是告訴開發(fā)我這個頁面甚至我這個功能有什么內(nèi)容/邏輯，比如：
在頁面中需要核對的字段，頁面中可能觸發(fā)的交互樣式：
某一功能的標注簡介，可延伸的小狀態(tài)、狀態(tài)的出現(xiàn)條件、字段的格式、字段的說明
或者這個功能觸發(fā)的后續(xù)邏輯
還有一些可以全局標出的字段和樣式，這塊在原型中可以特別標出一個交互說明頁
這些都是在原型標注中需要標出的內(nèi)容，有助于開發(fā)理解產(chǎn)品邏輯，以免溝通不到位遺漏流程、功能等情況。
修改記錄
修改記錄是你產(chǎn)品迭代的證明，即使是你的第一版正式原型，之前和設(shè)計、開發(fā)、運營等討論修改的元素也最好加進去。首先避免工作上溝通的矛盾，因為有時候大家都記不清，直接記在原型上的一個頁面里也便于大家查閱。
三、畫原型時需要注意的
做不做高保真？
以前總有同學(xué)問我產(chǎn)品畫原型要不要畫高保真，在常規(guī)的項目流程中原型只不過是一個用來表示自己想法的東西。
非常細節(jié)的交互效果和視覺表現(xiàn)不是產(chǎn)品在原型里去追求的，那些是交給交互設(shè)計師和視覺設(shè)計師去追求表現(xiàn)的。在沒有交互設(shè)計師的時候想要去規(guī)定表達一些交互動效也盡量通過文字描述去敘述情況，畢竟兩句話能解決的事情就不要自己冥思苦想花倆鐘頭去死摳了。
比如現(xiàn)在的中繼器之類的，或者多個動態(tài)面板的嵌套拖拉效果，我記得之前自己為了做監(jiān)測鼠標滾輪方向來翻頁想了一個晚上【本人不會代碼，設(shè)計出身】。雖然最后還是用不會代碼的方式解決了問題，但是實在耗費了不少時間。
我其實只需要一句標注【當(dāng)前頁面一屏內(nèi)容為1080*560，根據(jù)鼠標滾動方向，一次翻動一屏】寫在旁邊就好了，但是你花了這么多的時間去鉆研這個效果。
獲得了一點點的成就感以外，失去了更多寶貴的時間，也打斷了自己思考其他功能邏輯的思路，加長了工作周期，晚上又得繼續(xù)熬夜加班在各種群里訴苦。
自作孽，不可活。
視覺表現(xiàn)方面，不是到那種非你出不可的情況下，產(chǎn)品還是沒有義務(wù)出視覺稿的，所以在視覺表現(xiàn)方面我們只需要區(qū)分好按鈕種類、圖片、分類選項等，方便視覺設(shè)計師理解原型。
標注樣式需統(tǒng)一
我們在標注時的樣式需要統(tǒng)一，比如：
在一開始就標注好說明文字，后續(xù)的標注都根據(jù)此頁來進行編寫，也能有效減少開發(fā)對于產(chǎn)品理解的學(xué)習(xí)成本
畫原型的時候注意觀看者的體驗
（此部分非原創(chuàng)，已忘出處，侵改。）
首先通過顏色來區(qū)分不同模塊，別弄得整個屏幕都是白快快和白叉叉。
比如：導(dǎo)航欄深色 上面的button為淺色，視覺層級比較好區(qū)分一點。
盡量用不同程度的黑白灰去做顏色區(qū)分，顏色太多的話更加影響閱讀效果。畫原型和文檔一起標注的時候，別用太多線牽來牽去，也比較影響閱讀體驗，會讓人眼花繚亂。
像蜘蛛網(wǎng)一樣的原型我覺得是誰看了都會頭大吧。
畢竟開發(fā)也是人，可憐可憐那些在我們成長道路中被坑的程序猿們吧QAQ
作者：Kyo.Chen阿浩，UIBANG專欄作者，www.uibang.cn，魔都中二產(chǎn)品狗。
本文由 @Kyo.Chen阿浩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
寫的很棒的?；竞臀覀儸F(xiàn)在規(guī)范一樣。大家可以多多參考。
請問產(chǎn)品經(jīng)理做的原型是不是不需要太多交互的形式 只要把邏輯思維及產(chǎn)品的主要界面形式理清楚就可以了
??
認為寫的很棒，給我（新手汪）解決了很多問題，感謝。個人覺得文章好壞，質(zhì)量高低是個仁者見仁的問題，有篇文章恰好解決了你現(xiàn)階段的problem，那就是好文。
畢竟開發(fā)也是人，可憐可憐那些在我們成長道路中被坑的程序猿們吧QAQ
看到這句話，無端端就笑了
我覺得Axure里面簡單的交互邏輯什么的還比較好學(xué)的