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

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

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

五個大廠 web 端組件

1. Ant design 組件

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

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

2. Element design 組件

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

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

3. Shopify Polaris 組件

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

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

4. Aliteambition Clarity design 組件

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

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

5. IBM Cartoon design 組件

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

比較老牌的經(jīng)典設(shè)計系統(tǒng)，一共 35 個設(shè)計組件沒有像前面的設(shè)計一樣再分大類。每個組件會分類介紹它的用法、樣式、代碼和可用性，資源提供 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

針對微軟旗下的虛擬混合眼鏡 Hololens 的設(shè)計系統(tǒng)，技術(shù)棧基于 Unity。

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

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

2. Fluent design 組件

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

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

谷歌公司的 Material design

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

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

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

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

蘋果公司的 Human Interface Guidlines

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

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

人機界面指導(dǎo)方針。看看這名字，一股指點江山的豪邁鋪面而來!這格局，這氣勢，比不得比不得!(抱歉，最近二次元看得比較多)

不過，從那臺革新了手機行業(yè)的第一代 iPhone 開始，它的確劃開了一個時代，沒有只說不做。

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

1. iOS

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

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

2. MacOS

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

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

2. WatchOS

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

3. tvOS

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

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

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

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