編輯導(dǎo)語：組件庫的搭建在一定程度上可以提高產(chǎn)品開發(fā)效率，減少業(yè)務(wù)流程中的疑惑產(chǎn)生。那么，應(yīng)該如何設(shè)計組件、快速定義B端的組件規(guī)范？本篇文章里，作者結(jié)合自身撰寫、升級組件庫的經(jīng)驗，從階段出發(fā)，對如何定義B端組件規(guī)范做了總結(jié)，一起來看一下。

各大設(shè)計團隊為了釋放設(shè)計人力，會根據(jù)業(yè)務(wù)情況封裝組件庫，后續(xù)開發(fā)成代碼，方便前端同學(xué)進行組件調(diào)取，也同時節(jié)省了開發(fā)成本。

寫這篇文章是根據(jù)自己撰寫并升級了原有組件庫的經(jīng)驗，讓大家大概了解設(shè)計組件背后需要做哪些工作，日后制定組件規(guī)范可以直接套用。

一、寫組件的目的

在工作中做一件事情首先要思考做了之后要達到什么樣的效果。寫組件的目的就是要讓每一個場景下的操作都具有合理性，讓產(chǎn)品變得好用、易用、可用。讓各個業(yè)務(wù)在遇到類似的業(yè)務(wù)需求時，不要產(chǎn)生：

1. 應(yīng)該使用哪個組件？
2. 組件操作應(yīng)該包含哪些狀態(tài)反饋給用戶？
3. 不同業(yè)務(wù)，同一品牌下如何保證交互一致性？
4. 組件不能滿足應(yīng)該怎么辦？
5. ……

一系列模棱兩可的疑問。

二、寫組件的前期準(zhǔn)備：組件結(jié)構(gòu)層梳理

從層級上排列：產(chǎn)品——應(yīng)用——頁面——模塊——組件。組件在頁面中屬于原子級的元素。

首先對團隊業(yè)務(wù)組件進行盤點、同時對比行業(yè)內(nèi)競品組件，比如Ant Design、飛冰 Iceworks、Element、SUI、iView、Admui、Zent。

第一步：根據(jù)組件的作用進行分類，梳理組件清單，比如：組件分為通用類、導(dǎo)航類、數(shù)據(jù)輸入類、數(shù)據(jù)展示類、反饋類等。

第二步：梳理完成后劃分組件設(shè)計優(yōu)先級，參考維度：

• 『我們』有+行業(yè)內(nèi)有（p0）、『我們』有+行業(yè)沒有（p1）、『我們』沒有+行業(yè)有（p2）。
• 『我們』有+行業(yè)內(nèi)有（p0）：代表了這類組件是解決行業(yè)內(nèi)產(chǎn)品問題高頻應(yīng)用的剛需組件，比如搜索、按鈕等。
• 『我們』有+行業(yè)沒有（p1）：代表這類組件多為業(yè)務(wù)類型組件，是業(yè)務(wù)的特殊性產(chǎn)生了這類組件，比如：卡片、折疊面板等。
• 『我們』沒有+行業(yè)有（p2）：代表了這類組件可能是行業(yè)內(nèi)潛在有某種業(yè)務(wù)形態(tài)，列在『我們』范圍內(nèi)以免以后遇到類似的，無規(guī)范可查。

第三步：對組件進行結(jié)構(gòu)層、行為層和表現(xiàn)層元素進行拆解，參考標(biāo)準(zhǔn)為是否常變動。

三、寫組件前期準(zhǔn)備：行為場景梳理

其實結(jié)構(gòu)層分為組件種類（導(dǎo)航類、按鈕類、提示類……）和組件類別（下拉菜單、頂部tab、走馬燈……）分析到現(xiàn)在應(yīng)該得到的是原子級的組件類別，接下來就需要根據(jù)場景繼續(xù)細分組件的形態(tài)，從而得到組件形態(tài)的分類定義。

組件最難的是如何定義和區(qū)分組件行為層的類別，不斷在定義標(biāo)準(zhǔn)，目的是保證撰寫組件時，狀態(tài)不會模棱兩可，難以取舍。通過寫組件經(jīng)驗分享一下我們從應(yīng)用、差異化、組件構(gòu)成是通過以下角度確立的標(biāo)準(zhǔn)：

• 組件應(yīng)用標(biāo)準(zhǔn)：通過組件使用規(guī)律給組件下定義。
• 組件差異化：通過限定場景突出功能特點，讓用戶感知到信息操作的差異，賦予業(yè)務(wù)場景特定交互特色。
• 組件分區(qū)：通過前面梳理的，組件有哪些是常變動、哪些是不常變動的，去定義，基礎(chǔ)必備元素構(gòu)成寫死（不可調(diào)整），基礎(chǔ)元素以外的內(nèi)容，可以寫成活代碼（可調(diào)整）。

四、寫組件設(shè)計階段：體驗分析

規(guī)范的成立是根據(jù)多角度、多業(yè)務(wù)驗證才確定，所以需要時刻思考組件設(shè)計的邊界。在寫組件時可以思考以下6個問題：

五、寫組件設(shè)計階段：撰寫組件

通常直接瀏覽的角色是：UE設(shè)計師、UI設(shè)計師、前端程序員、間接瀏覽角色：產(chǎn)品經(jīng)理、售前、后端程序員等。根據(jù)角色確定撰寫內(nèi)容包含哪些結(jié)構(gòu)和信息。

從輸出文檔角度舉例，可以從組件的結(jié)構(gòu)層、行為層和表現(xiàn)層依次撰寫。

從組件業(yè)務(wù)角度舉例如：下拉菜單。

菜單內(nèi)容大多是預(yù)置、后臺調(diào)取、后續(xù)手動添加，所以根據(jù)業(yè)務(wù)屬性會產(chǎn)生多種形態(tài)。確定組件類別后，同時應(yīng)要對每一個組件的類別確定必有的基礎(chǔ)組件狀態(tài)，比如：默認、懸停、點擊、禁用四種是每個組件都必有的狀態(tài)，其他會根據(jù)組件屬性增加。

基礎(chǔ)菜單：滿足菜單基本功能，單選、多選。

分組菜單：指菜單內(nèi)容需要展示分類標(biāo)題和內(nèi)容時。

多層級菜單：指根據(jù)目標(biāo)層級選擇一個或多個的選項。

以上內(nèi)容僅此舉例，希望能給大家在寫組件時帶來更多的思路。

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

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