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