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

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

1. 組件概述

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

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

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

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

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

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

補(bǔ)充：假設(shè)是一個(gè)成熟的產(chǎn)品，因?yàn)橐恍┣闆r需要調(diào)整布局，這里可以反向推導(dǎo)：

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

確定容器柵格：

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

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

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

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

對(duì)于我看來(lái)，會(huì)出現(xiàn)這種情況得原因，我總結(jié)以下三點(diǎn)：

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

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

1. 提取每個(gè)頁(yè)面被高頻使用的相似控件

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

第二步，走查所有平臺(tái)中所有相似組件，并記錄

第三步，將單一平臺(tái)和所有平臺(tái)的相似組件進(jìn)行抽離擺放

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

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

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

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

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

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

假設(shè)：相同組件下，樣式不統(tǒng)一，并在團(tuán)隊(duì)內(nèi)部起到了爭(zhēng)議，我們?cè)撊绾芜M(jìn)行 battle

舉例如上圖。

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

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

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

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

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

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

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

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

三、為什么要做這些

1. 所有的組件可以在標(biāo)準(zhǔn)范圍內(nèi)自然增長(zhǎng)

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

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

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

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

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

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

4. 驗(yàn)收標(biāo)準(zhǔn)得到可控，減少多人多面驗(yàn)收意見

四、如何評(píng)估組件有效性

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

1. 組件本身的效率

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

還是以選擇城市舉例：（僅說(shuō)組件測(cè)試，當(dāng)然頁(yè)面也能夠被衡量）

以這種小測(cè)試的方法，不限于人，不限于組件，提升團(tuán)隊(duì)的專業(yè)性。對(duì)比兩者使用時(shí)長(zhǎng)（秒表卡點(diǎn)）

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

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

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

是否具有代表性的組件可以全平臺(tái)通用

五、總結(jié)

作者：交互思維鋪?zhàn)?/p>