今天我們更近一步，再整理一次 B 端常用的控件和組件類型，幫助剛接觸 B 端的同學對 B 端組件庫的內容有更徹底的認識。

推薦閱讀

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

根據分子原理的邏輯，我們可以把 B 端的產品從整個項目拆解到最小的單元，那么對應的結構和層級順序如下：

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

首先基礎元素是 UI 界面中最下級的單位，只用于傳遞視覺和信息內容，包括：

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

控件則是產生交互效果的元件，是 UI 界面中最基礎的交互元素。比如按鈕、輸入框、標簽、進度條等，用于向用戶輸出或輸入數據。

組件則是比控件更復雜的交互元素，是由基礎元素和控件共同組成的更完整的業務、信息、功能模塊。

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

同理，類似側邊導航、日期選擇、表格、穿梭框等包含了不同基礎元素和控件的復雜模塊，也都是組件。

控件英文是 Controls，組件的英文則有不少，如 Elements、Components、Kits、Widgets 等。這兩個詞匯在各大系統、框架中并沒有嚴格的定義和劃分，所以在項目協作中往往會混用。同時它們也是編程中的專業術語之一，程序員口中的控件、組件往往和設計用的控件、組件不是一種東西。

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

組件對于 UI 界面設計來說是最重要的部分，因為界面是由組件組合而成，界面設計本質上就是逐步設計組件的過程。

在展開下面的具體類型認識和學習之前，要先強調組件可以劃分成三個大類：

1. 通用組件
2. 業務組件
3. 數據圖表

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

業務組件則是根據特定業務需求自定義的組件，比如在 OA 管理中添加的任務卡片、審批流程圖等組件，這在其它類型的產品中很難用到，或者因為需求的特殊性，只能用在本項目中，即使同類的其它項目也無法直接復用。

我們熟知的 Ant、Arco、TDesign 等開源框架提供的組件庫，都是通用組件，因為這些組件易于復用。而業務組件難以復用，需要設計師根據項目需求獨立定制，這是設計師在 B 端項目發揮的主要作用之一。

最后一個圖表組件，是用于反應數據的可視化圖形組件，無論是設計還是開發方式都和常規組件完全不同，所以我們會把它劃分成一個獨立的類型。

二、常見的組件類型認識

B 端項目的控件和組件眾多，除了通用組件和業務組件的區分以外，我們還可以根據作用類型對它們做出進一步的分類，主要的類型包含下面這些：

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

1. 按鈕

按鈕是 UI 中最重要、最原始的交互元素，用于啟動某個預設好的功能或程序。比如登錄按鈕，點擊后會發送賬戶密碼等數據給服務器進行驗證。

按鈕因為使用場景多、頻率高，所以衍生了出了很多下級分類，在 AntDesign 中，將按鈕分為了五種：

1. 主按鈕：用于主行動點，一個操作區域只能有一個主按鈕。
2. 默認按鈕：用于沒有主次之分的一組行動點。
3. 虛線按鈕：常用于添加操作。
4. 文本按鈕：用于最次級的行動點。
5. 鏈接按鈕：一般用于鏈接，即導航至某位置。

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

2. 數據輸入

輸入是指用于往系統內輸入、編輯數據的操作，用于實現這類操作的元素也被稱為表單控/組件。在主流的交互方式中，輸入分為兩個大類：

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

自定義輸入即用戶根據內容的類型自己輸入想要的數據，比如文本、密碼、圖片、附件等，用戶會輸入的具體內容系統是無法預判的，只能給出一定限制。

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

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

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

因為數據范圍、格式多種多樣，所以選擇類的控/組件類型非常多，常見的包含下面這些：

3. 導航引導

導航是用于對用戶所在位置、目標進行標識，或是引導用戶快速前往某些位置的操作。

最常見的導航就是全局組件中的導航，用于跳轉到不同的頁面中。但一個復雜的 B 端項目往往還會包含不同的頁面跳轉引導，比如面包屑或是步驟等。

常見的導航引導類組件包含下面這些類型：

4. 數據展示

數據展示即系統通過不同的方式向用戶展示指定數據的過程。在一個 B 端系統中數據的類型多種多樣，所以展示的形式也不同。

因為展示的形式很多，所以我們簡單劃分成兩個大類，獨立展示和列表展示。

獨立展示即展示的數據有一定的獨立性，在一個組件范圍內僅有一個，或和其它同類數據沒有序列關系，也是比較基礎的展示元素。比如下面這些常見的數據展示類型：

列表展示則是用有序的排列方法展示多個數據的形式，在 B 端項目中，列表展示的內容通常權重較高，也是重點設計的對象，常見的列表展示類型如下所示：

5. 提示警告

提示警告即在用戶使用過程中，對用戶的操作進行反饋或對特定信息進行警示的操作。提示的種類豐富，根據傳統的分類方式可以將它們分為強提示和弱提示兩類。

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

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

弱提示則應用于一些權重較低的場景中，比如表示系統的狀態、操作的解釋、加載的進度等等。同時，弱提示的出現通常不會影響用戶的正常操作流程，可以完全忽視它們，無需進行額外的操作就會自己關閉。

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

其它

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

同時，對于項目特有的業務組件來說，可以用業務或功能作為依據，對它們做出額外的分類，比如 CRM 系統中，用于展示客戶數據和企業數據的眾多組件，我們可以直接創建 “客戶展示組件” 和 “企業展示組件”兩個分類，而不是把它們強行歸類到通用組件的類型中去。

因為業務差異，致使任何成熟項目的組件庫分類都是不同的，所以在項目中搭建組件庫，需要設計師自己根據經驗和對需求的理解自己定義分類。

歡迎關注作者的微信公眾號：「超人的電話亭」