最近，越來越多的設(shè)計師意識到了業(yè)務(wù)組件庫的必要性，除了使用基礎(chǔ)的開源通用組件庫外，還需要自建更加實用和高效的業(yè)務(wù)組件庫，以支持高速增長的業(yè)務(wù)需求。我也經(jīng)常被大家問到這樣的問題：

1. 如何從 0-1 初步搭建一款 App 產(chǎn)品的 UI 設(shè)計規(guī)范呢？
2. 如果目前公司已有 VI 設(shè)計規(guī)范，如何對照 VI 初步搭建一套組件庫呢？
3. B 端產(chǎn)品的組件庫如何進行組件設(shè)計規(guī)劃和迭代呢？

要想從 0-1 做好組件庫，我為大家總結(jié)了五件要做的工作，它們之間有著密不可分的關(guān)聯(lián)性：

1. 確定設(shè)計指導(dǎo)原則：這是整個組件庫建立的底層基礎(chǔ)；
2. 沉淀常用組件資產(chǎn)：這是組件庫的核心內(nèi)容和價值體現(xiàn)；
3. 制定工作協(xié)同 SOP：這是組件庫能夠不斷更新和發(fā)展的保障；
4. 確定資產(chǎn)評估標準：這是用于確保組件能夠滿足需求、質(zhì)量合格；
5. 沉淀組件設(shè)計經(jīng)驗：這是整個組件庫建設(shè)工作的記錄和復(fù)盤。

PART 1 確定設(shè)計指導(dǎo)原則

這里所說的設(shè)計指導(dǎo)原則指的是設(shè)計價值觀和設(shè)計原則，用于為組件設(shè)計師提供組件設(shè)計的基本規(guī)范，指導(dǎo)組件的落地，并為解決具體設(shè)計問題指明方向。

以組件的設(shè)計價值觀為例，它包含一定的設(shè)計哲思，是組件設(shè)計的核心精髓。以下給出幾個大廠通用組件庫例子：

這些指導(dǎo)原則通常來源于你對于業(yè)務(wù)和產(chǎn)品的規(guī)劃和價值思考，并以此奠定組件設(shè)計的風格和核心基調(diào)。如果產(chǎn)品已經(jīng)有了 VI 設(shè)計規(guī)范，也可以將 VI 設(shè)計的關(guān)鍵詞、主要風格和規(guī)則等用作參考。

PART 2 沉淀常用組件資產(chǎn)

從基礎(chǔ)組件開始沉淀設(shè)計資產(chǎn)，即整理基礎(chǔ)的原子組件、常用的復(fù)合組件、通用的頁面布局框架等等。 這部分的工作內(nèi)容很多，不僅包括如何完成一個組件的設(shè)計工作，也包括如何給組件編寫組件的使用規(guī)則。

做組件是個大工程，是細致的體力活兒，不可能一蹴而就，因此小步迭代、隨時調(diào)整是最省時省力的做法。你可以先從基礎(chǔ)組件開始，一邊做組件，一邊編寫組件的使用規(guī)范。

PART 3 制定工作協(xié)同 SOP

制定設(shè)計與開發(fā)在配合完成組件開發(fā)過程中的協(xié)同流程和規(guī)范，包含將組件從設(shè)計到開發(fā)落地的標準的工作流程和方法，目的在于保證組件系統(tǒng)的維護與迭代能夠順利進行。

你需要思考和確定的問題包括但不限于：

1. 如何定義一個設(shè)計元素是否可以或值得被做成組件？
2. 如何對設(shè)計好的組件進行評審？
3. 如何進行組件的更新和發(fā)布，讓所有的組件使用者都能夠正確使用？等等。

PART 4 確定資產(chǎn)評估標準

制定簡單且有效的組件設(shè)計質(zhì)量衡量標準，即評估和檢驗組件設(shè)計的合理性，保證所有組件的質(zhì)量、風格、使用體驗?zāi)軌蛳鄬σ恢隆?/p>

評估標準并不一定需要在做組件庫的一開始就建立起來。隨著你的組件慢慢增多、樣式越來越豐富多樣時，對于組件的評判和衡量會更有必要。

PART 5 沉淀組件設(shè)計經(jīng)驗

沉淀組件庫搭建工作過程中的方法及經(jīng)驗，這也是對工作的復(fù)盤和總結(jié)。我們團隊在做一款業(yè)務(wù)組件庫的過程中，就沉淀了 100+ 篇相關(guān)的經(jīng)驗總結(jié)，讓我在組件設(shè)計領(lǐng)域內(nèi)更加專業(yè)。

做一套完整的組件庫，整體工作不僅僅包括組件這類提效的工具，還包括一系列的評判標準、工作方法和經(jīng)驗總結(jié)。

作者：長弓小子