組件庫是設(shè)計系統(tǒng)中的一個重要分支，如何建立合適的組件庫呢？

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

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

首先思考一個問題，什么樣的情況下會需要建立組件庫呢？建立組件庫的目的是什么？帶著這兩個問題我們來看看下面的工作場景：

• 設(shè)計師：xxx把你之前的設(shè)計稿發(fā)我下，我要用里面的一個組件。
• 設(shè)計師：xxx為什么你的稿子里的顏色和我的不一致，到底應(yīng)該以哪個為主？？？
• 設(shè)計師：xxx為什么組件不統(tǒng)一？？？
• 設(shè)計師：多個稿子用到了同一個組件，想做修改但是工作量很大怎么辦呢?
• 產(chǎn)品經(jīng)理：這次需求跟上次沒有什么大的變化，很多組件都可以復(fù)用，為什么設(shè)計師需要那么多的時間？？？
• 開發(fā)小哥：為什么每次給的設(shè)計稿樣式，顏色，組件都不同，我又要寫新的樣式表進(jìn)去。
• ……

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

• 設(shè)計師的效率變低，設(shè)計稿可控性差，設(shè)計師缺少規(guī)范指導(dǎo)等;
• 設(shè)計師以及開發(fā)者團(tuán)隊協(xié)作效率低，問題多等；
• 開發(fā)者抱怨開發(fā)工作量增加，覺得設(shè)計師不專業(yè)等；
• 產(chǎn)品經(jīng)理抱怨設(shè)計師進(jìn)度太慢，等等一系列問題；
• ……

分析問題

這些問題會讓人頭大，上面的問題我們可以通過建立適合的組件庫來解決（因為文章標(biāo)題已經(jīng)告知了答案，所以不做過多分析）。那么如何建立組件庫呢，我們通過參考多個大廠的設(shè)計組件庫先來看看他們的差別：

例如IBM Carbon 的組件庫有 32 個組件，Element 有 11 個，UWP有12個等等。然而看完之后還是一臉懵逼。到底有多少個組件才算是一個完整的、成熟的組件庫呢？組件太少，沒存在的必要。組件太多又會造成設(shè)計系統(tǒng)龐大繁雜，不利于擴(kuò)展維護(hù)以及多方協(xié)作。

那么一個組件庫到底有組件多少對的呢？答案是：“合適”，庫里面的組件不能太多也不能太少。關(guān)于這一點《設(shè)計系統(tǒng)的組件庫，究竟是應(yīng)該大而全，還是小而美？》這篇文章可以給你詳細(xì)的解答，在此就不做過多贅述。

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

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

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

解決問題

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

顏色：

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

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

下面我們在看看她們Symbol里面是怎么樣的：

需要注意幾個重要的點：

1. 組件庫本身就是一個Sketch文件，但是組件一定要使用Symbol來制作（很多設(shè)計師并不用Symbol），重點 重點 重點，不然組件是不可用的；
2. 組件命名以及排列要規(guī)則有序，方便小伙伴們查找對應(yīng)的組件；
3. 一定要考慮到響應(yīng)式解決方案，這會用到另一個小知識，在列表模塊會詳細(xì)解釋；
4. 組件之間的元素是可以互相替換的，例如按鈕的顏色，文字顏色都可以根據(jù)場景不同選擇對應(yīng)的方案，圖標(biāo)可以根據(jù)場景替換對應(yīng)的顏色或者其他圖標(biāo)等等，這個在按鈕模塊會提到。

列表：

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

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

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

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

需要注意幾個重要的點：

1. 對Resizing功能不熟悉的同學(xué)可以多嘗試，找到最合適的設(shè)置；
2. 列表里面的文字，背景色以及圖標(biāo)建議都Symbol，這樣方便元素的調(diào)整以及替換提高使用靈活性；
3. 一定要考慮到響應(yīng)式解決方案；

文字：

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

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

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

需要注意幾個重要的點：

1. 因為文字的靈活度極高，所以不是所有文字都有適合做成組件?？梢栽诮M件庫里面做好最基本上的樣式展示，方便團(tuán)隊成員查閱，然后在自己的文件內(nèi)設(shè)置文字樣式；
2. 樣式預(yù)設(shè)的功能不僅僅只可以設(shè)置文字樣式對圖層樣式等等一樣適用 快去解鎖新技能吧。

按鈕：

按鈕也是組件庫基本的組件之一，但是按鈕的顏色、大小在不同的場景下會不一樣，例如下圖：

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

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

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

又或者是這樣的：

在Symbol里面是這樣的：

又或者是這樣：

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

意見收集

通過上面的內(nèi)容的講解，一個設(shè)計組件庫基本已經(jīng)建立完成了，那么到底是否適合產(chǎn)品使用呢，我們還需要內(nèi)部進(jìn)一步討論，聽取各方反饋意見，進(jìn)行增刪改查，然后就可以正式投入使用啦。這里可以使用內(nèi)部網(wǎng)盤，外部網(wǎng)盤等同步工具進(jìn)行設(shè)計組件庫同步方便小伙伴們云端調(diào)用。如果有小伙伴不知道怎么做呢可以看我另一篇文章《想法結(jié)合工具，讓你的效率翻十倍》，或者私信我。

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

持續(xù)更新

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

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

總結(jié)

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

希望這篇文章對你有幫助??????

作者：Kane_D|?公眾號：小凱的設(shè)計筆記（ID：YXS_Design）

本文由Kane_D原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議