如何定義組件庫(kù)

UI 設(shè)計(jì)組件庫(kù)（UI KIT），直譯過(guò)來(lái)就是用戶界面成套元件。我們?nèi)粘９ぷ髦兴鶚?gòu)建的組件庫(kù)，一般是把所有界面設(shè)計(jì)中的控件以及控件組合匯總分類(lèi)，形成一個(gè)對(duì)內(nèi)對(duì)外都能起到提高效能與控制標(biāo)準(zhǔn)化的工具庫(kù)。

1. 辯證地看待原子設(shè)計(jì)理論

為了方便組件庫(kù)在實(shí)際應(yīng)用中的實(shí)用度以及迭代拓展，我們通常需要對(duì)組件模塊進(jìn)行分析解構(gòu)。

大家應(yīng)該都熟悉著名的原子設(shè)計(jì)理論在組件庫(kù)中的應(yīng)用（原子設(shè)計(jì)：將頁(yè)面顆粒度分為原子、分子、組織、模板、頁(yè)面的超細(xì)維度，進(jìn)行組件和組件的層層嵌套）。

所以是否我們就應(yīng)該將原子理論不加辯證地應(yīng)用到所有組件的構(gòu)建中呢？我覺(jué)得這其中的顆粒度選擇還是需要根據(jù)組件的分類(lèi)進(jìn)行有區(qū)別的抉擇的。

△ 不熟悉原子設(shè)計(jì)理論的，推薦可以看看這位原子鼻祖寫(xiě)的這本書(shū)

也可以看看這篇總結(jié)：

在商業(yè)設(shè)計(jì)中我們通常把組件庫(kù)分為「基礎(chǔ)型」和「業(yè)務(wù)型」兩大類(lèi)，前者主要是以系統(tǒng)組件（導(dǎo)航/tab/鍵盤(pán)等）、頁(yè)面固定組件（圖標(biāo)/按鈕等）等高頻使用的組件為主，后者則是直接關(guān)聯(lián)業(yè)務(wù)更加復(fù)雜多變的組件模塊。

如果說(shuō)前者我們應(yīng)用原子概念進(jìn)行設(shè)計(jì)，我覺(jué)得是沒(méi)有太大毛病，包括在后期 library 的輸出上原子理論確實(shí)也會(huì)顯得比較嚴(yán)謹(jǐn)。

但「業(yè)務(wù)型」組件因?yàn)楸旧韺儆趶?fù)雜多變的模塊組件，使用過(guò)細(xì)的顆粒度不但容易影響整體動(dòng)態(tài)化拼裝的效率，也可能因?yàn)轭w粒度過(guò)細(xì)導(dǎo)致在變化過(guò)程中的體驗(yàn)一致性變異。所以針對(duì)「業(yè)務(wù)型」組件，我們更需要對(duì)它進(jìn)行交互解構(gòu)。用結(jié)構(gòu)化替代窮舉提效的同時(shí)保障整體的交互體驗(yàn)一致性，確保這個(gè)模塊無(wú)論怎么變換，它還是不脫離整體的設(shè)計(jì)系統(tǒng)規(guī)則。

2. 組件庫(kù)vs設(shè)計(jì)規(guī)范

在討論完組件庫(kù)的顆粒度之后，有一些同學(xué)還是糾結(jié)這個(gè) UI?KIT 到底需不需要和設(shè)計(jì)規(guī)范做結(jié)合，具體需要展示哪些內(nèi)容更貼合現(xiàn)在主流的做法。

個(gè)人理解這兩者應(yīng)該是相輔相成、相對(duì)獨(dú)立且呈包含關(guān)系的 2 個(gè)東西，如果 UI 設(shè)計(jì)規(guī)范類(lèi)比一紙?jiān)敿?xì)的產(chǎn)品生產(chǎn)說(shuō)明，組件庫(kù)則更像是一個(gè)線上工具零件庫(kù)+簡(jiǎn)易工作使用說(shuō)明書(shū)。再通俗一些來(lái)說(shuō)，就是我們的組件庫(kù)依附于當(dāng)前的設(shè)計(jì)規(guī)范，同時(shí)未來(lái)我們也將依據(jù)設(shè)計(jì)規(guī)范來(lái)產(chǎn)出新的符合規(guī)范的組件。

△ 摘自「自如」設(shè)計(jì)規(guī)范

△ 摘自「滴滴出行」uikit畫(huà)布展示說(shuō)明

但實(shí)際上因?yàn)榇髲S UED 規(guī)模及理念差異，大家對(duì)組件庫(kù)和視覺(jué)規(guī)范的輸出也各不相同。

基本在滴滴的時(shí)候因?yàn)?CDX 的組件和規(guī)范沉淀的時(shí)間久遠(yuǎn)，改版的頻率又十分之低，不同設(shè)計(jì)團(tuán)隊(duì)溝通基本憑著一套出行的?UI KIT 就無(wú)師自通高效輸出了。現(xiàn)在到了新的團(tuán)隊(duì)，也是優(yōu)先搭建可以馬上使用出活的組件庫(kù)，畢竟項(xiàng)目拼的是效率和時(shí)間。

組件庫(kù)的部署與落地同步

接下來(lái)我們來(lái)說(shuō)說(shuō)在實(shí)際工作中我們最為實(shí)用的部分，有關(guān)如何實(shí)現(xiàn)組件庫(kù)的完美應(yīng)用，讓你的日常工作再也離不開(kāi)它。

1. symbol化的設(shè)計(jì)布局思路

相信 sketch 的 symbol 化原子設(shè)計(jì)原理大家應(yīng)該都很熟悉（不熟悉的話也可以百度搜到很多相關(guān)使用 symbol 的攻略），我就簡(jiǎn)單再舉個(gè)彈窗的例子來(lái)補(bǔ)充一些小細(xì)節(jié)：

對(duì)于對(duì)話框組件的解構(gòu)我們可以分為圖片區(qū)、標(biāo)題區(qū)、正文區(qū)、操作區(qū)四個(gè)部分，所以我們要做的是把這個(gè)彈窗做成一個(gè)「無(wú)限可能」的對(duì)話框，即對(duì)話框的每一個(gè)區(qū)域（從圖片到操作按鈕）都是可以替換的。

這里我們需要單獨(dú) symbol 化的嵌套部分就是圖片、操作按鈕及背景遮罩，這樣我們就可以得到一個(gè)基本可以直接適配使用的圖文對(duì)話框。

△ 有對(duì)symbol化操作過(guò)程有疑問(wèn)的可以留言或者私我

按照如上思路我們就可以基本 0 失誤地完成 sketch 組件庫(kù)的初步搭建，接下來(lái)給大家分享一個(gè)常用的組件庫(kù)搭建目錄 list：

除了業(yè)務(wù)組件視不同產(chǎn)品業(yè)務(wù)線而定之外，基礎(chǔ)組件和傳達(dá)組件都相對(duì)固定可以相對(duì)大面積地復(fù)用。其中傳達(dá)組件大家可能接觸的相對(duì)少一些，對(duì) UX 和UE 設(shè)計(jì)師來(lái)說(shuō)是可以直接在做流程交互梳理時(shí)，拖拖拽拽完成設(shè)計(jì)的非常好用的工具組件。

△ 摘自「滴滴出行」uikit傳達(dá)組件-流程圖部分

2. sketch cloud的同步協(xié)作

制作完組件庫(kù)的 sketch 部署之后我們就需要把它真正地應(yīng)用起來(lái)了。

我們可以通過(guò) sketch/首選項(xiàng)/添加組件庫(kù)的方式將我們剛剛部署完的 sketch（命名為：組件庫(kù) library_zmn_20191118）導(dǎo)入。之后就可以在 sketch/置入/組件中找到對(duì)應(yīng)的「組件庫(kù) library_zmn_20191118」組件庫(kù)直接進(jìn)行拖拽元素使用。

這個(gè)步驟很多同學(xué)都很熟悉，但是在實(shí)際工作中我們常常會(huì)遇到一個(gè)問(wèn)題就是，一旦這個(gè)組件庫(kù)發(fā)生變更該如何進(jìn)行組內(nèi)同步呢？如果只改變本地的組件庫(kù)源文件再更替上傳，其他設(shè)計(jì)同學(xué)的 library 并不會(huì)發(fā)生變化，所以如何做到大家同步更新呢？

首先我們需要做的是登錄 sketch cloud 賬戶（sketch 右上角的小云云）

登錄 sketch cloud 賬戶之后，我們需要將組件庫(kù)源文件上傳成為 cloud 文檔（sketch>文件>打開(kāi) cloud 文檔>新 cloud 文檔）。

這里我們還可以點(diǎn)擊已上傳的 cloud 組件庫(kù)文檔進(jìn)行編輯和更新，之后記得在 sketch cloud 里添加你的組內(nèi)設(shè)計(jì)同學(xué)哦。

這樣一來(lái)所有組內(nèi)設(shè)計(jì)的同學(xué)就都可以在 sketch 里更新下載新的組件庫(kù)直接拖拽使用（一般 cloud 組件云更新后 sketch 的右上角都有「紅色通知提示」，是可以直接點(diǎn)開(kāi)更新下載的）。

這樣一來(lái)實(shí)現(xiàn)了多人同步本地更新組件庫(kù)的高效操作，非常之實(shí)用。唯一美中不足的就是 sketch cloud 賬戶會(huì)周期性退出登錄，所以我們還是需要時(shí)常檢查一下自己的 cloud 賬戶是否還在線，以免錯(cuò)過(guò)更新。

3. 組件庫(kù)的監(jiān)察機(jī)制與管理

去年面試的時(shí)候從快看到淘寶，感覺(jué)最高頻出現(xiàn)的就是有關(guān)組件庫(kù)的問(wèn)題，感覺(jué)大家都很關(guān)注有關(guān)組件庫(kù)的定義與入庫(kù)標(biāo)準(zhǔn)。尤其在大廠的 UED，一般都有一套專(zhuān)屬的組件庫(kù)監(jiān)察滾動(dòng)機(jī)制適用于多地多團(tuán)隊(duì)合作，對(duì)于之后的組件庫(kù)更新迭代，新組件封裝入庫(kù)有自己的標(biāo)準(zhǔn)。

對(duì)于監(jiān)察機(jī)制我們就不多說(shuō)了，因?yàn)椴⒉灰欢ㄟm配于大家的情況，我們這邊主要談?wù)劷M件庫(kù)管理。

因?yàn)榻M件庫(kù)從搭建完成之后我們會(huì)不停滾動(dòng)更新，那是否需要將所有更新出現(xiàn)的新組件都納入組件庫(kù)里呢？顯然是不科學(xué)的，我們需要合理管理和控制組件庫(kù)的容量，及時(shí)調(diào)整和翻新組件庫(kù)里的組件，確保組件庫(kù)里的內(nèi)容都是最新最好用的。

那么如何來(lái)判定組件的入庫(kù)與剔除標(biāo)準(zhǔn)呢？我們可以從 4 個(gè)維度進(jìn)行細(xì)致的分析，這里提供一個(gè)參考。

基礎(chǔ)層：標(biāo)準(zhǔn)化規(guī)范符合度

對(duì)于組件的考察最基礎(chǔ)的應(yīng)該就是標(biāo)準(zhǔn)化和一致性，組件是否符合視覺(jué)規(guī)范直接影響整體的體驗(yàn)傳達(dá)。

體驗(yàn)層：視覺(jué)層次/感官體驗(yàn)是否良好

每個(gè)組件都應(yīng)該適配合理的手勢(shì)交互熱區(qū)尺寸、一目了然的操作點(diǎn)功能分區(qū)以及極致舒適美學(xué)的感官體驗(yàn)

數(shù)據(jù)層：數(shù)據(jù)驗(yàn)證

一部分組件是可以通過(guò)埋點(diǎn)+單一變量的 A/B test 的方式測(cè)試出不同的點(diǎn)擊轉(zhuǎn)化率。這里我們舉個(gè)例子：例如電商的搶購(gòu)按鈕，我們?cè)诓桓淖兤渌a(chǎn)品信息與視覺(jué)交互的情況下，通過(guò)測(cè)試 2 種不同文案以及視覺(jué)表達(dá)的按鈕的點(diǎn)擊率差異就可以用數(shù)據(jù)測(cè)試出 2 個(gè)組件的優(yōu)勝劣汰。

實(shí)用層：兼容性/復(fù)用率/拓展性

因?yàn)榻M件庫(kù)的容量有限，所以我們不能夠把所有出現(xiàn)過(guò)的，覺(jué)得不錯(cuò)的組件都封裝納入組件庫(kù)，所以最后一條是組件入庫(kù)的決定性因素。只有組件復(fù)用足夠高頻且具有良好的拓展性，我們才能最終把它定格成組件庫(kù)的一員。

總結(jié)

咱們?cè)?0-1 構(gòu)建組件庫(kù)時(shí)，要清晰它的定義與作用，之后進(jìn)行分類(lèi)與 list 規(guī)劃，最后再在 sketch 中完成部署與落地，最后形成一套完成的組件庫(kù)同步協(xié)作的管理機(jī)制與新組件入庫(kù)的標(biāo)準(zhǔn)制定。更遠(yuǎn)一點(diǎn)來(lái)說(shuō)還可以與開(kāi)發(fā)形成協(xié)作，共同開(kāi)發(fā)線上組件庫(kù)資源，實(shí)現(xiàn)從橫向的業(yè)務(wù)賦能。

歡迎關(guān)注作者的微信公眾號(hào)：「Nana的設(shè)計(jì)錦囊」