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

完成屏幕设计后,您可以通过构建交互式原型,直观地了解用户在使用您应用程序或网站时的体验。

您可以按照所需导航顺序连接屏幕,体验真实用户的感受。

设置“主页”屏幕

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

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

  1. 切换到“原型”模式。

  2. 单击要设置为“主页”屏幕的画板。左上角会出现一个灰色的主页图标。

  3. 点击“主页”图标。它会变成蓝色,指示该画板现已成功设置为“主页”屏幕。

    “设置为主页屏幕”选项
    “设置为主页屏幕”选项
    “主页”屏幕已设置
    “主页”屏幕已设置

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

连接屏幕

要链接某个交互式原型的画板,可以通过将交互式元素连接到目标对象或画板来连接画板。在链接画板或屏幕之前,请相应地命名画板。这样做有助于您确定要链接到哪个屏幕。

  1. 切换到“原型”模式。

  2. 单击希望链接的对象或画板。对象或画板中出现带箭头的连接手柄将鼠标悬停在手柄上,光标会变为连接器。

    将交互式元素链接到目标屏幕
    将交互式元素链接到目标屏幕
  3. 单击并开始拖动鼠标,可以看到连接器。在目标画板上释放鼠标。

    当您连接第一个元素时,该元素所在的画板将设为主画板。 

  4. 为了使原型更具吸引力,您可能需要引入触发器和操作。为此,请在画布上单击“+”按钮,或在“属性检查器”中单击“+”,然后选择屏幕上的选项。

    例如,如果您想提升原型的导航体验,则可以选择通过将“滚动至”设置为操作来添加锚点链接。有关此操作的更多信息,请参阅在画板中创建导航链接。

    原型制作选项
    原型制作选项

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

    请注意,如果选择“音频播放”或“语音播放”作为第一个操作,则无法添加第二个操作。

  6. 您还可以组合多个触发器来创建高级交互,而无需在画板上的不同对象之间分配触发器。为此,请使用画布上的“+”按钮,或在“属性检查器”中单击“+”,然后选择“触发器”、“操作”“目标”(如步骤 4 所示)。

    请记住,您可以应用一次点击拖动悬停时间 触发器,而应用多次语音按键和游戏手柄

    组合多个触发器
    组合多个触发器
  7. 如需预览您的原型,请单击“桌面预览”

教程

“随着原型制作工作流的不断发展,与设计进行交互的方法越来越多。从触摸、拖动和点击手势,到键盘快捷键和语音识别,这些方式不仅仅是单独使用,而是可以组合起来触发各种交互。”- Adobe XD 首席产品经理 Dani Beaumont。

观看本教程,了解如何为各种交互组合多个触发器。

观看时长:1 分钟。


提示

要编辑或删除连线,请选择要编辑或删除的连线。还可以从“属性检查器”中选择一个交互,然后编辑其交互。

将鼠标悬停在连线上可以查看工具提示,该工具提示将显示迭代次数及其类型。

要将定义的交互应用于其他对象,请选择对象或画板,选择“复制”,单击目标对象或画板,然后在右侧单击上下文菜单,选择“粘贴交互”。

与上一个画板链接

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

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

    设置目标
    设置目标

    如果要断开线与画板的链接,请单击线上的任意位置并将其拖离目标画板。

  3. 使用预览窗口预览链接。

取消与画板的链接

  1. “原型”模式下,选择“目标”>“无”

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

    取消与画板的链接
    取消与画板的链接

    只有在画板被链接到某一目标时,“无”选项才可用。

  2. 在浏览器中预览链接。先前从元素设置的所有目标链接都将被删除。

预览和录制交互

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

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

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

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

    在“预览”窗口中预览时,可以编辑原型的设计和交互。可以立即预览这些更改。

  2. 如需录制交互,请单击“预览”窗口中的“录制”图标。如需结束录制,请按 Esc,或者再次单击“录制”图标。

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