什么是设计系统（Design System）？
#迷你设计课
客户心目中的设计系统
我跟国内客户沟通设计方案时，总得跟不懂设计的老板、VP、总监们解释一下：
设计系统就像乐高积木，创建好之后交给你们 UI 设计师、PM 和程序员，他们拿这些积木搭建出完整产品。免得每次从头开始做设计、做开发，可以省掉
IT技术
(
twitter.com
)
什么是设计系统（Design System）？
#迷你设计课
客户心目中的设计系统
我跟国内客户沟通设计方案时，总得跟不懂设计的老板、VP、总监们解释一下：
设计系统就像乐高积木，创建好之后交给你们 UI 设计师、PM 和程序员，他们拿这些积木搭建出完整产品。免得每次从头开始做设计、做开发，可以省掉 80% 的基础工作
品牌规范是操作指南，教你们市场部同事怎么在宣传品里展示 logo、使用品牌色等等。品牌规范能保证你们的对外形象高级、清晰、一致，不像乱七八糟的草台班子
（注1）
设计师、PM 和程序员心目中的设计系统
常见的设计系统有 3 种
1，基于组件（components）的设计系统
这是大家最熟悉的设计系统，也是 Figma 这么多年以来强推的设计方式
1）专用设计系统，比如 Spotify 内部使用的 Encore 设计系统，覆盖了 400 名设计师和数千名程序员的日常工作，很难想象没有设计系统做约束，这么多人、这么多产品会分叉出多少分支
2）开放设计系统，比如 IBM 的 Carbon，基于 IBM 的设计语言，也适合不同企业
https://t.co/l85LnW4CJ8
3）还有松散的设计系统，比如美国政府的设计系统，它的服务对象是美国政府下面大量独立部门，所以它的组件（components）相对简单、通用，而复杂组件（pattern）那部分只有指南而不提供具体设计
https://t.co/iiIOkXTwR9
2，基于设计语言（Design Language）/设计指南的设计系统
1）一种是基于设计哲学和设计原则的设计系统，典型案例是 IBM 的设计语言：
https://t.co/nLLlCqtmdN
表面上来看，它只有宽泛的色彩、网格、排版、logo、字体等规范，活脱脱就是扩展版的品牌规范，既然连组件都没有，它完全不符合 Figma 定义的那种“原教旨主义设计系统”的定义
不过 UI 设计、UX 设计只是更宽泛设计的一部分，IBM 在这个设计系统里定义了诸如照片、技术插图之类的具体规范…对市场部而言，照片是最常用的一种组件，而对技术部门而言，技术插图也是他们最重要的一种组件
IBM 的这个设计系统，可以理解成设计系统的设计系统😂
2）另一种是远离 UI、更偏向 UX 的设计系统
这种常见于 app、网站之外的产品和服务，比如媒体/内容类产品
这里有个很有趣的例子，之前我跟“津津乐道”播客的 @zhufengme 朱峰老师合作，花了很长时间，从 UX 设计的角度优化“津津乐道”节目的收听体验
播客节目也是产品，虽然节目里并没有按钮、输入框这种视觉化的 UI 组件，但也可以通过标准化、模块化的方式获得友好的、一致的、有效的收听体验
今天“津津乐道”有自己独特的“设计系统”，不夸张地说，如果朱峰老师想在节目里放一个“高潮按钮”，他不但知道该怎么录制这个“高潮按钮”，更知道它听起来什么样、该放在节目哪儿、听众听完了有什么感觉😅😂
同样的“设计系统”，也在各种 10万+ 文章和长视频背后发挥作用
3，混合的设计系统
这是宽泛规范和具体组件相结合的设计系统，典型例子是 Atlassian 这个：
https://t.co/bE0DAgFKJI
它把品牌规范和组件、design token 等等并列，作为一套完整的、产品和营销部门都能使用的设计系统
不清楚他们怎么实施这套混合的设计系统，我很好奇
其他设计系统
如果各位老板、设计师、PM、程序员对设计系统感兴趣，推荐访问这个设计系统数据库
https://t.co/PwN1uQY9Fu
如果各位设计师、程序员有兴趣创建和维护自己的设计系统，可以从这两篇“设计系统 101”入门：
- Figma 的
https://t.co/6oEeNNmYHU
- NN Group 的
https://t.co/ZIPMlwVveJ
前端程序员熟悉的 UI Kit/UI 组件库不算设计系统（注2）
---
注1：
这么描述过于概括，不过这正是客户最在乎的：设计系统、品牌规范能为我创造什么价值
那为什么要把设计系统和品牌规范并列着解释？
因为品牌规范（Brand Guidelines）/视觉识别（Visual Identity）这些在国内已经实施了至少 30 年，而设计系统（Design System）在国内流行不足 10 年，至今很多公司没有真正意义上的设计系统
二者有点相似、功能上还有部分重叠，也难怪外行会混淆
注2：
相比完整的设计系统，UI Kit/UI 组件库通常有两个不同：
- 过于通用
UI Kit 既然是通用设计，肯定无法满足不同公司和客户、用户的不同实际需要
比如前几年流行的 Ant Design，它脱胎于阿里的企业级设计，最适合 2B 的后台/中台等产品；把它用在面向小企业和消费者的 SaaS 产品里，那种熟悉的“大厂”高大上调调就变成冷漠、刻板的“996”风格了
- 缺乏设计
UI Kit 通常基于组件（components），缺乏复杂组件（pattern）这一级的设计；同时 UI Kit 只覆盖 UI，并不会提供 UX 设计方向的指引
比如我们经常在管理系统里遇到由基本组件搭建的复杂表单，甭管用的是 Ant 还是 Tailwind，因为缺乏基本的 UI 设计和 UX 设计技巧，页面非常混乱、难以使用
对缺乏设计师的创业公司、小团队和独立开发者而言，可以把 UI Kit 当做基础的设计系统，来实现 UI 设计的 0-1 步骤；等设计师到位之后，第一时间把这个临时的“设计系统”改造成真正适合自身业务的设计系统（最好不要从 0 开始创造一个设计系统）
点击图片查看原图
