前段時間京東 APP 進行了全新的 9.0 產品升級，借助這次升級，我們對京東設計體系中的組件庫進行了重新整理和制作。接下來就以實際案例跟大家分享組件庫構建的邏輯和思路，希望能給大家帶來一些思考和幫助。

什么是組件庫？

在開始之前，我們先來看下什么是組件庫？

組件庫是將界面設計中具有標準規范的基礎元素和重復出現的控件進行歸納整理，通過對元素、控件進行命名和排列組合，最終形成一個可快速復用，便捷維護的組件庫。

對比設計規范來說，組件庫更像是一個強大的工具庫，是保證團隊協作一致性的基礎，而設計規范更像是一份說明文檔，是我們設計過程中的指導規則。

組件庫本質上是一個普通的 Sketch 文件，其中的元素和控件可以被其他 Sketch 文件調用，如果編輯了組件庫當中的元素或控件，那么調用了該組件庫的其他 Sketch 文件也可以進行同步更新，并且通過組件分離功能也可單獨對樣式進行調整，非常利于團隊協作。

Material Design 設計組件庫

Apple Design 設計組件庫

組件庫的價值

組件庫作為設計系統的一部分，在產品設計過程中設計師可直接調取，組合構建出新的頁面，通過組件庫帶來的價值主要體現在三個維度：

1. 一致性

對于一個含有多業務系統的大型復雜產品，每個業務形態都是基于不同的場景去傳達，因為場景的多樣性，在設計表現上就會催生出不同的樣式。而當我們使用統一的設計模式和組件庫，能夠在保持基礎體驗一致的同時，針對業務特性做差異化設計，給用戶帶來一致體驗和品牌感知。在團隊中有新成員加入時，也能夠快速上手工作。

2. 效率

設計效率：一個產品內許多頁面或模塊會使用到相同的元素和組件，通過組件庫的調用能夠減少重復性設計時間。當組件設計細節有改動時，只需要改動組件庫，所有共用組件庫的頁面即可實時響應。針對新的業務線也能夠快速進行頁面搭建，實現設計效率的提升。

產研效率：通過組件庫搭建的設計框架能夠快速移植到新的業務場景中，減少設計和產品之間的溝通成本。將組件庫封裝為代碼庫，減少冗余，優化性能，提升開發效率。

3. 協同

互聯網產品是漸進式迭代，每一次迭代都會以業務形態和用戶內容的發展去優化，組件庫能夠隨著業務發展不斷的優化和完善，在不同的需求和場景中也能夠靈活支撐頁面內容進行延展和擴充，從而實現全鏈路、多場景的高效協同。

原子理論構建

原子理論為構建組件庫提供了清晰的方式，最早是由國外工程師 Brad Frost 提出的，他從化學元素周期表中得到啟發，原子組合構成分子，分子組合構成有機物。

2013 年 Brad Frost 將這個概念應用到界面設計中，形成一套設計方法論。利用這種從最原始化的元素，逐層構筑更高級別的組織，層層遞進的思路作為構建組件庫的理論指導。從元素到組件，設計師從底層開始思考，對整個設計會有更清晰的理解。

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

原子是物質的基礎組成部分，是構成界面的最小顆粒度元素，例如：文字、顏色、圖標等。

分子由原子排列組合而成，在界面中可以理解為簡單的 UI 組件，例如：一個按鈕由文字和顏色兩個基礎元素組成。

組織是由原子及分子組成的相對復雜的組織，在界面中理解為相對復雜的組件，例如導航欄、標簽欄、工具欄、通知欄、彈窗等。

原子、分子、組織排列組合構成了模板，模版可以理解為未填充內容及圖片的框架圖，通過模版基本可以看到一個產品的形態。

頁面是模板的具體實例，將實際內容（圖片、文字等）填充進模版后形成頁面。

命名方式

合理的命名會讓整個組件庫結構清晰易懂，實際使用時能夠幫助我們快速定位和調用。在開始搭建組件庫之前，我們先來了解下 Sketch 組件的命名邏輯：

在 Sketch 的組件庫中「/」符號表示層級結構，Sketch 會識別到該符號，并自動生成相應的結構目錄。例如一個組件的命名可以用：一級分類 / 二級分類 / 三級分類 ，命名依次是從大到小。

此處以導航欄為例，導航欄命名為「導航欄/灰色/訂單詳情」；工具欄命名為「工具欄/白色/購物車」。

組件庫搭建

參照原子理論的思路，我們從最為基礎和核心的 UI 元素入手，包括文字、顏色、圖標。這些元素將在整個設計系統內被使用到，所有「原子、分子、組織等」級別的 UI 元素也正是由這些原始元素所構成的。

1. 顏色樣式

在開始搭建時需要創建一個新的 Sketch 文件，來作為組件庫的源文件。

我們首先要對全局所用到的各類顏色進行定義，一般而言，一個產品的顏色體系會包含：灰階、主色、輔助色盤、漸變色等。接下來根據顏色分類，將不同分類的顏色樣式逐一羅列出來。

羅列完成之后開始進行創建顏色樣式，選中需要創建樣式的圖層后，點擊 Sketch 右側面板中的外觀-創建，樣式命名按照「顏色/分類名稱/顏色屬性或編號」的層級結構命名，命名完成后該顏色樣式就已經創建完成。

2. 文字樣式

同顏色樣式一樣，首先要對各類字體以及字號、字重、灰階等分類進行定義，并按照不同分類將文字樣式逐一羅列出來。

羅列完成之后開始進行創建文字樣式，選中需要創建樣式的文字后，點擊 Sketch 右側面板中的外觀-創建，樣式命名按照「字體/字號/字重/灰階」的層級結構命名，命名完成后該文字樣式就已經創建完成。

Sketch 對樣式的定義分為圖形樣式和文字樣式，圖形屬性包含顏色、描邊、投影等。按照同樣的處理方式可以將投影、描邊等樣式添加到樣式庫。

3. 圖標控件

圖標創建前需要先將圖標放置在對應的柵格框內并編組，這里要注意需要將圖標轉曲，否則圖標將不能添加顏色樣式。轉曲后從定義好的顏色樣式中選擇常用的顏色，這種嵌套顏色樣式的方式，有利于圖標在使用的過程中隨時可以切換顏色。

顏色嵌套完成后，在工具欄中點擊創建控件，按照結構化的命名方式對圖標進行命名，接下來將圖標按分類依次創建為控件。

4. 基礎組件

在開始創建基礎組件之前我們先來了解一下 Sketch 響應式布局和智能布局的一些設置。

在 Sketch 右側屬性面板中的尺寸調整中可以看到兩個調整的設置和預覽，第一個從圖標可以看出分別是固左、固右、固頂、固底，第二個分別是固高、固寬。

具體我們稍作下解釋，當一個元素設置固右、固寬后，執行左右拉伸操作時設置的元素就會有右對齊的適配效果，當一個元素設置了固頂、固底后，執行上下拉伸操作時設置的元素就會有固定間距的適配效果。

需要注意的是響應式屬性的設置只會編組內生效，在嵌套組件的過程中運用響應式布局設置，就可以使組件更加的靈活易用。

這里附上 Sketch 官方對響應式布局的說明： https://www.sketch.com/docs/layer-basics/#fix-size

與響應式布局不同的是智能布局是針對組件進行設置的，當變量是組件內的元素時可針對組件進行智能布局，而當變量是組件時可對組件進行響應式布局。在創建組件或進入母版之后可選擇對組件進行智能布局設置，當組件設置了智能布局以后，更改組件中的元素或控件將自動調整組件的大小。

智能布局與響應式布局類似，也很好理解，當對組件設置了水平居中布局后，修改元素尺寸，組件會有固定間距，從中間向兩側拉伸的效果，當組件設置了從左往右布局，組件會有固定間距，左側固定，向右側拉伸的效果。

參考原子理論中對分子、組織的拆分，組件搭建的過程就是將拆分后的原子進行逐層嵌套為分子，再將分子組合嵌套為組織。例如，導航欄可以拆分為狀態欄、左組合、中組合、右組合這四個分子，每個分子可以獨立替換樣式并隨意組合。

按照如上的搭建思路，我們可以將各個獨立的模塊/組織拆分為分子/原子，并進行細化、整合。然后根據基礎組件，業務組件，設計傳達組件，常用模塊這幾個類型將組件進行羅列和搭建，通過小顆粒元素組合大顆粒元素的逐層嵌套，最終實現組件庫的初步創建。組件庫分類可參考：

具體的組件分類需根據產品類型具體定義

組件庫使用

組件庫搭建完成后，接下來就是分發給團隊成員使用了。應用的時候其實用到的是組件的變量搭配，根據具體場景和業務分析使用。

添加組件庫：可以通過首選項-組件庫-添加組件庫的方式將搭建完成的 Sketch 文件導入，之后就可以在 Sketch 找到對應的組件庫直接進行拖拽使用。

共享組件庫：團隊內可以使用 Sketch Cloud、Dropbox、Google 云盤或 Mac 共享等多種方式來同步組件庫文件，文件有更新團隊內的成員便會收到更新提示，（Sketch 工具欄右上角）點擊后可以預覽更新內容，然后下載替換舊版本即可。這里需要注意的是當組件庫本地化之后將不會再收到更新提示。

組件庫管理

在組件庫的構建過程中，我們需要整體思考，明確組件化的設計內容，不斷去優化和完善組件細節，包括設計原則、應用場景以及拓展性等。同時組件庫需要根據產品的發展不斷的迭代和創新，才能讓它的可持續性特性發揮至最大。

關于組件庫的維護和管理，可以從一致性符合度、復用率、拓展性等多個方面考量組件的入庫和剔除標準，這里附上一份簡單的組件庫管理機制供大家參考。（圖片較大，請在附件下載）

結語

從設計規范到組件庫，再到最終界面設計和還原，通過組件庫的建立，設計產出有了統一標準，開發迭代的效率也得到顯著提升，同時設計師可以更專注于深耕體驗和細節，實現設計向產品賦能。

以上是個人在參與設計體系構建過程中的一些經驗總結，不足之處請多包涵，同時篇幅有限，關于組件庫的內容無法一次詳盡，歡迎大家一起討論更多標準化設計體系的相關內容。

歡迎關注作者微信公眾號：「UX實驗室」