UX设计:如何在移动应用中使用动画

本文介绍了动画在移动应用程序的UI设计中的好处,并展示了大量示例,说明了它们如何为交互增加可用性和美观性。

UX设计:如何在移动应用中使用动画

在UX设计中,应用动画展示了无限创意搜索的领域,在今天的文章中,我们将考虑如何在移动应用程序设计中使用动画来提供积极的用户体验和流畅的交互。

由于所有内容都已集成到界面中,因此应用动画必须是功能元素,而不是装饰元素。应该从规划用户旅程的一开始就考虑运动元素。设计动画时,您需要分析它们对应用程序的可用性和可取性的影响–如果看不到真正的积极影响,请重新考虑该方法。在交互过程中运动的优势和效用必须显而易见,好的UI动画是最重要的。

反馈动画

反馈动画通知用户特定操作已完成或失败。这种动画即使在基本操作中也能保持用户与应用之间的通信线。它以某种方式模仿了与物理世界中真实对象的交互。例如,当您按下真实按钮时,您会感觉到此操作的力量和纽扣。在移动应用程序中,这是不可能的:您只需轻按屏幕,不会得到这种物理反馈。这就是为什么与传感器屏幕交互,我们处理振动和视觉信号以从应用程序获得响应的原因。

例如,这是电影票购买互动的Cinema App流程。从放映屏幕到座位选择的转换是通过电影海报的动画实现的:屏幕转换为电影大厅的图像。按下所需的座椅,用户可以看到按钮如何改变颜色并了解系统已接受数据。勾号的动画标志着该过程的完成。

UX设计:如何在移动应用中使用动画

即使使用基本导航,移动UI动画不仅可以增加反馈,而且可以增加乐趣。检查一下可扩展按钮的概念:一点点运动,它就能模仿与果冻之类物质的物理相互作用。

UX设计:如何在移动应用中使用动画

进度动画

如果交互过程需要更长的时间,并且用户不得不等待,那么他们宁愿了解正在发生的事情以及正在取得的进展。这种动画交互的最大优点是为用户提供了保证,使他们在使用产品的过程中意识到并充满信心。进度条,时间轴和其他动态元素的动画可以用一石多鸟:

  • 告知用户进度级别
  • 提供娱乐元素,钝化等待的负面体验
  • 设计独特且优雅的产品,可以成为用户希望与他人分享并吸引更多用户采取行动的病毒式功能。

您可以看到一个时间轴应用程序:动画图形支持从白天到黑夜的过渡,而按钮显示数字的进度,从而支持等待过程。

UX设计:如何在移动应用中使用动画

加载动画

移动动画中使用最广泛的类型之一。它可以定义为进度动画的子类型,因为它通知用户加载过程处于活动状态。它有不同的变化形式,例如加载器,预加载器,按需刷新动画。

这是拉动刷新的示例 睡眠应用:拉下新剧集的标签,用户正在等待,并看到加载轮的轻微动画,这表明跟踪库的刷新正在进行中,而动画插图使预期的时间不再那么无聊。

UX设计:如何在移动应用中使用动画

吸引注意力的动画

这种动画扮演着 用户体验能力当用户与您的应用互动时。支持一般视觉层次动作吸引了用户的注意力,并将其引导至必要的细节。这样,它节省了扫描所有屏幕布局的宝贵时间,并使导航 更清晰直观。

这套互动 美味汉堡该应用程序具有改变价格的动画效果。它增加了流程的生命并使之自然。而且,通过运动,它立即以这种方式吸引用户的眼球到核心信息,从而提示要查看的内容。

UX设计:如何在移动应用中使用动画

过渡动画

过渡动画在交互过程中以及从一个屏幕到另一个屏幕的过程中增加了样式和优雅。

这是在 完美食谱应用:在这里,用户可以根据自己的目标和饮食限制来定制食谱库。运动支持的目标卡片之间的过渡可提供积极的用户体验。

UX设计:如何在移动应用中使用动画

然而,这不仅与美丽有关。这些示例说明了过渡的动画如何在元素之间增加更多空间的错觉,并通过这种方式使布局更加通风和明亮,如以下示例所示。

UX设计:如何在移动应用中使用动画

这是当用户从饼图保存到列表视图保存和颜色标记时用于过渡过程的创意动画的另一个示例:动画使屏幕之间的连接与数据可视化紧密相连,并让用户看到此连接。

营销动画

明智的整合 UI设计品牌化可以在提高品牌知名度方面发挥重要作用。在大多数情况下,它是徽标, 吉祥物等等,通常可以有效地应用于启动(欢迎)屏幕。应用程式中的行销动画通常着重于吸引品牌的视觉标志。这是动画徽标我们为 Whizzly 创建了一个年轻人才能自我推广应用程序。动画引人入胜,更令人难忘,使设计师能够增加生动的情感吸引力。

UX设计:如何在移动应用中使用动画

动画通知(弹窗动画)

通知是吸引用户注意应用程序更新的标志。在不显眼的动画的支持下,通知变得更加引人注目,并为用户提供了不会错过重要信息的更高机会。下面的示例中看到此类UI元素的示例房屋预算 应用程序:不仅以鲜艳的色彩发出通知,而且还以模仿运动的脉动突出显示。

UX设计:如何在移动应用中使用动画

滚动动画

滚动是我们在Web和移动界面中常用的典型交互之一。动画为过程增添了美感和优雅,使其时尚,原始和和谐。请记住,滚动可能会应用到不同的方向,不仅是垂直方向,而且还可以是水平方向,如下面的Photo App中所示。

UX设计:如何在移动应用中使用动画

讲故事和游戏化

在移动应用中使用动画的另一个原因是使其成为故事或游戏的一部分。动画贴纸,徽章,奖励,吉祥物–这些只是使应用程序界面生动有趣的几种方法。例如,在这里您可以看到Mood Messenger的动画贴纸反映了各种感觉:使用它们可以为用户体验带来强烈的情感吸引力。

UX设计:如何在移动应用中使用动画

UI动画的优点和缺点

在移动应用程序中应用动画时,设计人员应分析它们可能对应用程序交互产生的正面和负面影响。我们准备了简短的清单,可以帮助您进行决策。
在移动应用的运动优势中,我们将提到:

  • 节省屏幕空间
  • 可用性提高
  • 独创性
  • 便捷的互动
  • 同时执行多项功能的能力
  • 加快互动过程
  • 向用户提供清晰的反馈
  • 创造必要的期望。

另一方面,设计者必须考虑以下缺点:

  • 加载时间
  • 干扰因素
  • 费时费力的技术实现。
业界动态

开发需求变更时,初级产品经理应该关心哪些问题?

2020-6-22 12:59:10

业界动态

设计用户界面依赖于2个因素:技术、设计

2020-6-22 14:09:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索