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