创建交互式原型

上次更新日期： 2024年9月18日

打开应用程序

Adobe XD 用户指南
简介
设计
1. 画板、参考线和图层
2. 形状、对象和路径
3. 文本和字体
  1. 使用绘图和文本工具
  2. Adobe XD 中的字体
4. 组件和状态
5. 蒙版和效果
6. 版面
7. 视频和 Lottie 动画
原型
共享、导出和审阅
设计系统
云文档
集成和插件
iOS 和 Android 版 XD
1. 在移动设备上预览
2. 适用于移动设备的 Adobe XD 常见问题解答
故障排除
1. 已知问题和已修复问题
  1. 已知问题
  2. 已修复的问题
2. 安装和更新
3. 启动和崩溃
4. 云文档和 Creative Cloud Libraries
5. 创建原型、发布和预览
6. 导入、导出和使用其他应用程序

了解如何创建他人可用于测试、优化和完善用户体验的交互式原型。

设计完屏幕之后，可通过构建交互式原型，直观地展示用户可怎样体验您的应用程序或网站。

可按所需的导航顺序连接各个屏幕以及整理多个流，将 2 个或更多画板连接在一起。设置屏幕后，可作为可共享的链接共享每个流以供审阅、收集反馈以及同时在各个目标表面上发布它们。

设置“主页”屏幕

“主页”屏幕是您的应用程序或网站的第一个屏幕。您的用户会通过“主页”屏幕开始在应用程序或网站中进行导航。

此外，如果您在预览原型时并没有选择任何内容，预览将从“主页”屏幕开始。也就是说，默认情况下，您的“主页”屏幕会被设置为第一个添加连线的画板。

切换到“原型”模式。
单击要设置为“主页”屏幕的画板。一个灰色的主页图标出现在左上角。
单击“主页”图标。它会变成蓝色，表示该画板现已成功设置为“主页”屏幕。

“设置为主页屏幕”选项

“主页”屏幕已设置

如需将另一画板设为“主页”屏幕，只需单击与该画板关联的主页图标即可。要在发布后查看所有画板, 请确保关联所有相关的画板。

在项目中设置多个流

通过多个流，可从同一文档或在同一文件中创建和共享一个设计的多个版本，并在许多原型或设计规范间利用同一组画板。每个流均保留自己的一组连线和共享详细信息，这样无需每次都撤消再重新进行所有设置，即可作出更改并重新发布。

如果要创建设计的多个版本，请另外设置一个“主页”画板，将它们连接在一起，并共享每组的唯一链接。“主页”画板作为设计的起点，可以从中拖动连线将不同的屏幕连接在一起。
无需复制作品，即可在多个原型之间使用同一组画板。在同一页面中更改设计并更新链接。

设置不同流的另一个示例是，在设计面向多种平台（如移动设备、桌面设备、平板电脑等等）的网站时，可定义并创作多个交互流，其中的每个流都描述用户旅程，然后与利益相关方共享每个流以收集反馈。

继续阅读以了解如何设置一个或多个“主页”画板和定义多个流。

切换到“原型”模式。
设置“主页”画板以定义设计的起点.
输入每个流的名称以更好地组织它们。
如果设计由多个流构成，则为其中每个流都设置“主页”画板。
单击希望链接的下一个对象或画板。对象或画板中出现带箭头的连接手柄。单击并拖动以释放目标物体或画板上的手柄。

为对象和画板添加交互

定义屏幕并为其连线后，通过为对象和画板引入触发器和操作，可让原型更加引人注目。操作方法：

选择某个对象，然后在它旁边单击 +，或在“属性检查器”中单击 + 。设置“触发器”和“操作类型”。一旦选择了操作类型, 请设置该操作类型的具体选项, 包括目标（如果适用）。

例如，如果要增强原型的导航体验，则可选择通过将“滚动至”设置为操作类型而添加锚点链接。有关此操作的更多信息，请参阅在画板中创建导航链接。

原型制作选项

A. 设置为“点击”、“拖动”、“悬停”、“时间”、“按键和游戏手柄”、“声音”或“播放结束”。 B. 以秒为单位设置时间延迟。 C. 设置为“过渡”、“自动制作动画”、“叠加”、“滚动至”、“上一个画板”、“音频播放”、“语音播放”、“视频播放”或“Lottie 播放”。 D. 如果需要，请更改目标画板。 E. 设置为“溶解”或“无”。 F. 选择缓动效果。 G. 输入持续时间（以秒为单位）。
如果选择“点击”作为触发器，则现在可将过渡与非过渡性操作（如“语音播放”或“音频播放”）结合在一起。要添加第二个操作，请将“属性检查器”中的第一个“操作” + 按钮设置为“过渡”、“自动制作动画”、“叠加”、滚动至或“上一个画板”，然后将第二个“操作” + 按钮设置为“音频播放”或“语音播放”。

如果选择“音频播放”或“语音播放”作为第一个操作，则无法添加第二个操作。
还可组合多个触发器以创建高级交互，而无需在画板上的不同对象之间分配触发器。为此，请使用画布上的“+”按钮，或在“属性检查器”中单击“+”，然后选择“触发器”、“操作”和“目标”。

注意:

请记住，点击、拖动、悬停和时间触发器只能应用一次，而语音、按键和游戏手柄可应用多次。

组合多个触发器

可在设计中逼真地模拟滚动。要将设计元素钉在某个固定位置，请在“属性检查器”中选择“滚动时固定位置”。
如需预览您的原型，请单击“桌面预览”。

可以将每个流作为可共享的链接进行管理和发布，以供审阅和收集反馈。有关如何共享多个流的详细信息，请参阅共享设计和原型。

提示

要编辑或删除连线，请选择要编辑或删除的连线。还可以从“属性检查器”中选择一个交互，然后编辑其交互。
要在“原型”模式下临时隐藏连线，请按住 Option (macOS) 或 Alt (Windows) 键。
将鼠标悬停在连线上可以查看工具提示，该工具提示将显示迭代次数及其类型。
要将所定义的交互应用于另一对象，请选择该对象或画板，选择“复制”，单击目标对象或画板，然后在右键单击上下文菜单中选择“粘贴交互”。

与上一个画板链接

在“原型”模式下，选择要链接的元素或画板。出现小箭头时，单击并将箭头拖动到上一个画板，或者选择“操作”>“上一个画板”。

选择上一个画板
当“操作”设置为“上一个画板”时，连线的尾部会显示一个尾巴图标。

设置目标

注意:

如果要断开线与画板的链接，请单击线上的任意位置并将其拖离目标画板。
使用预览窗口预览链接。

取消与画板的链接

在“原型”模式下，选择“目标”>“无”。

您也可以单击线上的任意位置，将其拖离目标画板。

取消与画板的链接

注意:

只有在画板被链接到某一目标时，“无”选项才可用。
在浏览器中预览链接。先前从元素设置的所有目标链接都将被删除。

预览和录制交互

注意:

Windows 上的 Adobe XD 不支持录制原型。但是，有一种解决方法。按 Windows + G 键并使用原生录制程序录制“预览”窗口。

您可以预览原型，以便测试原型和交互。您还可以录制预览，并将录制内容保存为 .mp4 文件。然后，您可以选择与您的利益相关者共享这个 .mp4 文件，他们可以查看（或审阅）原型的演练并提供反馈。

单击“桌面预览”图标。此时会出现“预览”窗口并突出显示画板。

如需测试屏幕之间的导航，请单击交互式元素。

在“预览”窗口中预览时，可以编辑原型的设计和交互。可以立即预览这些更改。
如需录制交互，请单击“预览”窗口中的“录制”图标。如需结束录制，请按 Esc，或者再次单击“录制”图标。

录制原型交互
指定名称和保存录制内容的位置。录制内容会被保存为 .mp4 文件。

了解详情

以下视频可帮助您开始进行交互：

告知我们

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

更快、更轻松地获得帮助

新用户？