今天我們更近一步，再整理一次 B 端常用的控件和組件類型，幫助剛接觸 B 端的同學(xué)對(duì) B 端組件庫的內(nèi)容有更徹底的認(rèn)識(shí)。

推薦閱讀

一、B 端控件和組件的劃分

根據(jù)分子原理的邏輯，我們可以把 B 端的產(chǎn)品從整個(gè)項(xiàng)目拆解到最小的單元，那么對(duì)應(yīng)的結(jié)構(gòu)和層級(jí)順序如下：

頁面和項(xiàng)目很容易理解，而基礎(chǔ)元素、控件、組件則很容易搞混，就需要更具體的解釋。

首先基礎(chǔ)元素是 UI 界面中最下級(jí)的單位，只用于傳遞視覺和信息內(nèi)容，包括：

1. 文字：系統(tǒng)通過字體文件渲染出來的文本內(nèi)容
2. 圖片：所有運(yùn)營、內(nèi)容、背景圖和界面切圖
3. 圖標(biāo)：在系統(tǒng)內(nèi)具有一定隱喻和裝飾作用的圖形符號(hào)
4. 幾何：模塊的背景、按鈕的邊框、分割線等幾何元素

控件則是產(chǎn)生交互效果的元件，是 UI 界面中最基礎(chǔ)的交互元素。比如按鈕、輸入框、標(biāo)簽、進(jìn)度條等，用于向用戶輸出或輸入數(shù)據(jù)。

組件則是比控件更復(fù)雜的交互元素，是由基礎(chǔ)元素和控件共同組成的更完整的業(yè)務(wù)、信息、功能模塊。

比如一個(gè)輸入框控件，僅能輸入一段信息，比如用戶名。而在一個(gè)登錄場(chǎng)景中，光有用戶名是不夠的，還需要密碼、驗(yàn)證碼，以及用于登錄的按鈕。一個(gè)登錄窗口必須包含并組合這些控件，才能實(shí)現(xiàn)完整的登錄功能，而這個(gè)登錄窗口就是一個(gè)組件。

同理，類似側(cè)邊導(dǎo)航、日期選擇、表格、穿梭框等包含了不同基礎(chǔ)元素和控件的復(fù)雜模塊，也都是組件。

控件英文是 Controls，組件的英文則有不少，如 Elements、Components、Kits、Widgets 等。這兩個(gè)詞匯在各大系統(tǒng)、框架中并沒有嚴(yán)格的定義和劃分，所以在項(xiàng)目協(xié)作中往往會(huì)混用。同時(shí)它們也是編程中的專業(yè)術(shù)語之一，程序員口中的控件、組件往往和設(shè)計(jì)用的控件、組件不是一種東西。

作為 UI 設(shè)計(jì)師，了解兩者之間的概念并形成清晰的定義是非常有必要的，可以更好的展開后續(xù)知識(shí)點(diǎn)的學(xué)習(xí)。而我們平時(shí)說的“組件庫”，就是控件和組件的集合庫，而不是只整理了組件的庫。

組件對(duì)于 UI 界面設(shè)計(jì)來說是最重要的部分，因?yàn)榻缑媸怯山M件組合而成，界面設(shè)計(jì)本質(zhì)上就是逐步設(shè)計(jì)組件的過程。

在展開下面的具體類型認(rèn)識(shí)和學(xué)習(xí)之前，要先強(qiáng)調(diào)組件可以劃分成三個(gè)大類：

1. 通用組件
2. 業(yè)務(wù)組件
3. 數(shù)據(jù)圖表

通用組件即具有普適性的組件，用于實(shí)現(xiàn)一些非常底層、基礎(chǔ)的功能，大多數(shù)項(xiàng)目都可以使用。比如日期選擇、刪除確認(rèn)彈窗、表格等，都是非常常見的組件，不會(huì)被局限在某類特定的行業(yè)或項(xiàng)目中。

業(yè)務(wù)組件則是根據(jù)特定業(yè)務(wù)需求自定義的組件，比如在 OA 管理中添加的任務(wù)卡片、審批流程圖等組件，這在其它類型的產(chǎn)品中很難用到，或者因?yàn)樾枨蟮奶厥庑裕荒苡迷诒卷?xiàng)目中，即使同類的其它項(xiàng)目也無法直接復(fù)用。

我們熟知的 Ant、Arco、TDesign 等開源框架提供的組件庫，都是通用組件，因?yàn)檫@些組件易于復(fù)用。而業(yè)務(wù)組件難以復(fù)用，需要設(shè)計(jì)師根據(jù)項(xiàng)目需求獨(dú)立定制，這是設(shè)計(jì)師在 B 端項(xiàng)目發(fā)揮的主要作用之一。

最后一個(gè)圖表組件，是用于反應(yīng)數(shù)據(jù)的可視化圖形組件，無論是設(shè)計(jì)還是開發(fā)方式都和常規(guī)組件完全不同，所以我們會(huì)把它劃分成一個(gè)獨(dú)立的類型。

二、常見的組件類型認(rèn)識(shí)

B 端項(xiàng)目的控件和組件眾多，除了通用組件和業(yè)務(wù)組件的區(qū)分以外，我們還可以根據(jù)作用類型對(duì)它們做出進(jìn)一步的分類，主要的類型包含下面這些：

不同前端框架的組件庫分類方式不同，但基本大同小異，只要掌握這些基本類型的認(rèn)識(shí)即可，下面會(huì)逐一對(duì)它們進(jìn)行介紹。

1. 按鈕

按鈕是 UI 中最重要、最原始的交互元素，用于啟動(dòng)某個(gè)預(yù)設(shè)好的功能或程序。比如登錄按鈕，點(diǎn)擊后會(huì)發(fā)送賬戶密碼等數(shù)據(jù)給服務(wù)器進(jìn)行驗(yàn)證。

按鈕因?yàn)槭褂脠?chǎng)景多、頻率高，所以衍生了出了很多下級(jí)分類，在 AntDesign 中，將按鈕分為了五種：

1. 主按鈕：用于主行動(dòng)點(diǎn)，一個(gè)操作區(qū)域只能有一個(gè)主按鈕。
2. 默認(rèn)按鈕：用于沒有主次之分的一組行動(dòng)點(diǎn)。
3. 虛線按鈕：常用于添加操作。
4. 文本按鈕：用于最次級(jí)的行動(dòng)點(diǎn)。
5. 鏈接按鈕：一般用于鏈接，即導(dǎo)航至某位置。

在上面案例中，按鈕的主體是文字，雖然文本按鈕并沒有顯眼的外邊框和背景色，但我們可以通過文字的寓意來識(shí)別它是不是一個(gè)按鈕。而除了文字以外，圖標(biāo)也可以產(chǎn)生相同的效果，所以按鈕也可以使用圖標(biāo)作為主體。

2. 數(shù)據(jù)輸入

輸入是指用于往系統(tǒng)內(nèi)輸入、編輯數(shù)據(jù)的操作，用于實(shí)現(xiàn)這類操作的元素也被稱為表單控/組件。在主流的交互方式中，輸入分為兩個(gè)大類：

1. 自定義輸入
2. 選擇輸入

自定義輸入即用戶根據(jù)內(nèi)容的類型自己輸入想要的數(shù)據(jù)，比如文本、密碼、圖片、附件等，用戶會(huì)輸入的具體內(nèi)容系統(tǒng)是無法預(yù)判的，只能給出一定限制。

要額外強(qiáng)調(diào)，雖然圖片、附件上傳等控件使用有一個(gè) “選擇” 附件的過程，但是最后會(huì)上傳什么文件依舊是不確定的，所以也在自定義的分類之中。

自定義輸入控/組件類型較少，主要包含下面兩個(gè)大類：

選擇輸入，則是數(shù)據(jù)的范圍、格式都已經(jīng)確定好了，用戶要從這個(gè)范圍中選出一個(gè)或多個(gè)參數(shù)。比如設(shè)置某臺(tái)設(shè)備運(yùn)行功率的百分比，那么可以使用一個(gè) 0-100% 的滑塊控件，而不是給用戶一個(gè)輸入框再引導(dǎo)他自己輸入正確數(shù)值（0-100 的整數(shù)）。

因?yàn)閿?shù)據(jù)范圍、格式多種多樣，所以選擇類的控/組件類型非常多，常見的包含下面這些：

3. 導(dǎo)航引導(dǎo)

導(dǎo)航是用于對(duì)用戶所在位置、目標(biāo)進(jìn)行標(biāo)識(shí)，或是引導(dǎo)用戶快速前往某些位置的操作。

最常見的導(dǎo)航就是全局組件中的導(dǎo)航，用于跳轉(zhuǎn)到不同的頁面中。但一個(gè)復(fù)雜的 B 端項(xiàng)目往往還會(huì)包含不同的頁面跳轉(zhuǎn)引導(dǎo)，比如面包屑或是步驟等。

常見的導(dǎo)航引導(dǎo)類組件包含下面這些類型：

4. 數(shù)據(jù)展示

數(shù)據(jù)展示即系統(tǒng)通過不同的方式向用戶展示指定數(shù)據(jù)的過程。在一個(gè) B 端系統(tǒng)中數(shù)據(jù)的類型多種多樣，所以展示的形式也不同。

因?yàn)檎故镜男问胶芏?，所以我們簡單劃分成兩個(gè)大類，獨(dú)立展示和列表展示。

獨(dú)立展示即展示的數(shù)據(jù)有一定的獨(dú)立性，在一個(gè)組件范圍內(nèi)僅有一個(gè)，或和其它同類數(shù)據(jù)沒有序列關(guān)系，也是比較基礎(chǔ)的展示元素。比如下面這些常見的數(shù)據(jù)展示類型：

列表展示則是用有序的排列方法展示多個(gè)數(shù)據(jù)的形式，在 B 端項(xiàng)目中，列表展示的內(nèi)容通常權(quán)重較高，也是重點(diǎn)設(shè)計(jì)的對(duì)象，常見的列表展示類型如下所示：

5. 提示警告

提示警告即在用戶使用過程中，對(duì)用戶的操作進(jìn)行反饋或?qū)μ囟ㄐ畔⑦M(jìn)行警示的操作。提示的種類豐富，根據(jù)傳統(tǒng)的分類方式可以將它們分為強(qiáng)提示和弱提示兩類。

強(qiáng)提示字如其名，會(huì)用比較強(qiáng)硬的方式吸引用戶注意力，并需要用戶進(jìn)行額外的操作來關(guān)閉提示，常用于刪除、新建、變更等重要操作中。

強(qiáng)提示主要包含下面這些類型：

弱提示則應(yīng)用于一些權(quán)重較低的場(chǎng)景中，比如表示系統(tǒng)的狀態(tài)、操作的解釋、加載的進(jìn)度等等。同時(shí)，弱提示的出現(xiàn)通常不會(huì)影響用戶的正常操作流程，可以完全忽視它們，無需進(jìn)行額外的操作就會(huì)自己關(guān)閉。

弱提示主要包含下面這些類型：

其它

上面列舉的都是非常常見的控件和組件，相信大家早已司空見慣不需要我挨個(gè)解釋。但還有很多組件是無法被上面這些分類定義，且不能形成新的分類，就需要大家在實(shí)踐過程中自己區(qū)分和積累了。

同時(shí)，對(duì)于項(xiàng)目特有的業(yè)務(wù)組件來說，可以用業(yè)務(wù)或功能作為依據(jù)，對(duì)它們做出額外的分類，比如 CRM 系統(tǒng)中，用于展示客戶數(shù)據(jù)和企業(yè)數(shù)據(jù)的眾多組件，我們可以直接創(chuàng)建 “客戶展示組件” 和 “企業(yè)展示組件”兩個(gè)分類，而不是把它們強(qiáng)行歸類到通用組件的類型中去。

因?yàn)闃I(yè)務(wù)差異，致使任何成熟項(xiàng)目的組件庫分類都是不同的，所以在項(xiàng)目中搭建組件庫，需要設(shè)計(jì)師自己根據(jù)經(jīng)驗(yàn)和對(duì)需求的理解自己定義分類。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」