隨著項(xiàng)目的不斷發(fā)展，設(shè)計(jì)團(tuán)隊(duì)在不斷壯大，設(shè)計(jì)師之間的協(xié)作也越來(lái)越多，相應(yīng)的溝通和協(xié)作成本在不斷增加。如何才能更高效的合作，并把設(shè)計(jì)質(zhì)量和一致性做的更好，是我們需要去解決的問(wèn)題。

本文將以 QQ 動(dòng)漫設(shè)計(jì)系統(tǒng)為例，分享一些過(guò)程中的思考和經(jīng)驗(yàn)，拋磚引玉，希望對(duì)大家有所幫助。

問(wèn)題之源：本地組件庫(kù)

在項(xiàng)目初期，團(tuán)隊(duì)設(shè)計(jì)師的協(xié)作方式是通過(guò)一個(gè)本地的 sketch 規(guī)范文件，以復(fù)制粘貼的方式來(lái)復(fù)用一些元素和控件。在設(shè)計(jì)師協(xié)作人數(shù)不多，UI 控件改動(dòng)頻繁的情況下，這套流程可以比較快速的完成需求。

但隨著項(xiàng)目逐漸成熟，協(xié)作設(shè)計(jì)師人數(shù)變多、UI 控件逐漸趨于穩(wěn)定且需要復(fù)用的地方逐漸變多時(shí)，之前流程的不足就逐漸凸顯出來(lái)。

1. 更新通知缺乏自動(dòng)化

文件更新難以做到及時(shí)有效的通知到所有設(shè)計(jì)師，且需要人工在群里發(fā)通知，告知大家更新了文件。有些設(shè)計(jì)師暫時(shí)可能沒(méi)有相應(yīng)的設(shè)計(jì)需求，可能會(huì)忽略更新后的文件，造成設(shè)計(jì)的不同步?；蛘叩鹊叫枰臅r(shí)候才去群里找更新的規(guī)范文件，版本容易搞錯(cuò)且費(fèi)時(shí)費(fèi)力。

2. 全局組件更新困難

由于組件樣式是通過(guò)復(fù)制或修改的方式應(yīng)用到界面設(shè)計(jì)中，當(dāng)規(guī)范文件更新時(shí)，無(wú)法智能的自動(dòng)更新修改相應(yīng)的組件，需要設(shè)計(jì)師人工核對(duì)哪些地方有修改。這樣很難保證大家的設(shè)計(jì)版本都能得到統(tǒng)一的更新，當(dāng)大家使用的組件版本不一致時(shí)，輸出的界面就會(huì)出現(xiàn)雜亂無(wú)章的情況。

3. 代碼復(fù)用率低

開發(fā)沒(méi)法全局調(diào)用代碼樣式，有些樣式可能需要反復(fù)復(fù)制使用，耗時(shí)費(fèi)力，并因此產(chǎn)生的代碼臃腫，還會(huì)直接影響產(chǎn)品性能。

解決之道：云端組件庫(kù)

鑒于設(shè)計(jì)師目前多使用 sketch+xshow 的工作流程，而 xshow 正好也具備云端管理的能力，故決定以 xshow 作為橋梁，建立一個(gè)基于 sketch+xshow 的云端設(shè)計(jì)組件庫(kù)，以非常低的遷移和學(xué)習(xí)成本完成流程優(yōu)化。

優(yōu)化后的流程是把 sketch 本地組件庫(kù)通過(guò) xshow 上傳至云端服務(wù)器，設(shè)計(jì)師通過(guò) xshow 云端功能添加到 sketch 中，并在設(shè)計(jì)文件中嵌入這些云端組件。

這樣做能很好的解決上面說(shuō)的問(wèn)題：

1. 更新通知自動(dòng)化

更新文件不用再靠人工在群里發(fā)通知，設(shè)計(jì)師也不需要去找文件，而是在 sketch 中會(huì)自動(dòng)進(jìn)行提醒。一旦有更新，會(huì)在右上角顯示提醒消息，設(shè)計(jì)師只需要點(diǎn)擊提醒，下載最新組件文件即可完成更新。

2. 全局組件一鍵更新

當(dāng)更新組件庫(kù)文件后，界面中所有之前使用過(guò)云端組件的控件元素都會(huì)自動(dòng)比對(duì)更新前后的差異，方便設(shè)計(jì)師判斷是否更新。這種更新最厲害的地方在于，更新是全局的，也就是一旦你確認(rèn)了更新后的內(nèi)容，所有界面都會(huì)自動(dòng)按規(guī)范進(jìn)行更新而無(wú)需設(shè)計(jì)師再逐個(gè)篩查。這樣做既能保證設(shè)計(jì)稿的一致性，也能大幅提高設(shè)計(jì)效率。

3. 開發(fā)效率和質(zhì)量大幅提升

開發(fā)通過(guò)代碼把一些常用的樣式進(jìn)行封裝，在一些高度復(fù)用的場(chǎng)景中直接調(diào)用。一方面可以通過(guò)調(diào)用的形式減少重復(fù)樣式代碼的復(fù)制，精簡(jiǎn)代碼，降低軟件包體積，另一方面也可以減少不必要的工作量還能方便后期維護(hù)。

實(shí)踐之行：云端組件庫(kù)搭建

想要高效解決問(wèn)題，正確的方法很關(guān)鍵，這里我們用到的方法就是原子設(shè)計(jì)理論。2013 年前端工程師 Brad Forst 將此理論思想運(yùn)用在界面設(shè)計(jì)中，形成一套設(shè)計(jì)系統(tǒng)，包含 5 個(gè)層次：原子、分子、組織、模板、頁(yè)面，這套理論為組件庫(kù)的搭建提供了思路和方法。

在實(shí)際搭建過(guò)程中，因?yàn)榻M件庫(kù)的搭建工作量往往比較大，需要先明確流程和分工，主要包括以下幾個(gè)關(guān)鍵步驟：

1. 明確工具流程

因?yàn)槭谴罱ㄔ贫私M件庫(kù)，所以首先需要有一個(gè)云端工具進(jìn)行管理。針對(duì)以 sketch 為基礎(chǔ)的云端組件庫(kù)來(lái)說(shuō)，常用的工具流程包括 sketch cloud，各類云同步盤，第三方云數(shù)據(jù)庫(kù)自主部署等等。我們選擇的 sketch+xshow 工作流也是基于 xshow 具備云端管理功能，與其他流程本質(zhì)上是一樣的，大家根據(jù)項(xiàng)目實(shí)際情況合理選擇就好。

2. 全面匯總并分類

按原子理論由小到大來(lái)對(duì)常規(guī)控件進(jìn)行匯總并分類。對(duì)于 QQ 動(dòng)漫項(xiàng)目來(lái)說(shuō)，常見(jiàn)的控件類別包括：顏色、字體、圖標(biāo)、按鈕、導(dǎo)航、狀態(tài)欄、彈窗、列表、標(biāo)簽等等。每個(gè)項(xiàng)目所需要整理的組件不盡相同，原則就是對(duì)要復(fù)用的元素進(jìn)行整理。

3. 制作樣式模板

為了便于維護(hù)和提升合作效率，將組件庫(kù)拆分為幾個(gè)不同的獨(dú)立文件，每一個(gè)文件由組件庫(kù)搭建小組成員獨(dú)立負(fù)責(zé)，減少混亂。

如果是有多位設(shè)計(jì)師參與時(shí)，因?yàn)榻M件庫(kù)的元素存在相互調(diào)用的情況，會(huì)遇到到底誰(shuí)先做的問(wèn)題。解決流程分 2 步：

1. 由一位設(shè)計(jì)師把組件庫(kù)的原子級(jí)組件（主要包括顏色，字體，圖標(biāo)）先做好，并建立分類組件標(biāo)準(zhǔn)模板，其他設(shè)計(jì)師在這些模板基礎(chǔ)上進(jìn)行完善，保證組件庫(kù)在邏輯層級(jí)統(tǒng)一。
2. 如果過(guò)程中遇到，自己組件中需要調(diào)用對(duì)方組件，比如某個(gè)圖標(biāo)沒(méi)有在圖標(biāo)組件文件中，但自己的列表中又需要，可以先用其他組件中的圖標(biāo)代替，等圖標(biāo)組件庫(kù)更新后，再同步更新這里的組件即可。

QQ 動(dòng)漫組件庫(kù)一共分了 5 個(gè)不同文件，分別是：基礎(chǔ)、操作、導(dǎo)航、反饋和內(nèi)容。

4. 搭建本地組件庫(kù)

1?? 確定命名邏輯

提升設(shè)計(jì)效率，是組件庫(kù)存在的重要目標(biāo)之一，而合理的組件命名起到了至關(guān)重要的作用。組件的名稱要保證通用性，太獨(dú)立的命名可能不夠兼容其他場(chǎng)景，也會(huì)讓使用的同學(xué)產(chǎn)生誤解。

對(duì)于組件命名，要多與使用的設(shè)計(jì)師一起探討，因?yàn)槊總€(gè)人的習(xí)慣都不同，方不方便因人而異，所以需要做一些平衡。

比如在做圖標(biāo)命名邏輯的時(shí)候，糾結(jié)于要先按尺寸分（圖標(biāo)/序號(hào)類別/尺寸/圖標(biāo)名），還是按功能分（圖標(biāo) / 序號(hào)類別/尺寸/圖標(biāo)名/狀態(tài)），不斷調(diào)整多次，這時(shí)候就需要找大家一起探討，怎么才是最方便的。

命名的方法是盡可能按共用屬性由多到少的順序來(lái)整理。比如，圖標(biāo)共用的尺寸屬性多，就把尺寸歸到上層；如果圖標(biāo)功能分類比較集中，那就把功能名稱歸到上層。根據(jù)實(shí)際項(xiàng)目和設(shè)計(jì)師使用情況的不同，會(huì)有不同的命名形式，命名確保效率就好。

在梳理組件庫(kù)結(jié)構(gòu)命名時(shí)，先用思維導(dǎo)圖描繪一份結(jié)構(gòu)化地圖，方便前期討論及調(diào)整。明確層級(jí)關(guān)系后，用在多人合作時(shí)進(jìn)行參照，從而統(tǒng)一組件庫(kù)層級(jí)。在做這份結(jié)構(gòu)化地圖時(shí)，需要列好全部分類、層級(jí)、具體名稱及示例。

2?? 顏色

顏色庫(kù)的設(shè)計(jì)，需要將產(chǎn)品中可復(fù)用的顏色匯總并分組，比如品牌顏色，按鈕顏色，圖標(biāo)顏色，裝飾顏色等等，這樣可以使得用到顏色屬性的組件更加靈活。顏色的命名規(guī)范是：序號(hào)_功能/淺色 or 深色/序號(hào) _ 屬性 / 序號(hào) _ 狀態(tài)。例如，04 _ 按鈕色/淺色/01 _ 常規(guī)按鈕/04 _不可點(diǎn)

3?? 字體

字體樣式需要做全字重、顏色和左中右三種對(duì)齊方式，因?yàn)榘茨壳?sketch 的組件邏輯，還不能修改嵌套字體的屬性。這些屬性可以對(duì)應(yīng)到組件的命名上，字體組件的命名規(guī)范是：大小/序號(hào)對(duì)齊方式/屬性/用途，例如 42px/1 居左/常規(guī)/主文本。

邊做邊檢查。由于文字組件需要的命名特別多，很容易出錯(cuò)，所以建議是最好每做一組，就檢查一遍。檢查的時(shí)候打開組件樣式，如果在組件預(yù)覽中發(fā)現(xiàn)重復(fù)或者結(jié)構(gòu)不對(duì)的地方，及時(shí)調(diào)整。

多行文本行高要注意。文字的行高要尤其注意，一定要在前期檢查好尤其是多行文本的行高。如果行高前期設(shè)置不對(duì)的話，非常影響后面文本的擴(kuò)展性，在用到多行文本時(shí)會(huì)遇到麻煩。想回頭修改的話，因?yàn)槭亲畹讓拥脑有枰饌€(gè)調(diào)整，所以代價(jià)是巨大的。

所以一定要開始設(shè)置字體組件之前就確定好行高，比如 QQ 動(dòng)漫組件庫(kù)中的文字行高統(tǒng)一用文字大小的 1.5 倍，并取偶數(shù)作為文本的行高。當(dāng)然，這里的行高也不是完全規(guī)定死，有時(shí)候也需要視情況而定。

文本的粗細(xì)。文字的粗細(xì)也是要在一開始的時(shí)候就要設(shè)置周全，最好是給所有字號(hào)的文字都設(shè)置好不同粗細(xì)的組件，盡管可能開始用不到，但會(huì)提升文字的擴(kuò)展性，不然后面添加就會(huì)比較麻煩。

4?? 圖標(biāo)

圖標(biāo)組件最關(guān)鍵的地方在于使用邏輯和圖標(biāo)規(guī)范。比如，我現(xiàn)在做的圖標(biāo)邏輯是：圖標(biāo)/類別/使用場(chǎng)景/具體名稱/尺寸/不同狀態(tài)，主要是按使用的頻次來(lái)整理的。也可以有其他邏輯方式，以方便使用為準(zhǔn)。

圖標(biāo)規(guī)范也會(huì)影響組件庫(kù)的整理和日常使用，在做圖標(biāo)組件時(shí)，需要定義好圖標(biāo)的最大范圍和最小范圍，嵌套起來(lái)使用才不會(huì)出錯(cuò)。圖標(biāo)的規(guī)范要嚴(yán)謹(jǐn)，同一個(gè)尺寸下的圖標(biāo)視覺(jué)面積要保持一致。不然在大小這個(gè)層級(jí)就會(huì)出現(xiàn)，雖然是相同尺寸的圖標(biāo)切圖范圍，但圖標(biāo)的體量看起來(lái)卻并不一致。

將純色或漸變圖標(biāo)中的顏色剝離，并使用顏色組件進(jìn)行嵌套，這樣做既方便替換又能減少圖標(biāo)組件庫(kù)的復(fù)雜度。

對(duì)于圖標(biāo)的多種狀態(tài)，建議做在同一個(gè)層級(jí)中方便選擇。

對(duì)于圖標(biāo)來(lái)說(shuō)，直接對(duì)畫板設(shè)置切片即可，不需要再加切片框。如果你的組件庫(kù)之前用了很多切片來(lái)導(dǎo)出圖標(biāo)，可以用 Automate 插件直接清理或設(shè)置全局的切片，非常方便。

5?? 控件

有了顏色、字體、圖標(biāo)這些基礎(chǔ)元素后再來(lái)制作組件就會(huì)相對(duì)簡(jiǎn)單很多，只需要通過(guò)拼裝把通用性強(qiáng)的組件做出來(lái)即可。這里可能需要注意設(shè)置好布局方式，讓內(nèi)容盒子隨著內(nèi)容的變化而變化。新版 sketch 的布局設(shè)置相對(duì)于老版本的確實(shí)會(huì)方便很多，理解起來(lái)很容易，所以這就不多討論了。

6?? 代碼組件化

在開發(fā)側(cè)進(jìn)行前端 UI 組件庫(kù)的封裝，實(shí)現(xiàn)從設(shè)計(jì)到開發(fā)的樣式統(tǒng)一，提升效率和質(zhì)量。

在優(yōu)先級(jí)上，代碼組件化跟 UI 組件化可以同步進(jìn)行，開發(fā)先寫好框架，然后隨著 UI 組件化的逐步確定，代碼也進(jìn)行相應(yīng)補(bǔ)充。

5. 構(gòu)建云端組件庫(kù)

本地組件庫(kù)構(gòu)建完成后，即可通過(guò) xshow 上傳至云端，再由 xshow 直接添加到本地 sketch 中，完成整個(gè)使用流程的搭建。

6. 權(quán)限與維護(hù)

為了更好的維護(hù)云端組件庫(kù)，避免更新混亂，需要成立組件庫(kù)小組，只允許組件庫(kù)小組成員有編輯權(quán)限。日常需求中，如有新增組件，需提交給組件庫(kù)小組成員審核，通過(guò)后方可上傳至云端組件庫(kù)。

在制作組件文件的過(guò)程中，需遵循先自測(cè)后上傳的原則，避免在上傳后發(fā)現(xiàn)一些諸如命名錯(cuò)誤、遺漏、嵌套混亂等問(wèn)題，造成麻煩。

7. 編寫規(guī)范文檔

文檔的作用是給相關(guān)同事查閱，形成標(biāo)準(zhǔn)化使用流程。一些在組件庫(kù)中難體現(xiàn)的設(shè)計(jì)說(shuō)明、未形成組件元素的使用規(guī)則或一些常見(jiàn)問(wèn)題都可以寫在文檔里。

8. 問(wèn)題與技巧

1??善用插件，提高效率

我其實(shí)是一個(gè)非常喜歡“偷懶”的人，但凡需要重復(fù)，批量的工作，我都覺(jué)得應(yīng)該有更聰明的辦法。這里我推薦幾個(gè)我在做組件庫(kù)中經(jīng)常用到的小插件。

2??不斷測(cè)試

組件庫(kù)的設(shè)計(jì)過(guò)程中，一定要邊做邊測(cè)試，尤其是在前期確立邏輯的時(shí)候，要不斷檢測(cè)是否真的好用。

3??內(nèi)容更新權(quán)限與維護(hù)需要專人專辦

舉例：假設(shè)我負(fù)責(zé)字體，那么后續(xù)所有的字體更新相關(guān)都只找我來(lái)修改。若其他人在組件庫(kù)內(nèi)找不到相應(yīng)的組件搭建頁(yè)面而又特別高頻使用，需要向組件庫(kù)小組提出申請(qǐng)，并由對(duì)應(yīng)組件庫(kù)管理員進(jìn)行更新，不可以私自修改組件庫(kù)內(nèi)容并上傳。

總結(jié)

組件化思維不僅僅應(yīng)用在 UI 領(lǐng)域，甚至在各行各業(yè)都需要建立組件化，比如對(duì)于一些時(shí)效性非常強(qiáng)的新聞產(chǎn)品，就需要針對(duì)突發(fā)事件內(nèi)容模板化，以期能第一時(shí)間發(fā)布；如果想追熱點(diǎn)，組件化能夠使得產(chǎn)品具備隨時(shí)跟進(jìn)熱點(diǎn)的能力，提升市場(chǎng)競(jìng)爭(zhēng)力等等。

組件化是一種思維模式，也是如今設(shè)計(jì)師必不可少的能力。通過(guò)組件庫(kù)提升效率能夠讓設(shè)計(jì)和開發(fā)有更多的時(shí)間去打磨產(chǎn)品細(xì)節(jié)，從而打造出對(duì)用戶更加友好的產(chǎn)品，賦能設(shè)計(jì)的價(jià)值。

文章來(lái)源：優(yōu)設(shè)網(wǎng)      作者：騰訊ISUX

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)