了解如何使用自动制作动画来创建微交互。

XD 暂时只提供基本的过渡类型,可以模仿手机的原生过渡(例如推拉、滑动和溶解)。这些功能很适合打造基本的用户流体验。借助自动制作动画功能,您可以通过动画原型让内容的移动形象化。

您可以通过自动制作动画功能,创建震撼的视觉效果(例如 YouTube 滑动/拖拽或涟漪互动效果),从而打造具有吸引力的交互式最终用户体验。 

网站的涟漪互动效果
网站的涟漪互动效果
触屏设备上的滑动和拖拽效果
触屏设备上的滑动和拖拽互动效果

要创建动画,只需复制画板,修改对象属性(如大小、位置、旋转),然后在画板之间应用自动制作动画操作。然后您可以在预览窗口、Web 浏览器或移动应用程序中播放或录制这些动画,与利益相关者分享它们以进行协作审阅。这有助于您在为整体用户体验添加丰富图层的同时讲述更好的原型故事。

创建原型前,请确保您要添加动画效果的对象在每个画板上具有相同的图层名称。与 XD 13.0 一同发布的自动制作动画功能仅适用于特定属性;阅读支持和不受支持的属性一文,了解更多信息。

  1. 要在 XD 中创建动画原型,需在原型模式下,选择画布中的所有画板,以查看画板之间的连线。

  2. 将连接器从源画板中的图层拖动到目标画板。当您连接第一个元素时,该元素所在的画板将设为主画板。

  3. 在“触发器”提示显示中,设置以下选项:

    • 触发器:将手势类型设置为“拖动”、“点击”或“语音”。如果您想要模拟拖动卡片的效果,请选择“拖动”
    • 操作:设置为“自动制作动画”
    • 目标:将目标画板设置为第二个画板。
    • 缓动:从下拉菜单中选择选项。
    自动制成动画工作流程
    自动制成动画工作流程

    A. 将触发器类型设置为“拖动” B. 将操作设置为“自动制作动画” C. 目标画板 D. 缓动选项 

    想要向您的设计添加高级微互动?通过 After-Effects 完善您的设计。观看此视频,了解工作流程介绍。

    从 Adobe XD 导入 After-Effects(观看时长:1 分钟)

  4. 要在桌面、移动设备或 Web 上支持的浏览器中预览更改,请选择桌面预览图标。

    注意:

    在预览通过自动制作动画功能制作的画板时,XD 不支持应用滚动效果。

  5. 要从 XD 桌面应用程序中与利益相关者共享原型,请单击“共享”,然后选择“共享以审阅”(对于原型)“共享以开发”(对于设计规范)。有关更多共享原型和设计规范的信息,请参阅“共享原型”和“设计规范”

您也可以通过此视频,了解如何使用自动制作动画功能。

观看时长:1 分钟。


示例

最佳实践

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略