更成熟的设计系统将指导如何构建用户体验。为了提供这种指导，设计系统需要与内容需求相结合。
内容在设计系统中的作用
内容策略师凯特肯扬指出：“如果要扩大规模、坚持下去，并获得足够的资源来发展，设计系统就需要包含内容。”
设计系统提供了如何呈现内容的规则。但设计系统往往不太重视内容。
一些组织在其设计系统中包括内容指导 德国手机号码数据库 他们可能会纳入样式指南，提供单词列表、语音和语调指导以及要遵循的示例微文案模式。作为设计系统的一部分，内容部分将由作者创建，供其他作者使用。它提供适用于所有界面文案的一般写作建议，而不是针对单个 UI 组件。样式指南在组织上与 UI 组件规范是分开的。
相比之下，本讨论将更多地关注 UI 组件以及它们应如何为内容创建者提供指导。特别是，我们将探讨设计师需要告诉作者有关 UI 组件的哪些信息。
设计系统使内容结构可见。提出了“原子设计”概念的 Brad Frost 认为，“精心设计的设计系统会迎合其中的内容。”他谈到了“将内容骨架可视化”。他的陈述的重要之处在于强调了结构的作用。设计组件有结构。内容也有结构。
结构对于提供一致性至关重要。Autodesk 的 Peter Zogas 指出：“内容和微文案出现在设计系统组件的各个部分。如果不尽早进行标准化，您最终会在每次实施组件时决定文案的显示方式。”
内容设计系统的好处
设计系统可以提高内容的可重用性。这一优势常常被低估。
当人们能够看到内容显示的不同方式时，他们更倾向于在不同的场景中使用该内容。他们会看到相同的标题或图像可以出现在哪里。
重复使用副本可让您更好地控制。您可以在不同的设计组件中重复使用无头 CMS 内容模型中的内容元素。例如，标题可能会出现在促销或列表中。团队可以停止重新创建文本（或手动复制文本），并通过这样做获得一致性。重复使用使管理 UI 副本的许多维度变得更加容易：
拼写
大写
标点
命名约定
品牌整合
设计系统需要指定与内容相关的内容
许多设计系统并不完整。它们主要专注于创建一种设计语言和一些简单的模式。Intercom 的 Emmet Connolly 表示：“大多数模式库都采用网页的形式，列出了所有 UI 元素的不同样式。”他补充道：“模式库存在一些问题。是的，它们允许你保持所有最小元素的一致性。但它们对于应该如何将它们组合在一起却没有意见。”
许多设计系统缺少对呈现和协调多个内容元素的更大、更复杂的组件的关注。
设计系统通常不善于表达内容密集型组件的细节。许多设计系统只关注样式，而不清楚它们将呈现什么内容。
少数设计元素，如汉堡菜单图标，完全是象征性的。但大多数设计元素如果没有内容，就没有任何意义。
缺乏内容的设计组件
设计系统组件的存在是为了呈现内容。当我们从一个熟悉的设计组件中去掉内容时，我们不知道它应该如何工作。我们可以推断出许多指令和链接的存在。但它们的含义却是一个谜。
查看文本与图形的像素比例。如果文本很多，则强烈表明内容至关重要。
设计系统组件具有“结构”，可提供在特定场景中呈现内容的一致结构。它们将优先考虑用户查看和交互的内容元素。
UI 组件应该回答：
该组件是否清楚地传达了它的用途？
该组件的微观结构是什么样的？
需要哪些元素？
不同的用户场景是否需要变体？
组件不仅仅是内容容器：卡片的示例
卡片是最常见的设计元素之一。它们非常灵活，能够呈现各种内容类型。但它们的普遍性也可能使用户难以辨别。它们使内容看起来整洁，但也显得千篇一律。有时它们会掩盖内容角色方面的重要差异。
卡片需要将很多含义塞进一个狭小的空间。EightShapes 的 Nathan Curtis 指出：“卡片不仅仅是一个通用的容器，它还是一个物体重要部分的可扫描快照。它预览的内容足以识别。它邀请我们按顺序了解更多信息并进行互动。”他问道：“如果缺少必需元素，卡片会怎样？”
《纽约时报》的热门烹饪应用说明了协调内容类型和设计组件的重要性。我的家人经常使用这款应用。与许多应用一样，它依靠卡片来呈现各种内容类型。
《纽约时报》烹饪团队的产品设计师 Jayne Lee 写道：“我们的卡片提供了内容的简要介绍，无论是食谱、收藏还是指南。这三种内容类型本质上是不同的，所以我们在视觉上将它们区分开来。”
如何烹饪一道菜
做哪道菜
如何烹饪一盘菜
食谱、收藏和指南是具有不同用途的不同对象。但当它们以卡片形式呈现时，外观上只有细微的差异——对于新用户或普通用户来说可能太细微了，无法注意到。卡片布局的相同性掩盖了卡片中的细微差异。也许通过添加更多内容元素，差异会更加明显，更容易被注意到，而不是仅仅依靠视觉样式来区分内容类型。
该应用还强调了在内容创建后创建设计系统的挑战。设计组件必须尝试适应内容，这可能不像理想情况那样可预测。
Lee 表示：“我们对内容的显示方式有严格的规定。卡片上内容的层次结构为：图片、标题、副标题、操作。我们的食谱可以有很长的标题，分成多行文本，也可以有很长的副标题或双副标题。我尝试通过稍微扩大卡片容器来在卡片上显示尽可能多的内容。”她的评论强调了在将设计系统改造为缺乏治理的现有内容时可能出现的问题。如果图片比文本更重要，则可能意味着一些文本可能会被截断。
明确“内容块”
许多设计系统的一个常见弱点是，它们只会讨论通用的“内容块”，而不会详细说明内容如何出现。
所有文本都不一样：文本可以以多种方式呈现。设计系统应指定文本的呈现方式，以及作者需要编写哪些内容才能使文本发挥作用。
文本具有长度和格式等属性。文本表达具有重点的信息。这些因素影响文本信息的可读性。设计系统需要充分利用可用空间来促进正确的强调并提高信息清晰度。
从基本层面上讲，消息可以是短文本，也可以是长文本。但这些区别还可以进一步细化。
短文本（单行） 长文本（多行）
标签
标题
小节标题或副标题
标题
行动
关联
“紧” （单段）
“松散” （多个段落）
列表
文案的属性会影响其呈现方式。作者应该遵循一些标准，以便文案符合其呈现方式。
文本长度 文本格式 文案重点
允许的字符数
最小或最大字数
句子大小写
标题大小写
帽子
大胆的
名词
行动
陈述
要求
问题
我们可以从退伍军人管理局的设计系统中看到文本如何在信息标注中呈现。该示例采用真实文本，展示了如何使用项目符号、标题和粗体来格式化副本。
设计组件中的文本布局。来源 VA.gov 设计系统
内容如何影响设计组件的可用性
设计系统处理不同层次的细节。在每个层次上，呈现的内容都会影响用户体验的效果。
设计元素（或“原子”）
设计系统中最基本的结构是单个元素，Brad Frost 称之为原子。它们有时被称为“基础”组件或“基元”，因为它们是其他组件的输入。
原子中的内容标识了某物是什么或要做什么。元素的一些示例包括：
表格标签
字幕
标题
按钮
图片
药丸或芯片，显示标签或状态的值，没有解释性标签，有时是一个链接
设计系统应指定内容呈现何时保持一致以及何时可能发生变化。例如，图像可以采用各种格式。设计系统应为作者指定指南以及有关呈现如何影响内容的任何限制。例如，它可以提供有关文本何时应出现在按钮内而不是作为链接呈现的规则。
简单组件（或“分子”）
简单组件（Brad Frost 分类中的“分子”）将呈现不止一个内容元素。此时，元素之间的协调就变得很重要。
简单的组件可以传达重要信息，尤其是与操作相关的信息。一些呈现重要内容的简单组件包括：
福利模式
菜单
对话
牌
通知、警报和横幅
简单组件中呈现的内容会影响任务的放弃或接受。由于这些内容旨在吸引注意力和行动，因此向用户清楚地传达其目的非常重要。其中一些组件会打扰用户。呈现的信息和组件的行为需要保持一致。
设计系统应明确各种可能看起来相似的组件的预期作用。考虑组件在用户旅程场景中可能需要如何显示。有关错误或需要注意的问题的消息不一定具有相同的特征。它们可能是付款错误和登录错误，也可能是入职或续订流程的一部分。这些因素可能会影响消息的呈现方式。
设计系统应该让作者相信适当的设计组件将呈现关键信息，以便他们可以优化内容以在其呈现参数范围内工作。
复杂组件（或“有机体”）
复杂组件是支持更复杂信息的布局。这些布局通常内容密集，但在设计系统中没有明确定义。
这些组件通常包含混合元素：文本、图像和功能控件。这些元素之间的关系将创建一个消息层次结构，从而影响用户对操作或路径的选择。
