作為公司的產(chǎn)品老油條，大小也面了不下 50 個產(chǎn)品，產(chǎn)品經(jīng)驗橫跨 0~3 年、3~5 年。這么多次面試中，我每次都喜歡問一個問題"你大概了解幾種 UI 組件（前端組件）呢，能舉例說明一下嗎？"

然而每次給我的答復(fù) 80% 是"什么是組件？"有時我會繼續(xù)說"在頁面內(nèi)的所有內(nèi)容都可以稱為組件"候選人給我的反饋，還是一臉懵逼。

剩余的 20% 能答出"輪播、對話框、列表"等常見組件，就算產(chǎn)品基礎(chǔ)能力一般的了。

我真的很想問他們，難道你在設(shè)計原型的時候，連自己做的是什么都不知道嗎？那你的頁面是怎么設(shè)計出來的？后續(xù)的一系列交互反饋，又是依據(jù)什么進(jìn)行設(shè)計？

一、什么是組件？

創(chuàng)新，是在一系列約束條件下，對基礎(chǔ)元素的排列組合。

一些愛偷懶的產(chǎn)品，發(fā)現(xiàn)了產(chǎn)品設(shè)計的套路，他們熟知不同的大廠組件庫，了解 50+ 組件樣式和組件類型，再依據(jù)不同功能、場景、需求，將各種組件進(jìn)行排列、組合，完成頁面、功能、乃至模塊的高效設(shè)計。

那什么是組件呢？組件（Component）常見于互聯(lián)網(wǎng)的設(shè)計和開發(fā)工作中。

用于 UI 設(shè)計時，組件是界面的組成部分，包含了不同的類型、行為和狀態(tài)。而在開發(fā)領(lǐng)域，組件指的是對數(shù)據(jù)和功能的簡單封裝。

如圖為京東首頁，你認(rèn)得幾種組件呢

我對組件的理解是，組件是具有特定樣式和用途的內(nèi)容組合。

多個頁面基本元素（例如文本、字體、字色、形狀等）組成了組件，而多個組件又能組合成不同的頁面。

簡單來說，頁面內(nèi)的任意內(nèi)容，都可稱作組件。

二、組件的五種類型

我們可以把大多數(shù)組件，歸類為五種常見類型：基礎(chǔ)、導(dǎo)航、輸入、展示、反饋。

1. 基礎(chǔ)：基礎(chǔ)元素
2. 導(dǎo)航：位置指引
3. 輸入：數(shù)據(jù)錄入
4. 展示：數(shù)據(jù)顯示
5. 反饋：數(shù)據(jù)交互

如圖為有贊的 vant 組件庫，大致包含了 5 種類型，約 70+ 個組件，不同的組件有各自的樣式和用途。

基礎(chǔ)

基礎(chǔ)組件是一些常見的頁面基礎(chǔ)元素。

基礎(chǔ)組件主要有：圖標(biāo)、文本、按鈕、圖片、單元格、遮罩層、彈出層等。

導(dǎo)航

導(dǎo)航類組件，主要幫助用戶了解當(dāng)前位置和指引各個頁面跳轉(zhuǎn)。

該類組件包括宮格、導(dǎo)航欄、標(biāo)簽欄、索引欄、分頁器等。

輸入

輸入類組件一般用于數(shù)據(jù)錄入，例如選擇內(nèi)容、輸入文本等操作。

常見的輸入類組件有：單選框、復(fù)選框、輸入框、表單、選擇器等。

展示

展示類組件，主要用于顯示相關(guān)數(shù)據(jù)內(nèi)容。

頭像、徽標(biāo)、標(biāo)簽、列表、通知欄等組件都屬于展示類組件。

反饋

用戶進(jìn)行操作后，引發(fā)的一系列數(shù)據(jù)交互，即為反饋類組件。數(shù)據(jù)交互可以是內(nèi)容提示、狀態(tài)過渡、數(shù)據(jù)錄入等。

常見的反饋組件包含了對話框、吐司提示、氣泡提示、動作面板、下拉刷新等。

三、一些大廠的相關(guān)組件庫

1. Ant Design

Ant Design 是螞蟻集團(tuán)（體驗技術(shù)部）基于大量業(yè)務(wù)實踐和項目總結(jié)，抽象構(gòu)建出的企業(yè)級產(chǎn)品的設(shè)計體系。Ant Design 基于自然、確定性、意義感、生長性四大設(shè)計價值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗。

2. Zan Design

Zan Design 是有贊出品的一套服務(wù)于產(chǎn)品設(shè)計的設(shè)計模式和實踐方法。

它主要由產(chǎn)品原則、設(shè)計原則、內(nèi)容策略、布局與模式、視覺、動效、資源、組件等幾大部分組成。Zan Design 的組件庫支持桌面端、移動端、小程序等多端組件。

3. Arco Design

Arco Design 是字節(jié)跳動 UED 團(tuán)隊出品的企業(yè)級設(shè)計系統(tǒng)，字節(jié)旗下的今日頭條、番茄小說、頭條號、火山引擎等優(yōu)秀產(chǎn)品都使用了 Arco Design，同時它還支持多國語言、定制主題等特性。

4. 其他組件庫

除了上述的組件庫之外，還有：

1. 小程序組件：微信、支付寶、百度、字節(jié)、360 等；
2. 后臺組件：Element、Semi Design、King Design、58 同城 matrix 等；
3. web 組件：NutUI、Cube UI、VUX UI 等；
4. 綜合組件：Taro、UView UI。

總結(jié)

組件，是具有特定樣式和用途的內(nèi)容組合，主要有五種類型：基礎(chǔ)、導(dǎo)航、輸入、展示、反饋。

1. 基礎(chǔ)：基礎(chǔ)組件是一些常見的頁面基礎(chǔ)元素，例如圖標(biāo)、文本；
2. 導(dǎo)航：主要幫助用戶了解當(dāng)前位置和指引各個頁面跳轉(zhuǎn)；
3. 輸入：一般用于數(shù)據(jù)錄入，例如選擇內(nèi)容、輸入文本等操作；
4. 展示：主要用于顯示相關(guān)數(shù)據(jù)內(nèi)容；
5. 反饋：用戶進(jìn)行操作后，將會引發(fā)一系列數(shù)據(jù)交互。

不懂上述基礎(chǔ)組件，產(chǎn)品設(shè)計就像是盲人摸象。只能依靠以往的產(chǎn)品經(jīng)驗、或找?guī)讉€競品功能抄抄完事，下次遇到新需求又得重頭思考。所以，掌握組件概念，已經(jīng)成為初級產(chǎn)品的必備知識。

作者：產(chǎn)品之外