一份高效的產(chǎn)品原型設(shè)計(jì)“規(guī)范”

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

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

形成一個(gè)團(tuán)隊(duì)或自己的原型規(guī)范，可以幫助減少自己原型工作時(shí)間，還能避免了需求不嚴(yán)謹(jǐn)、甚至是出錯(cuò)的問題。

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

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

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

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

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

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

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

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

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

▲  axure的母版

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

▲  功能菜單下的母版

原型的交互說明

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

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

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

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

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

但我們?cè)谧鲈偷臅r(shí)候，不管是負(fù)責(zé)業(yè)務(wù)線、還是產(chǎn)品線，往往一個(gè)原型文件會(huì)只針對(duì)一個(gè)產(chǎn)品形態(tài)，并且匹配一套交互說明。

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

PC的交互說明

1.輸入框的交互說明

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

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

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

3.操作彈窗交互

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

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

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

5.按鈕操作交互說明

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

6.選項(xiàng)框的交互說明

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

7.賬戶密碼交互說明

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

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

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

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

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

彈窗的選項(xiàng)和默認(rèn)選擇，同時(shí)給出匹配的按鈕文案，方便用戶快速選擇和確認(rèn)。

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

2.toast提示交互說明

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

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

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

4.輸入框交互說明

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

原型的邏輯說明

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

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

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

▲  原型的邏輯圖

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

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

原型的文檔說明

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

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

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

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

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

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

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

以上就是今天的分享。

如果需要這一份原型規(guī)范，可以在本公眾號(hào)回復(fù)：“原型規(guī)范“，24小時(shí)內(nèi)回復(fù)給你。

01

每天體驗(yàn)1款A(yù)PP社群

加入后365天，每天體驗(yàn)一款A(yù)PP。提升產(chǎn)品設(shè)計(jì)能力，同時(shí)有1500份體驗(yàn)報(bào)告幫助你找到競(jìng)品。

平均1天1塊錢，掃碼購買即可加入

連續(xù)體驗(yàn)90款應(yīng)用，通過后原路退回

報(bào)名后添加微信（pmkevin001)領(lǐng)取任務(wù)手冊(cè)

02

今日視頻號(hào)分享

產(chǎn)品經(jīng)理應(yīng)該了解的基本功

03

推薦閱讀

三種必學(xué)的數(shù)據(jù)分析模型方法

產(chǎn)品經(jīng)理一定要掌握的數(shù)據(jù)知識(shí)

我是Kevin，一個(gè)喜歡產(chǎn)品、又在創(chuàng)業(yè)路上的斜杠青年

關(guān)注我，一起用產(chǎn)品經(jīng)理職業(yè)技能塑造生活的產(chǎn)品。