什么是设计系统(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 开始创造一个设计系统)
点击图片查看原图