編輯導(dǎo)語：很多設(shè)計(jì)師對(duì)基礎(chǔ)組件和高級(jí)組件兩者并沒有過多的區(qū)分，但是二者是存在明顯區(qū)別的，本篇文章作者講述了基礎(chǔ)組件和高級(jí)組件之間的概念區(qū)分和設(shè)計(jì)重點(diǎn)等內(nèi)容，一起來學(xué)習(xí)一下吧。

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

要回答這個(gè)問題，就要先理解這兩個(gè)概念：「基礎(chǔ)組件」和「高級(jí)組件」。

本文會(huì)從兩者的概念區(qū)別以及設(shè)計(jì)重點(diǎn)等方面，具體說說相關(guān)的知識(shí)。

一、概念區(qū)分

「基礎(chǔ)組件」和「高級(jí)組件」并不存在嚴(yán)格的界限區(qū)別，以至于很多設(shè)計(jì)師對(duì)二者沒有做過多的區(qū)分，但兩者各自有明顯的特點(diǎn)。

1. 基礎(chǔ)組件

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

• 單一的不可再拆分的組件：比如一個(gè) button，一個(gè)輸入框，一個(gè)開關(guān)等。
• 適用于各類業(yè)務(wù)場(chǎng)景：比如政務(wù)業(yè)務(wù)、電商業(yè)務(wù)、金融業(yè)務(wù)等業(yè)務(wù)都可以使用。
• 可保證設(shè)計(jì)質(zhì)量和效率：使用組件可以使設(shè)計(jì)稿具備較高的一致性，并提升設(shè)計(jì)和開發(fā)的工作協(xié)同效率。

最為大家熟知的、典型的基礎(chǔ)組件庫就是 Ant Design，通用、開源、包容是其主要特點(diǎn)。迄今為止，Ant Design 已擁有超過 1k+的設(shè)計(jì)和開發(fā)貢獻(xiàn)者，被應(yīng)用于 2w+ 的企業(yè)各類業(yè)務(wù)場(chǎng)景中。

2. 高級(jí)組件

「高級(jí)組件」也可以被叫做「區(qū)塊組件」或「業(yè)務(wù)組件」，是一種相對(duì)來說更具備業(yè)務(wù)屬性的組件，其特點(diǎn)如下：

• 是復(fù)合型的區(qū)塊組件：是基礎(chǔ)組件的合集，比如一個(gè)表單，一個(gè)表格，一張多功能卡片等。
• 適用于更專業(yè)的業(yè)務(wù)場(chǎng)景：帶有強(qiáng)烈的業(yè)務(wù)屬性，在業(yè)務(wù)實(shí)操設(shè)計(jì)過程中，會(huì)更有針對(duì)性、更高效。
• 可保證業(yè)務(wù)完成的專業(yè)性和效率：好的業(yè)務(wù)組件可以更好地賦能業(yè)務(wù)，更快地完成業(yè)務(wù)需求。

比如下圖中復(fù)合表單組件，提煉于政務(wù)類業(yè)務(wù)場(chǎng)景：

再比如下圖中指標(biāo) + 統(tǒng)計(jì)數(shù)值的復(fù)合組件，來源于數(shù)據(jù)統(tǒng)計(jì)類業(yè)務(wù)場(chǎng)景：

業(yè)務(wù)組件來源于業(yè)務(wù)，是設(shè)計(jì)師對(duì)有業(yè)務(wù)特色的、出現(xiàn)頻次高的組件進(jìn)行的整理和沉淀。Ant Design Pro（TechUI）就是 AntD 團(tuán)隊(duì)根據(jù)業(yè)務(wù)中的實(shí)際應(yīng)用場(chǎng)景和需求，總結(jié)出的更適合螞蟻集團(tuán)業(yè)務(wù)場(chǎng)景的高級(jí)組件庫。

二、設(shè)計(jì)重點(diǎn)

「基礎(chǔ)組件」和「高級(jí)組件」在搭建和設(shè)計(jì)的過程中要注意哪些內(nèi)容？什么樣的內(nèi)容可以被做成基礎(chǔ)組件？什么樣的內(nèi)容和組件又可以 /應(yīng)該被封裝成業(yè)務(wù)組件？

1. 基礎(chǔ)組件設(shè)計(jì)依據(jù)

基礎(chǔ)組件可以直接借鑒已有的、成熟的開源組件設(shè)計(jì)體系，減少重復(fù)勞作。如果自己的團(tuán)隊(duì)也想做，判斷依據(jù)通常包括：

• 內(nèi)容或元素出現(xiàn)和使用的頻次；
• 用戶操作后的基礎(chǔ)交互反饋，比如 hover 后出現(xiàn)的氣泡、違規(guī)操作后看到的提示條；
• 設(shè)計(jì)走查的過程中經(jīng)常會(huì)看到的質(zhì)量問題，也可以用組件來統(tǒng)一，比如 icon 的顏色總是用錯(cuò)、位置總是上上下下差幾個(gè)不一致等等。

2. 高級(jí)組件設(shè)計(jì)依據(jù)

相比于基礎(chǔ)組件，高級(jí)組件因其獨(dú)特的業(yè)務(wù)屬性，以及與產(chǎn)品的強(qiáng)綁定關(guān)系，很難找到已有的組件庫進(jìn)行借鑒和應(yīng)用。判斷內(nèi)容是否應(yīng)該被沉淀的依據(jù)通常包括：

元素或內(nèi)容是很多個(gè)基礎(chǔ)組件的拼接合集，且在很多場(chǎng)景中的布局具備一定規(guī)律，會(huì)同時(shí)出現(xiàn)；

在通用組件的基礎(chǔ)上帶有強(qiáng)烈的業(yè)務(wù)特性和需求，比如每次使用組件 A 的時(shí)候，都要加入業(yè)務(wù)需要的表單或提示信息，A 就可以升級(jí)成業(yè)務(wù)組件 A+。

需要注意的是，業(yè)務(wù)組件庫中的組件數(shù)量不是越多越好?！皩６庇袝r(shí)會(huì)更高效。畢竟設(shè)計(jì)系統(tǒng)的根本目的是降本提效，而非設(shè)計(jì)師炫耀設(shè)計(jì)價(jià)值的工具。

另外，“專而精” 也是另一個(gè)維度的 “全”。當(dāng)我們通過對(duì)業(yè)務(wù)需求和屬性的深入研究，將業(yè)務(wù)組件做的足夠?qū)I(yè)，也會(huì)從另一個(gè)維度對(duì)業(yè)務(wù)進(jìn)行補(bǔ)充和賦能，從設(shè)計(jì)側(cè)推動(dòng)業(yè)務(wù)進(jìn)行體驗(yàn)優(yōu)化，促進(jìn)產(chǎn)品質(zhì)量的提升。

業(yè)務(wù)組件的搭建標(biāo)準(zhǔn)和規(guī)則，更多由業(yè)務(wù)設(shè)計(jì)師來決定，也是所有 B 端設(shè)計(jì)師應(yīng)該精進(jìn)的能力。

3. 完整概念列表

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

“為什么對(duì)于彈窗的尺寸、抽屜的寬度、輸入框的長(zhǎng)度、表格每一欄的寬度等等組件的細(xì)節(jié)尺寸，為什么 Ant Design幾乎沒有給出明確的數(shù)值定義？”

因?yàn)槊總€(gè)產(chǎn)品各具特色，對(duì)于這種與業(yè)務(wù)強(qiáng)相關(guān)的組件尺寸，在通用的、開源的基礎(chǔ)組件庫中，不太好給出一刀切的定義。

但在我們?nèi)粘Ｃ鎸?duì)業(yè)務(wù)需求所用的高級(jí)業(yè)務(wù)組件庫中，則需要有明確的規(guī)范。

那么到底哪些數(shù)據(jù)需要被規(guī)范？應(yīng)該如何編寫規(guī)范？「基礎(chǔ)組件」和「高級(jí)組件」在設(shè)計(jì)中還要注意到哪些細(xì)節(jié)？為了幫助大家更清晰地區(qū)分概念，關(guān)于「基礎(chǔ)組件」和「高級(jí)組件」我總結(jié)出了一個(gè)完整的清單列表：

• 基本概念區(qū)分；
• 案例區(qū)分；
• 組件設(shè)計(jì)工作流程區(qū)分；
• 組件設(shè)計(jì)內(nèi)容區(qū)分。

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

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