因?yàn)樽罱到y(tǒng)課程講到規(guī)范，所以針對(duì)設(shè)計(jì)規(guī)范實(shí)際創(chuàng)建的誤區(qū)做一個(gè)簡(jiǎn)單的總結(jié)。幫助在職的同學(xué)改進(jìn)工作流，也可以幫助新人更好地應(yīng)對(duì)面試中的部分問(wèn)題。

一、設(shè)計(jì)規(guī)范的主要矛盾

UI 設(shè)計(jì)規(guī)范在原則上是項(xiàng)目必備要素之一，創(chuàng)建規(guī)范的邏輯和方法本身也很簡(jiǎn)單。但并不意味著規(guī)范的創(chuàng)建可以真正發(fā)揮作用，它會(huì)碰到下面幾個(gè)問(wèn)題：

1. 規(guī)范內(nèi)容太多導(dǎo)致文檔格式和布局的混亂
2. 規(guī)范創(chuàng)建后上下游成員都不關(guān)注也不遵守
3. 規(guī)范的內(nèi)容用起來(lái)太麻煩讓同事怨聲載道
4. 規(guī)范創(chuàng)建完第一版以后就難以維護(hù)荒廢了
5. 因?yàn)橐?guī)范的限制導(dǎo)致界面設(shè)計(jì)起來(lái)很死板
6. ……

UI 設(shè)計(jì)規(guī)范做起來(lái)容易，用起來(lái)難，明明應(yīng)該是提升效率的工具，卻往往變成作繭自縛的累贅。

所以問(wèn)題到底出在哪里？

分析其中的問(wèn)題就必須理解 UI 設(shè)計(jì)規(guī)范本身的作用和價(jià)值，包含下面這些內(nèi)容：

1. 標(biāo)準(zhǔn)化設(shè)計(jì)元素，提高界面的統(tǒng)一性
2. 樣式復(fù)用和組件化，增加設(shè)計(jì)、開發(fā)效率
3. 規(guī)范設(shè)計(jì)流程，降低團(tuán)隊(duì)協(xié)作成本
4. 書面留檔，便于后續(xù)復(fù)查和核對(duì)

這些作用都很好理解，也很有說(shuō)服力。但是，設(shè)計(jì)規(guī)范是一種自由度很大靈活度很高的文檔類型，它的創(chuàng)建必須結(jié)合項(xiàng)目的實(shí)際情況，才能發(fā)揮出應(yīng)有的作用。而很多設(shè)計(jì)師以為只要把設(shè)計(jì)規(guī)范做好了，就自動(dòng)可以實(shí)現(xiàn)它的作用，這是一種錯(cuò)誤的想法。

網(wǎng)上有很多設(shè)計(jì)規(guī)范的案例和素材，以常規(guī)邏輯來(lái)理解，肯定是做的越完整、越細(xì)致、版式越有設(shè)計(jì)感的規(guī)范看起來(lái)越專業(yè)。

這就驅(qū)使新人建立一種認(rèn)知，專業(yè)的設(shè)計(jì)規(guī)范就應(yīng)該大而全，內(nèi)容詳實(shí)，格式完整，設(shè)計(jì)精美。于是在實(shí)際項(xiàng)目中，就會(huì)把這些要求轉(zhuǎn)化成目標(biāo)，花大量的時(shí)間來(lái)創(chuàng)建和制作規(guī)范本身，而不是以讓規(guī)范發(fā)揮最大作用的方式去制作規(guī)范。

更要命的是，很多設(shè)計(jì)師或設(shè)計(jì)團(tuán)隊(duì)，具有"設(shè)計(jì)潔癖"，比如圖層一定要命名得很清楚，所有編組必須使用自動(dòng)布局，變體所有屬性和狀態(tài)要設(shè)置完整等等。這些要求組合起來(lái)，就會(huì)讓整個(gè)組件的制作時(shí)長(zhǎng)大幅度上漲，雖然可以靠加班加點(diǎn)解決，做完以后看起來(lái)也很有成就感。但是，真的有認(rèn)真考慮過(guò)這么做的收益？

一個(gè)文檔做得越細(xì)致，越全面，就意味著越難調(diào)整和維護(hù)。在傳統(tǒng)平面行業(yè)，品牌 VI 規(guī)范這么處理，甚至能做幾百頁(yè)打印成厚厚一本規(guī)范手冊(cè)很合理，因?yàn)橐惶?VI 的生命周期三年起步，中間最多針對(duì)一些新場(chǎng)景做補(bǔ)充增量，但不會(huì)大量修改 VI 的基礎(chǔ)內(nèi)容。

但很不幸，我們做的是互聯(lián)網(wǎng)產(chǎn)品，注定了迭代是頻發(fā)且朝令夕改的。你花了很大力氣整理出來(lái)的規(guī)范，可能下個(gè)版本就要調(diào)整，沒(méi)幾個(gè)月就要大改一次。而過(guò)于精細(xì)的文檔是很難維護(hù)的，除了內(nèi)容本身的修改、格式的調(diào)整、版式的變更，還包括和團(tuán)隊(duì)成員對(duì)齊更新內(nèi)容等一系列操作。這就叫船大難掉頭，所以很多項(xiàng)目規(guī)范在做完第一版以后就慢慢荒廢了。

如果有留意大廠規(guī)范如 Ant、Arco 的話，往往會(huì)發(fā)現(xiàn)在開發(fā)端已經(jīng)更新了各種新組件、樣式，但是設(shè)計(jì)組件庫(kù)卻沒(méi)有動(dòng)靜。原因就是調(diào)整維護(hù)組件庫(kù)太麻煩了，即使是大廠團(tuán)隊(duì)也受不了這種工作量。

本質(zhì)上設(shè)計(jì)規(guī)范就是一種設(shè)計(jì)團(tuán)隊(duì)和前端開發(fā)的規(guī)章制度，當(dāng)我們?cè)较胪晟埔?guī)范內(nèi)容，就是越往章程里添加了更多的條目，我相信誰(shuí)也不喜歡被這些東西束縛。但恰恰有很多設(shè)計(jì)師對(duì)制定這些套索樂(lè)此不疲，并希望團(tuán)隊(duì)成員可以興高采烈地拿起它們把自己給綁了，且要對(duì)你的辛苦付出感恩戴德……

所以 UI 設(shè)計(jì)規(guī)范在實(shí)際項(xiàng)目的真正矛盾，是設(shè)計(jì)師沒(méi)有根據(jù)實(shí)際情況考量，建立了過(guò)于理想化的目標(biāo)，從而忽視規(guī)范本身的應(yīng)用屬性：

為了做規(guī)范而做規(guī)范！

二、UI 設(shè)計(jì)規(guī)范的常見(jiàn)問(wèn)題

下面，就針對(duì)規(guī)范中的幾個(gè)常見(jiàn)問(wèn)題來(lái)進(jìn)行分析，分享相關(guān)的規(guī)范創(chuàng)建思路。

1. 規(guī)范要不要認(rèn)真設(shè)計(jì)和導(dǎo)出

規(guī)范認(rèn)真設(shè)計(jì)固然看著舒服，但如果沒(méi)有足夠的時(shí)間，規(guī)范的格式做的很簡(jiǎn)陋并沒(méi)有關(guān)系。確保規(guī)范的內(nèi)容所有人都看得懂，并且方便查看、復(fù)制、引用即可，不需要在上面添加美觀的排版和一系列說(shuō)明。

目前主流的 UI 規(guī)范是直接創(chuàng)建在設(shè)計(jì)軟件的畫布中，文檔型的規(guī)范能不做就不做，因?yàn)橐?guī)范本身是需要直接和操作掛鉤的，除了復(fù)用外，還包括查看屬性參數(shù)。文檔則需要直接添加文字說(shuō)明，不僅做起來(lái)麻煩，而且又臭又長(zhǎng)、碎片化的文檔注定沒(méi)人想看。只有做甲方項(xiàng)目，或領(lǐng)導(dǎo)明確要求格式情況下，才需要進(jìn)行導(dǎo)出。

2. 規(guī)范中的組件應(yīng)該如何處理

UI 設(shè)計(jì)規(guī)范通常也直接涵蓋了組件庫(kù)的元素，這樣做起來(lái)更方便，找起來(lái)也更合理。但是組件庫(kù)的主要問(wèn)題，在于如何合理的結(jié)合軟件功能，創(chuàng)建方便引用的組件。如果有下載過(guò)大型開源組件庫(kù)的同學(xué)，就應(yīng)該能看到源文件內(nèi)一長(zhǎng)溜的組件 Page，每次要找到一個(gè)自己想要的組件要花不少時(shí)間。并且每個(gè)組件 Page 內(nèi)的畫布，又放滿了密密麻麻的不同狀態(tài)，看了都讓人頭禿。

這是為了滿足變體的需求，可以在變體面板直接操作開關(guān)、選項(xiàng)?？粗孟窈軈柡?，但必須強(qiáng)調(diào)，變體的實(shí)際使用價(jià)值非常低……

因?yàn)樵诔Ｒ?guī)項(xiàng)目設(shè)計(jì)環(huán)節(jié)中，組件的多數(shù)狀態(tài)只需要保留示意稿，但不會(huì)在界面設(shè)計(jì)中直接引用。為多數(shù)不需要引用的組件狀態(tài)制作變體，除了增加工作量不會(huì)得到正面價(jià)值。并且越復(fù)雜的變體出錯(cuò)的概率就越大，維護(hù)起來(lái)就越困難。所以不要在組件制作過(guò)程中過(guò)度迷信變體的作用，只對(duì)最常調(diào)用的組件狀態(tài)制作變體，否則直接作為普遍分組放在畫板里復(fù)制也比做變體有效。

同時(shí)一定要減少自動(dòng)布局的使用量，因?yàn)椴煌M件實(shí)現(xiàn)自動(dòng)布局的邏輯不同，且方法有很多種，這就導(dǎo)致你做的組件別人很難更改，或者過(guò)一陣子你自己都不知道怎么修改。這就導(dǎo)致很多時(shí)候重新做一個(gè)都比修改原來(lái)的容易，所以設(shè)計(jì)師都不喜歡用別人的組件做設(shè)計(jì)，就是因?yàn)榈托А?/p>

3. 規(guī)范文件中的版本控制方法

過(guò)去我有分享過(guò)，一個(gè)項(xiàng)目?jī)?nèi)規(guī)范文件可以作為一個(gè)引用文件，被其它設(shè)計(jì)文件調(diào)用。但互聯(lián)網(wǎng)產(chǎn)品迭代頻繁，而迭代就意味著版本的更新和變化，那么設(shè)計(jì)規(guī)范怎么應(yīng)對(duì)版本的調(diào)整？

很多設(shè)計(jì)團(tuán)隊(duì)的做法是使用一個(gè)固定、唯一的設(shè)計(jì)規(guī)范文件，只對(duì)設(shè)計(jì)文件的版本進(jìn)行歸檔和管理。

這在項(xiàng)目前兩個(gè)版本還好，但隨著版本增多，產(chǎn)生的問(wèn)題也會(huì)越來(lái)越多。那就是老的項(xiàng)目文件樣式也會(huì)被替換掉了，導(dǎo)致無(wú)法在歷史版本中查看過(guò)去的具體設(shè)計(jì)。且設(shè)計(jì)文件的迭代會(huì)對(duì)界面畫布有不同的交叉，成為進(jìn)一步混亂的根源。

所以建議，每次迭代創(chuàng)建一個(gè)版本的文件夾，而這里面要復(fù)制一個(gè)獨(dú)立的版本規(guī)范文件，不被其它版本引用。

4. 設(shè)計(jì)規(guī)范做完以后沒(méi)人關(guān)注怎么辦

設(shè)計(jì)規(guī)范不能指望產(chǎn)品、設(shè)計(jì)、開發(fā)、測(cè)試認(rèn)真去看，多數(shù)設(shè)計(jì)規(guī)范創(chuàng)建的假設(shè)就是沒(méi)人會(huì)看，就像沒(méi)人想看產(chǎn)品說(shuō)明書一樣，你要讓這個(gè)東西足夠易懂，想要使用或查看一看就會(huì)。要滿足這個(gè)要求，就必須要做好前期的分析 —— 項(xiàng)目需要什么樣的規(guī)范？

要分析出對(duì)應(yīng)的結(jié)論，就要對(duì)下面幾個(gè)問(wèn)題進(jìn)行思考：

1. 項(xiàng)目有沒(méi)有時(shí)間留給規(guī)范的制作
2. 項(xiàng)目對(duì)設(shè)計(jì)還原度的要求夠不夠高
3. 前端對(duì)設(shè)計(jì)稿實(shí)現(xiàn)的意愿和積極度
4. 其他設(shè)計(jì)師的設(shè)計(jì)軟件使用習(xí)慣
5. 項(xiàng)目的迭代頻率和大改版的間隔

不同的項(xiàng)目需要的規(guī)范是不同的，尤其是不同的規(guī)范使用對(duì)象對(duì)規(guī)范的需要是不一樣的，你需要圍繞團(tuán)隊(duì)想要的、會(huì)用的規(guī)范類型去創(chuàng)建，而不是僅僅是追求腦海中 "完美的" 模式。

所以為了進(jìn)一步實(shí)現(xiàn)這個(gè)目標(biāo)，要在規(guī)范創(chuàng)建前把規(guī)范的結(jié)構(gòu)大綱、前期小樣給團(tuán)隊(duì)檢查、評(píng)審，商議出合適的做法。并且在規(guī)范基本做完以后，要開一個(gè)簡(jiǎn)單的培訓(xùn)短會(huì)，對(duì)設(shè)計(jì)和開發(fā)解釋規(guī)范的所在位置、內(nèi)容明細(xì)、查看方法?？傊?，規(guī)范是結(jié)合別人的習(xí)慣去創(chuàng)建，而不是根據(jù)自己的習(xí)慣讓別人適應(yīng)（你是老板除外），才有人愿意配合使用。

5. 規(guī)范里要不要每個(gè)細(xì)節(jié)都添加說(shuō)明

網(wǎng)上的開源規(guī)范說(shuō)明非常多，所以很多同學(xué)問(wèn)過(guò)要不要寫說(shuō)明，寫的話寫哪些東西，寫到什么程度。

前面就說(shuō)過(guò)，文檔是反人性，所以說(shuō)明自然是能少就得少。開源框架中添加大量說(shuō)明，是因?yàn)檫@些系統(tǒng)本身就是產(chǎn)品，要面向數(shù)以萬(wàn)計(jì)的用戶進(jìn)行解釋，所以必須寫得很清楚，對(duì)有實(shí)際查看需要的用戶進(jìn)行解釋。而我們自己的項(xiàng)目通常只面向少數(shù)產(chǎn)品團(tuán)隊(duì)的成員，就不需要負(fù)擔(dān)這么重的解釋成本，寫好標(biāo)題或命名就夠了。只有在不寫下說(shuō)明就很難保證別人能看懂，或者自己過(guò)一陣子都會(huì)忘記的設(shè)計(jì)要素上做說(shuō)明。

而在我看來(lái)一定得做注釋說(shuō)明的地方，就是前面提到的組件狀態(tài)。雖然我們可以不用變體實(shí)現(xiàn)它們，但不同的組件狀態(tài)切換往往包含了具體的交互過(guò)程，很多只看圖是真看不明白它是怎么切換到另一個(gè)狀態(tài)的。所以我們最好將這些需要通過(guò)交互或特殊邏輯產(chǎn)生的狀態(tài)進(jìn)行說(shuō)明，即使用交互文檔的展示方法連線和備注。

結(jié)尾

一套有效的設(shè)計(jì)規(guī)范必然是經(jīng)過(guò)多方面權(quán)衡妥協(xié)后的產(chǎn)物，檢驗(yàn)設(shè)計(jì)師的項(xiàng)目積累和綜合能力，一套規(guī)范應(yīng)該怎么做，只能靠你自己去判斷，而沒(méi)有標(biāo)準(zhǔn)的答案。最近 UXBAIKE 在寫新的規(guī)范系列新知識(shí)庫(kù)，很快就會(huì)上線。

超人的電話亭