關注Kevin和互聯網產品經理們，一起成長
作者 l Kevin
來源 l Kevin改變世界的點滴
分享 l Kevin
很多人做產品經理原型工作時候，其實並沒有定什麼原型規範，就跟着需求和老闆要求，他們想要什麼，就畫什麼功能出來給他們。
如果你去問一個做PC端產品的產品經理，產品設計過程中有沒有什麼規範和注意事項，他可能半天答不上來。他會想着，“我好想是在認真畫的，但好像也確實沒有什麼規範;但要說我是隨便畫的，那我肯定不服氣”!
但實際上在做原型的時候，希望我們的原型可以減少其他人對需求理解難度，增加原型的瀏覽效率。同時原型的時間佔據了產品經理工作時間一半以上，所以我們希望把原型的時間縮小，可以花更多時間做原型之外的事。
所以遵循一套原型規範，我們可以去解決上面的訴求。下面我分享4點原型規範
1.不要給原型設計尺寸
很多人以爲在電腦屏幕上的原型就需要注意尺寸，比如多少長度後屏幕需要分頁、多少距離到達邊界等，可是PC端的原型是沒有尺寸規範的，每個產品經理可以根據自己的習慣去繪製原型的按鈕、導航欄等各種寬度、高度，比如下面是兩個PC端原型的截圖，沒有區別
▲ 原型規範
▲原型規範
2.原型的組件風格統一
在原型工作中，我們要注意這兩個原型中其實所使用的原型組件都是相似的，產品經理對於原型的細節處理方式有所不同(比如矩形的圓角、字體顏色，按鈕選擇等)，但整體的觀感都是挺不錯的。這是因爲使用的原型組件都是相同風格的，同時顏色色彩也不要過於鮮豔，我建議在PC原型裏原型色彩最好不超過3個顏色。
▲統一風格的原型設計
對於原型裏，形成統一的使用規範，比如封面圖、標題、按鈕、篩選等，這類組件固定使用後，就會讓團隊熟悉這類組件是幹什麼的，減少了需求溝通。
比如下面這張原型圖，裏面用logo圖標識圖片，可是查找、導出、和新增品牌按鈕不統一，很難理解到被突出的“查找”按鈕的意思。
▲原型的各種組件不統一
對於輸入框組件，需要在原型裏給默認文案，方便知曉數據類型。有摺疊的狀態也要在原型裏儘快的給出全量狀態，而不是把狀態都摺疊在篩選框裏。
上面的輸入框有爲空的情況，就是不對的，應該在裏面填充樣例數據，就是文案。這類文案、數值都是在開發裏是樣例數據
3.用頁面路徑代替交互
在PC端裏，因爲頁面大，但很多功能的操作涉及到多個步驟跳轉，所以我們需要用動態效果來表達，但在PC原型裏我建議大家儘可能用頁面路徑來代替複雜的原型動畫效果。
比如下面的就是首頁到各個功能模塊的頁面路徑，不過下面因爲做了數據統計，可以明確知道頁面的訪問人數佔比。
4.多用組件庫
在PC端裏，因爲可以帶來各種豐富的交互操作，所以自然原型中有非常多的組件元素需要在頁面裏呈現，如果我們用原型工具自帶的，很難滿足我們的要求，但是自己做又太費時間，所以我建議大家用組件庫來進行提升這類原型繪製速度。
PC端因爲在大屏幕上，所以會有一些特點的組件庫，如圖是常用的按鈕和文本、常用表格、各種條框
▲ PC端的各種組件
5.全局功能入口不能缺失
比如輸入框的提示文字、頁碼、彈窗製作、頁面標題、麪包屑導航等，該設置的，都不能缺失。我們在做PC端原型設計很多時候導航欄、搜索、賬戶信息、消息通知等，都不能缺失。
以上就是今天的分享。
如果要下載PC原型組件，我收集了一個PC組件，可以在Kevin改變世界的點滴公衆號回覆：“PC原型”進行下載。
END