設(shè)計(jì)組件作為設(shè)計(jì)系統(tǒng)里的組成部分，可以說(shuō)是構(gòu)成這個(gè)系統(tǒng)最基礎(chǔ)也是最實(shí)用的部分了。它的出現(xiàn)比“設(shè)計(jì)系統(tǒng)”這個(gè)概念來(lái)得早，現(xiàn)在我們常說(shuō)的積累沉淀、可復(fù)用、避免重復(fù)造輪子、提高效率等好處，大多是來(lái)源于它。

早期的時(shí)候，組件拆分為兩個(gè)獨(dú)立的概念，一個(gè)以樣式為主，將常用的界面元素提煉出來(lái)，根據(jù)提煉的范圍包括樣式、形狀、狀態(tài)甚至交互，受眾主要為 UI 設(shè)計(jì)師，主要是為了提高設(shè)計(jì)師畫圖的效率。另外一個(gè)以邏輯為主，將常用的功能定義，交互規(guī)則和相關(guān)代碼等提煉出來(lái)，受眾主要為研發(fā)工程師(也輻射到交互設(shè)計(jì)師和產(chǎn)品經(jīng)理)，主要是為了提高研發(fā)碼代碼的效率。后來(lái)，一方面因?yàn)樵O(shè)計(jì)和研發(fā)協(xié)作性的加強(qiáng)，另一方面，可能是人們發(fā)現(xiàn)兩個(gè)庫(kù)的目錄長(zhǎng)得差不多，現(xiàn)在很多設(shè)計(jì)系統(tǒng)開始逐漸統(tǒng)一為一個(gè)概念。 

但這兩個(gè)概念在整個(gè)行業(yè)并沒有完全統(tǒng)一，加上設(shè)計(jì)圈也開始用組件(component)這個(gè)概念就更有點(diǎn)亂了，最初的 component 是由研發(fā)牽頭的，介紹里可是主要講代碼的。而現(xiàn)在在一致性的驅(qū)動(dòng)下，可能會(huì)出現(xiàn)概念名詞的混用，同一個(gè)名詞，這個(gè)設(shè)計(jì)系統(tǒng)里可能指一個(gè)概念，在另外一個(gè)設(shè)計(jì)系統(tǒng)里可能又指向了另外一個(gè)概念。在這篇文章里，我以“設(shè)計(jì)組件”來(lái)代表這兩個(gè)概念。(即用設(shè)計(jì)組件來(lái)代表我上一篇文的組件和模式兩個(gè)名詞。)

五個(gè)大廠 web 端組件

1. Ant design 組件

網(wǎng)址： https://ant-design.gitee.io/components/overview-cn/

螞蟻集團(tuán)出品，分 7 個(gè)大類提供了 61 個(gè)組件，技術(shù)和設(shè)計(jì)統(tǒng)一，每個(gè)組件上面是設(shè)計(jì)的介紹，下面就對(duì)應(yīng) API，而且可以支持 VUE 和 React 兩種技術(shù)棧。提供的 UI kit 也和網(wǎng)站的目錄對(duì)應(yīng)的非常好。我自己帶的設(shè)計(jì)組在做 web 端的時(shí)候也選用了 Ant design 為基礎(chǔ)。

2. Element design 組件

網(wǎng)址： https://element.eleme.cn/#/zh-CN/component/installation

餓了么出品，也和技術(shù)做了統(tǒng)一，支持的是 react 技術(shù)棧;和 Ant design 一樣也對(duì)所有組件先進(jìn)行了分類，分為六個(gè)大類接近 70 個(gè)組件，不過(guò)在六大類中有一個(gè)基礎(chǔ)分類，里面包含了色彩、icon、字體等，按照我上篇文里的分類，算風(fēng)格和規(guī)范了。同為阿里旗下的組件，個(gè)人比較喜歡 Ant design，單從分類來(lái)說(shuō)更具參考性一些。(具體分類參見文末表格)

3. Shopify Polaris 組件

網(wǎng)址： https://polaris.shopify.com/components/get-started

加拿大一家很有名的跨國(guó) Saas 模式電商服務(wù)公司出品的，將組件分為四個(gè)大類提供 24 個(gè)組件，技術(shù)和設(shè)計(jì)的統(tǒng)一性也做的很好，技術(shù)棧支持 React，css only。當(dāng)前設(shè)計(jì)資源僅提供 figma 格式，figma 上有該設(shè)計(jì)團(tuán)隊(duì)專門提供資源的網(wǎng)址： https://www.figma.com/@shopify

4. Aliteambition Clarity design 組件

網(wǎng)址： https://design.teambition.com/

將組件分為了四個(gè)大類，基礎(chǔ)、區(qū)塊、業(yè)務(wù)，還有個(gè)比較特殊的頁(yè)面模板類別。UI 資源里基礎(chǔ)和業(yè)務(wù)類組件就有 49 個(gè)。和研發(fā)的統(tǒng)一性也做的很好，每個(gè)組件的介紹都包含設(shè)計(jì)側(cè)和研發(fā)側(cè) API 的介紹，支持 React 技術(shù)棧。

5. IBM Cartoon design 組件

網(wǎng)址： https://www.ibm.com/design/language/

比較老牌的經(jīng)典設(shè)計(jì)系統(tǒng)，一共 35 個(gè)設(shè)計(jì)組件沒有像前面的設(shè)計(jì)一樣再分大類。每個(gè)組件會(huì)分類介紹它的用法、樣式、代碼和可用性，資源提供 sketch/XD/Axure 三種格式。

微軟公司

1. MR design 組件

網(wǎng)址： https://docs.microsoft.com/zh-cn/windows/mixed-reality/discover/mixed-reality

figma 資源網(wǎng)址： https://www.figma.com/file/ltLag9SxjUIyLQFsp7NNE7/Figma-Toolkit-for-MRTK-%2F-HoloLens%2C-Windows-Mixed-Reality?node-id=116%3A4

針對(duì)微軟旗下的虛擬混合眼鏡 Hololens 的設(shè)計(jì)系統(tǒng)，技術(shù)?；?Unity。

網(wǎng)頁(yè)展示上秉承了整個(gè)公司的產(chǎn)品線，沒有單獨(dú)啟一個(gè)網(wǎng)站，這點(diǎn)還是蠻佩服微軟的，畢竟這么多業(yè)務(wù)。

網(wǎng)站目錄里沒有統(tǒng)一設(shè)計(jì)組件概念，取而代之的是交互模式和 UX 元素中的控件和行為。但當(dāng)前提供的 figma 格式資源，里面是有用組件這個(gè)概念的，和頁(yè)面目錄并沒有一一對(duì)應(yīng)。我這里以它提供的 figma 文件來(lái)算，分為九個(gè)類別 14 個(gè)組件，包括具有 MR 特色的比如 Hand Gestures(目錄對(duì)應(yīng) Hand coach)和 Bounding Box(目錄對(duì)應(yīng) Bounding Box and App bars)。從數(shù)量上來(lái)看應(yīng)該是我這批捋的里最少的，但因?yàn)?MR 虛實(shí)結(jié)合的特性，很多效果不是單純的 UI 能提供，而是二維 UI、三維模型、光效和特效、算法，界面研發(fā)共同的作用。

2. Fluent design 組件

網(wǎng)址： https://docs.microsoft.com/zh-cn/windows/apps/design/

微軟公司最有名的設(shè)計(jì)系統(tǒng)和它最讓人熟知的產(chǎn)品同源，作用對(duì)象主要為微軟系統(tǒng)的桌面應(yīng)用(UWP)，并以此為基礎(chǔ)涵蓋多個(gè)終端，分為 12 類共計(jì) 56 個(gè)設(shè)計(jì)組件。和研發(fā)的統(tǒng)一性也做的比較好，每一個(gè)組件頁(yè)面都提供對(duì)應(yīng)的開發(fā)文檔。另外，和 Hololens 的 MR 設(shè)計(jì)組件一樣，當(dāng)前 UIkit 也只提供 figma 格式資源。

谷歌公司的 Material design

網(wǎng)址： https://material.io/components

相較于微軟公司，基于 Anroid 系統(tǒng)擴(kuò)展到其他終端的設(shè)計(jì)語(yǔ)言對(duì)后來(lái)的終端進(jìn)行了更好的兼容，一共 30 個(gè)組件也沒有再分類，技術(shù)和設(shè)計(jì)端也很好的統(tǒng)一在了一起，在每個(gè)組件的介紹頁(yè)面既有設(shè)計(jì)側(cè)的介紹也有給研發(fā)工程師看的內(nèi)容。

在這 30 個(gè)組件里，有 7 個(gè)組件不是源于最初的 Android 移動(dòng)端，而是基于終端特性新建的，這 7 個(gè)組件是 Backdrop/Banners/Data tables/image lists/Lists/Sheets:side/Tooltips。

設(shè)計(jì)資源提供了 XD、figma 和 Sketch 三種文件格式。

蘋果公司的 Human Interface Guidlines

網(wǎng)址： https://developer.apple.com/design/human-interface-guidelines/

最早以設(shè)計(jì)出名的蘋果公司的設(shè)計(jì)系統(tǒng)，它沒有像隨之而起的谷歌 Material design、微軟 Fluent design 等給自己取了一個(gè)好聽的名字，就還是我最初知道它的那個(gè)標(biāo)題：Human Interface Guidlines。

人機(jī)界面指導(dǎo)方針?？纯催@名字，一股指點(diǎn)江山的豪邁鋪面而來(lái)!這格局，這氣勢(shì)，比不得比不得!(抱歉，最近二次元看得比較多)

不過(guò)，從那臺(tái)革新了手機(jī)行業(yè)的第一代 iPhone 開始，它的確劃開了一個(gè)時(shí)代，沒有只說(shuō)不做。

現(xiàn)在，蘋果的 OS 組件已經(jīng)隨著蘋果產(chǎn)品線的擴(kuò)大從最初的 ios 擴(kuò)展到了 iOS、MacOS、WatchOS、tvOS 四大終端，主要為眾多在這些 OS 上研發(fā)應(yīng)用的開發(fā)者(包括設(shè)計(jì)師)服務(wù)。設(shè)計(jì)和研發(fā)的統(tǒng)一性也做的不錯(cuò)，但設(shè)計(jì)下的組件介紹頁(yè)面并不和開發(fā)語(yǔ)言混合，而是以“For developer guidance“開頭，指導(dǎo)鏈接到另外的頁(yè)面。和谷歌在組件下分終端不一樣，蘋果的整個(gè) OS 系統(tǒng)雖然秉承了一致性，但每個(gè)終端都對(duì)應(yīng)單獨(dú)的一套設(shè)計(jì)系統(tǒng)，并沒有“組件”這個(gè)概念。設(shè)計(jì)資源方面，在各個(gè)公司中少有的包含了 PS 格式的資源，OS13 還支持了 Keynote 格式。

1. iOS

蘋果設(shè)計(jì)系統(tǒng)的源起之處，對(duì)應(yīng)手機(jī)和 pad 端。

目錄里對(duì)應(yīng)設(shè)計(jì)組件的類別有四個(gè)分類(Bars、Views、Controls、Extensions)共計(jì) 38 個(gè)組件。另外還有應(yīng)用架構(gòu)、用戶交互、系統(tǒng)能力三個(gè)比較偏向交互邏輯和規(guī)則的介紹。不過(guò)，雖然 OS 系統(tǒng)的設(shè)計(jì)在其網(wǎng)站上沒有用組件這個(gè)詞，但它們的 Sketch 文件里倒是依然使用了組件(conponents)。

2. MacOS

目錄里將對(duì)應(yīng)設(shè)計(jì)組件分成 Windows and Views、Menu、Buttons、Fields and Labels、Selector、indicators、Touch Bar 和 Extensions 八個(gè)分類，共計(jì) 56 個(gè)組件。

好玩的是，MacOS 里還把它不建議使用的組件也放在了目錄內(nèi)(我這里未計(jì)入組件數(shù) 56 內(nèi))，比如在窗口和視圖分類里，它把自己不建議使用的 Drawers 和 Placards 也列了進(jìn)去，并列出了推薦使用的其他組件。果然是放眼人機(jī)界面指導(dǎo)方針，而不是局限在自己的 OS 設(shè)計(jì)系統(tǒng)內(nèi)。

2. WatchOS

目錄里設(shè)計(jì)組件這個(gè)概念被拆對(duì)應(yīng) Interaction 和 Element 兩大類，下面共計(jì) 22 個(gè)組件。和微軟的 MR design 一樣，由于終端的特殊性，交互分類下可以看到 Haptics 觸覺這種在其他設(shè)計(jì)組件里難得一見的目錄，也可以在 Element 里看到比如 Activity Rings 這種比較有意思的組件。

3. tvOS

網(wǎng)站目錄上和 watchOS 一樣使用的是 Element 概念，下面一共 13 個(gè)組件。

總的來(lái)說(shuō)，可以看到在近幾年新出的，終端比較單一的設(shè)計(jì)組件里兩個(gè)概念統(tǒng)一的趨勢(shì)表現(xiàn)明顯，但組件的概念隨著產(chǎn)品和業(yè)務(wù)的擴(kuò)展而復(fù)雜化后，這兩個(gè)概念就又會(huì)呈現(xiàn)出還未完全統(tǒng)一時(shí)的分離狀態(tài)，這在早幾年就開始建設(shè)設(shè)計(jì)系統(tǒng)并影響到整個(gè)行業(yè)的谷歌、蘋果和微軟產(chǎn)品的組件設(shè)計(jì)中都可見端倪。

隨著設(shè)計(jì)工程化和研發(fā)與設(shè)計(jì)協(xié)作性的加強(qiáng)，我認(rèn)為整個(gè)行業(yè)中，這兩個(gè)概念必將會(huì)繼續(xù)合并統(tǒng)一，但落到每一個(gè)具體的設(shè)計(jì)系統(tǒng)上，設(shè)計(jì)組件是否需要設(shè)計(jì)研發(fā)統(tǒng)一，統(tǒng)一到什么程度，還是要看設(shè)計(jì)組件存在的具體環(huán)境和需求的。畢竟，回歸本源，組件這個(gè)東西的存在，和設(shè)計(jì)系統(tǒng)一樣，都是為了提升效率才出現(xiàn)的。

最后，附一張這幾個(gè)設(shè)計(jì)組件的對(duì)比表格：