有一份完善的 Style Guide ，它不會直接給你提供設(shè)計稿源文件，也不會直接告訴你代碼的文檔細節(jié)，但是它是一個有效的索引。設(shè)計稿可能存在于PS 或 Sketch 中，代碼則往往放在 Git 平臺上，它們像是你開發(fā)迭代產(chǎn)品的工具箱，那么Style Guide 就是這份工具箱的使用說明書。它會告訴你什么場景下要使用什么樣的錘子，這把錘子要和什么釘子結(jié)合在一起，使用方法又是怎么樣的，該有哪些注意事項。因 此，通過 Style Guide 我們最直觀可以看到的就是“組件”，可能會在網(wǎng)站上放不同組件的使用規(guī)范，以及設(shè)計源文件和代碼文檔的地址。

這里引出了一個概念，就是“組件”。我對“組件”的定義就是：一些符合整體平臺設(shè)計規(guī)范，具有較高可復(fù)用性且具備完善設(shè)計、使用說明，代碼文檔的控件。

因此，組件應(yīng)當(dāng)是有比較大概率反復(fù)被用到的——比如按鈕、表單、圖片樣式等；組件也應(yīng)該易于衍生出新的子組件——比如基于某個表單的子表單，修改了顏色或滾動樣式等；最重要的，組件必須有完善的設(shè)計規(guī)范和代碼文檔，這才能讓設(shè)計師和工程師復(fù)用它們時效率倍增。

然而在實際工作中，我遇到的一個最大的問題就是，如何定義一個內(nèi)容是否為組件。從定義上來說，將一個設(shè)計內(nèi)容確定為組件的成本是不低的，主要除了產(chǎn)出那些必 要的信息以外，還需要特意撰寫設(shè)計規(guī)范文檔、開發(fā)文檔，上傳到某個網(wǎng)站或者服務(wù)器上，最重要的是還需要后期維護。很多內(nèi)容在用的時候很難推測未來是否會經(jīng) 常復(fù)用，在糾結(jié)要不要投入精力去做成組件時，往往就放棄了。

另一方面，由于產(chǎn)品的快速迭代，組件更新往往也可能變得很頻繁，這時新增或修改組件還需要一個小組去評估確認，并且要更新相關(guān)代碼和文檔，最后還要通過網(wǎng)站讓所有同事都知道這件事，確實要花費不少的精力。

基于這樣的一些問題，不少團隊的 Style Guide 都沒有做得太好，畢竟這是一件需要長期督促的工作，一旦有些許的松懈，Style Guide 就會逐漸落后于極快的迭代速度，漏洞越來越多，沉淀的內(nèi)容越來越陳舊，最后導(dǎo)致需要花費更大的精力去維護它，可能慢慢就荒廢了。所以，做好 Style Guide 就是在和快速迭代賽跑、是在對抗人的惰性，但如果能夠堅持下去，一定會讓團隊受益匪淺。

從這段時間的工作出發(fā)，我提出幾個可以幫助有效構(gòu)建 Style Guide 的方法和要點。

第一，如果產(chǎn)品規(guī)模并不太大，可以考慮構(gòu)建頁面到組件維度的 Guide 形式。

做設(shè)計的時候，尤其是在 已有的產(chǎn)品頁面上修改，我做的最多的一件事就是截圖。把現(xiàn)有頁面截下來，然后直接在圖上修改，增加新的組件。但是，有些頁面并不是隨時可以得到的，比如做 支付成功的頁面，或者做退款的頁面，往往需要有一個真實訂單才可以截到這些內(nèi)容。所以除非你事先就把截圖整理好，不然每次都要去對付這些事，真的挺煩的。

因此，我們可以把產(chǎn)品先模塊化。比如電商產(chǎn)品的 detail 頁是一個模塊，導(dǎo)購是一個模塊，支付交易又是一個模塊，然后把每個模塊的線上界面做好記錄，存放起來。同時，最好在每個頁面旁邊提供這個頁面的設(shè)計源文件 下載。另外，在每個頁面上可以簡單注視一下用到了哪些組件，并提供這些組件規(guī)范的鏈接。

這樣做的好處就是，從查找頁面會非常簡單，并且組件以頁面為依托，更容易查找對應(yīng)的組件，也很方便理解組件的實際使用場景，避免光看規(guī)范文檔但是脫離了場景的情況發(fā)生。

第二，嚴格要求設(shè)計稿的命名規(guī)范。

我和開發(fā)同學(xué)聊下來，使用 Style Guide 最大的問題就是，經(jīng)常找不到設(shè)計稿里用了什么組件。本身組件的命名可能很代碼化，比如xui/button_homepage，當(dāng)復(fù)雜起來之后，光在規(guī)范 網(wǎng)站上搜名稱是很難定位到目標組件的。因此，除了界面維度的索引，將設(shè)計稿中組件命名規(guī)范非常重要。

以Sketch 為例，經(jīng)常我們畫板的名字是 button copy、button copy copy 3，再加上一些 group 操作之后，甚至連 button 字樣都不見了。如果只是按鈕，好歹還容易認知，但是如果是面包屑、逃生艙等快速入口，或者復(fù)雜的表達，就真的很難定位了。所以在設(shè)計軟件中時刻注意每一個 圖層的命名，雖然有些繁瑣，但在讓設(shè)計稿更嚴謹之余又能極大地幫助開發(fā)同學(xué)進行定位，真的很有必要。

第三，嚴格規(guī)范組件更新制度。

都說，每件事做到最后，最大的阻礙在人本身，這真的太正確了。 Style Guide 本身作為一種規(guī)范，方便的是設(shè)計師和工程師，因此他們對設(shè)計沉淀的貫徹程度幾乎直接影響了規(guī)范的建立和維護。

一個組件的新增，需要有特定的設(shè)計師和工程師來審核，這個人數(shù)不要太多，因為人數(shù)越多牽絆就越多。每個組件可以對應(yīng)到特定的負責(zé)人，主要可以是這個組件的設(shè) 計師和代碼編寫者，同時源文件必須同步顯示在網(wǎng)站上，讓其他設(shè)計師可以直接下載，但若有修改，則應(yīng)該找負責(zé)人來提交審核。只要制度執(zhí)行夠好，這種方式可以 平衡精力的開銷。

凡是和稍大的設(shè)計團隊同學(xué)聊，都會遇到設(shè)計規(guī)范的問題，所以今天也結(jié)合自己的實際工作提出一些想法，希望給大家一定的啟發(fā)，也是督促我自己在接下來的工作中把設(shè)計沉淀做得更好一些。

原文來自：簡書

作者：鎮(zhèn)雷