使用Adobe XD在原型中自动动画

转到Meagan Fisher的个人资料 Meagan Fisher BlockedUnblockFollow发布于2018年12月18日

你好!今天我将向您展示如何在Adobe XD中使用我最喜欢的功能---原型中的Auto-Animate。

要将整个教程视为视频,请查看下面的视频文件。或者,你可以继续阅读!

本教程的基础是我最近参与的一个项目;这是我为Adobe XD创建的免费UI工具包,您可以使用它为非盈利组织设计网站。 您可以在此处下载Behance上的UI工具包本教程的基础是我的Adobe XD非营利UI工具包

在本教程中,我将向您展示如何向捐赠表单原型添加动画。

从表格的每个状态开始使用画板

我开始使用一个画板来处理我表格中的每个状态。共有五个州:

  • 默认状态
  • 想要捐赠自定义金额的用户的状态
  • 用户给予一次捐赠的状态
  • 显示选择不同捐赠金额的两个州

捐赠表格有6种不同的州

默认情况下,您可以通过按下Adobe XD右上角的"播放"来查看这些状态的原型,然后使用键盘上的左右箭头键来浏览它们。然而,让我们的原型可点击是更好的,所以他们觉得更像是用户将如何与我们的界面交互的真实再现。值得庆幸的是,在Adobe XD中制作可点击的原型非常容易。

使原型互动

使用Adobe XD制作原型与点击元素并指向生成的状态画板一样简单

要使原型具有交互性,只需进入原型模式并单击应该是交互式的元素。元素右侧会出现一个小蓝箭头;单击并拖动此箭头以指向描绘单击该元素的结果的画板。

正如您在预览原型时所看到的,此表单的用户可以选择输入自定义捐赠金额,或者如果他们选择,则可以输入设定的捐赠金额。通过单击此链接,他们现在可以展开或折叠单选按钮,这些按钮将更改为输入字段,反之亦然。

注意这种转变的方式;这是使用Adobe XD的默认动作---即转换---具有动画风格的溶解。 在原型设计选项面板中有几种自定义过渡的选项

您可以为此操作设置不同类型的过渡和动画样式,我们可以在此面板中看到,一旦连接了元素,就会出现。

使用Auto-Animate创建更丰富的交互

默认转换看起来并不糟糕,但我们可以通过Auto-Animate更好地完成。

要切换到自动动画,请返回原型模式并再次单击该元素以再次显示选项面板。单击"操作"下拉列表,将操作从默认的"过渡"更改为"自动动画"。

使用另一个元素重复此操作,该元素将用户返回到他们开始的位置。

使用Auto-Animate作为动作,画板之间的过渡更能反映出我们希望在网络上呈现的方式。表单不是在更改之间淡入,而是自动调整大小,元素可以像在浏览器中一样上下移动。

另一个Auto-Animate实例的例子

还有两个单选按钮,用户可以选择每月或一次捐赠,我们也可以使用Auto-Animate对这些单选按钮之间切换的交互进行原型设计。 使用"自动动画"可在单选按钮之间切换

要执行此操作,请单击取消选择的单选按钮,然后将原型设计箭头拖动到画板上,该画板显示选中它时的外观。

您可以在上面的视频中看到XD已经记住了我在上次设置的转换中的选择,因此默认选择自动动画作为动作。

我还将相同的转换应用于其他单选按钮,再次允许用户在两个选项之间切换。

现在,当我们再次预览原型时,我们可以在此处看到自动动画功能。注意活动状态指示器如何在这两个按钮之间滑动。这是一个非常酷的效果,而且非常容易设置。

使用Auto-Animate的另一个例子

要将我的表单字段的其余部分设置为交互式,我们希望在其他画板之间重复这些步骤。基本上只是将箭头从可点击元素拖动到显示其相关状态的画板。这太简单了!

现在,当我们在原型中预览这些自动动画时,您可以看到效果。同样,活动状态以平滑且简单的方式在这些单选按钮之间滑动。这不需要任何动画软件或知识,只需要在XD中进行一些超快速的点击操作。

所以这是我们完成的表单原型,显示了此屏幕的所有不同状态: 使用自动动画的捐赠表格的最终原型

我希望这是有帮助的!您可以通过访问adobe.ly/meaganxd下载Adobe XD并亲自试用 。我迫不及待地想看看你创造了什么!

查看英文原文

查看更多文章

公众号:银河系1号

联系邮箱:public@space-explore.com

(未经同意,请勿转载)