设计组件，作为设计系统的一部分，可以说是系统中最基础、最实用的部分。它的出现早于“设计系统”的概念。现在我们常说的好处是积累、复用、避免重复造轮子、提高效率。他们中的大多数来自它。在早期，组件被拆分成两个独立的概念。一种是基于样式，提取通用的界面元素。按照细化的范围，它包括样式、形状、状态甚至交互。受众主要是UI设计师，主要是为了提高设计师的作图效率。另一种是基于逻辑，提取常用的功能定义、交互规则和相关代码。观众主要是研发工程师（也辐射到交互设计师和产品经理），主要是为了提高研发代码的效率。后来，一方面由于设计和研发协作的加强，另一方面大家可能会发现两个库的目录看起来很像。现在许多设计体系逐渐统一为一个概念。模式与组件?NathanCurtis但这两个概念在整个行业内并没有完全统一，组件的概念也在设计圈中使用，这就更加让人迷惑了。原来的组件是R&D主导的，但是在introduction中主要讲的是代码。现在，在一致性的驱动下，概念名词可能会混合。同一个名词在这个设计系统中可能指代一个概念，在另一个设计系统中也可能指向另一个概念。在本文中，我将这两个概念称为“设计组件”。（也就是我上一篇文章中用设计组件来表示组件和模式这两个名词。）五大Web端组件1.Ant设计组件网址：https://ant-design.gitee.io/components/overview由-cn/蚂蚁集团出品，提供7大类61个组件。技术和设计是统一的。每个组件都是设计的介绍，下面是对应的API，可以支持VUE和React两种技术栈。提供的UI工具包也与网站目录非常吻合。我带的设计团队在做web端的时候也是选择了Antdesign作为基础。2.Element设计组件网址：https://element.eleme.cn/#/zh-CN/component/installation饿了么出品，技术统一，支持react技术栈；和Antdesign一样，先对所有组件进行分类，共有六大类近70个组件。不过六大类中有一个基本类，包括颜色、图标、字体等，按照我上篇文章的分类，就是算出来的样式和规格。也是阿里的一个组件，个人比较喜欢Antdesign，在分类方面比较翔实。（具体分类见文末表格）三、ShopifyPolaris组件网址：https://polaris.shopify.com/components/get-started知名跨国Saas模式电商服务公司出品在加拿大，组件分为四个类别，提供了24个组件，技术和设计的统一也做得很好。技术栈仅支持React和css。目前的设计资源只有figma格式，有一个设计团队提供figma资源的网址：https://www.figma.com/@shopify4。AliteambitionClarity设计组件网址：https://design.teambition.com/将组件分为四类，basic、block、business，以及一个特殊的页面模板类。UI资源中有49个基础组件和业务组件。与研发的统一也做得很好。各组件的引入包括设计端和研发端API的引入，并支持React技术栈。5.IBMCartoon设计组件网站：https://www.ibm.com/design/language/比较老的经典设计系统，一共35个设计组件，和之前的设计一样没有分类。每个组件都会分门别类地介绍它的用法、风格、代码和易用性，资源以sketch/XD/Axure三种格式提供。MicrosoftCorporation1.MR设计组件网址：https://docs.microsoft.com/zh-cn/windows/mixed-reality/discover/mixed-realityfigma资源网址：https://www.figma.com/file/ltLag9SxjUIyLQFsp7NNE7/Figma-Toolkit-for-MRTK-%2F-HoloLens%2C-Windows-Mixed-Reality?node-id=116%3A4针对微软旗下虚拟混合眼镜Hololens的设计体系，技术栈基于在团结。网页展示继承了整个公司的产品线，没有单独的网站。这是我很佩服微软的一点，毕竟有那么多的企业。网站目录中没有统一的设计组件概念，而是交互模式和UX元素中的控件和行为。但是目前提供的figma格式资源包含了有用组件的概念，并没有和页面目录一一对应。这里我用它提供的figma文件来统计，分为9大类14个组件，包括HandGestures（该目录对应Handcoach）和BoundingBox（该目录对应BoundingBox和Appbars）等MR特性).从数量上来说，应该是我这一批里最少的，但是因为MR虚实结合的特性，很多效果是纯UI无法提供的，但是2DUI，3D模型，光效特效，算法、接口开发共同作用。2、Fluentdesign组件网站：https://docs.microsoft.com/zh-cn/windows/apps/design/微软最著名的设计系统与其最知名的产品同源，主要对象是微软系统的桌面应用（UWP）在此基础上覆盖多终端，分为12类共56个设计组件。与研发的统一性也比较好，每个组件页面都提供了相应的开发文档。另外，和Hololens的MR设计组件一样，目前的UIkit只提供figma格式的资源。谷歌的Materialdesign网站：https://material.io/components与微软相比，基于Anroid系统扩展到其他终端的设计语言对后期终端的兼容性更好，共有30个组件不再分类，技术和设计方面也很好统一。在每个组件的介绍页面，既有设计方面的介绍，也有面向研发工程师的内容。在这30个组件中，有7个组件不是从原来的Android移动端派生出来的，而是根据终端特性新创建的。这7个组件是Backdrop/Banners/Datatables/imagelists/Lists/Sheets:side/Tooltips。设计资源提供三种文件格式：XD、figma和Sketch。Apple的HumanInterfaceGuidlines网站：https://developer.apple.com/design/human-interface-guidelines/Apple的设计体系，最初以设计出名，不像谷歌的Materialdesign，微软的Fluentdesign给了自己一个好听的名字，这是我第一次知道它的标题：人机界面指南。人机界面指南。看名字，一条指向江山的豪迈铺面！这布局，这气势，无与伦比！（不好意思，最近二次元看多了）不过，从第一代彻底改变手机行业的iPhone开始，确实开启了一个时代，不是光说不做。现在，随着苹果产品线的扩大，苹果的OS组件已经从最初的ios扩展到iOS、MacOS、WatchOS、tvOS四大终端，主要服务于众多在这些OS上开发应用的开发者（包括设计师）。设计和研发的统一性也不错，但是设计下的组件介绍页面并没有和开发语言混在一起，而是以“Fordeveloperguidance”开头，引导链接到其他页面。与谷歌在组件下划分终端不同，苹果整个OS体系虽然坚持一致性，但每个终端都对应一套独立的设计体系，没有“组件”的概念。在设计资源方面，很少有公司包含PS格式的资源，OS13也支持Keynote格式。1.iOS苹果设计系统的由来，对应手机和pad。目录中对应设计组件的类别有4个类别（Bars、Views、Controls、Extensions），共有38个组件。除此之外，还有三个介绍是比较偏向于交互逻辑和规则的：应用架构、用户交互、系统能力。然而，尽管OS系统的设计在其网站上没有使用组件这个词，但他们在他们的Sketch文件中仍然使用组件。2、在MacOS目录下，对应的设计组件分为八类：WindowsandViews、Menu、Buttons、FieldsandLabels、Selector、indicators、TouchBar和Extensions，共56个组件。有趣的是，MacOS还将其弃用的组件放在该目录中（我这里不把它们算在组件数量56中）。例如，在窗口和视图类别中，它把已弃用的Drawers和Placards也列出来，并列出其他推荐使用的组件。果然，它是在看人机界面指南，而不是局限于自己的OS设计系统。2、watchOS目录下设计组件的概念分为Interaction和Element两大类，下面共有22个组件。像微软的MR设计，由于终端的特殊性，在交互类下，可以看到其他设计组件中很少见到的Haptics类，也可以在Element中看到ActivityRings等更有趣的组件。3.tvOS官网目录使用了和watchOS一样的Element概念，下面一共有13个组件。总的来说，在近几年新发布的终端相对单一的设计组件中，可以看出两种概念统一的趋势很明显。但是，随着产品和服务的扩展，组件的概念变得复杂之后，这两个概念在没有完全统一的时候就会呈现出各自独立的状态。这一点可以从谷歌、苹果和微软产品的组件设计中看出，几年前就开始构建设计体系并影响了整个行业。随着设计工程化的加强，研发和设计的协同，我觉得在整个行业中，这两个概念会不断的融合和统一，但是具体到每一个具体的设计系统，是否需要统一设计组件在设计和开发中？统一程度取决于设计组件的特定环境和要求。毕竟，回归本源，组件的存在和设计系统一样，只是为了提高效率而出现的。最后附上这些设计组件的对比表：
