随着团队规模与日俱增，团队成员间需要一种具有拓展性、适应性的标准化设计语言，来规范统一整个团队的产出。

设计系统作为一种能够让团队中不同产品和平台的成员们，共同打造出卓越用户体验的指导准则。有了设计系统，团队可以更快地推进产品的设计与协作。

什么是设计系统？

设计系统包含了可复用的设计组件、元素与代码库，并对其使用有明确的标准规范。它为团队中每位产品、品牌设计师提供了统一的资源、规范和设计语言。

除此之外，你还会在设计系统中看到一些设计的 理念与价值观。

这些理念与价值观为团队定义了一个好的产品和品牌应该是什么样子的，这也是帮助了跨产品和平台工作的团队打造出色的用户体验。

设计系统为何如此重要？

设计系统将组件、元素、代码库和规范进行整合，可以帮助团队以更加统一的方式进行工作。

有了设计系统，设计师可以使用现成的UI组件快速构建产品框架；程序员可以将这些经过测试的代码段复制进现有的开发页面中；营销人员可以轻松找到内容指南和品牌形象进行推广宣传…

而这一切也将为用户 带来一致的品牌形象和出色的产品体验。

通过与团队各级、各部门的成员沟通后整理出的核心品牌理念与价值观，可以为团队的产出提供统一的评估依据，并让成员之间能够更有效地进行合作。

最后，设计系统可以帮助拥有多产品与平台的团队，在复杂业务形态下保持统一的产出。

设计系统需要包括什么内容？

1.概述

这个部分需要概述设计系统包含的内容，可以提及对系统的更新点，也可以阐述这个设计系统是如何定义好的设计，以及其对于团队的价值是什么。

2.基础规范

这部分包含对颜色、版式、图标、图片、声音、动效等视觉或样式的规范。

3.设计组件

这是一个可复用的UI组件库，包含视觉样式与对应的代码，同时需说明清楚如何以及何时该使用它们。

4.模式

这提供了多个组件组合的模式，示意这些组件可以通过怎样的组合方式，帮助解决常见的用户需求。

5.内容准则

这部分制定了有关语音语调、语法文体的标准，它还可以包括对词语使用方式与场景的阐述。

6.品牌准则

这包括对品牌价值、性格、品牌口号或展示方式等一系列品牌规范。

7.资源

本部分可以包括整个流程中需要用到的一系列工具、插件、UI组件、文章和视频教程等资源。

这13个设计系统值得我们参考

1. Google Material Design （网址见文末）

材质化设计于2014年推出，它主张界面中的组件可以模拟物理世界及其纹理(如物体如何反射光线和投射阴影)，让其变得更加熟悉和可预测，从而减少用户的认知负荷。

2. Apple Human Interface Guidelines （网址见文末）

苹果的人机交互指南为苹果平台(macOS、iOS、watchOS和tvOS)的设计、开发人员提供了指导，同时还补充了技术领域外的指南，涵盖了从增强现实到CaryPlay到HomeKit的所有内容。

3. Microsoft Fluent Design System （网址见文末）

Fluent开发于2017年，是微软公司共享代码、统一设计样式和交互行为的设计系统。

Fluent强调了五个感官元素——光、深度、运动、材质和比例。通过模拟物理世界中的表现，Fluent引导人们创造出更接近自然的体验。

4. Salesforce Lightning Design System （网址见文末）

Salesforce公司于2015年创建的Lightning设计系统，其率先使用了design tokens，让每个设计元素并不止是被代码写死，而是可以灵活变化而又有一致的视觉体系。

5. Atlassian Design System （网址见文末）

Atlassian最近推出了他们的新设计系统，新的设计体系包含了品牌使命、品牌个性、品牌价值、品牌承诺等部分。它还列出了基础、组件、模式、内容和资源的指导方针，以帮助人们简化创建过程。

6. Adobe Spectrum （网址见文末）

Spectrum设计系统自2019年起向公众开放，定义了Adobe系列应用程序的共同体验。

这个设计系统的核心理念是，一旦你学会了一种Adobe工具，你就可以很容易地掌握Adobe系列的全部工具。

7. IBM Carbon Design System （网址见文末）

IBM公司的Carbon是一个面向所有IBM数字产品的开源系统。与Carbon设计系统对应的是——IBM设计语言，它关注于公司的设计哲学、设计原则及其可视化语言指南。

8. GitLab Pajamas （网址见文末）

GitLab公司的Pajamas设计系统，其设计元素根据组件、区域和对象进行划分，以原子设计方法非常清晰地组织起来（通过一种模块化的方法，用基本UI组件等元素来组合出复杂的对象甚至整个页面）。

9. Mailchimp （网址见文末）

Mailchimp公司的设计系统包括两个部分：基础和组件。

这个设计系统的特点在于其数据可视化的部分，提供了如何通过颜色、形状和间距，传达清晰数据与品牌形象的指导。

10. ETrade Design Language （网址见文末）

ETrade公司的设计语言由基础、组件、模式和资源组成，每个组件显示不同的变化和状态、交互式演示、代码片段，以及包含正确和不正确用法示例的使用指南，旨在保持声音、语调和信息标准的同时保持品牌个性。

11. Uber （网址见文末）

Uber公司的设计系统涵盖了9个主要元素:标志、颜色、构图、图像、插图、动作、摄影、语音语调和排版。

除了视觉和风格指导，Uber还创建了Base Web——基本UI组件开源库，包括排版、颜色、网格、图标、按钮、列表和控件等基本元素。

12. The Guardian Digital Design Style Guide （网址见文末）

Guardian的设计风格指南，包括从对网页内容的概述到对细粒度元素的指导规范，演示了设计团队如何处理颜色、排版、布局、规则和间距。

13. Audi （网址见文末）

奥迪公司的设计系统包括用户体验原则、范例、交互式演示、可扩展代码片段和UI组件。该网站还包括UI动画的指导方针，保证动画可以更好的帮助用户完成操作并提供反馈。

写在最后

虽然设计系统作为指导团队拓展设计与开发工作的规范，但随着更多新技术的应用（例如语音设计、AI或AR界面设计），设计系统需要随着创新和变革的步伐不断迭代。

重要的是，我们需要 确保这个系统具有足够的空间来兼容新的设计工具和方法。

- - - - -

本文由 SDL艺术实验室 公众号原创，未经许可，禁止转载。

原文链接（文末有以上全部13个设计系统入口）：https://mp.weixin.qq.com/s/hZuSvQYVCC5SsrrmhoBMew

Powered by Froala Editor