如何创建不仅吸引用户而且留下持久印象的移动应用程序。对无缝且迷人的用户体验的追求通常会导致一个关键元素:动画。
UI 动画让静态屏幕变得生动起来。所有的微交互、界面的微小响应以及转换都很好地融合了现实事物与数字领域的行为方式。大多数时候,我们将可用性归因于令人愉悦的功能,但我们从未深入探讨是什么让功能变得令人愉悦。
如果您是那些寻求提升移动应用程序用户体验的人之一,但发现自己淹没在动画选择中,那么您并不孤单。在这里,我们将介绍移动应用程序的动画类型以及改进用户体验的界限。
UI动画代表什么
每个物理物体都会移动。从技术上来说它们可能仍然是静止的,但从环境上来说,它们都在移动。当太阳在树林中的一块石头上移动时,光与影的游戏使死石变得生机勃勃。我们的眼睛捕捉运动,因为它承载了大量信息。在UI/UX 设计中,如果不考虑这些信息,那将是一种耻辱。
动画是我们在产品中首先看到的东西,还有颜色、图像和版式。这四个主要因素决定了品牌或产品的个性。
所以,UX设计中的动画是:
- 说明性的。它演示了功能或帮助人们更好地理解应用程序。
- 有趣。价值可以通过多种方式表达。积极性就是其中之一。
- 熟悉的。我们期望某些行动会产生某些反应。动画熟悉。
- 引人入胜。我们倾向于遵循模式,而动画是其中的一个重要来源。
集成移动应用程序动画的原因取决于特定交互的目标。
为什么要添加UI动画
吸引注意力
注意力是营销的一个主题。在这里,动画是为了让人们从品牌元素中得到一些东西,与公司产生联系,并建立信任。当徽标动画表达某种动态时,这很容易做到。是温暖舒适,还是活力四射?当你可以立即展示它时,为什么还要让人们猜测呢?更重要的是,徽标动画可以在应用程序的其余部分加载时讲述一个故事:
与应用程序建立关系的一个好方法是说出该品牌的含义以及它希望您如何看待它。这不是横幅广告闪烁式的关注。这就是为什么要通过最强大的感知渠道——视觉。
提供反馈
移动应用程序中的动画可以增强您成功执行任务所获得的满足感。任务越复杂,奖励就应该越多。动作是我们传达情绪并为用户的行为提供反馈的方式。此类动画可以覆盖完成技术请求或表格提交所需的时间。它向用户展示工作正在进行,并吸引自然的完成感。
此UI 动画的目的是以对用户有帮助的方式引导用户。例如,文件发送出错不一定是弹出错误代码或“哎呀”类型的消息。有足够的挫败感,我们应该通过有意义的动态图形来表达我们的关心来消除一些挫败感。
我们以动画形式呈现反馈,以确保用户能够理解。这就是功能。但我们的做法是让他们放心或高兴,这样无论手术成功与否,人们都会感到受到照顾。
显示进度
大多数流程都有人们认可和期望的指定模式。同时,对于各种设备和屏幕媒体,以较少的资源保持相同的行为极具挑战性。这意味着将某些流程划分为可理解的部分,同时映射整个进度。
这就是 Google 解决将信息复制到 Pixel 3 的相当复杂且漫长的过程的方法:
由于这是一部智能手机,您将无法仅切换到不同的选项卡并让自己忙于其他事情。尽管如此,您仍然必须知道到底发生了什么以及为什么它很重要。
提供导航
移动应用程序动画并不总是必须将进程隐藏在后面。它的作用与导航辅助程序一样好,尤其是当应用程序结构过于复杂而无法在一个屏幕上显示时。您可以动画分层架构来演示隐藏的部分:
显示更改
互动基于影响力。UI 动画可以通过以传达含义的方式对用户的操作做出反应来增强效果。当你触摸一个元素时,你会改变它,这就是触觉体验的重点。
这种视觉激活是用户采取行动之前的系统响应。这对于转换至关重要,因为这种运动是自然的,除了存在之外不需要任何输入。
享受其中的乐趣
有时,移动应用程序的动画除了让您微笑之外什么也没做。如果及时正确地完成,这将是一个很好的参与度提升器。有趣的动画必须出现在意想不到的地方或不会造成伤害的地方。这是因为,即使是最酷的加载移动动画,如果它妨碍了重要任务,也会让人感到沮丧。
有趣和烦人之间只有一线之隔,找到可以通过做一些动作来缓解紧张的地方是至关重要的:
在这里你可以使用各种面孔、贴纸、吉祥物和可爱的东西。一点乐趣始终是为应用程序 UI增添活力并展示产品人性化一面的好方法。
通知用户
通知是一个棘手的话题,因为它们需要在正确的时间到达。否则,人们会生气并把它们换掉。对于用户体验设计师来说,这更加困难。一旦通知被静音,该应用程序很可能会走上这条默默无闻的道路。
除了极端的情况之外,大多数通知都可以帮助人们随时了解他们需要的信息:交付状态、天气、提醒等。借助有意义的UI 动画,我们可以调整到该心理空间并创建一个功能元素:
移动应用动画趋势
移动应用程序动画始终受到UI/UX 设计趋势和技术进步的影响。在进行项目时,请记住以下趋势:
- 导航手势:未来几年,导航手势将升级并简化用户交互,从而简化应用程序导航。基于手势的控制可能会变得更加直观。因此,请考虑将动画与手势联系起来。
- 移动优先的设计方法:全球约有 69.2 亿智能手机用户。这相当于世界人口的 86.29%。因此,设计UI 动画时要充分利用可用的屏幕空间。
- 未来派色彩:在移动应用程序设计中使用大胆和未来派的调色板。这些颜色可以唤起情感、传达品牌标识并创建视觉上引人注目的用户界面。
- 复杂的颜色渐变:移动复杂的渐变可以增加界面的深度和复杂性。这一趋势就是使用颜色来创造视觉上引人入胜且美观的用户体验。
结论
UI 动画是现代 UI/UX 设计的重要组成部分,数字设计机构广泛使用这种方法来激发用户的兴趣并提供反馈。动画不是装饰品:它是与目标受众建立联系的重要手段。通过最轻微的动作,您可以引导用户使用必要的功能,让他们微笑,显示变化等。