關(guān)注Kevin和互聯(lián)網(wǎng)產(chǎn)品經(jīng)理們，一起成長

作者?l Kevin

來源?l Kevin改變世界的點(diǎn)滴

分享 l Kevin

很多人做產(chǎn)品經(jīng)理原型工作時候荧呐，其實并沒有定什么原型規(guī)范读拆，就跟著需求和老板要求擅憔，他們想要什么，就畫什么功能出來給他們檐晕。

如果你去問一個做PC端產(chǎn)品的產(chǎn)品經(jīng)理暑诸，產(chǎn)品設(shè)計過程中有沒有什么規(guī)范和注意事項，他可能半天答不上來辟灰。他會想著个榕，“我好想是在認(rèn)真畫的，但好像也確實沒有什么規(guī)范;但要說我是隨便畫的芥喇，那我肯定不服氣”!

但實際上在做原型的時候西采，希望我們的原型可以減少其他人對需求理解難度，增加原型的瀏覽效率继控。同時原型的時間占據(jù)了產(chǎn)品經(jīng)理工作時間一半以上械馆，所以我們希望把原型的時間縮小，可以花更多時間做原型之外的事武通。

所以遵循一套原型規(guī)范霹崎，我們可以去解決上面的訴求。下面我分享4點(diǎn)原型規(guī)范

1.不要給原型設(shè)計尺寸

很多人以為在電腦屏幕上的原型就需要注意尺寸冶忱，比如多少長度后屏幕需要分頁尾菇、多少距離到達(dá)邊界等，可是PC端的原型是沒有尺寸規(guī)范的，每個產(chǎn)品經(jīng)理可以根據(jù)自己的習(xí)慣去繪制原型的按鈕错沽、導(dǎo)航欄等各種寬度簿晓、高度，比如下面是兩個PC端原型的截圖千埃，沒有區(qū)別

▲　原型規(guī)范

▲原型規(guī)范

2.原型的組件風(fēng)格統(tǒng)一

在原型工作中憔儿，我們要注意這兩個原型中其實所使用的原型組件都是相似的，產(chǎn)品經(jīng)理對于原型的細(xì)節(jié)處理方式有所不同(比如矩形的圓角放可、字體顏色谒臼，按鈕選擇等)，但整體的觀感都是挺不錯的耀里。這是因為使用的原型組件都是相同風(fēng)格的蜈缤，同時顏色色彩也不要過于鮮艷，我建議在PC原型里原型色彩最好不超過3個顏色冯挎。

▲統(tǒng)一風(fēng)格的原型設(shè)計

對于原型里底哥，形成統(tǒng)一的使用規(guī)范，比如封面圖房官、標(biāo)題趾徽、按鈕、篩選等翰守，這類組件固定使用后孵奶，就會讓團(tuán)隊熟悉這類組件是干什么的，減少了需求溝通蜡峰。

比如下面這張原型圖了袁，里面用logo圖標(biāo)識圖片，可是查找湿颅、導(dǎo)出载绿、和新增品牌按鈕不統(tǒng)一，很難理解到被突出的“查找”按鈕的意思肖爵。

▲原型的各種組件不統(tǒng)一

對于輸入框組件卢鹦，需要在原型里給默認(rèn)文案，方便知曉數(shù)據(jù)類型劝堪。有折疊的狀態(tài)也要在原型里盡快的給出全量狀態(tài)冀自，而不是把狀態(tài)都折疊在篩選框里。

上面的輸入框有為空的情況秒啦，就是不對的熬粗，應(yīng)該在里面填充樣例數(shù)據(jù)，就是文案余境。這類文案驻呐、數(shù)值都是在開發(fā)里是樣例數(shù)據(jù)

3.用頁面路徑代替交互

在PC端里灌诅，因為頁面大，但很多功能的操作涉及到多個步驟跳轉(zhuǎn)含末，所以我們需要用動態(tài)效果來表達(dá)猜拾，但在PC原型里我建議大家盡可能用頁面路徑來代替復(fù)雜的原型動畫效果。

比如下面的就是首頁到各個功能模塊的頁面路徑佣盒，不過下面因為做了數(shù)據(jù)統(tǒng)計挎袜，可以明確知道頁面的訪問人數(shù)占比。

4.多用組件庫

在PC端里肥惭，因為可以帶來各種豐富的交互操作盯仪，所以自然原型中有非常多的組件元素需要在頁面里呈現(xiàn)，如果我們用原型工具自帶的蜜葱，很難滿足我們的要求全景，但是自己做又太費(fèi)時間，所以我建議大家用組件庫來進(jìn)行提升這類原型繪制速度牵囤。

PC端因為在大屏幕上爸黄，所以會有一些特點(diǎn)的組件庫，如圖是常用的按鈕和文本揭鳞、常用表格馆纳、各種條框

▲　　PC端的各種組件

5.全局功能入口不能缺失

比如輸入框的提示文字、頁碼汹桦、彈窗制作、頁面標(biāo)題鉴裹、面包屑導(dǎo)航等舞骆，該設(shè)置的，都不能缺失径荔。我們在做PC端原型設(shè)計很多時候?qū)Ш綑诙角荨⑺阉鳌①~戶信息总处、消息通知等狈惫，都不能缺失。

以上就是今天的分享鹦马。

如果要下載PC原型組件胧谈，我收集了一個PC組件，可以在Kevin改變世界的點(diǎn)滴公眾號回復(fù)：“PC原型”進(jìn)行下載荸频。

END