編輯導語：很多設計師對基礎組件和高級組件兩者并沒有過多的區分，但是二者是存在明顯區別的，本篇文章作者講述了基礎組件和高級組件之間的概念區分和設計重點等內容，一起來學習一下吧。

你可能經常會有這樣的疑惑：對于彈窗的尺寸、抽屜的寬度、輸入框的長度、表格每一欄的寬度等等組件的細節尺寸，為什么 Ant Design 這類開源的組件庫，幾乎沒有給出明確的數值定義？

要回答這個問題，就要先理解這兩個概念：「基礎組件」和「高級組件」。

本文會從兩者的概念區別以及設計重點等方面，具體說說相關的知識。

一、概念區分

「基礎組件」和「高級組件」并不存在嚴格的界限區別，以至于很多設計師對二者沒有做過多的區分，但兩者各自有明顯的特點。

1. 基礎組件

「基礎組件」也可以被叫做「原子組件」或「通用組件」，是一種底層組件，其特點如下：

• 單一的不可再拆分的組件：比如一個 button，一個輸入框，一個開關等。
• 適用于各類業務場景：比如政務業務、電商業務、金融業務等業務都可以使用。
• 可保證設計質量和效率：使用組件可以使設計稿具備較高的一致性，并提升設計和開發的工作協同效率。

最為大家熟知的、典型的基礎組件庫就是 Ant Design，通用、開源、包容是其主要特點。迄今為止，Ant Design 已擁有超過 1k+的設計和開發貢獻者，被應用于 2w+ 的企業各類業務場景中。

2. 高級組件

「高級組件」也可以被叫做「區塊組件」或「業務組件」，是一種相對來說更具備業務屬性的組件，其特點如下：

• 是復合型的區塊組件：是基礎組件的合集，比如一個表單，一個表格，一張多功能卡片等。
• 適用于更專業的業務場景：帶有強烈的業務屬性，在業務實操設計過程中，會更有針對性、更高效。
• 可保證業務完成的專業性和效率：好的業務組件可以更好地賦能業務，更快地完成業務需求。

比如下圖中復合表單組件，提煉于政務類業務場景：

再比如下圖中指標 + 統計數值的復合組件，來源于數據統計類業務場景：

業務組件來源于業務，是設計師對有業務特色的、出現頻次高的組件進行的整理和沉淀。Ant Design Pro（TechUI）就是 AntD 團隊根據業務中的實際應用場景和需求，總結出的更適合螞蟻集團業務場景的高級組件庫。

二、設計重點

「基礎組件」和「高級組件」在搭建和設計的過程中要注意哪些內容？什么樣的內容可以被做成基礎組件？什么樣的內容和組件又可以 /應該被封裝成業務組件？

1. 基礎組件設計依據

基礎組件可以直接借鑒已有的、成熟的開源組件設計體系，減少重復勞作。如果自己的團隊也想做，判斷依據通常包括：

• 內容或元素出現和使用的頻次；
• 用戶操作后的基礎交互反饋，比如 hover 后出現的氣泡、違規操作后看到的提示條；
• 設計走查的過程中經常會看到的質量問題，也可以用組件來統一，比如 icon 的顏色總是用錯、位置總是上上下下差幾個不一致等等。

2. 高級組件設計依據

相比于基礎組件，高級組件因其獨特的業務屬性，以及與產品的強綁定關系，很難找到已有的組件庫進行借鑒和應用。判斷內容是否應該被沉淀的依據通常包括：

元素或內容是很多個基礎組件的拼接合集，且在很多場景中的布局具備一定規律，會同時出現；

在通用組件的基礎上帶有強烈的業務特性和需求，比如每次使用組件 A 的時候，都要加入業務需要的表單或提示信息，A 就可以升級成業務組件 A+。

需要注意的是，業務組件庫中的組件數量不是越多越好?！皩６庇袝r會更高效。畢竟設計系統的根本目的是降本提效，而非設計師炫耀設計價值的工具。

另外，“專而精” 也是另一個維度的 “全”。當我們通過對業務需求和屬性的深入研究，將業務組件做的足夠專業，也會從另一個維度對業務進行補充和賦能，從設計側推動業務進行體驗優化，促進產品質量的提升。

業務組件的搭建標準和規則，更多由業務設計師來決定，也是所有 B 端設計師應該精進的能力。

3. 完整概念列表

所以回到我們開篇遇到的問題：

“為什么對于彈窗的尺寸、抽屜的寬度、輸入框的長度、表格每一欄的寬度等等組件的細節尺寸，為什么 Ant Design幾乎沒有給出明確的數值定義？”

因為每個產品各具特色，對于這種與業務強相關的組件尺寸，在通用的、開源的基礎組件庫中，不太好給出一刀切的定義。

但在我們日常面對業務需求所用的高級業務組件庫中，則需要有明確的規范。

那么到底哪些數據需要被規范？應該如何編寫規范？「基礎組件」和「高級組件」在設計中還要注意到哪些細節？為了幫助大家更清晰地區分概念，關于「基礎組件」和「高級組件」我總結出了一個完整的清單列表：

• 基本概念區分；
• 案例區分；
• 組件設計工作流程區分；
• 組件設計內容區分。

本文由@ 元堯 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。