自动动画的力量:Adobe XD如何改善用户体验设计的10个示例-Adobe XD中文网

自动动画,使您能够轻松地创建逼真的动画过渡的原型,是最大的除了的Adobe XD的原型还没有的功能。为了演示您可以使用Auto-Animate创造的流畅效果,我们采访了Adobe高级XD传播者Howard Pinsky(他还经营一个涵盖XD新闻的受欢迎的YouTube频道)和Adobe XD高级产品经理Jonathan Pimento

霍华德(Howard)和乔纳森(Jonathan)都在广泛地研究自动动画,在本文中,他们将向您展示一些令人惊叹的新功能实例,以及如何改进用户体验设计。

首先,让我们从乔纳森的动画开始:

过滤咖啡应用

借助Adobe XD的新“自动动画”功能,我可以对矢量路径进行动画处理,以修改咖啡,水和牛奶的不同含量。设置不同矢量路径动画的功能使您可以为图标和其他UI元素创建一些漂亮的动画。

卷盘iPad应用

自动动画允许您对同一对象的属性差异进行动画处理。即使没有时间轴,您也可以在XD中实现一些基本的排序。请注意场景如何从底部开始依次滑动?您可以通过将它们从“开始”屏幕上的画板中移出并堆叠起来,使其一个接一个地动画来实现相同的效果。

卷轴移动应用

该示例演示了如何轻松地将“轻击”,“拖动”和“时间”等手势与“自动动画”结合起来,以构建移动端到端的体验。通过使用新的缓动功能(如反弹,捕捉和结束)可以实现微妙的缓动效果。

滑卡

本示例说明如何使用“自动动画”来设置蒙版和图像的位置动画。我已经设置了使用拖动的示例,然后使用“自动动画”功能,通过重新定位和调整遮罩的大小轻松地对卡片图像进行了动画处理。

接下来,看一下霍华德使用自动动画创建的内容:

汉堡爆炸

这是一个有趣的互动过程。在Dribbble上看到爆炸汉堡的静态图像后,我想到了将其变为现实的想法。借助Adobe XD现在支持Illustrator文件的功能,我从Adobe Stock中抓取了一个看上去很美味的汉堡,并将其直接弹出到XD中。从那里,我利用自动动画和拖动触发器来创建交互,以模拟用户如何简单地将浇头拖走。

照片编辑原型

创建较小的交互很有趣,但是对于这个项目,我想更深入地研究。看到我不断地在手机上编辑照片,我想使用Adobe XD建立类似的体验,包括图库,裁剪/旋转和图像调整。特别是,裁剪交互是一个有趣的交互,因为它涉及对蒙版的形状和图像进行动画处理。

移动滚动互动

这张照片是在一些用户问我XD是否支持“滚动”作为触发之后发生的。尽管还没有(只是),但当然可以仅使用两个或三个画板和“自动动画”来创建类似的交互。

视差着陆页

我不确定为什么,但是我一直是视差交互的爱好者(当它们正确完成时),所以一旦发布自动动画,我决定开始进行实验。像许多其他示例一样,我只需要设计各种画板,XD就会处理背景中所有复杂的关键帧。进行这种交互的想法是,用户可以将鼠标悬停在各个目的地的上方以展开它们,然后单击一个以查看更多详细信息并开始视差效果。

日夜切换开关

虽然我喜欢设计完整的项目,但有时在单个元素上工作很有趣-像这样的开关!使用导入的Illustrator文件,我将各种昼/夜图层添加到药丸状的蒙版中,然后设计了两种状态(昼/夜),并确保在每个画板上移动元素。由于路径在XD中具有精美的动画效果,因此创建移动的月亮非常简单。

特斯拉苹果手表概念

像特斯拉一样精通技术的人,令我惊讶的是,他们没有官方的Apple Watch应用程序。因此,就像任何好奇的设计师都会做的那样,我开始考虑用例。通过使用XD,我预想了如何使用简单的拖动手势来实现躯干/碰撞交互的外观和感觉。

也可以在Howard的Dribbble页面上找到更多示例

加入社区

您可以使用“自动动画”进行处理的可能性是无限的。我们很乐意看到使用新功能创建的内容,因此请在Twitter上与@AdobeXD团队联系,并确保包含#AdobeXD主题标签。您也可以在Facebook上与该团队联系,并在Behance上共享您的原型,使用#MadeWithAdobeXD标记它们,然后在“使用的工具”下选择Adobe XD,以便有机会在Adobe XD时事通讯中进行介绍。

让我们为网络动画!