用户指南 取消(C)

向组件添加多个状态

  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 颜色管理
    5. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    6. 工作区基础知识
    7. 在 Adobe XD 中更改应用程序语言
    8. 访问 UI 设计套件
    9. Adobe XD 中的辅助功能
    10. 键盘快捷键
    11. 提示和技巧
  3. 设计
    1. 画板、参考线和图层
      1. 开始使用画板
      2. 使用参考线和网格
      3. 创建可滚动画板
      4. 使用图层
      5. 创建滚动组
    2. 形状、对象和路径
      1. 选择对象、调整对象的大小和旋转对象
      2. 移动、对齐、分布和排列对象
      3. 为对象分组、锁定、重复、复制和翻转对象
      4. 为对象设置描边、填充和投影
      5. 创建重复元素
      6. 使用 3D 变换创建透视设计
      7. 使用布尔运算编辑对象
    3. 文本和字体
      1. 使用绘图和文本工具
      2. Adobe XD 中的字体
    4. 组件和状态
      1. 使用组件
      2. 使用嵌套组件
      3. 向组件添加多个状态
    5. 蒙版和效果
      1. 创建一个形状蒙版
      2. 使用模糊效果
      3. 创建和修改渐变
      4. 应用混合效果
    6. 版面
      1. 响应式调整大小和约束
      2. 为组件和组设置固定的内边距
      3. 使用堆叠创建动态设计
    7. 视频和 Lottie 动画
      1. 使用视频
      2. 使用视频创建原型
      3. 使用 Lottie 动画
  4. 原型
    1. 创建交互式原型
    2. 制作原型动画
    3. 自动制作动画支持的对象属性
    4. 使用键盘和游戏手柄创建原型
    5. 使用语音命令和播放创建原型
    6. 创建定时过渡
    7. 添加叠加
    8. 设计语音原型
    9. 创建锚点链接
    10. 创建超链接
    11. 预览设计和原型
  5. 共享、导出和审阅
    1. 共享选定的画板
    2. 共享设计和原型
    3. 为链接设置访问权限
    4. 使用原型
    5. 审阅原型
    6. 使用设计规范
    7. 共享设计规范
    8. 检查设计规范
    9. 设计规范导航
    10. 审查和评论设计规范
    11. 导出设计资源
    12. 导出和下载设计规范中的资源
    13. 企业版的组共享
    14. 备份或转移 XD 资产
  6. 设计系统
    1. 带 Creative Cloud Libraries 的设计系统
    2. 在 Adobe XD 中使用文档资源
    3. 在 Adobe XD 中使用 Creative Cloud Libraries
    4. 从链接资源迁移到 Creative Cloud Libraries
    5. 使用设计令牌
    6. 使用 Creative Cloud Libraries 中的资源
  7. 云文档
    1. Adobe XD 中的云文档
    2. 协作与协同编辑设计
    3. 协同编辑与您共享的文档
  8. 集成和插件
    1. 使用外部资源
    2. 使用 Photoshop 中的设计资源
    3. 从 Photoshop 中复制和粘贴资源
    4. 导入或打开 Photoshop 设计
    5. 在 Adobe XD 中使用 Illustrator 资源
    6. 打开或导入 Illustrator 设计
    7. 将矢量从 Illustrator 复制到 XD
    8. 用于 Adobe XD 的插件
    9. 创建和管理插件
    10. XD 的 Jira 集成
    11. XD 的 Slack 插件
    12. XD 的 Zoom 插件
    13. 将设计从 XD 发布到 Behance
  9. iOS 和 Android 版 XD
    1. 在移动设备上预览
    2. 适用于移动设备的 Adobe XD 常见问题解答
  10. 故障排除
    1. 已知问题和已修复问题
      1. 已知问题
      2. 已修复的问题
    2. 安装和更新
      1. XD 似乎与 Windows 不兼容
      2. 错误代码 191
      3. 错误代码 183
      4. 安装 XD 插件时出现问题
      5. Windows 10 上提示卸载并重新安装 XD
      6. 迁移首选项有问题
    3. 启动和崩溃
      1. XD 在 Windows 10 上启动时崩溃
      2. XD 在您注销 Creative Cloud 时退出
      3. Windows 上订阅状态相关问题
      4. 在 Windows 上启动 XD 时出现“应用程序被阻止”警告
      5. 在 Windows 中生成故障转储
      6. 崩溃日志收集和共享
    4. 云文档和 Creative Cloud Libraries
      1. XD 云文档相关问题
      2. 链接组件的问题
      3. 库和链接的问题
    5. 创建原型、发布和预览
      1. 无法在 macOS Catalina 上录制原型交互
      2. 工作流程发布相关问题
      3. 浏览器中未显示发布的链接
      4. 浏览器中的原型呈现不正确
      5. 共享链接上意外出现评论面板
      6. 无法发布库
    6. 导入、导出和使用其他应用程序
      1. 在 XD 中导入和导出
      2. XD 中的 Photoshop 文件
      3. XD 中的 Illustrator 文件
      4. 从 XD 导出到 After Effects
      5. XD 中的 Sketch 文件
      6. 第三方应用程序在导出中不可见

了解如何在设计系统中向组件添加多个状态,以轻松开发交互式内容。

根据用户交互而改变外观的组件对于创建高保真度原型非常有用。

创建一个组件,向其添加多个变体(状态)并用线连接该组件,即可模拟真实的用户行为(而不必多次复制组件)。 

让组件具有状态还可更轻松地管理资源和创建交互式设计系统。 

具有状态的组件的常见示例包括按钮复选框和动画切换按钮。在用户通过点击这些组件或将鼠标悬停在这些组件上而与其交互时,这些组件需要发生变化。

添加组件状态

在创建一个组件之后,“属性检查器”会显示一个新的部分,其中列出具有默认状态的组件。您现在可以为组件添加三种状态:新状态悬停状态或切换状态。阅读相关内容以了解如何添加状态。

新状态

对于希望显示组件变体(例如组件的禁用或单击版本)的情况,使用“新状态”。

在“属性检查器”中,单击主组件的“默认状态”旁边的 + 按钮,然后选择“新状态”

“新状态”没有任何已内置在状态中的交互性。您必须以“原型”模式连接交互。有关更多信息,请参阅将交互性添加到组件

悬停状态

如果您希望在用户将鼠标悬停在组件上时组件发生变化并显示不同的状态,请使用“悬停状态”。 

设计模式下,单击“属性检查器”中主组件的“默认状态”旁边的 + 按钮,然后选择“悬停状态”

在使用“悬停状态”时,无需进入“原型”模式以连接交互。系统将自动为您完成此操作。

切换状态

当您要创建具有交互式切换行为的组件(例如切换按钮、单选按钮、复选框等)时,请使用切换状态

设计模式下,单击属性检查器中主组件的默认状态旁边的 + 按钮,然后选择切换状态

创建切换状态后,默认情况下,XD 将在默认状态切换状态之间自动内置两个双向点击交互,以使其具有完全交互性。

向组件添加状态
向组件添加状态

您只能将状态添加到主组件。组件实例始终从主组件继承其状态。

使不同状态下的组件可视化

为组件创建状态之后,可编辑组件的属性并确定怎样向与组件交互的用户显示组件。 

  1. 选择组件。
  2. 转到“属性检查器”,然后在各种状态之间切换。
使用“属性检查器”切换状态
使用“属性检查器”切换状态

将交互性添加到组件

在“原型”模式下,您可以使用点击悬停按键和游戏手柄以及语音触发器连接组件状态之间的交互。连接组件状态之间的交互类似于连接画板之间的交互。主要区别是在连接组件状态之间的交互时,选择状态而非画板作为目标。

添加交互性
连接组件状态以创建点击交互

  1. 切换到“原型”选项卡。
  2. 选择要创建交互的源组件状态。 
  3. 单击组件状态上的 > 图标或“属性检查器”的“交互”部分中的 + 以添加交互。
  4. 选择点击(用于单击事件)、悬停(用于鼠标悬停操作)、按键和游戏板(导航和可访问性用例)或语音(导航和可访问性用例)作为触发器。
  5. 选择操作类型(例如“自动制作动画”或“过渡”)。
  6. 选择一个状态作为目标。
  7. 切换到“预览”窗口并测试组件的交互性。

状态在画板上方的下拉列表中列出,以分隔线分隔。

 

同一个组件状态的多个交互
同一个组件状态的多个交互

您可以为同一个组件状态定义多个交互。例如,如果一个切换开关具有默认开启状态、关闭状态和悬停状态,您可以为默认状态分别定义交互。重复步骤 4-7 可定义与其他状态的交互。在创建多个交互之后,可看到“交互”部分中显示已定义的这些交互。请在这些交互之间切换并修改交互属性以适合您的要求。

编辑组件状态

在主组件状态上定义交互时,该组件的所有实例都将自动继承这些交互。这意味着,如果您将组件连接到特定画板或状态,则该组件的所有实例也将包含这些交互。 

在画布上选择一个实例并要编辑现有状态或将新状态添加到主组件时,可通过以下某个选项这样做:

选项 2

单击“编辑”将所选内容切换到主组件以添加或编辑状态。

单击“编辑”以将所选内容切换到主组件以添加或编辑状态

选项 1

右键单击组件实例,然后选择“编辑主组件”。

组件实例与主组件相链接。对主组件的更改将传播到这些实例。有关更多信息,请参阅管理具有单个来源的组件

重命名、重新排列和删除组件状态

重命名组件状态:在“属性检查器”中双击组件状态名称,然后键入新名称。

对主组件状态重新排序:在“属性检查器”中拖动主组件状态以对其重新排序。

从主组件删除组件状态:右键单击该组件状态,然后选择“删除”。从主组件删除组件状态时,画布上具有该状态的组件实例将切换回默认状态。

您只能重命名和删除主组件中的状态。您无法重命名默认状态。

发布和共享组件状态

可从“库”面板中将组件及其关联的状态发布到 Creative Cloud 库,并将其分发为设计系统的一部分。有关更多信息,请参阅在 XD 中使用 Creative Cloud Libraries

管理具有单一来源的组件

为了简化对组件状态的管理,只能从主组件中添加、重命名和删除状态。该组件的实例将自动继承在该主组件中作出的任何状态更改。可从画布上的绿色实心菱形或从“属性检查器”中的“组件”部分轻松地识别该主组件。实例具有空心绿色菱形。 

继承组件状态

在跨主组件和实例编辑状态时,请遵循以下原则:

  • 可覆盖状态的属性(文本、位图、大小、外观或结构更改),就像覆盖组件实例一样。 
  • 编辑主组件中的状态后,该状态将在所有实例上更新。
  • 编辑实例中的状态时,它被视为唯一覆盖,并且不再将该属性与主状态的变更同步。

如果您对覆盖的结果不满意,可以通过右键单击实例并选择“重置为主组件状态”,将其重置回原始主组件。这将清除实例上的所有覆盖并将其重置回主组件。

将状态覆盖重置回原始主组件
将状态覆盖重置回原始主组件

有关组件覆盖如何工作的更多信息,请参阅在 XD 中使用组件

跨文档链接的组件状态

可为所有可重用的组件及其状态和已定义的交互创建并维护单个来源。例如,如果按钮组件定义了 5 种状态:“主要”、“辅助”、“悬停”、“点击”和“已禁用”状态,则在跨文档复制和粘贴该组件时,XD 创建一个链接的组件,后者维护所有已定义的组件状态以及状态交互。 

如果在源文档中更改了链接的组件属性(样式、交互等等),则 XD 向该链接组件的实例所在的文档通知这些更新。接下来,您可以预览更改并选择接受或忽略它们。 

链接组件仅支持在状态之间定义的交互,不支持在画板之间定义的交互。

示例和样本文件

是否要创建一个切换开关,在用户点击它时即可打开和关闭?

使用样本资源创建动画切换按钮
使用样本资源创建动画切换按钮

  1. 下载切换按钮样本文件并在 XD 中打开它。
  2. 选择整个对象(确保选中了圆圈),然后按 Cmd + K (macOS) 或 Ctrl+K (Win)。
  3. 添加一个新状态并将其命名为“已禁用”。
  4. 在“已禁用”状态下,选择“圆角矩形”并将填充色更改为灰色。选择圆圈并将其向左移动。
  5. 在“原型”模式下,连接以下交互:
    • 默认状态:“触发器”设置为“点击”,将“操作”设置为“自动制作动画”,并将“目标”设置为“已禁用”
    • 已禁用状态:将“触发器”设置为“点击”,将“操作”设置为“自动制作动画”,并将“目标”设置为“默认状态”。
  6. (可选):如果希望切换按钮在悬停时发光,请选择该组件,添加一个“悬停状态”,然后编辑该组件以获得发光效果。

了解详情

观看这段视频以详细了解可怎样使用具有状态的组件构建交互。 

观看时长:7 分钟。

接下来学什么?

您已经了解了如何开始使用具有状态的组件。请关注此社区帖子,了解如何使用此功能创建复选框。

有疑问或想法?

询问社区

如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。

 Adobe

更快、更轻松地获得帮助

新用户?

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上