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

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