在開始之前，我們先來看下什么是組件庫？
組件庫是將界面設計中具有標準規(guī)范的基礎元素和重復出現(xiàn)的控件進行歸納整理，通過對元素、控件進行命名和排列組合，最終形成一個可快速復用，便捷維護的組件庫。
對比設計規(guī)范來說，組件庫更像是一個強大的工具庫，是保證團隊協(xié)作一致性的基礎，而設計規(guī)范更像是一份說明文檔，是我們設計過程中的指導規(guī)則。
組件庫本質(zhì)上是一個普通的 Sketch 文件，其中的元素和控件可以被其他 Sketch 文件調(diào)用，如果編輯了組件庫當中的元素或控件，那么調(diào)用了該組件庫的其他 Sketch 文件也可以進行同步更新，并且通過組件分離功能也可單獨對樣式進行調(diào)整，非常利于團隊協(xié)作。
Material Design 設計組件庫
Apple Design 設計組件庫
組件庫作為設計系統(tǒng)的一部分，在產(chǎn)品設計過程中設計師可直接調(diào)取，組合構(gòu)建出新的頁面，通過組件庫帶來的價值主要體現(xiàn)在三個維度：
1. 一致性
對于一個含有多業(yè)務系統(tǒng)的大型復雜產(chǎn)品，每個業(yè)務形態(tài)都是基于不同的場景去傳達，因為場景的多樣性，在設計表現(xiàn)上就會催生出不同的樣式。而當我們使用統(tǒng)一的設計模式和組件庫，能夠在保持基礎體驗一致的同時，針對業(yè)務特性做差異化設計，給用戶帶來一致體驗和品牌感知。在團隊中有新成員加入時，也能夠快速上手工作。
2. 效率
設計效率：一個產(chǎn)品內(nèi)許多頁面或模塊會使用到相同的元素和組件，通過組件庫的調(diào)用能夠減少重復性設計時間。當組件設計細節(jié)有改動時，只需要改動組件庫，所有共用組件庫的頁面即可實時響應。針對新的業(yè)務線也能夠快速進行頁面搭建，實現(xiàn)設計效率的提升。
產(chǎn)研效率：通過組件庫搭建的設計框架能夠快速移植到新的業(yè)務場景中，減少設計和產(chǎn)品之間的溝通成本。將組件庫封裝為代碼庫，減少冗余，優(yōu)化性能，提升開發(fā)效率。
3. 協(xié)同
互聯(lián)網(wǎng)產(chǎn)品是漸進式迭代，每一次迭代都會以業(yè)務形態(tài)和用戶內(nèi)容的發(fā)展去優(yōu)化，組件庫能夠隨著業(yè)務發(fā)展不斷的優(yōu)化和完善，在不同的需求和場景中也能夠靈活支撐頁面內(nèi)容進行延展和擴充，從而實現(xiàn)全鏈路、多場景的高效協(xié)同。
原子理論為構(gòu)建組件庫提供了清晰的方式，最早是由國外工程師 Brad Frost 提出的，他從化學元素周期表中得到啟發(fā)，原子組合構(gòu)成分子，分子組合構(gòu)成有機物。
2013 年 Brad Frost 將這個概念應用到界面設計中，形成一套設計方法論。利用這種從最原始化的元素，逐層構(gòu)筑更高級別的組織，層層遞進的思路作為構(gòu)建組件庫的理論指導。從元素到組件，設計師從底層開始思考，對整個設計會有更清晰的理解。
原子理論包含 5 個層面：原子、分子、組織、模塊、頁面。
原子是物質(zhì)的基礎組成部分，是構(gòu)成界面的最小顆粒度元素，例如：文字、顏色、圖標等。
分子由原子排列組合而成，在界面中可以理解為簡單的 UI 組件，例如：一個按鈕由文字和顏色兩個基礎元素組成。
組織是由原子及分子組成的相對復雜的組織，在界面中理解為相對復雜的組件，例如導航欄、標簽欄、工具欄、通知欄、彈窗等。
原子、分子、組織排列組合構(gòu)成了模板，模版可以理解為未填充內(nèi)容及圖片的框架圖，通過模版基本可以看到一個產(chǎn)品的形態(tài)。
頁面是模板的具體實例，將實際內(nèi)容（圖片、文字等）填充進模版后形成頁面。
合理的命名會讓整個組件庫結(jié)構(gòu)清晰易懂，實際使用時能夠幫助我們快速定位和調(diào)用。在開始搭建組件庫之前，我們先來了解下 Sketch 組件的命名邏輯：
在 Sketch 的組件庫中「/」符號表示層級結(jié)構(gòu)，Sketch 會識別到該符號，并自動生成相應的結(jié)構(gòu)目錄。例如一個組件的命名可以用：一級分類 / 二級分類 / 三級分類 ，命名依次是從大到小。
此處以導航欄為例，導航欄命名為「導航欄/灰色/訂單詳情」；工具欄命名為「工具欄/白色/購物車」。
參照原子理論的思路，我們從最為基礎和核心的 UI 元素入手，包括文字、顏色、圖標。這些元素將在整個設計系統(tǒng)內(nèi)被使用到，所有「原子、分子、組織等」級別的 UI 元素也正是由這些原始元素所構(gòu)成的。
1. 顏色樣式
在開始搭建時需要創(chuàng)建一個新的 Sketch 文件，來作為組件庫的源文件。
我們首先要對全局所用到的各類顏色進行定義，一般而言，一個產(chǎn)品的顏色體系會包含：灰階、主色、輔助色盤、漸變色等。接下來根據(jù)顏色分類，將不同分類的顏色樣式逐一羅列出來。
羅列完成之后開始進行創(chuàng)建顏色樣式，選中需要創(chuàng)建樣式的圖層后，點擊 Sketch 右側(cè)面板中的外觀-創(chuàng)建，樣式命名按照「顏色/分類名稱/顏色屬性或編號」的層級結(jié)構(gòu)命名，命名完成后該顏色樣式就已經(jīng)創(chuàng)建完成。
2. 文字樣式
同顏色樣式一樣，首先要對各類字體以及字號、字重、灰階等分類進行定義，并按照不同分類將文字樣式逐一羅列出來。
羅列完成之后開始進行創(chuàng)建文字樣式，選中需要創(chuàng)建樣式的文字后，點擊 Sketch 右側(cè)面板中的外觀-創(chuàng)建，樣式命名按照「字體/字號/字重/灰階」的層級結(jié)構(gòu)命名，命名完成后該文字樣式就已經(jīng)創(chuàng)建完成。
Sketch 對樣式的定義分為圖形樣式和文字樣式，圖形屬性包含顏色、描邊、投影等。按照同樣的處理方式可以將投影、描邊等樣式添加到樣式庫。
3. 圖標控件
圖標創(chuàng)建前需要先將圖標放置在對應的柵格框內(nèi)并編組，這里要注意需要將圖標轉(zhuǎn)曲，否則圖標將不能添加顏色樣式。轉(zhuǎn)曲后從定義好的顏色樣式中選擇常用的顏色，這種嵌套顏色樣式的方式，有利于圖標在使用的過程中隨時可以切換顏色。
顏色嵌套完成后，在工具欄中點擊創(chuàng)建控件，按照結(jié)構(gòu)化的命名方式對圖標進行命名，接下來將圖標按分類依次創(chuàng)建為控件。
4. 基礎組件
在開始創(chuàng)建基礎組件之前我們先來了解一下 Sketch 響應式布局和智能布局的一些設置。
在 Sketch 右側(cè)屬性面板中的尺寸調(diào)整中可以看到兩個調(diào)整的設置和預覽，第一個從圖標可以看出分別是固左、固右、固頂、固底，第二個分別是固高、固寬。
具體我們稍作下解釋，當一個元素設置固右、固寬后，執(zhí)行左右拉伸操作時設置的元素就會有右對齊的適配效果，當一個元素設置了固頂、固底后，執(zhí)行上下拉伸操作時設置的元素就會有固定間距的適配效果。
需要注意的是響應式屬性的設置只會編組內(nèi)生效，在嵌套組件的過程中運用響應式布局設置，就可以使組件更加的靈活易用。
與響應式布局不同的是智能布局是針對組件進行設置的，當變量是組件內(nèi)的元素時可針對組件進行智能布局，而當變量是組件時可對組件進行響應式布局。在創(chuàng)建組件或進入母版之后可選擇對組件進行智能布局設置，當組件設置了智能布局以后，更改組件中的元素或控件將自動調(diào)整組件的大小。
智能布局與響應式布局類似，也很好理解，當對組件設置了水平居中布局后，修改元素尺寸，組件會有固定間距，從中間向兩側(cè)拉伸的效果，當組件設置了從左往右布局，組件會有固定間距，左側(cè)固定，向右側(cè)拉伸的效果。
參考原子理論中對分子、組織的拆分，組件搭建的過程就是將拆分后的原子進行逐層嵌套為分子，再將分子組合嵌套為組織。例如，導航欄可以拆分為狀態(tài)欄、左組合、中組合、右組合這四個分子，每個分子可以獨立替換樣式并隨意組合。
按照如上的搭建思路，我們可以將各個獨立的模塊/組織拆分為分子/原子，并進行細化、整合。然后根據(jù)基礎組件，業(yè)務組件，設計傳達組件，常用模塊這幾個類型將組件進行羅列和搭建，通過小顆粒元素組合大顆粒元素的逐層嵌套，最終實現(xiàn)組件庫的初步創(chuàng)建。組件庫分類可參考：
具體的組件分類需根據(jù)產(chǎn)品類型具體定義
組件庫搭建完成后，接下來就是分發(fā)給團隊成員使用了。應用的時候其實用到的是組件的變量搭配，根據(jù)具體場景和業(yè)務分析使用。
添加組件庫：可以通過首選項-組件庫-添加組件庫的方式將搭建完成的 Sketch 文件導入，之后就可以在 Sketch 找到對應的組件庫直接進行拖拽使用。
共享組件庫：團隊內(nèi)可以使用 Sketch Cloud、Dropbox、Google 云盤或 Mac 共享等多種方式來同步組件庫文件，文件有更新團隊內(nèi)的成員便會收到更新提示，（Sketch 工具欄右上角）點擊后可以預覽更新內(nèi)容，然后下載替換舊版本即可。這里需要注意的是當組件庫本地化之后將不會再收到更新提示。
在組件庫的構(gòu)建過程中，我們需要整體思考，明確組件化的設計內(nèi)容，不斷去優(yōu)化和完善組件細節(jié)，包括設計原則、應用場景以及拓展性等。同時組件庫需要根據(jù)產(chǎn)品的發(fā)展不斷的迭代和創(chuàng)新，才能讓它的可持續(xù)性特性發(fā)揮至最大。
關于組件庫的維護和管理，可以從一致性符合度、復用率、拓展性等多個方面考量組件的入庫和剔除標準，這里附上一份簡單的組件庫管理機制供大家參考。（圖片較大，請在附件下載）
從設計規(guī)范到組件庫，再到最終界面設計和還原，通過組件庫的建立，設計產(chǎn)出有了統(tǒng)一標準，開發(fā)迭代的效率也得到顯著提升，同時設計師可以更專注于深耕體驗和細節(jié)，實現(xiàn)設計向產(chǎn)品賦能。
以上是個人在參與設計體系構(gòu)建過程中的一些經(jīng)驗總結(jié)，不足之處請多包涵，同時篇幅有限，關于組件庫的內(nèi)容無法一次詳盡，歡迎大家一起討論更多標準化設計體系的相關內(nèi)容。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。