如何在移动应用中使用动画

在 UI设计中,应用动画展示了无休止的创意搜索区域,以及热议的对象之一。在今天的文章中,我们将考虑如何在移动应用设计中使用动画来提供积极的用户体验和流畅的互动。

由于所有内容都集成到界面中,应用动画必须是功能元素,而不是装饰。运动元素应从规划用户旅程的一开始就考虑。在设计动画时,您需要分析它们对应用程序可用性和可取性的影响——如果您看不到真正的积极影响,请重新考虑该方法。运动在相互作用过程中的优势和效用必须明显,并大于可能的陷阱。好的UI动画是一个樱桃在上面。让我们回顾一下为增强移动用户界面而检查的最流行的类型。

反馈动画

反馈动画通知用户特定操作已完成或失败。这种动画即使在基本操作中也保持用户和应用之间的通信线路。不知怎么的,它模仿了与物理世界中真实物体的相互作用。例如,当您按下一个真正的按钮时,您会感受到投入到此操作中的力量和按钮.在移动应用中,这是不可能的:只需轻点屏幕,就不会有此类物理反馈。这就是为什么与传感器屏幕交互,我们处理振动和视觉标志,以获得来自应用程序的反应。这是当UI动画保存游戏。动画按钮、切换、开关、勾选或交叉标志会快速通知用户操作是否完成。

例如,以下是购买门票的影院应用程序交互流。从放映屏幕到座位选择的过渡是通过电影海报的动画完成的:屏幕转换为电影大厅的图片。按下所需的座椅,用户可以看到按钮如何更改颜色并理解系统接受数据。滴答声符号的动画标志着过程的完成。

 

 

另一个例子可以在交互中看到浇水跟踪器应用程序:给工厂浇水后,用户点击按钮,它会将图像从滴答声更改为刻度,以标记所需的操作已完成。

 

 

另一个例子可以在交互中看到浇水跟踪器应用程序:给工厂浇水后,用户点击按钮,它会将图像从滴答声更改为刻度,以标记所需的操作已完成。

 

 

进度动画

如果交互过程稍长一些,用户必须等待,他们更愿意了解发生了什么事情,以及进展如何。这种动画交互的最大优势是为用户提供保证,使他们在使用产品的过程中意识到并有信心。自信的用户意味着积极的用户体验,并为高水平的用户保留提供了良好的基础。进度条、时间线和其他动态元素的动画可以一石二鸟:

  • 告知用户进度水平
  • 提供娱乐元素钝化可能的负面等待体验
  • 设计最初和优雅,可以成为一个病毒功能,用户将希望与他人分享,并吸引更多的用户采取行动。

下面,您可以看到一个时间线应用程序:等待过程由动画图形支持,这些图形具有从白天到晚上的过渡,而按钮则显示数字进度。

 

 

加载动画

这一定是最广泛使用的移动动画类型之一。它可以被定义为进度动画的子类型,因为它通知用户加载过程是活跃的。它有不同的变化,如装载机,预加载器,拉到刷新动画。

下面是拉到刷新的例子沉睡应用程序:拉下新剧集的标签,用户正在等待,并看到加载轮的轻微动画,这表明跟踪库茶点正在进行中,而动画插图使期望的时间没有那么无聊。

 

注意绘制动画

这种动画起着作用用户体验负担能力当用户与您的应用程序进行交互时。它支持一般视觉层次结构以运动吸引用户的注意力,并引导它到必要的细节。这样,它节省了宝贵的时间扫描所有的屏幕布局,使导航更清晰和直观。

这组交互用于美味汉堡应用程序具有更改的动画价格。它为这个过程增添了生命,使之变得自然。此外,通过运动,它立即吸引用户对核心信息的眼光,从而提示要查看的内容。

 

过渡动画

过渡动画在交互过程中增加了风格和优雅,并从一个屏幕传到另一个屏幕。

下面是一组过渡完美食谱应用程序:在这里,用户根据他们的目标和饮食限制定制他们的食谱基础。以运动支持的目标卡之间的转换支持了积极的用户体验。

 

然而,这不仅仅是关于美。在我们最近的文章中专门讨论概念用户界面动画对于移动应用程序,我们展示了如何过渡动画可能会在元素之间增加更多空间的错觉,这样使布局通风和轻盈,如下面的例子。

 

然而,这不仅仅是关于美。在我们最近的文章中专门讨论概念用户界面动画对于移动应用程序,我们展示了如何过渡动画可能会在元素之间增加更多空间的错觉,这样使布局通风和轻盈,如下面的例子。

 

营销动画

明智集成品牌到用户界面设计在提高品牌知名度方面可以发挥很大作用。在大多数情况下,它是动画标志,吉祥物等,这往往是有效地应用于飞溅(欢迎)屏幕。应用中的营销动画通常侧重于吸引人们对品牌视觉标志的关注。这里是动画徽标我们创建的呼啸而过,一个自我推销年轻天才的应用程序。动画是吸引人的,更令人难忘,使设计师增加生动的情感吸引力。

 

动画通知

通知是吸引用户注意应用中更新的标志。在不显眼的动画支持下,通知变得更加引人注目,并设定了更高的机会,用户不会错过重要信息。下面可以看到这样的UI元素的例子在家庭预算应用:通知不仅以鲜艳的颜色突出,而且与运动模仿脉动。

 

滚动动画

滚动是我们在 Web 和移动界面中习惯的典型交互之一。动画为这个过程增添了美感和优雅感,使其时尚、原创、和谐。请记住,滚动可能应用在不同的方向,不仅垂直,而且水平,如在下面显示的照片应用程序。

 

讲故事和游戏化

在移动应用中使用动画的又一个原因是使它成为故事或游戏的一部分。动画贴纸,徽章,奖励,吉祥物-这些只是使应用程序界面有趣和活泼的几种方式。例如,在这里你可以看到情绪信使反映各种感觉的动画贴纸:使用它们为用户体验增添了强烈的情感吸引力。

 

UI 动画的好处和陷阱

在移动应用中应用动画,设计人员应分析它们可能对应用交互的正面和负面影响。我们准备了简短的清单,帮助您进行决策。

在移动应用运动的优势中,我们提到:

  • 保存的屏幕空间
  • 增加可用性
  • 创意
  • 方便易用的互动
  • 同时完成多个功能的能力
  • 加快交互过程
  • 向用户提供明确的反馈
  • 创建必要的期望。

另一方面,设计师必须考虑的缺点包括:

  • 加载时间
  • 分心因素
  • 耗时费力的技术实现。

原作者:Marina Yalanska

 

推荐阅读

界面动画,运动的力量

UI 设计中图标的重要细节的巨大潜力

移动友好型网站设计的7个技巧

9个构建视觉层次的有效提示

如何使用网格来改善视觉层次结构?

网页设计中的5种基本图像类型

用户界面的3C规则:颜色、对比度和内容

用户体验:对设计一致性的洞察

本页面最后更新于 2021年06月24日 09:46