Appearance
模块 5：设计系统——品味的编码与治理
A design system is not a component library. It is a set of shared convictions about how things should look, feel, and behave — encoded into constraints that scale. The real question is not "do we have a design system?" but "what taste does our system enforce?"
学习目标
完成本模块后，你将：
- 理解设计系统不是组件库，而是品味的制度化表达
- 掌握 Brad Frost 原子设计（Atomic Design, 2016）的五层模型及其品味含义
- 理解 Design Tokens 如何将品味决策从"隐性知识"转化为"显性规则"
- 能够区分"一致性有助于品味"和"一致性压制品味"的情境
- 对比分析 Material Design、Apple HIG、Ant Design、Primer 四个系统的品味取向
- 理解设计系统的治理（governance）如何影响品味的演化
- 识别系统性品味与个案品味之间的永恒张力
一、设计系统的本质：品味的规模化
超越"组件库"的理解
2023 年 Figma 的 Config 大会上，Figma CEO Dylan Field 说了一句被广泛引用的话："Every company is now a design systems company." 但这句话掩盖了一个更深层的问题：大多数公司有组件库，但没有设计系统。
组件库是零件目录——按钮、输入框、卡片、模态窗。你可以用同一套零件造出品味截然不同的产品，正如你可以用同一套乐高积木造出优雅或丑陋的建筑。
设计系统是品味的编码。 它回答的不是"我们有哪些零件"，而是"我们相信产品应该如何表现"。
Nathan Curtis（EightShapes 创始人）在他 2017 年的 Modular Web Design 系列文章中区分了三个层次：
| 层次 | 内容 | 品味维度 |
|---|---|---|
| 组件库 | 可复用的 UI 元素 | 视觉一致性 |
| 设计语言 | 颜色、排版、动效、语气的整体协调 | 审美方向 |
| 设计系统 | 语言 + 原则 + 治理 + 工具 + 文化 | 品味的制度化 |
设计系统作为"品味宪法"
如果品味是关于"什么是好的"的判断力，那么设计系统就是这种判断力的宪法化——把个体的品味直觉变成集体遵守的规则。
这个类比揭示了核心张力：
- 宪法需要稳定性——频繁修改会让系统失去权威
- 品味需要进化——僵化的品味是死的品味
- 宪法需要解释空间——过于具体会限制应用
- 品味需要具体性——过于抽象等于没有品味
每个设计系统都在这四个张力之间寻找平衡。找得好的，成为品味加速器；找得差的，成为创造力监狱。
二、原子设计：品味的层次结构
Brad Frost 的五层模型
Brad Frost 在 2013 年的博客文章中首次提出原子设计（Atomic Design），2016 年出版同名著作将其系统化。他借用化学的隐喻建立了一个从微观到宏观的设计层次：
| 层次 | 化学类比 | 设计对应 | 例子 |
|---|---|---|---|
| Atoms | 原子 | 最小不可分的 UI 元素 | 颜色值、字号、按钮、输入框 |
| Molecules | 分子 | 原子的功能组合 | 搜索框（输入 + 按钮 + 图标） |
| Organisms | 有机体 | 分子组成的独立功能区域 | 导航栏、产品卡列表 |
| Templates | — | 页面级布局结构 | 商品详情页骨架 |
| Pages | — | 填入真实内容的模板 | 具体的商品详情页 |
每一层的品味决策
原子设计的深刻之处不在于分类本身——它在于揭示了品味决策在不同层次的不同性质：
原子层的品味是关于基本品质的。你选的蓝色有多少饱和度？圆角半径是 4px 还是 8px？这些看似琐碎的决定累积起来构成了产品的"基因"。
Jina Anne（Design Tokens 概念的核心推动者，曾任 Salesforce Lightning Design System 设计主管）在 2019 年 Clarity Conference 上指出：
"Design tokens are the atoms of the design system. They store the visual DNA — the values that, when changed, cascade through every molecule and organism."
分子层的品味是关于关系的。一个搜索框中，输入框和按钮的间距、对齐、视觉权重关系——这些决定反映的是你对"元素之间如何相处"的审美判断。
有机体层的品味是关于节奏和密度的。一个导航栏放多少项目？信息密度多高？留白多少？这里的品味决策直接影响产品给人的"呼吸感"。
模板/页面层的品味是关于叙事和优先级的。用户的视线应该先看到什么？信息层次如何编排？这是内容策略和视觉设计的交汇点。
原子设计的品味陷阱
Dan Mall（SuperFriendly 创始人，与 Brad Frost 长期合作）在 2020 年的 Design System in 90 Days 中警告了一个常见误区：
"Teams that start with atoms and work their way up tend to build perfectly consistent but completely soulless systems."
自下而上的品味构建容易丧失整体感。 就像一个交响乐团中每个乐器音准完美但缺乏指挥——技术上无可挑剔，但没有音乐性。
好的设计系统需要双向工作：从原子向上构建一致性，同时从页面/体验向下定义品味方向。Brad Frost 自己后来也承认这一点——原子设计是组织工具，不是设计流程。
设计系统
Shopify Polaris 的品味重构
问题：Shopify 的设计系统 Polaris 在 2022 年经历了一次大规模重构（从 v10 到 v12）。这次重构不仅是视觉更新——它重新定义了 Polaris 的品味方向：从'中性、不碍事'转向'有温度、有主见'。一个设计系统的品味转向为什么比单一产品的品味转向困难得多？
分析：设计系统的品味转向面临三层阻力。第一层是技术债：每个 token、每个组件都被数百个页面引用，改变一个颜色值可能影响上千个界面。第二层是认知债：数百名设计师和开发者已经内化了旧系统的品味逻辑，重新训练需要时间。第三层是政治债：不同产品团队对'品味应该是什么'有不同理解，系统级的品味转向需要高层级的共识。Polaris 重构的成功在于它不是简单地'换皮肤'——它重新定义了设计原则（从 4 条变成 3 条），重新建立了 token 体系（引入了语义化 token），并投入了大量精力做内部教育（workshop、迁移指南、office hours）。品味转向的真正难度不在于'设计新的东西'，而在于'让所有人理解并内化新的判断标准'。
三、Design Tokens：品味的原子化
什么是 Design Token
Design Token 是一个看似纯技术的概念，但它可能是设计系统中品味含量最高的部分。
Jina Anne 在 2014 年于 Salesforce 创建 Lightning Design System 时，创造了"design token"这个术语。简单说，token 是最小的设计决策单元——一个被命名、被存储、可以跨平台使用的设计值。
// 这不是 token——这是一个值
color: #0066FF;
// 这是 token——这是一个被命名的决策
--color-brand-primary: #0066FF;
// 这是语义化 token——这是一个被解释的决策
--color-action-primary: var(--color-brand-primary);Token 层次与品味层次
成熟的 token 系统通常有三层，每层代表不同的品味抽象度：
| Token 层次 | 例子 | 品味含义 |
|---|---|---|
| 全局 Token | blue-500: #2563EB | 品牌的色彩基因 |
| 语义 Token | color-action-primary: blue-500 | 品味的意图表达 |
| 组件 Token | button-bg-primary: color-action-primary | 品味的具体实现 |
关键洞察： 全局 token 是"我们有哪些颜色"，语义 token 是"我们用颜色表达什么意思"，组件 token 是"在这个具体地方我们怎么用"。
品味存在于语义层。 决定"蓝色用于行动"而非"红色用于行动"——这是一个品味判断。决定"错误提示用红色 + 图标 + 文字"而非"只用红色文字"——这也是品味判断。
Token 决策背后的品味哲学
每个看似"技术性"的 token 决策背后都有品味立场：
圆角半径
border-radius: 0— 精确、理性、Mies 式（如早期 Material Design）border-radius: 4px— 微妙柔和、专业（如 GitHub Primer）border-radius: 8px— 友好、现代（如 Linear）border-radius: 16px+— 温暖、有机（如 Apple iOS 设计语言）border-radius: 9999px— 药丸形、极度圆润（如 Spotify）
你选择哪个值，你就在表达一种关于"产品应该给人什么感觉"的品味立场。
间距系统
- 4px 基准 — 紧凑、高密度（信息型产品）
- 8px 基准 — 平衡、灵活（多数 SaaS）
- 更宽松的间距 — 留白多、"呼吸感"强（消费级产品）
间距品味直接反映产品对"信息密度 vs 视觉舒适"这对永恒矛盾的立场。
从 Token 值推断产品品味
以下是四组真实的 Design Token 值（已隐去品牌名）。根据这些数值推断每个系统的品味取向：更偏理性严谨还是温暖友好？更偏高密度还是宽松？
样本 A
样本 B
样本 C
样本 D
四、四大设计系统的品味对比
Material Design：品味的民主化
Google 的 Material Design（Jon Wiley 和 Matias Duarte 主导，2014 年发布，2024 年已迭代至 Material Design 3）是设计史上最雄心勃勃的品味民主化实验。
核心品味立场： 物理世界的隐喻——"Material"是纸张，有厚度、有阴影、会移动。这个隐喻让数字界面有了可理解的物理逻辑。
品味优势：
- 将"什么是好的交互"编码为详尽的规范——降低了品味的门槛
- 动效系统（motion system）极其完整——有明确的时长、缓动、编排规则
- Material Design 3 引入了 Dynamic Color——让品味从"系统规定"进化到"用户共创"
品味代价：
- 无处不在导致"Material 疲劳"——所有 Android 应用看起来都一样
- 过于详尽的规范让设计师变成"规范执行者"而非"品味创造者"
- 物理隐喻有时限制了纯数字交互的想象空间
Apple HIG：品味的独裁
Apple Human Interface Guidelines（始于 1987 年，持续演化）是品味独裁的典型——它不只是说"你可以怎么做"，它还说"你不能怎么做"。
核心品味立场： 人是中心。每个交互都应该是直觉的、愉悦的、尊重用户的。Apple 不提供"主题系统"——因为它认为好品味只有一种表达。
品味优势：
- 极度一致性带来的信任感——用户在任何 Apple 应用中都知道怎么操作
- 动效品味极高——每个转场都经过毫秒级校准（Craig Federighi 在 WWDC 上多次强调 60fps 的重要性）
- 对细节的执着创造了"Apple 感"——一种难以言传但一眼可辨的品质
品味代价：
- 高度强制性（App Store Review Guidelines）可能压制创新
- 平台风格如此强烈，第三方应用很难建立自己的品味身份
- "Apple 品味"的文化假设——圆角、大字体、白色空间——并非普适
Ant Design：品味的工程化
蚂蚁集团的 Ant Design（2016 年开源）代表了一种独特的品味哲学：效率即品味。
核心品味立场： 企业级产品的核心诉求不是"愉悦"而是"高效"。在一个后台管理系统中，信息密度比留白更重要，操作效率比动效愉悦更重要。
品味优势：
- 中文环境下的排版品味精心校准（行高、字间距针对中文优化）
- 表格、表单等企业级高频场景打磨极深
- Pro Components 体现了"不是拒绝品味，而是针对特定场景的品味"
品味代价：
- "Ant Design 味"在中国互联网成为了"B 端产品 = 长这样"的模板——品味变成了模式
- 过度依赖 Ant Design 的团队容易丧失独立的品味判断力
- 视觉表现力有限——不适合需要情感共鸣的场景
GitHub Primer：品味的自我克制
GitHub 的 Primer Design System 是最"安静"的设计系统之一——它的品味在于极度克制。
核心品味立场： 内容（代码）是主角。设计系统应该像空气一样——你需要它但不应该注意到它。
品味优势：
- 极度尊重内容——GitHub 界面的"无设计感"恰恰是最高的设计品味
- 对 accessibility 的重视（WCAG 合规是硬要求，不是加分项）
- 开源治理模式让品味演化是透明的、可参与的
品味代价：
- 过度克制有时让界面显得"无聊"（这是代价还是特征？）
- 开发者导向的品味可能不适合更广泛的用户群
四大系统的品味立场
Material Design：品味民主化
让所有开发者都能做出还不错的界面。代价是天花板被拉低——很难用 Material 做出惊艳的设计。品味哲学：好品味应该是基础设施，而非精英特权。
Apple HIG：品味独裁
只有一种正确的方式。代价是创新空间被压缩。品味哲学：好品味只有一种，由最有品味的人定义，所有人遵守。
Ant Design：品味工程化
效率是最高品味标准。代价是情感维度被系统性忽视。品味哲学：在特定语境（企业级应用）中，功能完善度本身就是品味。
Primer：品味自我克制
最好的设计系统是你感觉不到的。代价是可能显得寡淡。品味哲学：品味不是表演——是在正确的时候隐身。
思考：这四种品味哲学各适合什么类型的产品？有没有一种产品需要同时兼具其中两种以上的品味？你做过或用过的产品最接近哪种？
五、治理与演化：品味如何在系统中生长
设计系统的治理模型
Nathan Curtis 在 2018 年的一系列文章中定义了三种设计系统治理模型：
| 模型 | 决策方式 | 品味含义 |
|---|---|---|
| 集中式 | 核心团队决定一切 | 品味高度统一但可能脱离使用场景 |
| 联邦式 | 核心团队定方向，产品团队有自由度 | 品味在框架内多样化 |
| 分布式 | 各团队自行决定，共享组件 | 品味多样但可能失去一致性 |
Apple 是极端集中式——HIG 团队对品味有绝对权威。GitHub Primer 更偏联邦式——有核心原则但 RFC（Request for Comments）机制允许社区参与。Ant Design 的开源模式则是分布式——核心团队维护基础，但社区的二次封装（如 ProComponents）有自己的品味判断空间。
"何时遵守 vs 何时打破"——系统品味的核心问题
每个使用设计系统的设计师都会遇到这个时刻：系统的规范和你的判断冲突了。
按钮的规范说圆角 8px，但你正在做的这个页面中，8px 圆角和周围的视觉元素不协调——你觉得 4px 更好。你该遵守系统还是信任直觉？
Dan Mall 提出了一个有用的框架：
"Follow the system when the system is smarter than you (typography scales, accessibility rules, spacing grids). Break the system when you are smarter than the system (a specific context where the general rule fails)."
翻译成品味的语言：当系统编码的是品味原则时，遵守它；当系统编码的是品味教条时，挑战它。
区分的标准：
- 原则：有充分理由的、在多数情况下有效的判断（如"行动按钮应该视觉突出"）
- 教条：曾经有效但被僵化为不可变规则的判断（如"主按钮必须是蓝色"）
品味的制度化悖论
设计系统面临一个根本悖论：
- 品味需要被编码才能规模化
- 品味一旦被编码就开始僵化
- 僵化的品味不再是品味——它是规则
- 所以设计系统必须不断"自我解构"才能保持品味活力
Ethan Marcotte（响应式设计之父）在 2023 年的一篇文章中说："The best design systems are the ones that know how to deprecate themselves gracefully."（最好的设计系统懂得如何优雅地废弃自己。）
这对品味训练的启示：有品味不仅意味着知道什么是好的，还意味着知道好的东西何时过期。
你的产品需要什么品味的设计系统？
30-40 分钟选择一个你正在使用或开发的产品，为它设计一个'品味宣言'（taste manifesto）——不是组件规范，而是品味原则。完成以下练习：(1) 定义 3-5 条品味原则（如'信息密度优先于视觉留白''动效用于确认而非装饰'），每条解释为什么它对这个产品重要；(2) 为每条原则给出一个'遵守'和一个'过度遵守导致问题'的例子；(3) 定义一个'何时打破这些原则'的判断标准。
建议结构：
品味原则定义~40%
不要写空话（如保持简洁）——每条原则应该具体到能指导设计决策。问自己：如果两个设计师意见不同，这条原则能帮他们做决定吗？
正反例~35%
过度遵守的例子尤其重要——它帮你理解每条原则的边界在哪里。好原则有有效范围，教条没有。
打破标准~25%
不需要面面俱到——给一个清晰的判断流程（如当用户测试数据显示XX时，可以打破原则Y）。
- 好的品味原则是有立场的——它排除了一些可能性。我们的产品宁可看起来拥挤也不要让用户多点一次就是有立场的
- 参考 Linear 的设计原则：它们每一条都有明确的取舍（如opinionated over flexible）
- 如果你写不出过度遵守的例子，说明原则太模糊——任何好原则都有过度使用的风险
目标：500 字
六、延伸阅读
必读
Brad Frost, Atomic Design (2016)
- 免费在线阅读：atomicdesign.bradfrost.com。重点不在分类法本身——在于理解"层次化思考"如何改变设计过程。
Nathan Curtis, "Defining Design Systems" (2017, Medium)
- 对设计系统最清晰的定义。特别注意他对"系统 vs 库 vs 语言"的区分。
推荐
Jina Anne, "Design Tokens: Scaling Design with a Single Source of Truth" (2019, Clarity Conference 演讲)
- Design Tokens 概念的权威阐释。理解 token 不只是技术工具——它是品味决策的最小单元。
Dan Mall, Design System in 90 Days (2020)
- 实战导向但不失深度。特别好地处理了"治理"问题——谁来决定系统的品味方向？
Ethan Marcotte, "Design Systems, Agile, and Managing Debt" (2023)
- 对设计系统"技术债 = 品味债"的深刻分析。系统积累的不只是代码债务，还有品味债务。
Material Design 3 官方文档 — "Design Tokens" 章节 (m3.material.io)
- Google 如何将品味决策 token 化的最完整实践。对比阅读 Primer 的 token 文档，感受两种品味取向的差异。
体验
- 打开 GitHub Primer（primer.style）和 Ant Design（ant.design）的文档，逐一比较它们对同一个组件（如 Button、Modal、Toast）的处理。不看代码——看它们的设计决策有什么不同。
- 如果你使用 Figma：研究一个你尊敬的产品的 Figma Community 设计系统文件——看他们如何组织 token 和组件。
七、本模块要点
- 设计系统不是组件库——它是品味的制度化表达，回答"我们相信产品应该如何表现"
- Brad Frost 的原子设计提供了品味的层次结构：原子层是基本品质，分子层是关系，有机体层是节奏，模板/页面层是叙事
- Design Tokens 是品味的最小单元——每个 token 值（圆角、间距、颜色）都编码了一个品味立场
- Material Design 追求品味民主化（所有人都能做出还不错的界面），代价是品味天花板被拉低
- Apple HIG 追求品味独裁（一种正确方式），代价是压缩了创新空间
- Ant Design 将效率视为最高品味标准，为企业级场景深度优化，但情感维度被系统性忽视
- Primer 的品味在于极度克制——最好的设计系统是你感觉不到的
- 设计系统治理的核心问题是"何时遵守 vs 何时打破"——遵守原则，挑战教条
- 设计系统面临根本悖论：品味需要编码才能规模化，但编码本身会导致僵化——所以好的系统必须懂得"优雅地废弃自己"
- 有品味不仅意味着知道什么是好的，还意味着知道好的东西何时过期
下一步
设计系统编码的是"怎么做"层面的品味——颜色、间距、交互模式。但更上游还有一层品味：做什么。产品策略是最高层次的品味表达——选择做什么、不做什么，比任何视觉决策都更能定义一个产品的品位。Steve Jobs 对品味最深刻的贡献不是 iPhone 的圆角——是他砍掉的那些产品。
模块 5 自评
评估你对设计系统作为品味编码机制的理解深度。
概念理解对设计系统本质（品味的制度化 vs 组件库）的认知
Token 品味敏感度理解 Design Token 背后品味决策的能力
系统对比能力对比分析不同设计系统品味取向的能力
治理判断力对设计系统中遵守 vs 打破决策的判断能力