我們在做產品經理的工作，用原型來表達產品設計是一個繞不過去的g工作版塊，很多產品經理的工作時間超過一半以上都在繪製原型。
1.原型規範爲什麼這麼重要？
形成一個團隊或自己的原型規範，可以幫助減少自己原型工作時間，還能避免了需求不嚴謹、甚至是出錯的問題。
因爲原型實際上等於我們上線產品的具體頁面，原型要做的產品設計也就是把App\網頁等系統功能所牽涉的頁面一個一個繪製出來。
隨着工作時間的經驗積累，產品經理接觸的業務案例越來越多，繪製的頁面越來越複雜，我們會找到滿足功能設計的核心節點，再進一步沉澱總結就可以擁有自己的一套原型設計規範了，形成規範後的原型設計與開發、設計、測試等溝通效率都逐步提高。
而多餘的時間，產品經理就可以聚焦在需求調研、業務拓展、甚至是市場和商務的板塊。
2.我個人喜歡的一份高效原型規範
有沒有一種原型規範，可以覆蓋產品經理所涉及到的產品？包含C端產品、後臺產品經理、以及數據產品經理等工作呢？還能夠支持包括App、PC、小程序等市面上可以看到的軟件形態呢？
今天分享一份我在工作中總結出的一份原型規範，如果投入到團隊使用，用這個規範完成1個版本以上的開發後，團隊的效率就會越來越高。
這種原型規範方便開發閱讀，同樣也是設計師、測試等人員容易理解的形式。
原型設計的母板規範
母版在不同原型軟件工具下名字叫法不一樣，有的叫做模版，有的叫做母版。但顧名思義就是可以在本次原型文件裏通用的原型組件。
▲ axure的母版
我建議原型母版應該包含產品的頁面導航欄、頁面菜單、頁面通知、賬戶信息等全局的功能，這類功能組件有一個特點，即產品的每個頁面或者某一個功能下的每一個頁面都會有這樣的按鈕、文案甚至是交互，所以把這類功能合集變成母版將大大降低原型繪製的時間。
▲ 功能菜單下的母版
原型的交互說明
交互設計師和產品經理的區別是：
交互設計關注在人機交互過程的最好路徑，而不是在意是什麼功能。
產品經理關注的是爲用戶提供的功能是什麼，而不是操作路徑。
隨着科技進步，不同的終端設備配套的軟件不一樣、產品形態不一樣，其所需要的交互也是不同的，比如網站交互是依靠鼠標鍵盤，手機的交互依靠手指、VR設備則依靠眼睛。
大多數產品經理的工作是負責某一個單一的產品形態產品設計。只有少部分高級產品經理會負責業務線。一個業務線可能包含多個產品，比如曾經我在喜馬拉雅負責線下業務，就負責門店的營收系統，其產品形態（PC端、和APP、小程序）都有。
但我們在做原型的時候，不管是負責業務線、還是產品線，往往一個原型文件會只針對一個產品形態，並且匹配一套交互說明。
下面介紹高效原型規範下的PC和移動端規範
PC的交互說明
1.輸入框的交互說明
包含輸入框的內容校驗、操作提示、和文案提示
2.頁面按鈕或功能區的交互說明
使用者會點擊、懸浮、或雙擊等操作，能夠給出對應的交互提示
3.操作彈窗交互
彈窗的文案說明、彈窗配對的功能選項（單選、多選、還是是否確認），並給出操作結果的提示
4.內容上傳交說明
包括默認圖片、上傳圖片預覽、以及上傳失敗的提示，如果對封面有要求，還可以提供裁剪功能，方便信息流效果展示
5.按鈕操作交互說明
按鈕的選中、取消和默認選擇狀態的展示，往往會根據前置條件來做對應的反饋。
6.選項框的交互說明
選項分爲多選和單選，給出默認選項、選擇數量、和數量限制提示，對於選項可以進行編輯、添加的操作
7.賬戶密碼交互說明
因爲賬戶密碼不限於PC網站，每個產品都有賬戶，所以其交互是通用的，包含密碼校驗錯誤的各個場景的梳理，給出默認提示、錯誤提示、和內容爲空的交互展示。
App的交互說明（小程序/H5通用）
1.頁面導航欄交互說明
App的功能每個頁面導航欄跳轉方式是固定的，甚至很多時候一個App就是一套一樣的。分清功能區、標籤導航、頁面標題之間的層級關係。
2.頁面內彈窗交互說明
彈窗的選項和默認選擇，同時給出匹配的按鈕文案，方便用戶快速選擇和確認。
彈窗選擇出現的前置條件說明，以及異常情況下的彈窗內容提示。
2.toast提示交互說明
提示包含了用戶操作反饋和系統狀態反饋，比如正在和服務端數據交互、用戶前端操作觸發某些條件等，需要用toast的交互來表達，並且匹配文字。
3.操作區域交互說明
App的操作是隨着手機面積有變化的，需要說明那些區域可以點擊、那些不可以，往往這個是和前端開發息息相關，我們只需要關注UI圖按照原型設計表達即可。
4.輸入框交互說明
和PC網站交互說明一樣，輸入框包含了默認文字、輸入提示、和輸異常提示。
原型的邏輯說明
原型不僅是一個頁面，我們在做產品設計的時候，往往會換位思考爲用戶角度，模擬同樣場景下用戶在原型裏的操作，實際是存在頁面順序的，功能與功能之間也有前後條件的，所以就構成了原型的邏輯。
僅僅是靠一個原型設計的頁面是沒辦法搞清楚需求的全貌，讓參與的開發、設計師知道整個需求的來龍去脈。
我接觸許多產品新人在做原型的時候最容易欠缺的就是原型背後的功能邏輯，比如你看到的原型工具實際上都可以完成腦圖、流程圖等功能模塊的撰寫，原型工具不只是用來畫產品頁面的，在某些角度來說它就是一個畫圖軟件。
▲ 原型的邏輯圖
換句話說：原型工具在產品經理的手裏其實是一個萬能的工具。
實際上產品經理在講解需求的時候，每次需求評審會一開始，就會開始講解原型的某個頁面，也是壞習慣。讓團隊知道本次的工作達到的目的，以及要解決的問題，實際上原型的邏輯說明是非常重要的。
原型的文檔說明
高效的原型規範一定是要配備文字說明，否則就難以增加原型的理解度。有了文字說明，對複雜的原型效果我們可以省略設計時間，直接用一句文字來代替。
比如如果按照不同賬戶去繪製下面的權限操作，需要重複繪製下面報表，有多少個角色就要繪製多少個報表。
但我們可以用一句話來替代：“根據用戶賬戶權限，不同權限可以看到的自段內容爲XX....“就可以快速完成。
還有原型需要的動畫加載效果、原型權限說明、功能的交互動效，都可以用文字來說明。
原型的功能架構
在高效的原型規範裏，我們不只是聚焦在一個頁面的設計，還要關注在原型背後的產品框架、功能架構，所以我們利用原型提前佈置好原型的架構圖，可以幫我們全局查看需求的複雜性。
比如上圖，給出了內容管理後臺下的框架結構，給出了新建素材所涉及到的功能模塊必選操作，同時給出了功能模塊的邏輯順序。通過這個結構圖可以發現這需求設計冗餘複雜，應該可以再進行優先級劃分，變爲更小的需求。
以上就是今天的分享。
如果需要這一份原型規範，可以在本公衆號回覆：“原型規範“，24小時內回覆給你。
我的公衆號：Kevin改變世界的點滴
03
推薦閱讀
我是Kevin，一個喜歡產品、又在創業路上的斜槓青年
關注我，一起用產品經理職業技能塑造生活的產品。