百川宠物店宠物用品网站建设 - 专业的宠物店宠物用品网站建设

资讯热点
在移动应用程序中过渡动画设计

发布时间:2024-4-9 分类: 电商动态

过渡动画可以通过多种方式增强用户行为。移动应用中的过渡动画是什么?在本文中,我们将介绍功能动画补充视觉设计和支持交互的常见情况。

动画是用户体验的重要组成部分。在移动应用程序的转换方面,您可以通过细致的动画提供丰富的信息。发送消息,打开设置,单击复选框,导航到其他页面 - 这些都是变化的时刻,动画过渡是增强用户行为的好方法。

在本文中,我们将介绍功能动画补充视觉设计和支持交互的常见情况。

首先,提供系统的状态

当用户触发某些操作时,他们期望获得视觉反馈,并且系统需要清楚地指示它在运行时已收到操作请求。

以下是一些对用户体验有用的动画反馈示例:

1.确认用户操作

用户通过系统获得操作的确认,并且当用户可以获得有效的视觉反馈时,这防止用户重新点击操作元件。

通知用户他们的行动结果。图片: ColinGarven

2.使用下拉刷新更新页面内容

加载提示的视觉反馈有助于用户理解系统正在处理用户的请求。

微妙的动画可以帮助用户了解正在发生的事情。图片: Ramotion

3.等待内容加载

加载不一定很无聊,几乎所有移动应用都可以使用微妙的动画来阻止用户在页面加载时离开。加载动画可以继续占用用户的视觉反馈,结果是用户感觉等待时间较短。

动画可以在应用程序完全加载之前保持用户参与。图片: UI8

其次,连接任务流程中的不同步骤

有时用户需要一系列步骤来完成操作,而这些步骤需要清楚地表明它们是紧密相连的,动画可以帮助您连接不同的步骤来创建完整的体验。

以下是如何使用动画创建连续线性事件的一个很好的示例:

图片: JakubAntalí k

动画可以帮助设计人员创建渐进式演示,渐进式演示通过减少同时显示的信息量,使界面更容易学习。

以下是使用渐进式表示提供有意义的信息块的两个很好的例子。

图片: Anton Skvortsov

三,引入新元素

当我们在页面上引入一个新元素时,我们会尝试将用户的注意力集中在这个对象上并帮助他们回答这个问题:“为什么我会看到这个新对象”?

在引入新元素时,动画可以帮助您定义对象之间的关系和层次结构。

动画可以显示新对象的来源。图片: VirgilPana

第四,提供用户空间定位感

动画可以帮助用户建立一个具有更好空间感的心理模型。特别是对于手机用户而言,在小屏幕上短时间关注这种组合很容易导致用户在屏幕之间迷失方向。

我们可以使用动画来引导用户,动画有助于解释信息如何从一个状态流向另一个状态。通过向用户提供有关他们当前正在进行的操作的信息,可以防止用户迷路。

定向动画让你知道你现在在哪里与你来自哪里。图片: Jae-seong,Jeong

在下一种情况下,浮动操作按钮(FAB)将转换为顶部,并告知用户两个对象之间的关系。

动画可以帮助您在元素之间建立关系。图片: AnishChandran

五,降低认知负荷

认知负荷是使用产品所需的心理工作,认知负荷直接影响用户与移动应用程序交互的容易程度。通常,使用产品的工作量越大,产品越不可取。

作为设计师,我们的目标应该是创建一个易于使用的界面。如果使用得当,动画可以减少用户完成任务所需的工作量。

在大多数移动应用程序中,用户必须填写多种形式,并且许多表单使用文本占位符作为字段区域的标签。当用户单击这些字段区域时,标签将消失。

结果是:用户很难弄清楚这个字段区域代表什么,浮动标签可以帮助用户理解上下文,同时让用户感觉很舒服地与长表单交互。

在用户输入方面,不要依赖用户内存。使所有关键信息可见。图片: MDS

6.帮助用户了解功能变化

元素交互时,元素的功能会发生变化。例如:当用户单击按钮时,该按钮表示不同的含义,动画可帮助用户找到元素正在执行的操作的答案。

在移动界面中,开关是常见功能变化的示例,动画帮助用户理解当前元素的含义。

点击按钮动画,以便用户可以看到更改。图片: JurreHoutkamp

在某些情况下,单个元素的功能变化可能导致整个界面发生变化。例如:汉堡菜单变为“x”;并激活一个新界面。

向用户明确说明对象实用程序已更改。图片: TamasKojo

七,总结

在复杂场景中使用动画非常强大,它解决了界面中的许多功能问题,并使用户能够感受到产品的真实和真实的反应。无论您设计哪种移动应用,动画都可以帮助您更有效地向用户讲述故事。

原作者:pazzamanu

原始链接:https://uxplanet.org/animated-transitions-in-mobile-apps-412b8e8478e7

翻译作者:pazzamanu

翻译链接:https://www.jianshu.com/p/7f6648a09149

本文由@pazzamanu授权,未经作者许可不得转载

该地图来自Pexels,基于CC0协议

« 为什么要优化长尾关键字? | 天猫精灵,小度背后智能扬声器世间,也有腥风和血雨 »