有哪些组件值得学习？我梳理了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 个组件。

总的来说，可以看到在近几年新出的，终端比较单一的规划组件里两个概念一致的趋势表现明显，但组件的概念跟着产品和业务的扩展而复杂化后，这两个概念就又会呈现出还未完全一致时的别离状态，这在早几年就开端建造规划体系并影响到整个职业的谷歌、苹果和微软产品的组件规划中都可见端倪。

跟着规划工程化和研制与规划协作性的加强，我以为整个职业中，这两个概念必将会继续合并一致，但落到每一个详细的规划体系上，规划组件是否需要规划研制一致，一致到什么程度，仍是要看规划组件存在的详细环境和需求的。究竟，回归本源，组件这个东西的存在，和规划体系相同，都是为了提高效率才出现的。

最终，附一张这几个规划组件的对比表格

欢迎重视作者微信公众号：「林间有影落」