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

在設計系統中，大家最熟悉、最常用的應該就是設計組件了，它包括文字、圖標、按鈕、輸入框、表單…等一系列構成界面的小元素，而這些小元素的結合體就是筆者要講的組件庫。

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

一、組件庫的基礎知識

1. 為什么需要組件庫

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

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

2. 什么是組件庫

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

組件庫是一個強大的工具庫，方便設計師隨時調用，對其中一個元素的修改都會將這個已調用過的組件同步更新，非常利于團隊之間協作，它通過清晰、標準化的引導幫助設計師和研發高效一致的創建大量應用，確保了用戶體驗的一致性。

3. 結合原子方法論

在2013年，前端開發工程師 Brad Forst 在《Atomic Design》一書中提到：“化學世界中，所有的物質都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成宇宙萬物”。Brad Forst認為，設計組件應該由原子、分子、組織、模版、界面5個內容層面構成，最終構建成一張完整的產品界面。

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

關于原子方法論，這里只做簡單了解，后續會單獨出詳細的文章。

二、組件庫的作用

1. 保持一致性

在一個產品中，每個業務都要基于不同的場景去傳達信息，多樣化的場景在設計表現上會有所不同，有了組件庫的約束，就能讓團隊在既定的框架內按照統一的規范做設計，確保了輸出質量，給用戶帶來一致性的體驗。

2. 新人低成本

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

3. 提升團隊效率

對設計師，當產品中有多個頁面使用到相同的元素或組件時，可從組件庫直接調用，減少重復性設計。對于某個組件有統一修改的需求，只要在組件庫單獨修改，已共用的組件即可同步更新，實現效率的飛升。

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

4. 穩固品牌形象

品牌基因的部分板塊如顏色、字體、圖標風格…等都屬于組件庫的一部分，一致性的視覺樣式能保持設計風格的統一，給用戶帶來統一的品牌印象，讓其更好的記住這個產品。

5. 遵守用戶習慣

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

三、元素組件的構成

1. 顏色

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

2. 文字

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

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

3. 圖標

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

4. 基礎組件

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

四、組件庫構建思維

1. 理解產品結構

理解產品結構可以幫助設計師快速構建組件庫的基本框架，以此為基礎對組件作出分類及權重排序。

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

2. 組件整理歸類

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

原生組件：系統本省自帶的組件，例如按鈕、彈窗、導航欄等。

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

自定義組件：忽略系統本身的組件，設計出具備產品特性的任何組件，如商品列表等。

封裝組件：根據產品使用常見，進行組合封裝的常用復雜組件，如日歷組件等。

3. 結構細分

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

4. 命名規則

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

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

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

五、常見問題及注意事項

1. 先易用、再復用

不管是多么復雜的產品，呈現給用戶的永遠都是優秀的界面和體驗設計，而背后則是邏輯復雜的的無數行代碼。組件也是一樣，不要因為有組件庫的存在就萌生偷懶的想法，毫無節制、退而求其次的高度復用，針對特殊場景，在符合產品易用性的前提下，有必要將已復用的組件解除關聯，適當的做加/減法，也不要盲目的求復雜度或簡約性，合適最好。

2. 不要過于糾結命名

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

3. 組件與創意的沖突

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

4. 利用間歇維護和更新

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

六、結語

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

組件庫的建立讓內部有了統一的標注，對團隊來說，工作效率得到顯著提升的同時，一致性也得到了保障，讓設計和開發將更多時間放在打磨產品細節上，實現設計向產品賦能。

從全局考慮，完成組件庫只不過才剛剛開始，我們一定要學會整體思考，持續優化和完善組件，讓組件庫始終處于最佳狀態，將作用發揮到最大。

組件/規范系列文章至此結束，后續將不再更新，全系列共24篇，內容較為基礎，歡迎初/中級設計師隨時預覽。