[[420483]]

在互聯(lián)網(wǎng)公司，隨著用戶的增長和產(chǎn)品的迭代，產(chǎn)品的新頁面跟新功能越來越多。要是沒有設(shè)計規(guī)范，整個產(chǎn)品會越來越臃腫，迭代速度也會受到影響。

自然設(shè)計規(guī)范的重要性不言而喻，但即使是類似 BAT 這種大廠，在實際的操作中，往往也會發(fā)現(xiàn)這樣的問題：搭建設(shè)計規(guī)范時，并不能讓團(tuán)隊成員很好的進(jìn)行設(shè)計協(xié)同，制作的效率也很低。

本文就將整理分析現(xiàn)有的設(shè)計規(guī)范搭建時遇到的痛點，市面上解決這一問題的方案存在的不足，然后提供一個讓設(shè)計規(guī)范搭建更高效的最優(yōu)解，希望對大家有所幫助。

一、設(shè)計規(guī)范的要素及搭建流程

首先讓我們明確幾個定義：設(shè)計規(guī)范是由設(shè)計原則、組件庫和規(guī)范文檔構(gòu)成，是對設(shè)計項目進(jìn)行量化和約束的，需反復(fù)實施、反復(fù)強(qiáng)調(diào)的指導(dǎo)原則。

組件庫由 Styles 和 Symbols 組成，Styles 是顏色、文字、圖層樣式，而 Symbols 就是按鈕、標(biāo)簽、標(biāo)簽欄、導(dǎo)航欄……等系列組件控件。

搭建組件庫的作用，是為了設(shè)計師能直接調(diào)用 Styles 和 Symbols ，方便不同項目的復(fù)用及設(shè)計延展，保證產(chǎn)品的視覺風(fēng)格一致性；而開發(fā)可直接借鑒復(fù)用組件的代碼，節(jié)省研發(fā)的時間成本。

而規(guī)范文檔就是組件庫的使用手冊，會詳細(xì)描述設(shè)計的原則、風(fēng)格指導(dǎo)、組件類型以及組件使用的細(xì)節(jié)。

市面上常見的設(shè)計規(guī)范搭建過程是這樣的：

二、設(shè)計規(guī)范的搭建過程

但我們在調(diào)研好幾家大廠團(tuán)隊之后，發(fā)現(xiàn)實際在設(shè)計規(guī)范搭建的過程中，大多數(shù)團(tuán)隊都有這樣的痛點：

三、制作/更新組件庫的痛點歸納 1. 需要更好得收集和處理團(tuán)隊提出的組件問題

在制作/更新組件庫的前期階段，反饋的問題過多，無法有效的記錄和對齊需求。而團(tuán)隊成員在遇到組件不適用的問題后，不知道向誰反饋，或者反饋后就沒有后續(xù)，未能及時跟進(jìn)。

2. 需要幫助制定者更好地檢查組件庫使用情況

在組件庫分發(fā)的階段，多是通過人工的方式傳達(dá)，如寫郵件、網(wǎng)盤傳文件+通訊軟件、組織會議宣講等通知成員制作了什么，變更了什么。

成本高，效率低，團(tuán)隊成員還容易忽略消息，因此制定者在分發(fā)后需要擔(dān)心：使用者有無使用組件庫，有無更新到最新版，有無滿足使用者的業(yè)務(wù)需求。

3. 需要幫助使用者及時更新組件庫

在未能及時同步組件庫更新情況的情況下，多人維護(hù)，上傳內(nèi)容，容易互相覆蓋，導(dǎo)致內(nèi)容丟失或輸出不一致。

四、撰寫規(guī)范文檔的痛點歸納 1. 需要幫助定制者提高撰寫規(guī)范文檔的效率

傳統(tǒng)撰寫規(guī)范文檔的方式，需要一遍又一遍把組件庫組件截圖復(fù)制到網(wǎng)上，需要手動命名+添加描述。

但規(guī)范文檔的制作并非一蹴而就，為了滿足項目的需要，設(shè)計規(guī)范在制作之后，往往還需要及時的迭代優(yōu)化，一遍遍更新圖片和描述。

如此，撰寫和維護(hù)設(shè)計規(guī)范的高昂成本，會拖慢產(chǎn)品迭代更新的速度。

2. 需要幫助制定者更高效地做出展示效果好的規(guī)范文檔

以傳統(tǒng)富文本的編輯方式，想要制作一份分類合理、目錄明確、排版美觀的規(guī)范文檔，投入的時間成本非常的高。

在滿足設(shè)計師的需求之外，開發(fā)也有查看組件標(biāo)注的需求，然而標(biāo)注需要設(shè)計師花時間逐一添加。

為了解決以上搭建設(shè)計規(guī)范過程中遇到的痛點，很多公司團(tuán)隊進(jìn)行了非常多的嘗試，我們也采訪記錄歸納了現(xiàn)有解決方案的不足。

五、市面上的解決方案不足點歸納 1. 借助市面上的協(xié)作工具

我們發(fā)現(xiàn)使用市面上的設(shè)計協(xié)作工具制作設(shè)計規(guī)范，只是將組件變成一個個的圖層，存儲在自己的平臺上。

但會造成這樣的問題：

• 喪失Sketch的關(guān)鍵能力——即組件更新時，相關(guān)設(shè)計稿沒有一鍵更新、替換的能力
• 內(nèi)容存儲在平臺后，不是 Sketch 的格式和文件，以后難以遷移、轉(zhuǎn)發(fā)
• 規(guī)范文檔沒有標(biāo)注，加重了開發(fā)的工作成本
• 無法實現(xiàn)多人同時維護(hù)

舉個例子，若組件A需要更新為組件b，則規(guī)范文檔更新后，你需要在組件庫及所有出現(xiàn)組件a的設(shè)計稿中，手動替換為組件b。如此，每次更新組件后，都需要人工排查，明確更新的內(nèi)容和影響的范圍，費時費力。

2. 依靠云盤方式進(jìn)行協(xié)同

比起市面上的其他設(shè)計協(xié)作工具，icloud 的亮點功能就是實現(xiàn)了組件庫的同步下發(fā)。只要改變了云組件庫的組件，就能同步下發(fā)到所有應(yīng)用了這個云組件的設(shè)計稿里。

但同時， 這一協(xié)同方式也存在這樣的問題：

• 不能多人同時維護(hù)
• 看不到團(tuán)隊成員對于組件庫的使用數(shù)據(jù)
• 只滿足組件庫，沒有滿足規(guī)范文檔的訴求

為此，針對設(shè)計規(guī)范制作過程中的種種痛點，我們 CoDesign 提供了一個最優(yōu)解的方案，既支持多人協(xié)同、云端數(shù)據(jù)可視化、更新自動提醒，還能自動生成規(guī)范文檔的全新設(shè)計規(guī)范解決方案。

六、真正高效的設(shè)計規(guī)范解決方案

1. 多人維護(hù)，同步下發(fā)組件庫，協(xié)作更高效

最核心的亮點功能是 CoDesign 的設(shè)計規(guī)范支持多人維護(hù)、修改、合并以及同步下發(fā)組件庫。

只要成員更新組件庫，系統(tǒng)就會同步更新所有應(yīng)用了該組件的設(shè)計稿。還有組件庫更新提醒功能，有效避免多人協(xié)同內(nèi)容被覆蓋的情況。

2. 自動生成/更新規(guī)范文檔，制作更簡單

在 CoDesign for Sketch 插件內(nèi)上傳組件庫，即可自動生成規(guī)范文檔，Styles 和 Symbols 將完整展示在文檔內(nèi)，目錄結(jié)構(gòu)以 Sketch 內(nèi)組件的命名方式自動生成。

在 CoDesign for Sketch 插件內(nèi)上傳新的組件庫后，就可直接更新規(guī)范文檔。

可視化的組件，結(jié)構(gòu)化的檢索目錄，清晰的組件展示區(qū)域，這樣的一份規(guī)范文檔，能幫助每一個使用者更快地找到想要的設(shè)計規(guī)范內(nèi)容！

3. 提高團(tuán)隊協(xié)同效率，問題全解決

以往制作設(shè)計規(guī)范，你可能會遇到這樣的問題：“需要設(shè)計師逐一手動標(biāo)注”、“研發(fā)需要自行判斷設(shè)計稿內(nèi)圖層是否為組件，容易重復(fù)開發(fā)”、“人工標(biāo)注可能導(dǎo)致數(shù)值不準(zhǔn)確”。這些問題，我們?nèi)紟湍憬鉀Q好了！

在「設(shè)計規(guī)范」中，設(shè)計師可一覽 Styles 跟 Symbols 的樣式效果。點擊「添加描述」，還可補(bǔ)充該 Styles 跟 Symbols 的使用描述，保證團(tuán)隊設(shè)計的一致性。

4. 使用情況一鍵提醒，合作更無間

不知道組件使用的是不是最新版？還在一個個通知成員更新組件庫？大可不必！

在「設(shè)計規(guī)范」中，右側(cè)的「使用情況」就可查看團(tuán)隊成員對于該設(shè)計規(guī)范的使用狀態(tài)。

若團(tuán)隊成員添加設(shè)計規(guī)范后沒有及時更新，管理員可在「待更新」內(nèi)，勾選團(tuán)隊成員，即可一鍵提醒，督促成員及時更新。

要是遇到組件不適用的問題，想要及時反饋也很簡單，直接在對應(yīng)的組件發(fā)起評論，@負(fù)責(zé)人即可搞定。

5. 設(shè)計規(guī)范精準(zhǔn)搜索，調(diào)用更快捷

組件庫檢索成本高？更新內(nèi)容不清晰？找不到？使用 CoDesign 就不會有這個煩惱！設(shè)計規(guī)范支持精準(zhǔn)搜索。

成員可在「設(shè)計規(guī)范」中，點擊右上角的搜索框，輸入設(shè)計規(guī)范的相關(guān)信息，則會呈現(xiàn)相關(guān)的顏色、文本、圖層樣式、組件，點擊即可跳轉(zhuǎn)到對應(yīng)的規(guī)范目錄。

讓每一個團(tuán)隊成員更高效更準(zhǔn)確地調(diào)用合適的組件。