這是關于原型設計規范的第二篇文章。
最早聽說原型設計規范這個詞，還是剛入行沒多久，處于自我感覺超級好的打雞血階段，有時候接到新的項目或產品需求，一天可以畫幾十張原型圖，反正就是各種堆砌圖標、組件和文字，加鏈接跳轉，最后簡單的左右居中對齊，這樣的狀態持續了小半年之久，一句話總結是：熟練無比，樂此不疲！
直到有一天，公司組織開了個內部產品分享會，主題是什么樣的原型最適合開發（設計）？
其中有個環節是讓每個產品經理當場演示自己的原型HTML ，其他產品和各項目組主設、主程評價打分。已經不記得當時我得了多少分，反正輪到我講的時候全程面紅耳赤，感覺分分鐘要被開除的節奏。在總結的階段，有個UI轉崗的資深女產品重點提了原型設計規范，概括性的講了幾分鐘。此后，我就有意識的開始查閱搜集產品原型設計規范的相關文章和資料。
一、產品原型圖有哪幾種？（多圖預警）
歸納可分為三種：分別為原型草圖（需求版）、低保真原型（標注版）、高保真原型（交互版）。
以上三種原型圖，最常見的是低保真原型，需求評審或開發時經常使用。高保真原型一般只有公司層面的匯報或者產品商務演示才需要用到。而在溝通需求的時候，會使用手繪版的原型草圖來輔助理解。
但是，真正適合UI設計和程序開發的原型圖，其實是灰模原型。
二、什么是灰模原型？
>>灰模原型是基于信息架構和功能列表的
>>灰模原型一般使用尺寸：375*667 或 320*480（App）
>>制作灰模原型時，一定要所有組件之間的對齊，需對齊到像素級
>>所有的元素，除了組件自帶的顏色，只用黑白灰三色
>>只用最基本的矩形、直線表現整個原型，矩形可變換成圓形、三角形等，現在我會增加灰度的ICON
>>不用設計交互，所有頁面分開展示，每個功能的狀態都需要表明
關于灰模原型，我會在原型說明的文章中詳細闡述，這里僅將這個原型的要素先列出來。
三、常用元素大小尺寸說明
PS:若尺寸記憶繁瑣，亦可參考將iPhone 6的尺寸縮小1倍作為原型尺寸。
四、頁面編號規則說明
關于頁面編號我使用的是文檔的編號規則，a.b.c.d ,最多到4級，使用頁面標題名稱作為頁面名。
這樣編號的好處有兩點：
>>可以很清楚的看出來每個頁面父子層級關系，便于快速理解功能信息結構。
>>可以很清楚的看到頁面層級數量，若出現4級或以上頁面，就需要重新思考產品頁面層級是否合理（層級越多，產品易用性越差）。
關于原型的元素組件命名，我一般都默認不命名，只在做動態交互的時候，針對可觸發的元素進行統一命名。如果想要全面了解命名規則，可以搜索UI切圖命名規范。
