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