能快速提高團隊生產力的元件庫，如何從零開始構建？

前段時間京東 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 官方對響應式佈局的說明： http://www.sketch.com/docs/layer-basics/#fix-size

與響應式佈局不同的是智慧佈局是針對元件進行設定的，當變數是元件內的元素時可針對元件進行智慧佈局，而當變數是元件時可對元件進行響應式佈局。在建立元件或進入母版之後可選擇對元件進行智慧佈局設定，當元件設定了智慧佈局以後，更改元件中的元素或控制元件將自動調整元件的大小。

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

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

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

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

元件庫使用

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

新增元件庫：可以通過首選項-元件庫-新增元件庫的方式將搭建完成的 Sketch 檔案匯入，之後就可以在 Sketch 找到對應的元件庫直接進行拖拽使用。

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

元件庫管理

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

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

結語

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

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

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