- 设计理论 -

移动界面中的界面动画

作者:刘清 原文出处:海盐社
2018-08-21

21.jpeg

在用户体验设计中,界面动画展示了无穷无尽的创意空间,同时也是界面动画也是目前热门讨论的对象之一。 在今天的文章中,让我们一起看几个最受欢迎的动画类型,对我们增强用户体验可以有哪些帮助。

01 反馈动画

反馈动画主要是告诉用户特定的操作已完成或失败。 这种动画保证了用户和程序之间的联系。 当你按下一个真正的按钮时,你会感觉到这个动作的强度和按钮的阻力。但是我们知道在移动应用中这是不可能的,用户只能点击、滑动屏幕,并没有那样特殊的物理反馈。 所以我们才要使用动画来对按钮、切换动作、开关、指示等这些地方的操作进行处理,达到迅速告知用户是否已完成操作的效果。

下面来看这个购票程序在使用时的动画交互流程: 首先点击时段之后,海报会转变成电影大厅的屏幕,由此过渡到选座界面。 按下所需的座位,用户可以看到按钮会改变颜色并提示座位号。 最后已完成标志的动画出现标志着整个过程最终完成。

640.jpeg

另一个例子:选择浇灌植物后,用户点击按钮,按钮将从水滴的图像变为已完成的图像,从而标志着所需操作已完成。

640.gif

界面动画也不仅仅只增加反馈,还可以增加乐趣。看下面这个按钮的操作:点击之后,就会它展示出现实物理世界中果冻跳动一样的动画效果。

640-1.gif

02 进度动画

如果交互的过程稍长,而且用户不得不等待,用户会更希望了解正在发生的事情以及事件的进展。进度动画的最大优势在于为用户提供安全感,使他们在使用产品的过程中了解自己到下一步还要多久。对之后时间的预知也给用户提供了积极的用户体验。当进度条,时间线和其他动态元素一起使用的时候往往能达到一石二鸟的效果:

1、通知用户关于操作的进展程度

2、提供有趣的元素,以减少等待的负面体验

3、真实而有趣的设计,可以让用户更加希望与他人分享并吸引更多用户参与进来。

在下面,您可以看到一个计时程序的交互过程:首先从一天到晚的动画过渡,而按钮显示也会相应显示数字来告知进度。

640-2.gif

03 加载动画

这是使用最广泛的界面动画类型之一。它可以被定义为进度动画的一类,因为它告知用户加载过程是正在进行的。常见的有 加载器、预加载、下拉刷新等。

来看下面展示示例:拉下后松手,会出现加载轮的轻微动画,该动画显示操作正在进行刷新,而其中的动画和插图会使得等待的时间不那么无聊。

640-1.jpeg

04 过场动画

当用户与您的应用程序进行交互时,对发生改变的地方做动画效果,能捕捉并引导到户的注意力放在这些地方。这样可以节省用户查看全部画面的宝贵时间,并使操作更清晰直观。

这套美味汉堡应用程序的交互过程中,价格改变会产生动画效果。它为操作过程增添了生机,并使其变得自然。而且通过动画,也能立即吸引用户的注意力,以这种方式提供核心信息,从而提示用户应该看什么。

640-2.jpeg

05 转场动画

转场动画是在交互过程,从一个屏幕到另一个屏幕时添加的动画。

来看下面这组动画:这里用户根据他们的目标和饮食限制来定制他们的食谱。而卡片之间的转场动画,则提供了积极的用户体验。

640-3.gif

06 推广动画

品牌与动画结合起来,能在提高品牌知名度方面发挥重要作用。在大多数情况下,标志,吉祥物等的动画,经常有效地应用于启动(欢迎)页。应用程序中的推广动画通常集中于吸引人们注意品牌的视觉特征。

这里是我们为Whizzly创建的动画标志,这样的动画能增强品牌差异,并使品牌能够增添生动的情感增加吸引力。

640-3.jpeg

07 通知动画

通知是吸引用户关注应用中状态更新的标志。在合适的动画支持下,通知会变得更加引人注目,使用户更有可能不会错过重要信息。

以下您可以看到这样一个示例:通知不仅只用明亮的颜色显示,而且还以模仿跳动的运动效果显示增强提示。

640-4.gif

08 滚动动画

滚动是我们在Web和移动界面中使用的典型交互方式之一。滚动动画为交互过程增添了美感和优雅。要记住的是在手机界面中,滚动可以在不同的方向运用,可以是垂直的,也能是水平的,如下图所示

640-4.jpeg

09 情感化和游戏化

在移动应用中动画是故事或游戏的一部分。动画表情,徽章,奖励,吉祥物  这些都是让界面有趣且生动的几种方法但是结合动画就会变得更引人注意。比如说在这里你可以看到下面这套表情,反映了各种感受,使用它们对增添用户体验提升情感吸引力起到很好的效果。

640-5.jpeg

10 动画的优点和缺陷

在移动应用中应用动画,设计师应该分析它们可能对应用交互产生的正面和负面影响。这里有一份简短的清单,希望有助于您在使用动画前进行思考

界面应用动画的优势:

节省了屏幕空间

增加可用性

充满创意

方便和轻松的互动

能够同时完成多项功能

加速交互过程

向用户提供清晰明确的反馈

创造必要的期望给用户安全感。

另一方面,也有一些缺点:

加载时间

分散注意力

耗费设计和开发资源

重复的动画 太久会导致厌烦

640-6.jpeg

总结

当所有的东西都集成到一个界面中时,应用动画必须是一个功能元素而不是装饰。 当你决定使用界面动画的时候,一开始你就考虑需要分析它们会对应用程序的造成哪些影响,如果你看所考虑到的正面影响小于负面,就需要重新考虑是否要加入动画效果。

再者 动画在交互过程中的优势和作用必须清晰明确的,并且排除其中可能遇到的操作误区(识别性、重复性等)。 好的界面动画就像是蛋糕顶端的一个樱桃,更多的时候它是锦上添花的而不是雪中送碳。

原文作者:Tubik Studio

原文链接:https://uxplanet.org/ux-design-how-to-use-animations-in-mobile-applications-a8257ebffe90

22.jpeg

海盐社.jpeg

喜欢就分享
精选评论