本文從業(yè)務(wù)組件庫構(gòu)成、如何構(gòu)建業(yè)務(wù)組件庫、為什么要做這些、如何評估組件有效性4個方面，掌握業(yè)務(wù)組件庫設(shè)計。

一、業(yè)務(wù)組件庫構(gòu)成

1. 組件概述

1. 基礎(chǔ)原子組件
2. 原子組成的分子組件
3. 分子組成的區(qū)塊組件（組織）
4. 區(qū)塊組件構(gòu)成的模板組件
5. 由模版組成的成套頁面

現(xiàn)在可以把我們的組件庫想象成樂高，每一個小零件組合成一個新的大零件，在由大零件組合成一個面狀零件，直至完成一個模型。在完成這些后，我們會發(fā)現(xiàn)缺少了一個地基以供模型合理擺放：

小知識：業(yè)務(wù)組件庫的原子分子，可以由任意組件庫構(gòu)成，如 Ant design、Tdesign、Arco design 等等（沒必要重復(fù)造輪子）

2. 組件概述：柵格布局（地基）

柵格布局又是地基，所以我們會將該步驟作為搭建組件庫的第一步驟，以更好的幫助我們計算每個組件的尺寸（小到原子大到區(qū)塊組件）。

這也是我們經(jīng)常說的規(guī)范驗收，間距、尺寸、圓角、樣式等等，柵格布局也能更好的適配自適應(yīng)規(guī)則。

補充：假設(shè)是一個成熟的產(chǎn)品，因為一些情況需要調(diào)整布局，這里可以反向推導(dǎo)：

1. 確定設(shè)計稿的頁面尺寸
2. 確定區(qū)塊組件的大小
3. 確定布局間隙是否一致
4. 確定左側(cè)導(dǎo)航具體寬度

確定容器柵格：

柵格線基本以 24 條為例，那么對應(yīng)的水槽線（間隙）則為 23 條。確定水槽線的寬度（全局通用包含橫向縱向且能夠被整除的）

這時候組件可以根據(jù)柵格布局進行合理擺放位置，并且在規(guī)范內(nèi)，設(shè)計好盒子框架，以便開發(fā)做好自適應(yīng)斷點規(guī)則。

二、如何構(gòu)建業(yè)務(wù)組件庫

不知道各位有沒有在 B 端業(yè)務(wù)產(chǎn)品中，遇到很多同類似的組件，在相同的業(yè)務(wù)場景中，用了不同的交互方式，并且還被問到了："為什么這里的組件和其他地方樣式及交互不一樣，結(jié)果卻是一致？"這時候你會怎么去說服提問者？

對于我看來，會出現(xiàn)這種情況得原因，我總結(jié)以下三點：

1. 缺乏組件庫的使用規(guī)范及標準
2. 在個業(yè)務(wù)頁面中，邏輯梳理的方式與其他設(shè)計師不同
3. 組件的變種樣式?jīng)]有得到組內(nèi)一致對齊

那么我們?nèi)绾巫霾拍芙鉀Q該類似的問題呢？

1. 提取每個頁面被高頻使用的相似控件

第一步，走查其中 A 平臺所有相似組件，并記錄

第二步，走查所有平臺中所有相似組件，并記錄

第三步，將單一平臺和所有平臺的相似組件進行抽離擺放

第四步，定義組件的形式（擴展性組件、樣式相同交互卻不同、交互相同樣式卻不同）

2. 分析每個相似的控件解決的目的是什么

以上文（一）舉例：我們將這兩種業(yè)務(wù)定義為分為相似組件后，分析每個組件所對應(yīng)的業(yè)務(wù)場景；

方案 1 的對應(yīng)業(yè)務(wù)場景：在填寫表單頁面中幫助使用者呈現(xiàn)更加具體描述的信息，從而幫助使用者快速進行做出選擇。

方案 2 的對應(yīng)業(yè)務(wù)場景：通常應(yīng)用在配置頁面中，幫助用戶直觀的進行定位選擇。

3. 拆分區(qū)塊組件，并定義每個組件用途及業(yè)務(wù)場景

假設(shè)：相同組件下，樣式不統(tǒng)一，并在團隊內(nèi)部起到了爭議，我們該如何進行 battle

舉例如上圖。

通過走查發(fā)現(xiàn)，使用方案 2 的組件在團隊內(nèi)部占據(jù)多數(shù)，此時你該如何說服他們進行統(tǒng)一?

1. 可以通過使用組件的時間進行比對：舉例查找某 8 個省份及 8 個城市進行各自選擇后的總時間
2. 可以通過使用組件的效率進行比對：組件選擇進行重置后，在選擇 4 個 相同省份城市名稱及 4 個不同的

這是比較常規(guī)的判斷方式，并且可以通過擴展性的維度去考量。

4. 對拆分的區(qū)塊逐一進行用途描述

可以拆分區(qū)塊進對功能描述也可以拆分組件進行描述，在團隊進行講解，形成規(guī)范一致性。便于后續(xù)對某組件進行擴展或功能替換。

5. 在盒子內(nèi)重構(gòu)布局，形成規(guī)范排版

6. 補充條件規(guī)則

1. 響應(yīng)式規(guī)則
2. 浮層、彈窗、抽屜使用規(guī)則
3. 操作區(qū)布局規(guī)則
4. 柵格規(guī)則
5. 驗收規(guī)則
6. 組件交互使用說明規(guī)則

三、為什么要做這些

1. 所有的組件可以在標準范圍內(nèi)自然增長

什么是自然生長，就是一個組件隨著業(yè)務(wù)場景的增多，也會隨之匹配著業(yè)務(wù)進行變種升級，不會偏離基礎(chǔ)組件的設(shè)計。

所以滿足自然生長，就得確定業(yè)務(wù)組件能夠被擴展，而不是定樣式。

2. 控件的變種得到有效統(tǒng)一控制

3. 基于底層可以優(yōu)化迭代，減少重復(fù)溝通交流

不知道各位同學(xué)，有沒有遇到過，某一個組件用了一段時間，突然這時，你靈光一現(xiàn)，發(fā)現(xiàn)這個組件并不是很契合，你畫完圖去找前端改一改組件。這時開發(fā)說，不行，太麻煩了，我手上還有其他活，沒辦法做全量替換，一個個又太麻煩了，你等下一個排期吧。諸如此類的拒絕話術(shù)。

此時如果，有業(yè)務(wù)組件庫，那么優(yōu)勢也被突出出來，在底層中進行優(yōu)化迭代，并且全量替換，咱們只需要走查一下布局有沒有沖突等問題就行

4. 驗收標準得到可控，減少多人多面驗收意見

四、如何評估組件有效性

我們所做的組件如何才能被定義為是合格或有用的呢？這里我會從 2 個方面去做闡述

1. 組件本身的效率

在 B 端場景中，我們通常判斷為是工作業(yè)務(wù)場景，即 效率性，也就是常說的提效，我們回歸本質(zhì)，一方面是頁面的排版布局、功能交互時長，另一方面是用戶的認知理解時長。

還是以選擇城市舉例：（僅說組件測試，當然頁面也能夠被衡量）

以這種小測試的方法，不限于人，不限于組件，提升團隊的專業(yè)性。對比兩者使用時長（秒表卡點）

2. 系統(tǒng)層面的效率性

在面對繁雜的業(yè)務(wù)場景中，使用了新的設(shè)計組件，是否能夠完美匹配或者靈活匹配，去幫助業(yè)務(wù)去降低用戶理解的成本。

組件拼裝的模版頁面，是否降低重復(fù)開發(fā)的成本。

是否具有代表性的組件可以全平臺通用

五、總結(jié)

作者：交互思維鋪子