組件庫是一個強大的提效工具，運用的號能夠最大程度地提高我們的工作效率，從設(shè)計規(guī)范到組件庫，再到開發(fā)還原，組件庫搭建了一座橋梁。本文將從組件庫的概率、重要性、構(gòu)建思維及構(gòu)建流程等多方面深度解析，希望對大家有所幫助。

在設(shè)計系統(tǒng)中，大家最熟悉、最常用的應(yīng)該就是設(shè)計組件了，它包括文字、圖標(biāo)、按鈕、輸入框、表單…等一系列構(gòu)成界面的小元素，而這些小元素的結(jié)合體就是筆者要講的組件庫。

合理使用組件庫能保持界面視覺效果的一致性，讓開發(fā)高度還原，還為業(yè)務(wù)帶來一致的設(shè)計語言，大大提高了團隊的工作效率。本文將從組件庫的概率、重要性、構(gòu)建思維及構(gòu)建流程等多方面深度解析，希望能幫到大家。

一、組件庫的基礎(chǔ)知識

1. 為什么需要組件庫

當(dāng)我們在設(shè)計某個界面的表單時，確定好輸入框的大小、描邊、色值等屬性后，并沒有形成可復(fù)用的組件，那么在后續(xù)其他界面中需要再次用到表單，就只能重新畫、或者找到之前已做好的界面拷貝，很容易疏忽數(shù)值、混淆屬性，出錯率極高。如果需要統(tǒng)一調(diào)整尺寸或色值，就要每個單獨修改，對于稍大點（上百或幾百個界面表單排查）的項目來說，重復(fù)無功的勞動簡直是一場災(zāi)難。

不難看出，一次性設(shè)計會將設(shè)計師淪為只忙于畫圖的工具人。若事先將已有組件形成組件庫直接調(diào)用，既能提高設(shè)計輸出效率、也能確保整體視覺效果的統(tǒng)一性，將省出來的時間更多投入到業(yè)務(wù)需求思考中，提升設(shè)計價值。

2. 什么是組件庫

組件庫是將界面中具有通用性的元素組件/控件進行歸納整理，形成統(tǒng)一規(guī)范的組件集合，以此達到快速復(fù)用、批量修改的目的。

組件庫是一個強大的工具庫，方便設(shè)計師隨時調(diào)用，對其中一個元素的修改都會將這個已調(diào)用過的組件同步更新，非常利于團隊之間協(xié)作，它通過清晰、標(biāo)準(zhǔn)化的引導(dǎo)幫助設(shè)計師和研發(fā)高效一致的創(chuàng)建大量應(yīng)用，確保了用戶體驗的一致性。

3. 結(jié)合原子方法論

在2013年，前端開發(fā)工程師 Brad Forst 在《Atomic Design》一書中提到：“化學(xué)世界中，所有的物質(zhì)都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機物，最終形成宇宙萬物”。Brad Forst認(rèn)為，設(shè)計組件應(yīng)該由原子、分子、組織、模版、界面5個內(nèi)容層面構(gòu)成，最終構(gòu)建成一張完整的產(chǎn)品界面。

• 原子：構(gòu)成界面的最基礎(chǔ)且不可再分的元素，可以是一種顏色、一種字體或一個圖標(biāo)等。
• 分子：由兩個或兩個以上的原子組合在一起、具有明確功能性的組件，如搜索框、表單、按鈕等。
• 組織：將多個不同的分子組合在一起，形成一個完整的功能模塊，例如不同的信息版塊區(qū)域。
• 模版：通過原子、分子、組織的相互關(guān)聯(lián)而得到的模版框架，如列表頁、詳情頁等。
• 頁面：在模版的基礎(chǔ)上提供真實的內(nèi)容并完善細(xì)節(jié)，最終形成完整的高保真界面。

關(guān)于原子方法論，這里只做簡單了解，后續(xù)會單獨出詳細(xì)的文章。

二、組件庫的作用

1. 保持一致性

在一個產(chǎn)品中，每個業(yè)務(wù)都要基于不同的場景去傳達信息，多樣化的場景在設(shè)計表現(xiàn)上會有所不同，有了組件庫的約束，就能讓團隊在既定的框架內(nèi)按照統(tǒng)一的規(guī)范做設(shè)計，確保了輸出質(zhì)量，給用戶帶來一致性的體驗。

2. 新人低成本

當(dāng)團隊中有新成員加入時，不管是初入職場的設(shè)計新人、還是經(jīng)驗豐富的設(shè)計老手，正式工作之前都需要花費一定的時間成本去了解項目的設(shè)計語言，而后才能跟上工作節(jié)奏，但有了成熟的組件庫作為設(shè)計參考，就能夠以最低的溝通成本、試錯成本實現(xiàn)快速上手。

3. 提升團隊效率

對設(shè)計師，當(dāng)產(chǎn)品中有多個頁面使用到相同的元素或組件時，可從組件庫直接調(diào)用，減少重復(fù)性設(shè)計。對于某個組件有統(tǒng)一修改的需求，只要在組件庫單獨修改，已共用的組件即可同步更新，實現(xiàn)效率的飛升。

對開發(fā)，可以將一些常用的組件樣式進行封裝，在任何頁面有需要時直接調(diào)用，減少冗余，優(yōu)化性能，既能降低不必要的工作量以及軟件包的體積，還能減少與設(shè)計之間的溝通，提升了開發(fā)效率，后期的維護也會更方便。

4. 穩(wěn)固品牌形象

品牌基因的部分板塊如顏色、字體、圖標(biāo)風(fēng)格…等都屬于組件庫的一部分，一致性的視覺樣式能保持設(shè)計風(fēng)格的統(tǒng)一，給用戶帶來統(tǒng)一的品牌印象，讓其更好的記住這個產(chǎn)品。

5. 遵守用戶習(xí)慣

盡量不要違背用戶的慣性思維，如綠色代表安全或通過、紅色代表錯誤或警告、看到放大鏡就想到搜索，除非合理的制造差異化或你的產(chǎn)品體量足以改變用戶，否則就做好承擔(dān)用戶試錯成本的損失。組件化設(shè)計能通過一致性的設(shè)計表現(xiàn)保持用戶固有的使用習(xí)慣，減少不必要的思考。

三、元素組件的構(gòu)成

1. 顏色

顏色作為產(chǎn)品設(shè)計風(fēng)格的基本元素，它能建立符合產(chǎn)品調(diào)性的視覺形象，并將界面中各信息層級關(guān)系梳理清晰，做到視覺上的平衡。首先我們需要按照功能屬性對需要用到的所有顏色進行定義，比如主體色、輔助色、中性色、功能色等，并以此提煉出漸變色和色階，然后將其分組分類命名，方便隨時調(diào)用。

2. 文字

文字樣式中主要包括字體、字號、字重和行高，針對不同的使用場景分別創(chuàng)建相應(yīng)的字號與字重，并給文字梯度和屬性的使用方式予以描述，用表格整理歸類，再加上對應(yīng)的使用說明。

其他如段間距、字距、縮進、對齊方式等屬性使用的較少，可根據(jù)實際情況而定，確定好使用頻率后再決定是否納入組件庫。

3. 圖標(biāo)

繪制圖標(biāo)時，需用keyline柵格來控制不同形狀的圖標(biāo)大小，完成后并將其轉(zhuǎn)曲（面性），再定義好常用的顏色，在后續(xù)的開發(fā)過程中，程序可根據(jù)高保真效果圖隨時切換顏色。

4. 基礎(chǔ)組件

參考上述提到的原子方法論，將各個獨立元素如原子、分子、組織形成各種組件，在將這些組件進行組合、逐層嵌套，精細(xì)化整理歸類，最終形成基礎(chǔ)組件的創(chuàng)建。例如按鈕、彈窗、表單、選項控件等。

四、組件庫構(gòu)建思維

1. 理解產(chǎn)品結(jié)構(gòu)

理解產(chǎn)品結(jié)構(gòu)可以幫助設(shè)計師快速構(gòu)建組件庫的基本框架，以此為基礎(chǔ)對組件作出分類及權(quán)重排序。

其次不同的業(yè)務(wù)屬性，對界面布局的影響也會很大，但相同業(yè)務(wù)的結(jié)構(gòu)布局基本大同小異，其組件復(fù)用性極高，并非設(shè)計師不想做差異化，而是在同行業(yè)中，相同的業(yè)務(wù)屬性對多數(shù)用戶來說已經(jīng)有了一個較為成熟的結(jié)構(gòu)布局，較大的變化會違背用戶常用習(xí)慣，從而導(dǎo)致用戶反感，得不償失，所以通過對產(chǎn)品結(jié)構(gòu)的了解，會將更多的差異化放在組件細(xì)節(jié)上，用戶接受程度會更高。

2. 組件整理歸類

在UI層面上，可以將組件分為原生組件、擴展組件、自定義組件、封裝組件四種，原生組件與擴展組件屬于系統(tǒng)（Android & iOS & 小程序）自帶，將其歸類為基礎(chǔ)組件，自定義組件和封裝組件與產(chǎn)品功能有較強的關(guān)聯(lián)性，因此成為屬性組件。明確兩種定義，能幫助我們合理規(guī)劃構(gòu)建組件庫的前期工作，也有利于后期調(diào)用。

原生組件：系統(tǒng)本省自帶的組件，例如按鈕、彈窗、導(dǎo)航欄等。

擴展組件：基于原生組件進行擴展，例如toast彈窗中加入圖標(biāo)、導(dǎo)航欄中增加功能入口等。

自定義組件：忽略系統(tǒng)本身的組件，設(shè)計出具備產(chǎn)品特性的任何組件，如商品列表等。

封裝組件：根據(jù)產(chǎn)品使用常見，進行組合封裝的常用復(fù)雜組件，如日歷組件等。

3. 結(jié)構(gòu)細(xì)分

結(jié)構(gòu)細(xì)分是將本身獨立的組件打散，拆分至單一元素的最小顆粒（原子），充分提高細(xì)小組件的復(fù)用率，需要修改時，獨立調(diào)整、全局響應(yīng)，而后再次整合重組，讓不同的模塊都可以交替變化。多次使用拆分、重組的方式，使最終呈現(xiàn)出來的組件樣式、數(shù)量成倍數(shù)增長。

4. 命名規(guī)則

合理的命名是整理和維護組件庫的重要環(huán)節(jié)之一，一方面使后續(xù)的維護更加井井有條，另一方面能卻確保已形成的組件便于設(shè)計索引與調(diào)用，如若沒有一套所謂「正確」的命名規(guī)則，即便構(gòu)建組件庫的人能信手拈來，但并不符合團隊中其他成員的使用習(xí)慣，無法快速調(diào)用，最終很難達成設(shè)計共識。

整理歸類后，每一類都包含若干組件，每個組件又有若干狀態(tài)，為了體現(xiàn)結(jié)構(gòu)層次，會在組件名稱中使用“/”（Sketch能自動識別“/”）符號分隔場景類別，并以此作為標(biāo)志逐級命名，如下：

• 按鈕/主操作/大按鈕/待激活
• 按鈕/主操作/小按鈕/可操作
• 表單/輸入框/初始狀態(tài)
• ……

五、常見問題及注意事項

1. 先易用、再復(fù)用

不管是多么復(fù)雜的產(chǎn)品，呈現(xiàn)給用戶的永遠(yuǎn)都是優(yōu)秀的界面和體驗設(shè)計，而背后則是邏輯復(fù)雜的的無數(shù)行代碼。組件也是一樣，不要因為有組件庫的存在就萌生偷懶的想法，毫無節(jié)制、退而求其次的高度復(fù)用，針對特殊場景，在符合產(chǎn)品易用性的前提下，有必要將已復(fù)用的組件解除關(guān)聯(lián)，適當(dāng)?shù)淖黾?減法，也不要盲目的求復(fù)雜度或簡約性，合適最好。

2. 不要過于糾結(jié)命名

在構(gòu)建組件庫的過程中，不要將過多的時間花費在組件命名上，筆者的建議是用一些通俗易懂且常用的名稱，怎么方便怎么來，類似按鈕、表單、圖標(biāo)、彈窗等這些術(shù)語，基本一聽就懂，沒必要絞盡腦汁去想一些唬人、高大上的專業(yè)名詞，畢竟組件庫不是你一個人在用。

3. 組件與創(chuàng)意的沖突

部分設(shè)計師覺得，有了組件庫的存在，感覺拼組件就能快速完成設(shè)計需求，不僅自己沒有進步還影響設(shè)計創(chuàng)意。其實不然，組件是為解決設(shè)計中遇到復(fù)用性高的重復(fù)性設(shè)計需求，如字體、配色、表單等，但在一些圖形、動效、背景及界面氛圍方面可以做出亮點，這樣既能保持常用組件的一致性，又能為用戶制造意外的驚喜，所以組件庫與設(shè)計創(chuàng)意并沒有實質(zhì)性的沖突。

4. 利用間歇維護和更新

眾做周知，項目是按照一個一個版本逐漸更新迭代的，我們可以利用每個版本之間的間隔時間去復(fù)盤之前的設(shè)計組件，不斷優(yōu)化和完善組件細(xì)節(jié)，進行更新維護，避免過于陳舊影響設(shè)計效果。

六、結(jié)語

組件庫是一個強大的提效工具，充分理解并合理運用能減少很多體力勞動，從設(shè)計規(guī)范到組件庫，再到最終的開發(fā)還原，為設(shè)計與開發(fā)之間搭起了一座新的橋梁。

組件庫的建立讓內(nèi)部有了統(tǒng)一的標(biāo)注，對團隊來說，工作效率得到顯著提升的同時，一致性也得到了保障，讓設(shè)計和開發(fā)將更多時間放在打磨產(chǎn)品細(xì)節(jié)上，實現(xiàn)設(shè)計向產(chǎn)品賦能。

從全局考慮，完成組件庫只不過才剛剛開始，我們一定要學(xué)會整體思考，持續(xù)優(yōu)化和完善組件，讓組件庫始終處于最佳狀態(tài)，將作用發(fā)揮到最大。

組件/規(guī)范系列文章至此結(jié)束，后續(xù)將不再更新，全系列共24篇，內(nèi)容較為基礎(chǔ)，歡迎初/中級設(shè)計師隨時預(yù)覽。