組件庫(kù)是設(shè)計(jì)系統(tǒng)里的一個(gè)重要分支，我們應(yīng)該不會(huì)陌生。一個(gè)合適的組件庫(kù)可以幫助設(shè)計(jì)師和開(kāi)發(fā)者提高工作效率且讓產(chǎn)品的可用性更高、風(fēng)格更統(tǒng)一等等，那么今天我們就來(lái)聊聊應(yīng)該如何建立適合的組件庫(kù)。

發(fā)現(xiàn)問(wèn)題

首先思考一個(gè)問(wèn)題，什么樣的情況下會(huì)需要建立組件庫(kù)呢？建立組件庫(kù)的目的是什么？帶著這兩個(gè)問(wèn)題我們來(lái)看看下面的工作場(chǎng)景：

設(shè)計(jì)師：xxx把你之前的設(shè)計(jì)稿發(fā)我下，我要用里面的一個(gè)組件。

設(shè)計(jì)師：xxx為什么你的稿子里的顏色和我的不一致，到底應(yīng)該以哪個(gè)為主？？？

設(shè)計(jì)師：xxx為什么組件不統(tǒng)一？？？

設(shè)計(jì)師：多個(gè)稿子用到了同一個(gè)組件，想做修改但是工作量很大怎么辦呢?

產(chǎn)品經(jīng)理：這次需求跟上次沒(méi)有什么大的變化，很多組件都可以復(fù)用，為什么設(shè)計(jì)師需要那么多的時(shí)間？？？

開(kāi)發(fā)小哥：為什么每次給的設(shè)計(jì)稿樣式，顏色，組件都不同，我又要寫(xiě)新的樣式表進(jìn)去。

......

想必上面的場(chǎng)景我們很多同學(xué)都很熟悉，是我們以前或現(xiàn)在正經(jīng)歷著的，通過(guò)上面的場(chǎng)景我們不難總結(jié)出一些問(wèn)題來(lái)，例如：

設(shè)計(jì)師的效率變低，設(shè)計(jì)稿可控性差，設(shè)計(jì)師缺少規(guī)范指導(dǎo)等;

設(shè)計(jì)師以及開(kāi)發(fā)者團(tuán)隊(duì)協(xié)作效率低，問(wèn)題多等；

開(kāi)發(fā)者抱怨開(kāi)發(fā)工作量增加，覺(jué)得設(shè)計(jì)師不專業(yè)等；

產(chǎn)品經(jīng)理抱怨設(shè)計(jì)師進(jìn)度太慢，等等一系列問(wèn)題；

......

分析問(wèn)題

這些問(wèn)題會(huì)讓人頭大，上面的問(wèn)題我們可以通過(guò)建立適合的組件庫(kù)來(lái)解決（因?yàn)槲恼聵?biāo)題已經(jīng)告知了答案，所以不做過(guò)多分析）。那么如何建立組件庫(kù)呢，我們通過(guò)參考多個(gè)大廠的設(shè)計(jì)組件庫(kù)先來(lái)看看他們的差別：

例如IBM Carbon 的組件庫(kù)有 32 個(gè)組件，Element 有 11 個(gè)，UWP有12個(gè)等等。然而看完之后還是一臉懵逼。到底有多少個(gè)組件才算是一個(gè)完整的、成熟的組件庫(kù)呢？組件太少，沒(méi)存在的必要。組件太多又會(huì)造成設(shè)計(jì)系統(tǒng)龐大繁雜，不利于擴(kuò)展維護(hù)以及多方協(xié)作。那么一個(gè)組件庫(kù)到底有組件多少對(duì)的呢？答案是：“合適”，庫(kù)里面的組件不能太多也不能太少。

那合適的組件庫(kù)是什么樣的呢？這個(gè)問(wèn)題就像找對(duì)象一樣，每個(gè)人的要求都不盡相同，但是有一些基本的要求是必不可少的，例如做人做事要實(shí)在、有包容心、有孝心、懂得尊老愛(ài)幼、為人正派、有愛(ài)心等等。

同理，組件庫(kù)也有一些最基本的要求，例如組件使用率要高、擴(kuò)展性要高、方便團(tuán)隊(duì)設(shè)計(jì)師協(xié)作、風(fēng)格以及命名要統(tǒng)一、以及要輕量化等等，所以不用太糾結(jié)，適合你自己的就是最好的。

可能很多小伙伴還是一頭霧水還是不知怎么樣做，如果遇到這樣的情況呢告訴你們最簡(jiǎn)單的辦法，那就是從最小的、最常用的組件入手，然后快速征集意見(jiàn)更新，然后逐步完善起來(lái)。

解決問(wèn)題

我們先來(lái)歸納下常規(guī)的組件庫(kù)里面都會(huì)有那些常用的組件存在：顏色、列表、文字、圖標(biāo)、彈層、按鈕等等，這些最基本的都是組件庫(kù)必不可少的組成部分。我們通過(guò)Sketch的Symbol功能進(jìn)行組件設(shè)計(jì)，利用Libraies進(jìn)行團(tuán)隊(duì)協(xié)作。下面我針對(duì)幾個(gè)最基本的組件模塊教大家如何設(shè)計(jì)組件庫(kù)：

顏色：

顏色就是產(chǎn)品的氣質(zhì)，賦予什么樣的色彩就會(huì)傳達(dá)出什么樣的氣質(zhì)，一般來(lái)說(shuō)每個(gè)產(chǎn)品會(huì)有一種主色、3-5個(gè)輔助色、再加上文字的顏色 、背景色、分割線顏色等構(gòu)成產(chǎn)品的設(shè)計(jì)系統(tǒng)。

上圖就是組件庫(kù)內(nèi)的顏色模塊，是不是感覺(jué)和平時(shí)的設(shè)計(jì)文件差不多，其實(shí)它就是一個(gè)普通的Sketch文件，跟日常的設(shè)計(jì)稿沒(méi)有區(qū)別。

下面我們?cè)诳纯此齻僑ymbol里面是怎么樣的：

需要注意幾個(gè)重要的點(diǎn)：

1、組件庫(kù)本身就是一個(gè)Sketch文件，但是組件一定要使用Symbol來(lái)制作（很多設(shè)計(jì)師并不用Symbol），重點(diǎn) ?重點(diǎn) ?重點(diǎn)，不然組件是不可用的；

2、組件命名以及排列要規(guī)則有序，方便小伙伴們查找對(duì)應(yīng)的組件；

3、一定要考慮到響應(yīng)式解決方案，這會(huì)用到另一個(gè)小知識(shí)，在列表模塊會(huì)詳細(xì)解釋；

4、組件之間的元素是可以互相替換的，例如按鈕的顏色，文字顏色都可以根據(jù)場(chǎng)景不同選擇對(duì)應(yīng)的方案，圖標(biāo)可以根據(jù)場(chǎng)景替換對(duì)應(yīng)的顏色或者其他圖標(biāo)等等，這個(gè)在按鈕模塊會(huì)提到。

列表：

列表基本上應(yīng)該是所有產(chǎn)品里面最常用的組件之一了，它的使用場(chǎng)景是多的，它當(dāng)然必不可少。

列表組件在Symbols里面的呈現(xiàn)是這樣的：

在建立列表組件的時(shí)候我們要充分考慮使用場(chǎng)景，列表的使用場(chǎng)景太豐富。還要考慮響應(yīng)式的方案，因?yàn)橐粋€(gè)列表可能在ios端 、安卓端、 ipad端以及其他端都會(huì)使用，所以在做列表的時(shí)候我們要用到Resizing這個(gè)功能，根據(jù)需要來(lái)進(jìn)行調(diào)整。

上圖的這三個(gè)列表用的都是一個(gè)控件，利用Resizing功能做響應(yīng)式調(diào)整，既方便又快捷可以提高很多工作效率。

需要注意幾個(gè)重要的點(diǎn)：

1、對(duì)Resizing功能不熟悉的同學(xué)可以多嘗試，找到最合適的設(shè)置；

2、列表里面的文字，背景色以及圖標(biāo)建議都Symbol，這樣方便元素的調(diào)整以及替換提高使用靈活性；

3、一定要考慮到響應(yīng)式解決方案；

文字：

在一個(gè)產(chǎn)品中我們會(huì)有很多的文字樣式，例如：大標(biāo)題、副標(biāo)題、正文、提示等等。

我們的文字樣式，可以利用Sketch的樣式預(yù)設(shè)功能針對(duì)每個(gè)文字類型創(chuàng)建樣式，后面我們就可以利用樣式表來(lái)快速調(diào)整文字。

通過(guò)建立文字樣式，可以快速的對(duì)單行，多行，各種文字進(jìn)行樣式調(diào)整，提高效率，增加文字樣式的統(tǒng)一性。我們還可以通過(guò)文字樣式管理，對(duì)文字樣式的預(yù)設(shè)進(jìn)行增加、刪除、改變等操作。

需要注意幾個(gè)重要的點(diǎn)：

1、因?yàn)槲淖值撵`活度極高，所以不是所有文字都有適合做成組件?？梢栽诮M件庫(kù)里面做好最基本上的樣式展示，方便團(tuán)隊(duì)成員查閱，然后在自己的文件內(nèi)設(shè)置文字樣式；

2、樣式預(yù)設(shè)的功能不僅僅只可以設(shè)置文字樣式對(duì)圖層樣式等等一樣適用 快去解鎖新技能吧。

按鈕：

按鈕也是組件庫(kù)基本的組件之一，但是按鈕的顏色、大小在不同的場(chǎng)景下會(huì)不一樣，例如下圖：

是按鈕組件中的一個(gè)基本樣式，通過(guò)Sketch我們可以根據(jù)自己的使用場(chǎng)景對(duì)顏色 ，文字內(nèi)容，大小 進(jìn)行變化。針對(duì)這些變化我們不用再單獨(dú)制作控件，只需用一種即可。

...

因?yàn)槠P(guān)系所以其他的組件就展開(kāi)講了，通過(guò)上面幾個(gè)組件模塊，我們應(yīng)該對(duì)組件庫(kù)的建立有了一些認(rèn)識(shí)。它并不復(fù)雜，只要根據(jù)產(chǎn)品的實(shí)際情況出發(fā)，然后考慮到幾個(gè)通用的點(diǎn)以及每個(gè)產(chǎn)品特殊的情況即可。當(dāng)我們把一些常用的組件建立好之后，組件庫(kù)的第一階段也就相應(yīng)的完成啦。

然后我們可以看到一個(gè)組件庫(kù)應(yīng)該是這樣的：

又或者是這樣的：

在Symbol里面是這樣的：

又或者是這樣：

附件里我為大家提供了30家大廠的組件庫(kù)源文件。我們也可以通過(guò)研究他們的組件庫(kù)，學(xué)習(xí)到他們的思考方式，組建方式等等，然后結(jié)合我們自己的實(shí)際情況出適合自己的組件庫(kù)。

意見(jiàn)收集

通過(guò)上面的內(nèi)容的講解，一個(gè)設(shè)計(jì)組件庫(kù)基本已經(jīng)建立完成了，那么到底是否適合產(chǎn)品使用呢，我們還需要內(nèi)部進(jìn)一步討論，聽(tīng)取各方反饋意見(jiàn)，進(jìn)行增刪改查，然后就可以正式投入使用啦。這里可以使用內(nèi)部網(wǎng)盤(pán)，外部網(wǎng)盤(pán)等同步工具進(jìn)行設(shè)計(jì)組件庫(kù)同步方便小伙伴們?cè)贫苏{(diào)用。

然而故事到這里并沒(méi)有結(jié)束，只要是人做的事情就一定會(huì)有Bug，即使當(dāng)時(shí)很多人討論過(guò)覺(jué)得很完善一點(diǎn)毛病沒(méi)有，隨著時(shí)間推移我們也會(huì)發(fā)現(xiàn)很多新的問(wèn)題出現(xiàn)，所以設(shè)計(jì)組件庫(kù)也需要像產(chǎn)品需求一樣迭代。所以及時(shí)總結(jié)各方的反饋意見(jiàn)就至關(guān)重要，可以定期對(duì)設(shè)計(jì)團(tuán)隊(duì)、產(chǎn)品經(jīng)理、開(kāi)發(fā)小哥等相關(guān)同事進(jìn)行意見(jiàn)訪談，問(wèn)問(wèn)他們現(xiàn)階段遇到的一些問(wèn)題以及有什么建議，然后把這些意見(jiàn)收集起來(lái)進(jìn)行篩選判斷，然后下次更新的時(shí)候就可以把這些問(wèn)題解決掉。

持續(xù)更新

根據(jù)上面的反饋意見(jiàn)我們要定期對(duì)設(shè)計(jì)組件庫(kù)進(jìn)行更新，但是越往后會(huì)發(fā)現(xiàn)新的問(wèn)題出現(xiàn)。例如組件庫(kù)越來(lái)越繁雜，組件越來(lái)越多，所以保持組件庫(kù)的輕量化就很必要了，隨著產(chǎn)品的更新迭代必然有些組件是會(huì)失去存在的意義的。這個(gè)時(shí)候我們就可以對(duì)這個(gè)組件按下刪除鍵了。

組件庫(kù)的更新也需要產(chǎn)品更新日志，這樣小伙伴們才知道每次更新了那些內(nèi)容，方便了解?？梢酝ㄟ^(guò)建立一個(gè)表格來(lái)進(jìn)行更新日志管理。

總結(jié)

以上是我對(duì)建立設(shè)計(jì)組件庫(kù)的一點(diǎn)小心得，希望對(duì)小伙伴們有幫助。在我們的日常工作中會(huì)遇到很多問(wèn)題，遇到問(wèn)題不要慌，分析問(wèn)題的本質(zhì)尋找最優(yōu)的解決方案。不積跬步無(wú)以至千里，當(dāng)不知道怎么做的時(shí)候就從最小的入手，由簡(jiǎn)單到復(fù)雜逐步遞進(jìn)。我們要學(xué)會(huì)舉一反三，看再多文章還是需要小伙伴們自己去實(shí)踐，設(shè)計(jì)師的核心價(jià)值就是解決問(wèn)題，所以加強(qiáng)我們解決問(wèn)題的能力至關(guān)重要。

希望這篇文章對(duì)你有幫助??????

文章作者：Kane_D