作為一名合格的UI刽辙，如果還不會寫UI規(guī)范文檔，只是停留在做圖標(biāo)的階段甲献，那么宰缤，要小心了。
我也是這半年來開始習(xí)慣了寫規(guī)范文檔，并且越來越喜歡這種對各個元素有約束的定義方式撵溃。
UI規(guī)范文檔移動端開發(fā)的相對好寫一些疚鲤，網(wǎng)上也有很多范本，其實對UI來說缘挑，看著范本來寫集歇，并沒有什么難度，無非就是定義一些觸發(fā)區(qū)域和樣式之類语淘。我自己看過當(dāng)當(dāng)?shù)腍5規(guī)范诲宇，微信UI規(guī)范，大概了解了風(fēng)格惶翻，后來再寫的時候姑蓝，就會慢慢形成自己的書寫習(xí)慣。
今天就個人經(jīng)驗談一談UI規(guī)范怎么寫更合適吕粗。
首先纺荧，要明確的是，規(guī)范文檔是給誰看的颅筋。我們寫UI規(guī)范的時候宙暇，絕對不是為了讓自己逼格看起來更高，而是為了溝通更高效议泵，以及界面做更少的標(biāo)注（我自己用的是markman）占贫，有些重復(fù)性的樣式，反復(fù)在界面標(biāo)注先口，會導(dǎo)致最后的標(biāo)注圖密密麻麻型奥，前端攻城獅拿到后也要鼓起勇氣才能看下去，甚至標(biāo)的太多碉京，攻城獅們就難免有疏忽厢汹。一方面，規(guī)范文檔交給前端開發(fā)谐宙，一些通用控件在規(guī)范文檔中清清楚楚烫葬，看上去也會神清氣爽。另一方面卧惜，自己在后續(xù)的界面設(shè)計過程中厘灼，也要參考規(guī)范文檔，保證自己設(shè)計的界面的前后一致性咽瓷。
所以设凹，規(guī)范文檔兩個受眾，自己以及前端茅姜。
其次闪朱，規(guī)范文檔什么時候開始寫月匣。我的經(jīng)驗是從界面設(shè)計開始的那一刻，就要建立規(guī)范文檔了奋姿，書寫時锄开，可以按照自己的設(shè)計順序，確定好的設(shè)計元素都可以陸續(xù)加到文檔里称诗，一直到交付設(shè)計稿萍悴，文檔有可能都是未完成狀態(tài)，這里說未完成寓免，是因為交到前端那里癣诱，真正開發(fā)時，可能會有一些不合理的地方袜香，比如字號撕予、顏色是不是協(xié)調(diào)、甚至突兀蜈首，包括一些CSS樣式是不是不同瀏覽器表現(xiàn)不同等等实抡，根據(jù)反饋意見，后期在界面調(diào)整的過程中欢策，規(guī)范文檔也要一并更新吆寨，是以我的規(guī)范文檔向來命名 XXX（更新中）。（這么說起來猬腰，似乎還沒有最終版呢~）
規(guī)范文檔需要貫穿整個界面設(shè)計以及產(chǎn)品開發(fā)的過程鸟废。
規(guī)范文檔需要寫什么猜敢。這是重中之重姑荷，因為產(chǎn)品不同，所以差別也很大缩擂，但非常重要的一點是考慮到各種不同的狀態(tài)下界面元素的樣式鼠冕。因為最近的工作都是B/S結(jié)構(gòu)產(chǎn)品的開發(fā)，所以就會考慮一些鼠標(biāo)經(jīng)過之類的狀態(tài)胯盯。移動端的規(guī)范懈费，個人建議是先參考ios的HIG和google 的material design，尤其是2016年的MD博脑，對各個元素定義的極其詳細(xì)憎乙，所以省時省力，只需要在此基礎(chǔ)上發(fā)揮自己的創(chuàng)意就好叉趣。web端不同分辨率下的樣式要考慮到泞边，哪些元素左對齊，哪些右對齊疗杉，哪些尺寸限定阵谚，哪些可以根據(jù)分辨率伸縮，當(dāng)然了，如果你的團(tuán)隊采用響應(yīng)式的布局梢什，這些就不用考慮了奠蹬。書寫方式的話，因為自己之前有過一些CSS基礎(chǔ)嗡午，所以可能會直接把一些CSS樣式寫到文檔中囤躁。但畢竟很多UI是平面設(shè)計或者其他行業(yè)轉(zhuǎn)過來的，沒有任何代碼基礎(chǔ)荔睹，這也絲毫無影響我們的工作結(jié)果割以，只要把樣式表現(xiàn)清楚就可以了，比如加深应媚，變換顏色等等严沥，當(dāng)然，我個人建議是在PS里實現(xiàn)的效果盡量轉(zhuǎn)成CSS樣式中姜，這個可以使用一些在線的工具消玄，代碼可以拷貝，非常方便丢胚。另外翩瓜，現(xiàn)在強(qiáng)大的css3真的可以實現(xiàn)各種樣式，所以小伙伴們按鈕之類的就盡量不要再切圖了携龟。
移動端：以平臺規(guī)范為基礎(chǔ)兔跌。
web端：考慮到多種狀態(tài)及定義不同屏幕分辨率的表現(xiàn)。
還有一個問題峡蟋，就是規(guī)范文檔里已經(jīng)定義好樣式的坟桅，界面圖中要不要做標(biāo)注，我的建議是可以備注上（見規(guī)范文檔）蕊蝗，不要因為文檔里定義了仅乓，就理所當(dāng)然的認(rèn)為開發(fā)人員一定會理解哪些可以在規(guī)范文檔中查找。很多前端沉浸在js的世界中哦蓬戚。對他們來說夸楣，更有成就感的事情或許是寫一堆判斷，而不是100%的復(fù)現(xiàn)你的設(shè)計文稿子漩。
如果想得到和界面設(shè)計效果圖最接近的開發(fā)后的樣式豫喧，就不要怕麻煩，界面標(biāo)注中也可以有規(guī)范文檔里的內(nèi)容幢泼。
一份好的規(guī)范文檔的定義非常簡單紧显，就是當(dāng)你交付給前端的時候，他在開發(fā)過程中不會問你任何問題旭绒，當(dāng)然啦鸟妙，需要和界面標(biāo)注配合焦人。但實際工作過程中，這是不可能的重父，所以多和前端溝通花椭，畢竟實現(xiàn)樣式只是他們工作的一部分而卻是UI工作的全部體現(xiàn)呢。
規(guī)范文檔可大可小房午，附上一份今天完成的一個通用組件的規(guī)范矿辽。這是我寫過最精簡的了~
