如果您有问题要问或要分享想法，欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。
上次更新日期：
2022年4月20日
- Adobe XD 用户指南
- 简介
- 设计
- 画板、参考线和图层
- 形状、对象和路径
- 文本和字体
- 组件和状态
- 蒙版和效果
- 版面
- 视频和 Lottie 动画
- 原型
- 共享、导出和审阅
- 设计系统
- 云文档
- 集成和插件
- iOS 和 Android 版 XD
- 故障排除
- 已知问题和已修复问题
- 安装和更新
- 启动和崩溃
- 云文档和 Creative Cloud Libraries
- 创建原型、发布和预览
- 导入、导出和使用其他应用程序
了解如何在设计系统中向组件添加多个状态，以轻松开发交互式内容。
根据用户交互而改变外观的组件对于创建高保真度原型非常有用。
创建一个组件，向其添加多个变体（状态）并用线连接该组件，即可模拟真实的用户行为（而不必多次复制组件）。
让组件具有状态还可更轻松地管理资源和创建交互式设计系统。
添加组件状态
在创建一个组件之后，“属性检查器”会显示一个新的部分，其中列出具有默认状态的组件。您现在可以为组件添加三种状态：新状态、悬停状态或切换状态。阅读相关内容以了解如何添加状态。
新状态
对于希望显示组件变体（例如组件的禁用或单击版本）的情况，使用“新状态”。
在“属性检查器”中，单击主组件的“默认状态”旁边的 + 按钮，然后选择“新状态”。
“新状态”没有任何已内置在状态中的交互性。您必须以“原型”模式连接交互。有关更多信息，请参阅将交互性添加到组件。
悬停状态
如果您希望在用户将鼠标悬停在组件上时组件发生变化并显示不同的状态，请使用“悬停状态”。
在设计模式下，单击“属性检查器”中主组件的“默认状态”旁边的 + 按钮，然后选择“悬停状态”。
在使用“悬停状态”时，无需进入“原型”模式以连接交互。系统将自动为您完成此操作。
切换状态
当您要创建具有交互式切换行为的组件（例如切换按钮、单选按钮、复选框等）时，请使用切换状态。
在设计模式下，单击属性检查器中主组件的默认状态旁边的 + 按钮，然后选择切换状态。
创建切换状态后，默认情况下，XD 将在默认状态和切换状态之间自动内置两个双向点击交互，以使其具有完全交互性。
您只能将状态添加到主组件。组件实例始终从主组件继承其状态。
使不同状态下的组件可视化
为组件创建状态之后，可编辑组件的属性并确定怎样向与组件交互的用户显示组件。
- 选择组件。
- 转到“属性检查器”，然后在各种状态之间切换。
将交互性添加到组件
在“原型”模式下，您可以使用点击、悬停、按键和游戏手柄以及语音触发器连接组件状态之间的交互。连接组件状态之间的交互类似于连接画板之间的交互。主要区别是在连接组件状态之间的交互时，选择状态而非画板作为目标。
- 切换到“原型”选项卡。
- 选择要创建交互的源组件状态。
- 单击组件状态上的 > 图标或“属性检查器”的“交互”部分中的 + 以添加交互。
- 选择点击（用于单击事件）、悬停（用于鼠标悬停操作）、按键和游戏板（导航和可访问性用例）或语音（导航和可访问性用例）作为触发器。
- 选择操作类型（例如“自动制作动画”或“过渡”）。
- 选择一个状态作为目标。
- 切换到“预览”窗口并测试组件的交互性。
状态在画板上方的下拉列表中列出，以分隔线分隔。
您可以为同一个组件状态定义多个交互。例如，如果一个切换开关具有默认开启状态、关闭状态和悬停状态，您可以为默认状态分别定义交互。重复步骤 4-7 可定义与其他状态的交互。在创建多个交互之后，可看到“交互”部分中显示已定义的这些交互。请在这些交互之间切换并修改交互属性以适合您的要求。
编辑组件状态
在主组件状态上定义交互时，该组件的所有实例都将自动继承这些交互。这意味着，如果您将组件连接到特定画板或状态，则该组件的所有实例也将包含这些交互。
在画布上选择一个实例并要编辑现有状态或将新状态添加到主组件时，可通过以下某个选项这样做：
选项 2
单击“编辑”将所选内容切换到主组件以添加或编辑状态。
选项 1
右键单击组件实例，然后选择“编辑主组件”。
组件实例与主组件相链接。对主组件的更改将传播到这些实例。有关更多信息，请参阅管理具有单个来源的组件。
重命名、重新排列和删除组件状态
重命名组件状态：在“属性检查器”中双击组件状态名称，然后键入新名称。
对主组件状态重新排序：在“属性检查器”中拖动主组件状态以对其重新排序。
从主组件删除组件状态：右键单击该组件状态，然后选择“删除”。从主组件删除组件状态时，画布上具有该状态的组件实例将切换回默认状态。
您只能重命名和删除主组件中的状态。您无法重命名默认状态。
发布和共享组件状态
可从“库”面板中将组件及其关联的状态发布到 Creative Cloud 库，并将其分发为设计系统的一部分。有关更多信息，请参阅在 XD 中使用 Creative Cloud Libraries。
管理具有单一来源的组件
为了简化对组件状态的管理，只能从主组件中添加、重命名和删除状态。该组件的实例将自动继承在该主组件中作出的任何状态更改。可从画布上的绿色实心菱形或从“属性检查器”中的“组件”部分轻松地识别该主组件。实例具有空心绿色菱形。
继承组件状态
在跨主组件和实例编辑状态时，请遵循以下原则：
- 可覆盖状态的属性（文本、位图、大小、外观或结构更改），就像覆盖组件实例一样。
- 编辑主组件中的状态后，该状态将在所有实例上更新。
- 编辑实例中的状态时，它被视为唯一覆盖，并且不再将该属性与主状态的变更同步。
如果您对覆盖的结果不满意，可以通过右键单击实例并选择“重置为主组件状态”，将其重置回原始主组件。这将清除实例上的所有覆盖并将其重置回主组件。
有关组件覆盖如何工作的更多信息，请参阅在 XD 中使用组件。
跨文档链接的组件状态
可为所有可重用的组件及其状态和已定义的交互创建并维护单个来源。例如，如果按钮组件定义了 5 种状态：“主要”、“辅助”、“悬停”、“点击”和“已禁用”状态，则在跨文档复制和粘贴该组件时，XD 创建一个链接的组件，后者维护所有已定义的组件状态以及状态交互。
如果在源文档中更改了链接的组件属性（样式、交互等等），则 XD 向该链接组件的实例所在的文档通知这些更新。接下来，您可以预览更改并选择接受或忽略它们。
链接组件仅支持在状态之间定义的交互，不支持在画板之间定义的交互。
示例和样本文件
是否要创建一个切换开关，在用户点击它时即可打开和关闭？
- 下载切换按钮样本文件并在 XD 中打开它。
- 选择整个对象（确保选中了圆圈），然后按 Cmd + K (macOS) 或 Ctrl+K (Win)。
- 添加一个新状态并将其命名为“已禁用”。
- 在“已禁用”状态下，选择“圆角矩形”并将填充色更改为灰色。选择圆圈并将其向左移动。
- 在“原型”模式下，连接以下交互：
- 默认状态：将“触发器”设置为“点击”，将“操作”设置为“自动制作动画”，并将“目标”设置为“已禁用”。
- 已禁用状态：将“触发器”设置为“点击”，将“操作”设置为“自动制作动画”，并将“目标”设置为“默认状态”。
- （可选）：如果希望切换按钮在悬停时发光，请选择该组件，添加一个“悬停状态”，然后编辑该组件以获得发光效果。
了解详情
观看这段视频以详细了解可怎样使用具有状态的组件构建交互。
观看时长：7 分钟。
接下来学什么？
您已经了解了如何开始使用具有状态的组件。请关注此社区帖子，了解如何使用此功能创建复选框。
有疑问或想法？
