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