今天給大家分享一篇關(guān)于組件化設(shè)計的總結(jié)，希望可以帶給大家更多設(shè)計思考。

什么是組件化

???點擊獲取更多設(shè)計資源

https://js.design/community?category=design&source=bz&plan=bbqbz772

組建化是構(gòu)成界面的最基礎(chǔ)元素和重復(fù)出現(xiàn)控件的集合體，也就是常說的組件庫。通過對基礎(chǔ)元素和控件的規(guī)范命名與排列組合，最終形成一個可快速調(diào)用與便捷維護的組件庫。組件庫能夠避免在相同場景下重復(fù)造新樣式的問題，增強產(chǎn)品統(tǒng)一性。與設(shè)計規(guī)范文檔不同，組件庫是項目中龐大的基礎(chǔ)元素集合，是保證產(chǎn)品統(tǒng)一性的基礎(chǔ)。而設(shè)計規(guī)范文檔是對產(chǎn)品設(shè)計的指導(dǎo)規(guī)則。

組件庫的價值

組件庫作為設(shè)計系統(tǒng)的一部分，在產(chǎn)品設(shè)計過程中可方便設(shè)計師對基礎(chǔ)元素快速調(diào)用與組合，從而搭建出規(guī)范化的新功能頁面。在產(chǎn)品設(shè)計中組件庫的價值體現(xiàn)在這三個維度：

統(tǒng)一性

多人協(xié)作時，能夠保證在相同場景下的設(shè)計元素的高度統(tǒng)一，避免重復(fù)造新樣式的問題，也能夠降低開發(fā)人員的時間成本，提升開發(fā)效率。而針對不同的業(yè)務(wù)形態(tài)和業(yè)務(wù)場景可以在組件庫的基礎(chǔ)上結(jié)合業(yè)務(wù)特性去做差異化設(shè)計，從而給用戶帶來一致體驗和品牌感知。

高效性

在產(chǎn)品設(shè)計的過程中會有許多頁面或模塊會使用到相同的元素和組件，此時，通過組件庫可以快速調(diào)用所需要的設(shè)計元素和組件，減少重復(fù)設(shè)計的時間。通過組件庫能夠?qū)崿F(xiàn)修改即更新的快速同步，并且所有應(yīng)用該設(shè)計元素和組件的頁面也都會同步得到更新。搭建新頁面也能夠通過組件庫快速完成，從而提升設(shè)計師的工作效率。 對于產(chǎn)研來說組件庫的存在同樣能提升他們的工作效率，產(chǎn)品經(jīng)理可以通過組件庫衍生出來的元件庫快速搭建高質(zhì)量產(chǎn)品原型，減少低效繪制工作。研發(fā)人員可以通過對組件庫的封裝，在產(chǎn)品中全局調(diào)用，避免重復(fù)開發(fā)，提升工作效率。

延續(xù)與協(xié)同

在業(yè)務(wù)不斷發(fā)展的同時，組件庫也能夠伴隨業(yè)務(wù)的發(fā)展不斷優(yōu)化和完善，從而滿足業(yè)務(wù)需求和不同場景下的頁面內(nèi)容支持。并且即使團隊有成員離開或者加入，也能夠通過已有組件庫快速投入正常工作的狀態(tài)。

原子設(shè)計理論

什么是原子設(shè)計理論

原子理論最早是由國外工程師 Brad Frost 提出的，他從化學(xué)元素周期表中得到啟發(fā)，原子是最小的物體構(gòu)成部分，原子組合構(gòu)成分子，分子組合構(gòu)成有機物。 在2013年 Brad Frost 將這個概念應(yīng)用在界面設(shè)計中，逐步形成了一套設(shè)計方法論（原子理論）。在設(shè)計領(lǐng)域中原子指的是構(gòu)成界面的最小顆粒度的組成元素，這種逐層遞增組織構(gòu)建的思路作為構(gòu)建組件庫的理論指導(dǎo)。原子設(shè)計是一種思維模式，通過這種理論讓設(shè)計師對界面的組成結(jié)構(gòu)有更為清晰的認(rèn)識。

原子理論包含5個層面：原子、分子、組織、模塊、頁面。

原子

在界面設(shè)計中原子是構(gòu)成界面的最小顆粒度元素，是不可再分割的最小單位，例如：文字、顏色、圖標(biāo)等等。

分子

分子由原子排列組合構(gòu)成，映射在界面設(shè)計中表現(xiàn)為常見的UI組件，例如：按鈕、微標(biāo)、復(fù)選框等由少量不可拆分的基礎(chǔ)元素構(gòu)成。

組織

組織是由原子和分子組成的一個相對復(fù)雜的集合體，在界面中體現(xiàn)為相對復(fù)雜的UI組件，例如：導(dǎo)航欄、標(biāo)簽欄、彈窗等由較多不可拆分的基礎(chǔ)元素組成。

模塊

模塊是由原子、分子和組織構(gòu)成，模版可以理解為沒有內(nèi)容填充的產(chǎn)品基礎(chǔ)框架圖，也就是產(chǎn)品原型圖。

頁面

頁面是在模版的基礎(chǔ)上對已有框架的細節(jié)補充與優(yōu)化，也就是視覺效果設(shè)計，最終形成完整的頁面。例如：產(chǎn)品首頁、二級頁面等等。

以原子理論為支撐的組件庫

Ant Design

Ant Design 是由螞蟻集團開發(fā)的一個龐大的組件庫，強大到已經(jīng)延展到了設(shè)計體系的維度。通過React對Ant Design組件庫進行封裝，前端可以非常方便的進行組件調(diào)用。

TDesgin

TDesgin 是由騰訊出品的企業(yè)級組件庫，和 Ant Design 一樣是一個全面且龐大的設(shè)計系統(tǒng)。其中包括Figma、XD、Axure、Sketch及其他平臺的組件庫資源。支持多種語言的快速調(diào)用大大提升了開發(fā)工程師的工作效率。

Arco Design

Arco Design 是由字節(jié)跳動UED推出的企業(yè)級設(shè)計系統(tǒng)。同樣包含了多種平臺的組件庫資源，并且支持多種語言的快速調(diào)用。更多內(nèi)容可以去官網(wǎng)查閱。

如何搭建組件庫

依據(jù)原子設(shè)計理論所提供的設(shè)計思路，我們可以將構(gòu)成界面并貫穿始終的最基礎(chǔ)元素剝離出來，例如：文字、圖標(biāo)、顏色。這些基礎(chǔ)元素在整個設(shè)計體系中都會被應(yīng)用到，是搭建界面的基石。 為了便于后續(xù)的組件調(diào)用，在組件搭建時要特別注意組件的命名規(guī)則，一般以總分的形式對其命名，例如：左側(cè)勾選/選擇/禁用，這樣就能一目了然的知道組件的狀態(tài)，并便于后期的維護與調(diào)用。

文字樣式

首先通過對產(chǎn)品中已經(jīng)使用或可能使用到的文字樣式進行統(tǒng)計，包括字重、行高和字號大小等信息，為了方便后續(xù)查看可以將這些信息全部羅列出來。

接下來通過選擇需要創(chuàng)建樣式的文本圖層，點擊即時設(shè)計右側(cè)面板中的創(chuàng)建樣式按鈕，并進行重命名，因為一級文字包含2種不同的自重，所以可以利用“/”進行內(nèi)容細分，例如：“一級文字/加粗”，全部創(chuàng)建好之后在即時設(shè)計右側(cè)面板中就可以看到文本樣式的列表展示內(nèi)容了。

顏色樣式

顏色樣式同上述方式一樣，羅列出在產(chǎn)品中使用的顏色，并對其進行分類和命名。

圖標(biāo)控件

圖標(biāo)控件的制作在 Figma 中可以批量生成也可以單獨生成，為了讓圖標(biāo)在查閱時更加規(guī)整，我們可以使用柵格布局對圖標(biāo)進行有序排列，可以按照功能屬性排列，也可以按照你喜歡的方式排列。

組件

組件作為基礎(chǔ)元素組合的容器，需要適配不同的設(shè)計尺寸，以減少復(fù)雜又重復(fù)的工作量，此時，就需要我們對組件進行自適應(yīng)布局。

組件庫管理

組件庫搭建完成后，接下來就是對組件庫的維護與團隊成員之間的使用，在這個過程中會不斷的有新的業(yè)務(wù)需求產(chǎn)生新的組件和頁面，我們可以從產(chǎn)品一致性的符合程度、拓展性和復(fù)用率等方面來考量組件是否要加入已有組件庫中，以及作為是否剔除已有組件的準(zhǔn)則。

最后

通過構(gòu)建組件庫，不僅提升了設(shè)計師的工作效率，產(chǎn)研的效率也得到了顯著的提升。并且讓設(shè)計產(chǎn)出有了統(tǒng)一的對外輸出標(biāo)準(zhǔn)，也就是上面所說的統(tǒng)一性、高效性、延續(xù)與協(xié)同。同時設(shè)計師也能有更多的精力去專注體驗與細節(jié)的深耕，實現(xiàn)設(shè)計更多的商業(yè)價值。