有哪些組件值得學習？我梳理了8個大廠的設計組件！

設計組件作為設計系統里的組成部分，可以說是構成這個系統最基礎也是最實用的部分了。它的出現比“設計系統”這個概念來得早，現在我們常說的積累沉淀、可復用、避免重復造輪子、提高效率等好處，大多是來源于它。

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

模式和組件 ?Nathan Curtis

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

五個大廠 web 端組件

1. Ant design 組件

網址： https://ant-design.gitee.io/components/overview-cn/

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

2. Element design 組件

網址： https://element.eleme.cn/#/zh-CN/component/installation

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

3. Shopify Polaris 組件

網址： https://polaris.shopify.com/components/get-started

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

4. Aliteambition Clarity design 組件

網址： https://design.teambition.com/

將組件分為了四個大類，基礎、區塊、業務，還有個比較特殊的頁面模板類別。UI 資源里基礎和業務類組件就有 49 個。和研發的統一性也做的很好，每個組件的介紹都包含設計側和研發側 API 的介紹，支持 React 技術棧。

5. IBM Cartoon design 組件

網址： https://www.ibm.com/design/language/

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

微軟公司

1. MR design 組件

網址： https://docs.microsoft.com/zh-cn/windows/mixed-reality/discover/mixed-reality

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

針對微軟旗下的虛擬混合眼鏡 Hololens 的設計系統，技術棧基于 Unity。

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

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

2. Fluent design 組件

網址： https://docs.microsoft.com/zh-cn/windows/apps/design/

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

谷歌公司的 Material design

網址： https://material.io/components

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

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

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

蘋果公司的 Human Interface Guidlines

網址： https://developer.apple.com/design/human-interface-guidelines/

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

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

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

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

1. iOS

蘋果設計系統的源起之處，對應手機和 pad 端。

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

2. MacOS

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

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

2. WatchOS

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

3. tvOS

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

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

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

最后，附一張這幾個設計組件的對比表格

歡迎關注作者微信公眾號：「林間有影落」