建议底部点击“原文链接”观看效果更好，如果文字错位等，CC在这道歉啦，站酷的文章上传的排版真的弄不来。

现在越来越多公司都建构了属于自己的设计体系，用一套企业级的UI设计语言和组件库，可以在多种途径上用于企业中后台产品的设计与开发。

通过组件和指南的建立，可以帮助公司建立统一的设计生态，同时建立高凝聚力的品牌形象。

今天我们来了解一下11家头部大厂的设计系统，并且CC也整理了组件下载包，我们一起来学习吧。

01.设计系统语言是什么？

设计系统语言是基于企业级产品的分工合作，所诞生出的一种组件规范。

我们可以在规范的明确指导下，建造企业级的设计库，用于标转化产品组件的复用，为参与设计的所有人员提供设计的规范样式，提供可共用的资源。

有的还会为企业级设计系统建立完整的设计价值观，定义设计原则，进而提供相应的设计解决方案。

02.设计系统可以做到什么？

设计团队：

• 建立统一的设计规范，使设计规模化。

• 有益于将更多的精力专注于如何提升用户体验，而非重复的样式调整。

• 快速的建立原型，用于前期的设计测试。

开发团队：

• 有助于扩展设计生态，保持多产品的形态一致和交互统一。

• 利于前端样式维护，新产品的代码复用。

• 有利于前端小白快速的搭建前端页面

产品品牌：

• 有利于打造一致的品牌形象和建立统一的用户情感

  
   

03.设计系统实例

今天我想分享一下我整理的业界大佬级的大厂，所研发出的设计系统实例。所有大厂组件源文件我都整理在本文最后，可供分享学习。

在我们建立企业级标准库时候，这些大厂的设计系统规范都可以给我们带来不同的启示和标准化的建议，甚至于我们完全可以拿来作为建立企业级设计系统的模版。其中的交互思维和价值观都值得我们认真学习。

1.Ant design

https://ant.design/index-cn

先介绍我们公司最常学习的一套设计系统，蚂蚁集团下的Antdesign设计系统。

这是一个基于react框架，封装开发的一套设计系统，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

其设计价值观围绕四点来建立：

【自然】

• 感知自然：充分汲取自然界规律，从而降低用户认知成本，带来真实流畅的感受

• 行为自然：节约用户脑力和体力，让人机交互行为更自然

【确定性】

• 设计者确定：赋能设计者、降低合作熵。

• 用户确定：在跨产品、跨终端、跨系统间保持良好的确定性

【意义感】

• 结果的意义：明确目标，即时反馈。

• 过程的意义：挑战适中，全情投入。

【生长性】

• 价值连接：设计者应建立系统设计思维，洞悉产品功能的价值，探索用户在不同场景下的需求，在价值和需求间建立连接

• 人机共生：产品功能和用户需求的更多连接，让人机互动更加紧密，用户和系统共生

它现在已经更新到4.x大版本，是一个较为完善的设计系统，其中囊括了交互中常用的互动行为，包括导航、数据录入、数据展示、反馈、操作、帮助等，并且在用例中展示这些组件的标准用法。定义了设计原则和模板，可以直接在线预览组件、体验交互方式。

2.Google Material Design

https://material.io

2014年Google着重为我们展示了Material Design这种设计框架，让用户在不同的平台上都可以得到一致的设计体验，在色彩上崇尚彩色，但是又增加沉稳色来中和多彩的俗套感，并且依然没有抛弃阴影的使用。

他的核心思想是把物理世界的体验带进屏幕...还原最贴近真实的体验，达到简洁与直观的效果。

遵循五大原则：

【材质隐喻】Material Design受物理世界及其物体纹理材质的启发，包括它们如何反射光线和投射阴影。材料表面进行重新构想，加入纸张和墨水的特性。

【大胆夸张】Material Design以印刷设计方法 - 排版，网格，空间，比例，颜色和图像为指导，创造出让用户沉浸在精心设计的视觉层级、视觉意义。

【动效表意】通过微妙的反馈和平滑的过渡来使动效保持一定的连续性。随着元素出现在屏幕上，他们在环境中转换和重组，相互作用产生新的变化。

【灵活】Material Design系统旨在实现品牌传达。它集成了一个自定义代码库，可以使组件，插件和设计元素无缝的衔接和灵活的运行。

【跨平台】Material Design 使用跨平台管理，其中包括 Android，iOS，Flutter 和 Web，方便设计师跨平台维护UI组件。

Material Design也涵盖了一系列主题，从颜色，版式和图标的设计原理到UI组件（其中许多可以作为开源使用）到代码文档和其他资源。

3.苹果人机界面准则

https://developer.apple.com/design/resources/

apple有用完整的人机界面准则，包括不同的主题，在各个模块组件和人机交互方式上都有明确的定义，保证在每个平台下都可以拥有统一的体验。

并且遵循三大原则

【清晰】字号都是清晰易读的，图标精确清晰

【遵从】尽量少的使用边框、渐变和阴影，使界面能够尽可能的轻量化，从而突出内容。

【深度】清晰的视觉层和生动的动效表达了层次结构

我们也可以找到有关应用程序的架构，拥有开发人员文档，包括教程，示例代码，文章和API参考；针对设计，apple也拥有广泛的资源库，其中包括sketch、photoshop和adobe XD的文件。

4.Microsoft Fluent Design

https://www.microsoft.com/design/fluent/#/

Microsoft在2017年的时候发布全新的Fluent Design，这是一个开源设计系统，并且可以进行跨平台的设计，为设计人员和开发人员提供所需要的框架，并且提供组件共享代码库，用于创建一致性的UX集合、也配备了完整的使用指南。

其设计理念为三点：

【所有设备自然】从平板到电脑到电视，都可以拥有统一流利的体验。

【直观而强大】预期人机交互，适应行为。

【参与感与沉浸式】基于真实物理世界。

Fluent非常在意光线，深度，运动，材质和比例。

5.Adobe Spectrum

https://spectrum.adobe.com/

Adobe Spectrum 是2019年Adobe刚对外开放的设计系统，可以使用XD插件对其进行即时访问，该系统有助于跨平台的一致体验，甚至你可以在平板，手机上完成设计。并且提供了组件和工具来帮助产品团队更有效地工作。

XD设计组件插件：地址：https://spectrum.adobe.com/page/spectrum-xd-plugin/

6.饿了么 Element

https://element.eleme.cn/#/zh-CN

Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。用于帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。资源内容也非常丰富，包括各种模块的组件。

遵循四点原则：

【一致性】

• 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

• 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

【反馈 】

• 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

• 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

【效率】

• 简化流程：设计简洁直观的操作流程；

• 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；

• 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

【可控】

• 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；

• 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

拥有开源的axure和sketch组件库可供学习引用。

7.微信小程序设计文档

https://developers.weixin.qq.com/miniprogram/design

基于微信小程序的开发特点，微信官方也制定了微信小程序的设计文档，旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，官方编写了详尽的设计指南，包括错误示范和正确设计方法，对设计中很多细节交互都有很好的指导作用。

遵循以下几个原则：

【友好礼貌】

• 重点突出

• 流程明确

【清晰明确】

• 导航明确，来去自如

• 减少等待，反馈及时

• 异常可控，有路可退

【便捷优雅】

• 减少输入

• 避免误操作

• 利用接口提升性能

  
   

【统一稳定】

8.滴滴Mand Mobile

https://mand-mobile.github.io/1x-doc/#/zh-CN/home

这是滴滴组建的面向金融场景的VUE移动端组件库，目标是丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。

适用于多场景的产生并且提供按需加载能力，提供丰富的可灵活转换的样式主题，UI样式可配置，轻松适应不同的设计风格。

9.IBM Carbon Design System

https://www.carbondesignsystem.com/

IBM Carbon Design System是所有IBM数字产品的开源系统，以IBM设计系统语言为基础，由设计资源、代码、工具组成。用这套系统可以提高UI的一致性和质量，也阐述了公司的设计理念，设计原则及其视觉语言准则。同时也支持Adobe XD的IBM设计插件。

共有四个主题，两个亮色（白色和灰色10）和两个暗色（灰色90和灰色100）。

不过没有源文件下载，CC整理了直接安装地址，小伙伴可以直接安装到组件库进行学习引用。

地址是这个：https://www.carbondesignsystem.com/designing/kits/sketch

10.Uber优步设计系统

https://brand.uber.com/guide#logo-overview

优步的设计系统用于保证该公司的品牌统一性而创建。其中包括UI组件开源库，视觉和样式指南，并且定义了基础组件的基本样式，这些被称为构建基块。

并且有非常多的素材分享，我们可以看这里下载：

https://brand.uber.com/downloads

11.奥迪设计指南

https://www.audi.com/ci/en/renewed-brand.html#

奥迪的设计指南包括一组UX原理或范例，以及具有交互式演示和可扩展代码段的UI组件集合。每个组件当中都用图像演示了每个图像的正确和错误实现。并且还定义了有关UI动画的准则，帮助用户完成设计。

包括了视觉样式和设计指南，以及对有关营销，运营方面也提供了各种指南。

甚至包括奥迪品牌图标奥迪环的设计理念和设计源文件，以及奥迪品牌所用的文字字体和规范，在板式上也非常值得我们学习。

| 福利福利：所有的大厂Guideline源文件，CC都已经打包整理好了，超40+的大厂规范组件文档，值得学习。小伙伴可以关注我的公众号【达芬奇的火柴盒（ccdataui）】，回复“设计系统大全”可以领取～

我是CC，带你一起分析前沿UI设计。

努力的你就 关注 努力的我吧～