組件庫是設計系統(tǒng)中的一個重要分支，如何建立合適的組件庫呢？
組件庫是設計系統(tǒng)里的一個重要分支，我們應該不會陌生。一個合適的組件庫可以幫助設計師和開發(fā)者提高工作效率且讓產(chǎn)品的可用性更高、風格更統(tǒng)一等等，那么今天我們就來聊聊應該如何建立適合的組件庫。
發(fā)現(xiàn)問題
首先思考一個問題，什么樣的情況下會需要建立組件庫呢？建立組件庫的目的是什么？帶著這兩個問題我們來看看下面的工作場景：
想必上面的場景我們很多同學都很熟悉，是我們以前或現(xiàn)在正經(jīng)歷著的，通過上面的場景我們不難總結出一些問題來，例如：
分析問題
這些問題會讓人頭大，上面的問題我們可以通過建立適合的組件庫來解決（因為文章標題已經(jīng)告知了答案，所以不做過多分析）。那么如何建立組件庫呢，我們通過參考多個大廠的設計組件庫先來看看他們的差別：
例如IBM 的組件庫有 32 個組件，有 11 個多行多列表單元素是，UWP有12個等等。然而看完之后還是一臉懵逼。到底有多少個組件才算是一個完整的、成熟的組件庫呢？組件太少，沒存在的必要。組件太多又會造成設計系統(tǒng)龐大繁雜，不利于擴展維護以及多方協(xié)作。
那么一個組件庫到底有組件多少對的呢？答案是：“合適”，庫里面的組件不能太多也不能太少。關于這一點《設計系統(tǒng)的組件庫，究竟是應該大而全，還是小而美？》這篇文章可以給你詳細的解答，在此就不做過多贅述。
那合適的組件庫是什么樣的呢？這個問題就像找對象一樣，每個人的要求都不盡相同，但是有一些基本的要求是必不可少的，例如做人做事要實在、有包容心、有孝心、懂得尊老愛幼、為人正派、有愛心等等。
同理，組件庫也有一些最基本的要求，例如組件使用率要高、擴展性要高、方便團隊設計師協(xié)作、風格以及命名要統(tǒng)一、以及要輕量化等等，所以不用太糾結，適合你自己的就是最好的。
可能很多小伙伴還是一頭霧水還是不知怎么樣做，如果遇到這樣的情況呢告訴你們最簡單的辦法，那就是從最小的、最常用的組件入手，然后快速征集意見更新，然后逐步完善起來。
解決問題
我們先來歸納下常規(guī)的組件庫里面都會有那些常用的組件存在：顏色、列表、文字、圖標、彈層、按鈕等等，這些最基本的都是組件庫必不可少的組成部分。我們通過的功能進行組件設計，利用進行團隊協(xié)作。下面我針對幾個最基本的組件模塊教大家如何設計組件庫：
顏色：
顏色就是產(chǎn)品的氣質(zhì)，賦予什么樣的色彩就會傳達出什么樣的氣質(zhì)，一般來說每個產(chǎn)品會有一種主色、3-5個輔助色、再加上文字的顏色 、背景色、分割線顏色等構成產(chǎn)品的設計系統(tǒng)。
上圖就是組件庫內(nèi)的顏色模塊，是不是感覺和平時的設計文件差不多，其實它就是一個普通的文件，跟日常的設計稿沒有區(qū)別。
下面我們在看看她們里面是怎么樣的：
需要注意幾個重要的點：
組件庫本身就是一個文件，但是組件一定要使用來制作（很多設計師并不用），重點 重點 重點，不然組件是不可用的；組件命名以及排列要規(guī)則有序，方便小伙伴們查找對應的組件；一定要考慮到響應式解決方案，這會用到另一個小知識，在列表模塊會詳細解釋；組件之間的元素是可以互相替換的，例如按鈕的顏色，文字顏色都可以根據(jù)場景不同選擇對應的方案，圖標可以根據(jù)場景替換對應的顏色或者其他圖標等等，這個在按鈕模塊會提到。列表：
列表基本上應該是所有產(chǎn)品里面最常用的組件之一了，它的使用場景是多的，它當然必不可少。
列表組件在里面的呈現(xiàn)是這樣的：
在建立列表組件的時候我們要充分考慮使用場景，列表的使用場景太豐富。還要考慮響應式的方案，因為一個列表可能在ios端 、安卓端、 ipad端以及其他端都會使用，所以在做列表的時候我們要用到這個功能，根據(jù)需要來進行調(diào)整。
上圖的這三個列表用的都是一個控件，利用功能做響應式調(diào)整，既方便又快捷可以提高很多工作效率。
需要注意幾個重要的點：
對功能不熟悉的同學可以多嘗試，找到最合適的設置；列表里面的文字，背景色以及圖標建議都，這樣方便元素的調(diào)整以及替換提高使用靈活性；一定要考慮到響應式解決方案；文字：
在一個產(chǎn)品中我們會有很多的文字樣式，例如：大標題、副標題、正文、提示等等。
我們的文字樣式，可以利用的樣式預設功能針對每個文字類型創(chuàng)建樣式，后面我們就可以利用樣式表來快速調(diào)整文字。
通過建立文字樣式，可以快速的對單行，多行，各種文字進行樣式調(diào)整，提高效率，增加文字樣式的統(tǒng)一性。我們還可以通過文字樣式管理，對文字樣式的預設進行增加、刪除、改變等操作。
需要注意幾個重要的點：
因為文字的靈活度極高，所以不是所有文字都有適合做成組件。可以在組件庫里面做好最基本上的樣式展示，方便團隊成員查閱，然后在自己的文件內(nèi)設置文字樣式；樣式預設的功能不僅僅只可以設置文字樣式對圖層樣式等等一樣適用 快去解鎖新技能吧。按鈕：
按鈕也是組件庫基本的組件之一，但是按鈕的顏色、大小在不同的場景下會不一樣，例如下圖：
是按鈕組件中的一個基本樣式，通過我們可以根據(jù)自己的使用場景對顏色 ，文字內(nèi)容，大小 進行變化。針對這些變化我們不用再單獨制作控件，只需用一種即可。
因為篇幅關系所以其他的組件就展開講了，通過上面幾個組件模塊，我們應該對組件庫的建立有了一些認識。它并不復雜，只要根據(jù)產(chǎn)品的實際情況出發(fā)，然后考慮到幾個通用的點以及每個產(chǎn)品特殊的情況即可。當我們把一些常用的組件建立好之后，組件庫的第一階段也就相應的完成啦。
然后我們可以看到一個組件庫應該是這樣的：
又或者是這樣的：
在里面是這樣的：
又或者是這樣：
公眾號里我為大家提供了30家大廠的組件庫源文件。我們也可以通過研究他們的組件庫，學習到他們的思考方式，組建方式等等，然后結合我們自己的實際情況出適合自己的組件庫。
意見收集
通過上面的內(nèi)容的講解，一個設計組件庫基本已經(jīng)建立完成了，那么到底是否適合產(chǎn)品使用呢，我們還需要內(nèi)部進一步討論，聽取各方反饋意見，進行增刪改查，然后就可以正式投入使用啦。這里可以使用內(nèi)部網(wǎng)盤，外部網(wǎng)盤等同步工具進行設計組件庫同步方便小伙伴們云端調(diào)用。如果有小伙伴不知道怎么做呢可以看我另一篇文章《想法結合工具，讓你的效率翻十倍》，或者私信我。
然而故事到這里并沒有結束，只要是人做的事情就一定會有Bug，即使當時很多人討論過覺得很完善一點毛病沒有，隨著時間推移我們也會發(fā)現(xiàn)很多新的問題出現(xiàn)，所以設計組件庫也需要像產(chǎn)品需求一樣迭代。所以及時總結各方的反饋意見就至關重要，可以定期對設計團隊、產(chǎn)品經(jīng)理、開發(fā)小哥等相關同事進行意見訪談，問問他們現(xiàn)階段遇到的一些問題以及有什么建議，然后把這些意見收集起來進行篩選判斷，然后下次更新的時候就可以把這些問題解決掉。
持續(xù)更新
根據(jù)上面的反饋意見我們要定期對設計組件庫進行更新，但是越往后會發(fā)現(xiàn)新的問題出現(xiàn)。例如組件庫越來越繁雜，組件越來越多，所以保持組件庫的輕量化就很必要了，隨著產(chǎn)品的更新迭代必然有些組件是會失去存在的意義的。這個時候我們就可以對這個組件按下刪除鍵了。
組件庫的更新也需要產(chǎn)品更新日志，這樣小伙伴們才知道每次更新了那些內(nèi)容，方便了解。可以通過建立一個表格來進行更新日志管理。
總結
以上是我對建立設計組件庫的一點小心得，希望對小伙伴們有幫助。在我們的日常工作中會遇到很多問題，遇到問題不要慌，分析問題的本質(zhì)尋找最優(yōu)的解決方案。不積跬步無以至千里，當不知道怎么做的時候就從最小的入手，由簡單到復雜逐步遞進。我們要學會舉一反三多行多列表單元素是，看再多文章還是需要小伙伴們自己去實踐，設計師的核心價值就是解決問題，所以加強我們解決問題的能力至關重要。
希望這篇文章對你有幫助??????