產(chǎn)品原型設(shè)計(jì)規(guī)范“三步走”戰(zhàn)略

產(chǎn)品原型設(shè)計(jì)規(guī)范“三步走”戰(zhàn)略最近在帶產(chǎn)品新人的時(shí)候，發(fā)現(xiàn)產(chǎn)品新人在繪制原型的時(shí)候，往往隨性發(fā)揮、自由涂畫(huà)，最后畫(huà)出的原型千人千面，UI設(shè)計(jì)看了想打人，前端開(kāi)發(fā)看了想罵人，后端開(kāi)發(fā)看了……我的刀呢？所以在今天，我想談?wù)劗a(chǎn)品原型設(shè)計(jì)的規(guī)范問(wèn)題，綜述為“三步走戰(zhàn)略”。一、第一步：讓UI設(shè)計(jì)平靜下來(lái)——頁(yè)面尺寸規(guī)范UI設(shè)計(jì)師在看到一份產(chǎn)品原型設(shè)計(jì)的時(shí)候，首先關(guān)注的就是整體頁(yè)面的尺寸該做多大和頁(yè)面內(nèi)容能否完全的展示。此處為了讓UI設(shè)計(jì)快速切入設(shè)計(jì)工作，而非糾結(jié)于尺寸的等比例縮放，降低原型理解難度，我們很有必要對(duì)頁(yè)面的整體尺寸激進(jìn)行規(guī)范化設(shè)計(jì)。（PS：假設(shè)你的原型頁(yè)面布局無(wú)限趨近于頁(yè)面的真實(shí)比例，那么也是一種對(duì)UI的鞭策：哥已經(jīng)把尺寸布局定好了，你不會(huì)只是想配個(gè)色就交稿把？?。┡e例說(shuō)明：如常見(jiàn)的WEB端軟件頁(yè)面，此處建議以1920*1080的尺寸進(jìn)行規(guī)范設(shè)計(jì)。效果做好后，大家可以F5預(yù)覽一下，正常的顯示器，在隱藏左側(cè)頁(yè)面目錄后，都可以滿屏鋪開(kāi)，視覺(jué)效果瞬間拉滿！上圖是隨手畫(huà)的頁(yè)面效果（鋪滿全屏需手動(dòng)且未必可以）：上圖是頁(yè)面規(guī)范過(guò)的效果（自動(dòng)鋪滿全屏）：經(jīng)過(guò)上面兩張圖的對(duì)比，結(jié)論顯而易見(jiàn)。另外，請(qǐng)各位產(chǎn)品同學(xué)在同一個(gè)頁(yè)面中，盡量將輸入框、按鈕、列表的長(zhǎng)寬都統(tǒng)一設(shè)定，這樣顯示效果更佳！二、第二步：讓前端開(kāi)發(fā)冷靜下來(lái)——原型文件中需增加的字段說(shuō)明原型設(shè)計(jì)不是讓產(chǎn)品經(jīng)理自嗨的，而是有效幫助開(kāi)發(fā)人員理解軟件功能意圖的說(shuō)明材料。認(rèn)可此觀點(diǎn)的同學(xué)請(qǐng)往下看，不認(rèn)可的請(qǐng)ALT+F4。一份好的原型設(shè)計(jì)，應(yīng)該列舉出有關(guān)產(chǎn)品的說(shuō)明材料，比如一個(gè)讓賬戶輸入密碼的文本框，你應(yīng)該準(zhǔn)確注明相關(guān)的輸入限制，如下圖：上圖為預(yù)覽效果1：上圖為點(diǎn)擊黃色數(shù)字后的彈出內(nèi)容：上圖為RP文件中添加說(shuō)明的地方：結(jié)合以上三張圖，告訴大家如何添加元件說(shuō)明以及對(duì)應(yīng)的展示效果；這樣做可以讓前端開(kāi)發(fā)人員準(zhǔn)確理解各個(gè)字段或組件的準(zhǔn)確含義，保證開(kāi)發(fā)的準(zhǔn)確性，也避免前端開(kāi)發(fā)因?yàn)橐恍┳侄魏x而每天找產(chǎn)品問(wèn)東問(wèn)西，能寫(xiě)清楚就別BB太多。三、第三步：讓后端大哥放下刀——原型中添加功能結(jié)構(gòu)圖與業(yè)務(wù)流程圖做好以上兩步的前提下，緊接著就是面對(duì)后端開(kāi)發(fā)人員，這時(shí)他們最需要的不是產(chǎn)品經(jīng)理滔滔不絕的解釋陳述，而是實(shí)實(shí)在在能幫助他們理清開(kāi)發(fā)邏輯的說(shuō)明資料，比如功能結(jié)構(gòu)圖與業(yè)務(wù)流程圖。上圖為舉例說(shuō)明的功能結(jié)構(gòu)圖，解釋頁(yè)面結(jié)構(gòu)與內(nèi)容：上圖為用戶新建司機(jī)信息的流程圖：通過(guò)以上功能結(jié)構(gòu)圖與業(yè)務(wù)流程圖的梳理，后端開(kāi)發(fā)可以迅速明白設(shè)計(jì)思路，從而快速理解功能邏輯機(jī)構(gòu)，自然就放下了手里的“刀”。綜上所述：產(chǎn)品原型的設(shè)計(jì)規(guī)范三步走已經(jīng)