在上文《UX設(shè)計0到1的全方案思考與呈現(xiàn)》里，我們已經(jīng)嘮了嘮：0-1設(shè)計方案如何思考，有哪些要點值得出現(xiàn)在你的作品集里。今天我們就著最后一個要點：組件庫的定義，詳細聊聊如何從0到1搭建組件庫，以及組件庫如何高效的對內(nèi)外應(yīng)用。

一、如何定義組件庫

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

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

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

大家應(yīng)該都熟悉著名的原子設(shè)計理論在組件庫的中瘋狂應(yīng)用（原子設(shè)計：將頁面顆粒度分為原子、分子、組織、模板、頁面的超細維度，進行組件和組件的層層嵌套）。所以是否我們就應(yīng)該將原子理論不加辯證的應(yīng)用到所有組件的構(gòu)建中呢？

我覺得這其中的顆粒度選擇還是需要根據(jù)組件的分類進行有區(qū)別的抉擇的。

（不熟悉原子設(shè)計理論的推薦可以康康這本原子鼻祖寫的這本書…）

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

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

但“業(yè)務(wù)型”組件因為本身屬于復(fù)雜多變的模塊組件，使用過細的顆粒度不但容易影響整體動態(tài)化拼裝的效率，也可能因為顆粒度過細導(dǎo)致在變化過程中的體驗一致性變異。

所以針對“業(yè)務(wù)型”組件，我們更需要對它進行交互解構(gòu)。用結(jié)構(gòu)化替代窮舉提效的同時保障整體的交互體驗一致性，確保這個模塊無論怎么變換，它還是不脫離整體的設(shè)計系統(tǒng)規(guī)則。

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

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

個人理解這兩者應(yīng)該是相輔相成、相對獨立且呈包含關(guān)系的2個東西，如果UI設(shè)計規(guī)范類比一紙詳細的產(chǎn)品生產(chǎn)說明，組件庫則更類比一個線上工具零件庫+簡易工作使用說明書。

再通俗一些來說，就是我們的組件庫依附于當(dāng)前的設(shè)計規(guī)范，同時未來我們也將依據(jù)設(shè)計規(guī)范來產(chǎn)出新的符合規(guī)范的組件。

（摘自“自如”設(shè)計規(guī)范）

（摘自“滴滴出行”UIkit畫布展示說明）

但實際上因為廠子UED規(guī)模及理念差異，大家對組件庫和視覺規(guī)范的輸出也各不相同?；驹诘蔚蔚臅r候因為CDX的組件和規(guī)范沉淀的時間久遠，改版的頻率又十分之低，不同設(shè)計團隊溝通基本憑著一套出行的UI kit的就無師自通高效輸出了。現(xiàn)在到了新的團隊，也是優(yōu)先搭建可以馬上使用出活的組件庫，畢竟項目拼的是效率和時間。

二、組件庫的部署與落地同步

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

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

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

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

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

（有對以為symbol化操作過程有疑問的可以留言或者私我）

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

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

（摘自“滴滴出行”UIkit傳達組件-流程圖部分）

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

制作完組件庫的sketch部署之后我們就需要把它真正的應(yīng)用起來了。我們可以通過sketch/首選項/添加組件庫的方式將我們剛剛部署完的sketch（命名為：組件庫library_zmn_20191118)導(dǎo)入。之后就可以在sketch/置入/組件中找到對應(yīng)的“組件庫library_zmn_20191118”組件庫直接進行拖拽元素使用。

這個步驟很多童鞋都很熟悉，但是在實際工作中我們常常會遇到一個問題就是，一旦這個組件庫發(fā)生變更該如何進行組內(nèi)同步呢？

如果只改變本地的組件庫源文件再更替上傳，其他設(shè)計同學(xué)的library并不會發(fā)生變化，所以如何做到大家同步更新呢？

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

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

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

這樣一來所有組內(nèi)設(shè)計的童鞋就都可以在sketch里更新下載新的組件庫直接拖拽使用啦（一般cloud組件云更新后sketch的右上角都有“紅色通知提示”哦，是可以直接點開更新下載的）。

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

三、組件庫的監(jiān)察機制與管理

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

對于監(jiān)察機制我們就不多說了，因為并不一定適配于大家的情況，我們這邊主要談?wù)劷M件庫管理。

因為組件庫從搭建完成之后我們會不停滾動更新，那是否需要將所有更新出現(xiàn)的新組件都納入組件庫里呢？

顯然是不科學(xué)的，我們需要合理管理和控制組件庫的容量，及時調(diào)整和翻新組件庫里的組件，確保組件庫里的內(nèi)容都是最新最好用的。

那么如何來判定組件的入庫與剔除標(biāo)準呢？

我們可以從4個維度進行細致的分析，這里提供一個參考：

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

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

2. 體驗層：視覺層次/感官體驗是否良好

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

3. 數(shù)據(jù)層：數(shù)據(jù)驗證

一部分組件是可以通過埋點+單一變量的A/B test的方式測試出不同的點擊轉(zhuǎn)化率。

這里我們舉個栗子：例如電商的搶購按鈕，我們在不改變其他產(chǎn)品信息與視覺交互的情況下，通過測試2種不同文案以及視覺表達的按鈕的點擊率差異就可以用數(shù)據(jù)測試出2個組件的優(yōu)勝劣汰。

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

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

最后總結(jié)一下

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

本文由 @NaNa 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議