我們在做產(chǎn)品經(jīng)理的工作，用原型來表達產(chǎn)品設(shè)計是一個繞不過去的g工作版塊，很多產(chǎn)品經(jīng)理的工作時間超過一半以上都在繪制原型。

1.原型規(guī)范為什么這么重要？

形成一個團隊或自己的原型規(guī)范，可以幫助減少自己原型工作時間，還能避免了需求不嚴謹、甚至是出錯的問題。

因為原型實際上等于我們上線產(chǎn)品的具體頁面，原型要做的產(chǎn)品設(shè)計也就是把App\網(wǎng)頁等系統(tǒng)功能所牽涉的頁面一個一個繪制出來。

隨著工作時間的經(jīng)驗積累，產(chǎn)品經(jīng)理接觸的業(yè)務(wù)案例越來越多，繪制的頁面越來越復(fù)雜，我們會找到滿足功能設(shè)計的核心節(jié)點，再進一步沉淀總結(jié)就可以擁有自己的一套原型設(shè)計規(guī)范了，形成規(guī)范后的原型設(shè)計與開發(fā)、設(shè)計、測試等溝通效率都逐步提高。

而多余的時間，產(chǎn)品經(jīng)理就可以聚焦在需求調(diào)研、業(yè)務(wù)拓展、甚至是市場和商務(wù)的板塊。

2.我個人喜歡的一份高效原型規(guī)范

有沒有一種原型規(guī)范，可以覆蓋產(chǎn)品經(jīng)理所涉及到的產(chǎn)品？包含C端產(chǎn)品、后臺產(chǎn)品經(jīng)理、以及數(shù)據(jù)產(chǎn)品經(jīng)理等工作呢？還能夠支持包括App、PC、小程序等市面上可以看到的軟件形態(tài)呢？

今天分享一份我在工作中總結(jié)出的一份原型規(guī)范，如果投入到團隊使用，用這個規(guī)范完成1個版本以上的開發(fā)后，團隊的效率就會越來越高。

這種原型規(guī)范方便開發(fā)閱讀，同樣也是設(shè)計師、測試等人員容易理解的形式。

原型設(shè)計的母板規(guī)范

母版在不同原型軟件工具下名字叫法不一樣，有的叫做模版，有的叫做母版。但顧名思義就是可以在本次原型文件里通用的原型組件。

▲  axure的母版

我建議原型母版應(yīng)該包含產(chǎn)品的頁面導(dǎo)航欄、頁面菜單、頁面通知、賬戶信息等全局的功能，這類功能組件有一個特點，即產(chǎn)品的每個頁面或者某一個功能下的每一個頁面都會有這樣的按鈕、文案甚至是交互，所以把這類功能合集變成母版將大大降低原型繪制的時間。

▲  功能菜單下的母版

原型的交互說明

交互設(shè)計師和產(chǎn)品經(jīng)理的區(qū)別是：

• 交互設(shè)計關(guān)注在人機交互過程的最好路徑，而不是在意是什么功能。

• 產(chǎn)品經(jīng)理關(guān)注的是為用戶提供的功能是什么，而不是操作路徑。

隨著科技進步，不同的終端設(shè)備配套的軟件不一樣、產(chǎn)品形態(tài)不一樣，其所需要的交互也是不同的，比如網(wǎng)站交互是依靠鼠標鍵盤，手機的交互依靠手指、VR設(shè)備則依靠眼睛。

大多數(shù)產(chǎn)品經(jīng)理的工作是負責(zé)某一個單一的產(chǎn)品形態(tài)產(chǎn)品設(shè)計。只有少部分高級產(chǎn)品經(jīng)理會負責(zé)業(yè)務(wù)線。一個業(yè)務(wù)線可能包含多個產(chǎn)品，比如曾經(jīng)我在喜馬拉雅負責(zé)線下業(yè)務(wù)，就負責(zé)門店的營收系統(tǒng)，其產(chǎn)品形態(tài)（PC端、和APP、小程序）都有。

但我們在做原型的時候，不管是負責(zé)業(yè)務(wù)線、還是產(chǎn)品線，往往一個原型文件會只針對一個產(chǎn)品形態(tài)，并且匹配一套交互說明。

下面介紹高效原型規(guī)范下的PC和移動端規(guī)范

PC的交互說明

1.輸入框的交互說明

包含輸入框的內(nèi)容校驗、操作提示、和文案提示

2.頁面按鈕或功能區(qū)的交互說明

使用者會點擊、懸浮、或雙擊等操作，能夠給出對應(yīng)的交互提示

3.操作彈窗交互

彈窗的文案說明、彈窗配對的功能選項（單選、多選、還是是否確認），并給出操作結(jié)果的提示

4.內(nèi)容上傳交說明

包括默認圖片、上傳圖片預(yù)覽、以及上傳失敗的提示，如果對封面有要求，還可以提供裁剪功能，方便信息流效果展示

5.按鈕操作交互說明

按鈕的選中、取消和默認選擇狀態(tài)的展示，往往會根據(jù)前置條件來做對應(yīng)的反饋。

6.選項框的交互說明

選項分為多選和單選，給出默認選項、選擇數(shù)量、和數(shù)量限制提示，對于選項可以進行編輯、添加的操作

7.賬戶密碼交互說明

因為賬戶密碼不限于PC網(wǎng)站，每個產(chǎn)品都有賬戶，所以其交互是通用的，包含密碼校驗錯誤的各個場景的梳理，給出默認提示、錯誤提示、和內(nèi)容為空的交互展示。

App的交互說明（小程序/H5通用）

1.頁面導(dǎo)航欄交互說明

App的功能每個頁面導(dǎo)航欄跳轉(zhuǎn)方式是固定的，甚至很多時候一個App就是一套一樣的。分清功能區(qū)、標簽導(dǎo)航、頁面標題之間的層級關(guān)系。

2.頁面內(nèi)彈窗交互說明

彈窗的選項和默認選擇，同時給出匹配的按鈕文案，方便用戶快速選擇和確認。

彈窗選擇出現(xiàn)的前置條件說明，以及異常情況下的彈窗內(nèi)容提示。

2.toast提示交互說明

提示包含了用戶操作反饋和系統(tǒng)狀態(tài)反饋，比如正在和服務(wù)端數(shù)據(jù)交互、用戶前端操作觸發(fā)某些條件等，需要用toast的交互來表達，并且匹配文字。

3.操作區(qū)域交互說明

App的操作是隨著手機面積有變化的，需要說明那些區(qū)域可以點擊、那些不可以，往往這個是和前端開發(fā)息息相關(guān)，我們只需要關(guān)注UI圖按照原型設(shè)計表達即可。

4.輸入框交互說明

和PC網(wǎng)站交互說明一樣，輸入框包含了默認文字、輸入提示、和輸異常提示。

原型的邏輯說明

原型不僅是一個頁面，我們在做產(chǎn)品設(shè)計的時候，往往會換位思考為用戶角度，模擬同樣場景下用戶在原型里的操作，實際是存在頁面順序的，功能與功能之間也有前后條件的，所以就構(gòu)成了原型的邏輯。

僅僅是靠一個原型設(shè)計的頁面是沒辦法搞清楚需求的全貌，讓參與的開發(fā)、設(shè)計師知道整個需求的來龍去脈。

我接觸許多產(chǎn)品新人在做原型的時候最容易欠缺的就是原型背后的功能邏輯，比如你看到的原型工具實際上都可以完成腦圖、流程圖等功能模塊的撰寫，原型工具不只是用來畫產(chǎn)品頁面的，在某些角度來說它就是一個畫圖軟件。

▲  原型的邏輯圖

換句話說：原型工具在產(chǎn)品經(jīng)理的手里其實是一個萬能的工具。

實際上產(chǎn)品經(jīng)理在講解需求的時候，每次需求評審會一開始，就會開始講解原型的某個頁面，也是壞習(xí)慣。讓團隊知道本次的工作達到的目的，以及要解決的問題，實際上原型的邏輯說明是非常重要的。

原型的文檔說明

高效的原型規(guī)范一定是要配備文字說明，否則就難以增加原型的理解度。有了文字說明，對復(fù)雜的原型效果我們可以省略設(shè)計時間，直接用一句文字來代替。

比如如果按照不同賬戶去繪制下面的權(quán)限操作，需要重復(fù)繪制下面報表，有多少個角色就要繪制多少個報表。

但我們可以用一句話來替代：“根據(jù)用戶賬戶權(quán)限，不同權(quán)限可以看到的自段內(nèi)容為XX....“就可以快速完成。

還有原型需要的動畫加載效果、原型權(quán)限說明、功能的交互動效，都可以用文字來說明。

原型的功能架構(gòu)

在高效的原型規(guī)范里，我們不只是聚焦在一個頁面的設(shè)計，還要關(guān)注在原型背后的產(chǎn)品框架、功能架構(gòu)，所以我們利用原型提前布置好原型的架構(gòu)圖，可以幫我們?nèi)植榭葱枨蟮膹?fù)雜性。

比如上圖，給出了內(nèi)容管理后臺下的框架結(jié)構(gòu)，給出了新建素材所涉及到的功能模塊必選操作，同時給出了功能模塊的邏輯順序。通過這個結(jié)構(gòu)圖可以發(fā)現(xiàn)這需求設(shè)計冗余復(fù)雜，應(yīng)該可以再進行優(yōu)先級劃分，變?yōu)楦〉男枨蟆?/p>

以上就是今天的分享。