作為一名合格的UI，如果還不會(huì)寫(xiě)UI規(guī)范文檔，只是停留在做圖標(biāo)的階段，那么，要小心了。

我也是這半年來(lái)開(kāi)始習(xí)慣了寫(xiě)規(guī)范文檔，并且越來(lái)越喜歡這種對(duì)各個(gè)元素有約束的定義方式。

UI規(guī)范文檔移動(dòng)端開(kāi)發(fā)的相對(duì)好寫(xiě)一些，網(wǎng)上也有很多范本，其實(shí)對(duì)UI來(lái)說(shuō)，看著范本來(lái)寫(xiě)，并沒(méi)有什么難度，無(wú)非就是定義一些觸發(fā)區(qū)域和樣式之類(lèi)。我自己看過(guò)當(dāng)當(dāng)?shù)腍5規(guī)范，微信UI規(guī)范，大概了解了風(fēng)格，后來(lái)再寫(xiě)的時(shí)候，就會(huì)慢慢形成自己的書(shū)寫(xiě)習(xí)慣。

今天就個(gè)人經(jīng)驗(yàn)談一談UI規(guī)范怎么寫(xiě)更合適。

首先，要明確的是，規(guī)范文檔是給誰(shuí)看的。我們寫(xiě)UI規(guī)范的時(shí)候，絕對(duì)不是為了讓自己逼格看起來(lái)更高，而是為了溝通更高效，以及界面做更少的標(biāo)注（我自己用的是markman），有些重復(fù)性的樣式，反復(fù)在界面標(biāo)注，會(huì)導(dǎo)致最后的標(biāo)注圖密密麻麻，前端攻城獅拿到后也要鼓起勇氣才能看下去，甚至標(biāo)的太多，攻城獅們就難免有疏忽。一方面，規(guī)范文檔交給前端開(kāi)發(fā)，一些通用控件在規(guī)范文檔中清清楚楚，看上去也會(huì)神清氣爽。另一方面，自己在后續(xù)的界面設(shè)計(jì)過(guò)程中，也要參考規(guī)范文檔，保證自己設(shè)計(jì)的界面的前后一致性。

所以，規(guī)范文檔兩個(gè)受眾，自己以及前端。

其次，規(guī)范文檔什么時(shí)候開(kāi)始寫(xiě)。我的經(jīng)驗(yàn)是從界面設(shè)計(jì)開(kāi)始的那一刻，就要建立規(guī)范文檔了，書(shū)寫(xiě)時(shí)，可以按照自己的設(shè)計(jì)順序，確定好的設(shè)計(jì)元素都可以陸續(xù)加到文檔里，一直到交付設(shè)計(jì)稿，文檔有可能都是未完成狀態(tài)，這里說(shuō)未完成，是因?yàn)榻坏角岸四抢?，真正開(kāi)發(fā)時(shí)，可能會(huì)有一些不合理的地方，比如字號(hào)、顏色是不是協(xié)調(diào)、甚至突兀，包括一些CSS樣式是不是不同瀏覽器表現(xiàn)不同等等，根據(jù)反饋意見(jiàn)，后期在界面調(diào)整的過(guò)程中，規(guī)范文檔也要一并更新，是以我的規(guī)范文檔向來(lái)命名 XXX（更新中）。（這么說(shuō)起來(lái)，似乎還沒(méi)有最終版呢~）

規(guī)范文檔需要貫穿整個(gè)界面設(shè)計(jì)以及產(chǎn)品開(kāi)發(fā)的過(guò)程。

規(guī)范文檔需要寫(xiě)什么。這是重中之重，因?yàn)楫a(chǎn)品不同，所以差別也很大，但非常重要的一點(diǎn)是考慮到各種不同的狀態(tài)下界面元素的樣式。因?yàn)樽罱墓ぷ鞫际荁/S結(jié)構(gòu)產(chǎn)品的開(kāi)發(fā)，所以就會(huì)考慮一些鼠標(biāo)經(jīng)過(guò)之類(lèi)的狀態(tài)。移動(dòng)端的規(guī)范，個(gè)人建議是先參考ios的HIG和google 的material design，尤其是2016年的MD，對(duì)各個(gè)元素定義的極其詳細(xì)，所以省時(shí)省力，只需要在此基礎(chǔ)上發(fā)揮自己的創(chuàng)意就好。web端不同分辨率下的樣式要考慮到，哪些元素左對(duì)齊，哪些右對(duì)齊，哪些尺寸限定，哪些可以根據(jù)分辨率伸縮，當(dāng)然了，如果你的團(tuán)隊(duì)采用響應(yīng)式的布局，這些就不用考慮了。書(shū)寫(xiě)方式的話(huà)，因?yàn)樽约褐坝羞^(guò)一些CSS基礎(chǔ)，所以可能會(huì)直接把一些CSS樣式寫(xiě)到文檔中。但畢竟很多UI是平面設(shè)計(jì)或者其他行業(yè)轉(zhuǎn)過(guò)來(lái)的，沒(méi)有任何代碼基礎(chǔ)，這也絲毫無(wú)影響我們的工作結(jié)果，只要把樣式表現(xiàn)清楚就可以了，比如加深，變換顏色等等，當(dāng)然，我個(gè)人建議是在PS里實(shí)現(xiàn)的效果盡量轉(zhuǎn)成CSS樣式，這個(gè)可以使用一些在線(xiàn)的工具，代碼可以拷貝，非常方便。另外，現(xiàn)在強(qiáng)大的css3真的可以實(shí)現(xiàn)各種樣式，所以小伙伴們按鈕之類(lèi)的就盡量不要再切圖了。

移動(dòng)端：以平臺(tái)規(guī)范為基礎(chǔ)。

web端：考慮到多種狀態(tài)及定義不同屏幕分辨率的表現(xiàn)。

還有一個(gè)問(wèn)題，就是規(guī)范文檔里已經(jīng)定義好樣式的，界面圖中要不要做標(biāo)注，我的建議是可以備注上（見(jiàn)規(guī)范文檔），不要因?yàn)槲臋n里定義了，就理所當(dāng)然的認(rèn)為開(kāi)發(fā)人員一定會(huì)理解哪些可以在規(guī)范文檔中查找。很多前端沉浸在js的世界中哦。對(duì)他們來(lái)說(shuō)，更有成就感的事情或許是寫(xiě)一堆判斷，而不是100%的復(fù)現(xiàn)你的設(shè)計(jì)文稿。

如果想得到和界面設(shè)計(jì)效果圖最接近的開(kāi)發(fā)后的樣式，就不要怕麻煩，界面標(biāo)注中也可以有規(guī)范文檔里的內(nèi)容。

一份好的規(guī)范文檔的定義非常簡(jiǎn)單，就是當(dāng)你交付給前端的時(shí)候，他在開(kāi)發(fā)過(guò)程中不會(huì)問(wèn)你任何問(wèn)題，當(dāng)然啦，需要和界面標(biāo)注配合。但實(shí)際工作過(guò)程中，這是不可能的，所以多和前端溝通，畢竟實(shí)現(xiàn)樣式只是他們工作的一部分而卻是UI工作的全部體現(xiàn)呢。

規(guī)范文檔可大可小，附上一份今天完成的一個(gè)通用組件的規(guī)范。這是我寫(xiě)過(guò)最精簡(jiǎn)的了~