模块化内容结构决定了信息和消息的创建和管理方式。
模块化设计构建了信息和消息的呈现方式。
内容由内容模型构建，该内容模型由内容元素组成的内容类型构成。
该设计由可重复使用的 UI 组件、布局和模式（我们将其统称为设计组件）的 设计系统构成。
但如果内容和设计脱钩，我们如何让它们协同工作？团队需要映射它们之间的关系。
映射涉及将内容的框架与 UI 框架关联起来。例如，当您有商店位置的名称时，该名称如何在 UI 中显示？它可以显示在位置列表中或地图上。
从基础开始。 了解内容和设计之间关系的最简单方法是展示简单的内容类型和简单的设计组件。一旦我们介绍了一些基本案例，我们就可以在以后的帖子中查看更复杂的案例。这种方法的复杂性可以增加或减少。团队可以使用该方法将文本标签与特定设计元素关联起来。或者他们可以使用它来将复杂的内容结构（例如详细的产品描述）与呈现该信息的设计布局关联起来。
让我们首先谈谈设计系统——以及为什么它们对于内容创建者来说是一个谜。
设计组件需要告诉我们什么？
设计系统决定了内容的呈现方式。但有时设计系统并不能很好地告诉我们它们想要做什么。
设计系统中的设计组件可以指定元素的许多属性。它通常指示：
显示的媒体类型（文本、图像、视频、图表）
元素的布局和定位
颜色和尺寸
行为，例如过渡和动画
所有这些属性都很重要。但它们对作者的帮助不大。
设计系统很少会指出它所显示内容的性质 德国手机号码数据库 我们不知道会出现什么样的内容。相反，设计系统会告诉我们“这是一个按钮：在按钮上插入一些使用此大小字体的文本。”
让我们看一下财富 100 强公司使用的知名设计系统中的组件。
来自财富 100 强企业设计系统的手风琴组件（重新绘制）
这个组件并没有告诉我们太多有关如何使用手风琴面板的信息。
它支持哪些任务？
什么时候手风琴是最佳选择？
为什么要隐藏扩展面板中的信息？
看起来您可以将任何类型的文本放入手风琴中 - 这是一个好主意吗？
警惕内容无关的设计系统的问题。这种设计系统很大程度上是一堆空容器的集合，用于存放一些来源不明的内容。看起来好像任何内容都可以与任何组件一起使用。但仔细想想，事实并非如此。
是的，设计系统需要足够灵活才能处理多种内容。但它们不应该：
它们过于抽象和模糊，以至于在详细设计时会产生关于如何使用它们的问题。
过于关注“原子”级别的表现问题，以至于无法解决用户面临的实际任务。
让作者怀疑他们的内容在呈现给用户时是否有用。
幸运的是，一些企业设计系统正在变得更加具体。它们提供了有关不同内容元素如何传达信息和支持任务的更多细节。一个有用的设计系统将传达每个组件的用途以及组件内的各个元素。
为了使团队能够成功地重用内容和设计组件，同时保持它们的解耦和灵活性，他们需要了解两个关键问题：
组件中显示的信息来自哪里？
内容类型中结构化的信息最终显示在哪里？
组件中显示的信息来自哪里？
让我们思考一下手风琴的用途。手风琴中会出现什么样的内容？没有唯一的答案。
帮助整个团队了解哪些内容类型和元素可以连接到哪些设计组件。
手风琴折叠面板中显示的最常见内容类型是问答（Q&A）。
手风琴还可以显示术语和定义。当您需要解释某个短语的含义时，手风琴很常见。例如，健康保险公司可能会定义诸如“网络内”或“授权程序”等重要阶段。
手风琴还可以显示已命名的项目，然后显示与该项目相关的详细信息。它可能会显示信用卡交易列表，然后显示每笔交易的详细信息。
诸如手风琴之类的设计组件可以接受多种内容类型的内容
简而言之，手风琴折叠面板在展示需要详细说明的项目时非常有用。手风琴折叠面板支持浏览标题，而无需强迫用户查看与所有项目相关的详细信息。手风琴折叠面板可以帮助用户浏览许多项目，而无需查看每个项目的详细信息。
解释组件为何以及何时有用。设计系统应解释组件的用途并提供一些使用指南。此处的动机不是通过说明只有问题和答案才能在折叠面板中显示来指定详细的设计规则。相反，目标是通过展示组件可以显示的内容范围来揭示组件如何支持用户任务。设计师不限于展示或要求使用组件显示特定内容的示例。但展示组件的用途将产生更多有用的组件。
当设计师表明组件的意图时，他们可以讨论组件的微观结构。
可以显示的内容有哪些限制？
问题最多可以有多少个字符而不会被截断？
一个问题可以显示在多行上吗？
答案应该有多长？
答案是否可以以列表、项目符号或表格的形式呈现？
仅仅说“文本”或“正文”是不够的——设计系统应该更加明确。
这些要求随后会反映在内容模型的指导方针中。作者在创建内容时可以看到指导方针，并确信内容会得到适当显示。
