在uibang的兩年裡我收到許多新同學的問題，諸如：「原型需不需要高保真啊？」「原型裡都要些什麼內容啊？」「有了原型還要文件嗎？」「原型怎麼畫啊？」「原型是必需品嗎？」等等。
以上問題在本文中都能得到解答。
原型的必要性和作用
◇ 原型是什麼？
原型是我們的產品的剛出生時的「模樣」，它還是乙個剛從想法階段逐漸完善的小傢伙，也是產品經理在產品開發過程中產出最直觀的東西，現在的原型在很大一部分公司中已經完全替代了之前的prd文件。
畢竟**加上一些可互動的事件可以讓開發更直觀的了解自己的任務，並且讓設計開發不用去對著那堆乾巴巴的文字。（加班還容易犯睏zzz...）
原型相對於文件來說直接很多，也更加效率，畢竟乙個已經開始逐步具現化的demo便於大家開會的時候評估需求可行性，避免不切實際的想法出現。
原型應該包含哪些內容
◇產品結構
在我們的原型裡首先需要把產品的結構給展示出來，方便給設計開發等人員乙個整體的了解——我們要做什麼。
在這裡我們只需要標明產品所擁有的頁面，登入前後（也可能是某個可以影響全域性的選項，根據所選的不同，展示的內容不同）展示的內容差異過大需要分兩幅圖來表示。
如果原型內的頁面與腦圖不衝突的話（比如一些狀態的展示可能會放在乙個頁面裡，或者某些狀態在腦圖里是乙個頁面但是在原型裡卻鋪開展示）可以右擊左上角的站點地圖中層級最高的一項，點選生成流程圖即可。
生成的流程圖如下：
◇頁面元素（基礎布局）
或者彈窗樣式都用了下圖的展現方式：
就盡量不要再用這種樣式去表現彈窗了。
在畫原型時最好有一套自有的原型元件樣式，比如時間控制項、篩選器、富文字框、彈窗、導航欄等，防止團隊內的成員在原型的樣式表現上不統一，導致開發理解錯誤等。
◇功能狀態
產品的乙個功能下可能延伸出不同的狀態頁面，此時就比較考驗一位產品人的邏輯能力以及經驗了。
最常見的有退單、支付、訂單、登入等，拿退單舉例子吧，退單通常是：
在這個邏輯下，出現的狀態有：請求退款—退款中—退款後，看似簡單的流程就經常會有同學忘了在退款中加入取消退款，或者在退款中的時候忘了提示開發根據介面字段更新退款狀態等情況。
在退款中也根據不同狀態需要標註的頁面情況：
1、我方是否受理
2、支付平台是否受理
因為有可能自身業務的緣故，我方不受理的情況下是不允許使用者重新發起退款請求的。然而在支付平台不受理退款的情況下允許使用者重新發起退款請求，那麼這又是兩種不同的退款失敗判斷。
所以作為乙隻合格的產品狗需要精確的想到每乙個頁面狀態的情況，不能把所有的退款中狀態都叫做乙個退款中，不能把所有的訂單詳情都叫做訂單詳情，至少在自己的概念裡以及原型裡要做出區分。
◇標註邏輯
在沒有了說明文件之後，大家都開始在原型裡加上了標註。然而標註應該加哪些內容呢？如何加標註呢？
對於某些新手產品同學，沒有參照沒有人帶自我摸索的情況下還是比較茫然的。標註的目的是告訴開發我這個頁面甚至我這個功能有什麼內容/邏輯，比如：
在頁面中需要核對的字段，頁面中可能觸發的互動樣式。
甚至是某乙個功能的標註簡介，可延伸的小狀態、狀態的出現條件、欄位的格式、欄位的說明：
或者這個功能觸發的後續邏輯：
還有一些可以全域性標出的字段和樣式，這塊在原型中可以特別標出乙個互動說明頁：
這些都是在原型標註中需要標出的內容，有助於開發理解產品邏輯，以免溝通不到位遺漏流程、功能等情況。
◇修改記錄
修改記錄是你產品迭代的證明，即使是你的第一版正式原型，之前和設計、開發、運營等討論修改的元素也最好加進去。首先避免工作上溝通的矛盾，因為有時候大家都記不清，直接記在原型上的乙個頁面裡也便於大家查閱。
畫原型時的注意事項
◇做不做高保真？
以前總有同學問我產品畫原型要不要畫高保真，在常規的專案流程中原型只不過是乙個用來表示自己想法的東西。非常細節的互動效果和視覺表現不是產品在原型裡去追求的，那些是交給互動設計師和視覺設計師去追求表現的。
在沒有互動設計師的時候想要去規定表達一些交互動效也盡量通過文字描述去敘述情況，畢竟兩句話能解決的事情就不要自己冥思苦想花倆鐘頭去死摳了。比如現在的中繼器之類的，或者多個動態面板的巢狀拖拉效果。
我記得之前自己為了做監測滑鼠滾輪方向來翻頁想了乙個晚上（本人不會**，設計出身）雖然最後還是用不會**的方式解決了問題，但是實在耗費了不少時間。
我其實只需要一句標註（當前頁面一屏內容為1080*560，根據滑鼠滾動方向，一次翻動一屏）寫在旁邊就好了，但是你花了這麼多的時間去鑽研這個效果。
獲得了一點點的成就感以外，失去了更多寶貴的時間，也打斷了自己思考其他功能邏輯的思路，加長了工作週期，晚上又得繼續熬夜加班在各種群裡訴苦。自作孽，不可活。 視覺表現方面，不是到那種非你出不可的情況下，產品還是沒有義務出視覺稿的，所以在視覺表現方面我們只需要區分好按鈕種類、、分類選項等，方便視覺設計師理解原型。
◇標註樣式需統一
標註的樣式需要統一，比如：
在一開始就標註好說明文字，後續的標註都根據此頁來進行編寫，也能有效減少開發對於產品理解的學習成本。
◇畫原型的時候注意**者的體驗【不是原創，已忘出處 侵改】
首先通過顏色來區分不同模組，別弄得整個螢幕都是白快快和白叉叉。
畫原型和文件一起標註的時候，別用太多線牽來牽去，也比較影響閱讀體驗。會讓人眼花繚亂。像蜘蛛網一樣的原型我覺得是誰看了都會頭大吧。 畢竟開發也是人，可憐可憐那些在我們成長道路中被坑的程式猿們吧qaq。
uibang 產品專欄作者
編撰：uibang小縫
封面圖：uibang秦鵬
UI設計在中國的現狀
ui設計在中國的現狀 目前在國內ui還是乙個相對陌生的詞，即便是一些設計人員也對這個詞不太了解。我們經常看到一些招聘廣告寫著 招聘介面美工 介面美術設計師等等。這表明在國內對ui的理解還停留在美術設計方面，認為ui的工作只是描邊畫線，缺乏對使用者互動的重要性的理解 另一方面在軟體開發過程中還存在重技...
中低端ERP產品的中國之路
中低端erp產品，這幾年在中國的折騰可真是讓人開眼，但是，似乎沒有看到真的得道者。筆者是非常關注著這個問題的，作為現實的參與者有些話想說 1 顧問取勝 無論什麼層面的產品，總是需要一些人去理解這個系統，並且將這個系統與實際的企業的應用結合起來。如果某種產品得到了盡可能多的人的使用和認可，大家在選擇產...
ui設計現狀與意義 淺述UI設計在中國的現狀
在國內ui還是乙個相對陌生的詞，即便是一些設計人員也對這個詞不太了解。我們經常看到一些招聘廣告寫著 招聘介面美工 介面美術設計師等等。這表明在國內對ui的理解還停留在美術設計方面，認為ui的工作只是描邊畫線，缺乏對使用者互動的重要性理解。另一方面在軟體開發過程中還存在重技術而不重應用的現象。許多商家...