Adobe XD 中的原型设计

2025年3月17日 | 阅读 10 分钟

Adobe XD 支持动态和交互式原型，让设计在不同布局之间进行交互。我们可以添加动画过渡效果来模拟应用程序的流程。它提供应用程序的实时预览。使用 Adobe XD 的原型设计功能，我们可以体验应用程序的虚拟之旅。

交互式原型可以通过网络链接轻松地与团队和利益相关者分享。团队可以体验应用程序的完整预览，并直接从他们的浏览器提供有价值的反馈。

XD 提供三种工作模式：设计、原型和分享。在设计模式下，我们使用 XD 工具和设计功能为我们的应用程序创建设计。然后，我们切换到原型模式来指定画板和组件之间的交互式链接。我们还可以使用组件状态创建原型。完成设计和原型后，我们可以使用共享功能共享设计。我们可以使用预览功能预览设计和原型。

原型是 Adobe XD 的最佳功能之一，使其与其他工具不同。大多数工具（例如 Photoshop）不支持原型功能。因此，我们无法实时预览我们的应用程序。

我们还可以在重定向到其他屏幕时为原型添加过渡和动画。 Adobe XD 提供通过 Web 以及移动应用程序对应用程序的实时预览。它支持移动应用程序来预览应用程序设计和原型。

它允许我们测试和验证操作和导航，可用性以及应用程序的其他用户体验方面。因此，我们可以在进行实际开发之前避免基本的设计缺陷。它还可以降低实际的开发成本，因为在代码中进行更改比设计花费更多时间。

在本节中，我们将讨论以下关于 Adobe XD 中原型设计的主题

如何在 Adobe XD 中创建原型
在您的应用程序中设置多个流程
如何为对象和画板添加交互
预览原型
如何将画板与上一个画板链接？
如何取消画板的链接？
如何记录原型交互？

让我们了解如何创建原型

如何在 Adobe XD 中创建原型

XD 提供三种工作模式：设计、原型和分享。在设计模式下，我们使用 XD 工具和设计功能为我们的应用程序创建设计。然后，我们切换到原型模式来指定画板和组件之间的交互式链接。

首先，我们需要为不同的应用程序屏幕创建模型；然后，我们需要使用左上角的选项卡面板切换到原型模式。

当我们切换到原型模式时，我们可以注意到所有设计工具和功能都不可用了；相反，原型图标（如主页箭头）现在可用。我们现在可以开始为我们的画板和组件创建原型。

设置主屏幕

主屏幕是应用程序的第一个屏幕；它也被称为欢迎屏幕或索引屏幕。根据项目要求，它可以是任何启动屏幕、登录屏幕、仪表板或任何其他屏幕。我们可以通过选择一个画板并单击主页图标来将任何屏幕设置为主屏幕。

用户使用主屏幕上可用的导航选项与应用程序进行交互。这些导航链接将用户重定向到相应的页面。我们可以使用原型设计功能定义链接。

要定义主屏幕，请将工作区切换到原型模式并选择一个画板。现在，点击主页图标

选择主屏幕后，主页图标从灰色变为蓝色图标，表示主页已成功选择。它将设置选定的主屏幕。当我们预览我们的应用程序时，当未选择任何内容时，它将是第一个屏幕。但是，我们也可以在不指定主屏幕的情况下进行预览。默认情况下，第一个画板被选为主屏幕。

要将工作区中可用的任何画板设置为主屏幕，请选择特定的画板，然后单击与该画板关联的主页图标。我们可以使用不同的链接为应用程序设置多个流程。

让我们了解如何为应用程序创建多个流程

在您的应用程序中设置多个流程

多个流程允许我们定义应用程序设计的多个版本。例如，如果我们使用不同的流程创建了应用程序的两种不同的布局。我们可以通过定义应用程序的另一个流程来共享该不同版本。

我们可以从同一文档或同一文件中创建和共享设计的多个版本，这些文档或文件在许多原型或设计规范中具有相同的画板集。每个流程都有其自己的一组原型和交互，因此我们可以修改团队反馈，而不会丢失现有应用程序中的任何更改。

每个流程都有其唯一的共享链接，仅显示附加的画板。主页画板将是该特定流程的第一个屏幕。我们可以在不同的流程中使用相同的画板，而无需复制它们。

要在同一应用程序中定义多个流程，请切换到原型模式，然后选择要设置为其他流程的主屏幕的另一个画板。现在，单击与其关联的主页图标。这将为应用程序创建另一个流程。当我们共享此流程时，它将为此流程创建一个唯一的共享链接。

应用程序的多个流程对于为不同的平台（例如移动设备、平板电脑和 PC）设计网站非常有用。我们可以为每个平台创建不同的流程，并在同一项目中为每个平台使用不同的共享链接。这将帮助利益相关者了解不同平台的应用程序流程并分别提供他们的反馈。

以下是创建应用程序多个流程的快速步骤

创建应用程序设计
然后切换到原型模式
通过定义主屏幕来指定一个流程
指定流程名称
如果是多个流程，请指定它们的主屏幕。
选择要与流程链接的下一个对象。连接箭头将显示在选定的画板上；拖动并将其连接到您要连接的另一个组件或画板。

如何为对象和画板添加交互

创建屏幕并将它们连接起来后，我们可以通过在特定组件上引入触发器和操作来创建更具交互性的原型。

触发器命中事件，操作将组件重定向到定义它的位置。触发器可以是任何操作，例如点击或悬停。

以下是为对象和画板添加交互的一些要点。

1：要为特定组件添加交互，请选择该组件，然后单击其上显示的 + 图标。现在，从属性检查器区域指定触发器和操作。定义操作类型和触发器后，将目标设置为该触发器。

例如，我们想通过单击登录按钮将登录页面重定向到其他屏幕。然后，我们将向登录按钮添加一个触发器，并将目标指定为另一个画板。考虑下图

在上图中，我们正在指定登录按钮的触发器。当我们在原型模式下选择该按钮时，它会在其旁边显示一个箭头图标。将此箭头拖到目标屏幕。当我们将其与其他屏幕连接时，它将在属性检查器区域中打开交互选项。考虑下图

在这里，我们可以指定不同的交互属性，例如触发器，类型，目标，动画等。

触发器：触发器属性允许我们指定启动操作的触发器；它可以是任何交互事件，例如点击，拖动等。我们有以下触发器选项

我们可以选择任何可用的选项来命中事件。对于语音原型设计，请选择语音选项。

类型：类型选项指定操作的行为。例如，如果我们选择过渡选项，则即将到来的画板将显示为过渡。如果我们选择叠加或超链接选项，它将相应地显示该行为。我们在“类型”下拉菜单中具有以下选项。

目标：目标菜单包含列表中可用的画板和状态。我们可以指定要在点击事件后重定向到的画板或状态。

动画：动画选项包含可以在状态或画板过渡期间应用的动画列表。

因此，我们可以将任何页面重定向到任何状态或画板以进行任何特定事件。

2：如果我们选择了点击作为触发器选项，我们可以将我们的组件与非过渡选项（例如音频播放或语音）结合使用。要使用第一个操作添加第二个操作，请从类型菜单中选择第一个操作，然后单击操作菜单中的 + 按钮来添加第二个操作，并将第二个操作指定为音频播放或语音。它将组合这两个操作，并且在触发指定事件时将执行它们。

如果我们选择音频或语音操作作为第一个选项，我们将无法添加第二个操作。

3：我们还可以将多个触发器组合在一起，以创建下一级别的交互，而无需在同一画板内的不同对象之间指定触发器。

要将多个触发器组合在一起，请点击画布上的“+”按钮，并指定触发器、动作和目标。