組件化設計我想大家都不陌生，最近看了很多組件化相關的文章里有一句話“分子是由原子組成的，分子分成原子，原子也可以重新組合成新的分子”。這是2016年，由布拉德·弗羅斯特（Brad Frost）提出的“原子設計”方法論，這也奠定了設計系統組件化的基礎。
其實原子設計不難理解，就是把UI界面的單個元素理解成化學里的單個原子，這些原子可以通過不同的組合方式，組成分子組件，繼而組成新的界面。
如果想更深的了解“原子設計”方法論，可以通過閱讀下面原文鏈接來真正的理解設計系統是如何構成的，提高組件化思維。
atomicdesign.bradfrost.com/table-of-contents/
運用組件化有什么好處呢？試想一下，在快速發展的今天，市場變化如此之快，很多公司就需要快速的構建和迭代產品。在保持交互統一和視覺統一的情況下，構建更快可擴展的產品是企業成功不可缺失的一部分。
說直白一點，組件化對我們設計而言，可以保持產品視覺的高度統一，不管是創建新的界面，還是給界面換膚，都是可以高效完成的。
對開發而言，開發人員可以把設計組件的單個元素整理成一個庫，如果需要創建新的界面，開發只要調用之前寫好的組件就可以了，快速準確而且方便修改。
對交互而言，基本所有的交互狀態都在組件庫里已經提前準備好，比如按鈕的各種狀態，文字的狀態，提示框的展示形式等等。
目前Skech的Symbol功能仍是創建組件化的利器，Figma和XD也很強勢，Figma大家可以提前了解，國外很多大公司都在用了。
下面到了福利環節，小胖搜集了幾個比較好的組件庫網站，我們可以通過研究學習好的組件化模版，運用到自己的工作中去。
1. ant.design/index-cn?
一個服務于企業級產品的設計體系，國內最好的設計系統沒有之一?—— Ant Design。通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。
2. eva.design
強烈推薦！EVA基于原子設計原則，所有的組件都基于共享樣式的元素構成，可以自定義但又能保持統一。
3. fusion.design
阿里推出的一個適合設計、技術共同使用的設計規范框架。基本目的也是為了讓設計師在一個標準框架內設計界面，同時也提供了Sketch插件，讓設計的組件直接轉化為代碼，技術直接調用。
4. qmuiteam.com
互聯網設計怎么能少的了騰訊呢？QMUI，騰訊出品，分為Web、iOS、安卓三個端，都有相應的dome下載安裝，設計師可以下載安卓和iOS應用，經常看看里面的組件，熟悉后，和技術的協作會更有效率。
5.?taro-ui.aotu.io
Taro UI，一套基于 Taro 框架開發的多端 UI 組件庫，京東用戶體驗設計部出品。
6. element.eleme.cn/#/zh-CN
餓了么出品，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫，很適合開發后臺產品。
7.?designsystemsrepo.com
如果覺得上面的設計系統看不夠，那么這個網站就王炸了！集合很多設計系統的組件庫，希望你可以好好的研究組件化設計，會對我們的高效設計提供幫助。
最后，小胖自己在這里也特意整理了一份組件化的源文件，如果需要的話，可以關注公眾號“高效設計筆記”，回復 “UI kit” 領取。
