Design：设计语言与设计体系资料导读
AI 参与说明（Agent：Codex）：本页负责原始资料选编、链接核验与简短导读，观点与规范以所链接的作者原文和官方资料为准。核验日期为 2026-10-28。执行入口 Codex Desktop；模型完整标识与 reasoning effort 未取得任务级运行记录。中文按项目 humanizer-zh 编辑。
这里围绕一个问题整理资料：一套产品如何通过共同的设计原则、视觉表达与交互规则，形成可识别、连贯的体验？ 主线是 Design Language 与 Design System，直接阅读体系的发布者如何解释自己的设计。
建议从 IBM Design Language 开始，再读 Carbon 的体系说明，最后与 Fluent、Material 等体系对照。下面只注明概念关系与阅读重点。
先分清几个概念
| 英文术语 | 中文名称 | 关注什么 |
|---|---|---|
| Design Principles | 设计原则 | 共同价值与判断依据，例如怎样兼顾专注、包容和品牌识别 |
| Design Language | 设计语言 | 字体、色彩、布局、图像、动效等怎样共同表达一种可识别的设计 |
| Design System | 设计系统 | 怎样把原则、基础规则、组件、文档与实现组织成可复用的体系 |
| Design Token | 设计令牌 | 为界面设计决策命名并保存，例如文字颜色的语义角色 |
| Component | 组件 | 可复用的界面组成单元，具有内容、状态与行为 |
| Pattern | 模式 | 在具体任务和情境下，怎样组合界面与交互解决一类问题 |
这张表用于辨认概念，具体边界以各体系的原文为准。Design Principles 的说明可读 Fluent 原文；Design System、Design Token 与 Component 的关系可读 Atlassian 的体系说明和 Foundations。
1. 主线：IBM Design Language 与 Carbon
IBM 的资料适合连起来看：官网把 IBM Design Language 放在 Foundations，把 Carbon 放在 Implementation。前者展示共同理念和表达方式，后者展示这些基础如何用于数字产品。
Carbon is IBM’s design system, built on the IBM Design Language. Carbon 官方说明涵盖代码、设计资源、界面指南、组件与模式。这个例子能帮助理解 Design Language 和 Design System 的联系；其他组织的命名与划分可能不同。About Carbon
| 原始资料 | 阅读重点 |
|---|---|
| IBM Design Language | 查看一套语言的覆盖面：字体、色彩、网格、图标、插画、摄影、数据可视化、布局和动画 |
| IBM Design Language · Principles | 看共同原则如何参与设计判断，以及统一表达如何容纳创造性 |
| IBM Design Language · Gallery | 对照同一语言在数字界面、图像和实体媒介中的表达，理解连贯性与变化 |
| Carbon · About Carbon | 看设计语言如何进入共享基础、组件、模式、文档和代码 |
2. 对照：不同体系怎样表达设计
| 官方资料 | 发布者 | 值得对照的概念 |
|---|---|---|
| Fluent 2 · Design Principles | Microsoft | 每条原则分别解释功能与情感层面；观察平台习惯、专注、包容与品牌辨识如何同时影响体验 |
| Material 3 · Get started 与 Foundations | 对照 Foundations、Styles、Components 的组织方式，认识布局、状态、色彩、字体和动效的关系 | |
| Atlassian · About the Design System 与 Foundations | Atlassian | 看指南、基础、设计决策与组件如何共同构成体系，特别留意内容表达和无障碍的地位 |
| Human Interface Guidelines | Apple | 按平台阅读视觉、交互、组件与输入方式，观察平台惯例怎样影响产品体验 |
这些是不同组织对自身设计的阐述。阅读时分别看它的价值取向、视觉表达、交互行为与适用平台，而不是把各家的规则拼成一套通用标准。
3. 基础概念：作者原著与原则原文
| 原始资料 | 作者与性质 | 认识哪些问题 |
|---|---|---|
| The Design of Everyday Things：修订扩充版 | Don Norman；作者官网书目、目录与序言入口 | 可发现性、可供性、意符、映射、反馈与概念模型；链接不是全书全文 |
| 10 Usability Heuristics for User Interface Design | Jakob Nielsen；启发式原则原文 | 系统反馈、一致性、错误预防与恢复等基本判断 |
| Butterick’s Practical Typography | Matthew Butterick；作者发布的在线排版著作 | 字体、正文与页面编排；可从 Typography in Ten Minutes 进入 |
Norman 的著作提供理解交互的概念，Nielsen 的启发式提供经验判断，Butterick 的著作聚焦文字编排。它们与品牌或平台的设计语言互为补充。
4. 约束：正式标准与服务设计原则
- W3C WAI：Introduction to Web Accessibility 与 WCAG 2.2：先理解无障碍的对象与情境，需要明确要求时查成功准则。WCAG 2.2 是 W3C Recommendation。
- Government Design Principles 与 GOV.UK Design System：英国政府以用户需要、证据与迭代解释服务设计，并把规则组织成样式、组件与任务模式；阅读时保留其公共服务语境。
站内延伸阅读
以下是本站整理与实现文章；本页上面的链接直接指向原始资料。
参与记录
初版参与记录（2026-10-28，Agent：Codex）：依据 Figma、Pencil、W3C WAI、NN/g 等公开资料整理概念与原创练习。本页现整合为设计语言与设计体系的原始资料导读。执行入口 Codex Desktop；模型完整标识与 reasoning effort 未取得任务级运行记录。