动画转场效果

移动应用里的转场动画设计

通过改变场景动画的整个过程，有成千上万种方法来增强用户的行为。在移动应用中改变场景动画怎么样？在那篇文章中，我们将报告功能动画填充视觉效果构思和支持的交互时的常见情况。

绘画是用户感受的重要组成部分。当你触摸移动应用的转换点时，你可以通过详细动画的全过程来宣布丰富的信息。接收信息，打开设置，点击复选框，将导航条带到另一个页面——这些都是转化的时间，结束绘制转化站点的想法是强化用户行为的最好方式。

在那篇文章中，我们将报告功能动画填充视觉效果构思和支持的交互时的常见情况。

1.提供管理系统的形状。

当用户触摸一些 *** 作时，他们期望获得视觉效果，并且管理系统要求清楚地声明他们之前已经接收了哪些 *** 作，以及他们已经在运行哪些 *** 作。

有一些不利于用户感受的动画反映的例子:

1.确定用户 *** 作

从用户管理系统获得 *** 纵的确认，当用户能够得到有效的视觉效果反映时，可以防止用户面对面 *** 纵元素。

通知用户其 *** 作的结果。图片:科林·加文

2.使用下推在相关页面中创建新内容来终止升级。

甩负荷提示的视觉效果反映出它帮助用户掌握管理系统正在响应用户的紧急处理请求。

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

3.等待卸载内容。

其实减载不一定很简单。几乎所有的移动应用程序都可以 *** 纵奇怪的动画，以防止用户在页面中卸载负载时分离。运动还原绘画可以继续占据用户的视觉效果反映，效果是用户感觉等待时间更短。

即使在应用程序完全加载之前，动画也能让用户参与进来。图片:UI8

2.与已经采取的重要步骤相邻且不同的步骤。

疏忽的用户需要一系列的步骤来 *** 作，这些步骤需要一个清晰的标记来表明它们是紧密相连的。动画可以帮助你创造一个完整的感觉相邻的不同步骤。

以上是如何 *** 纵动画来制造连续线性无序的一个很好的例子:

图片:雅各布·安塔利克

绘画可以帮助设计师创造渐进的展示。渐进式呈现在整个过程的统一时间内减少了怀疑的数量，使世界变得更简单，更容易教。

那边有两个很好的例子，展示了使用渐进显示来提供具有实际意义的可疑信息块。

图片:安东·斯克沃尔索夫

3.引入新元素

当我们在页面中引入一个新元素时，我们测试用户的注意力被考试散焦了哪个特殊工具，并帮助他们回应考试结果:“为什么我能看到哪个新的特殊工具？”

当引入新元素时，绘图可以帮助您定义特殊工具之间的联合战级别。

动画可以显示新对象来自哪里。图片:维吉尔·帕纳

4.为用户提供房间的圆润感空。

画图可以帮助用户建立一个更立体的思维模板，特别是对于手机上的用户，短时间内改善了小显示屏。很简单，用户在显示屏中间输了目标价。

您可以使用动画来具体指导用户，动画有助于说明信息如何从一个形状流向另一个形状。在整个过程之后，用户可以提供关于他们当前正在终止的 *** 作的信息，这可以防止用户失去目标价格。

方向动画让你知道相对于你从哪里来，你现在在哪里。图片:在成，郑

在下面的例子中，波 *** 作键(FAB)被改变到顶部，并且两个特殊工具之间的相关性被指示给用户。

动画可以帮助你建立元素之间的关系。图片:安尼施·钱德朗

5.减轻认知能力的负担。

认知能力负担是用脑的物质需要。认知能力负担间接伤害了用户与移动应用的交互。一般来说，使用材料的东西越多，材料就越不理想。

作为远见者，每个人的目标都应该是创造一个简单实用的世界。如果使用得当，动画可以减少用户失去使命时的事情量。

在大多数移动应用中，用户必须挖掘和编写许多表单，许多表单使用文本占位符作为字段名的标识。当用户点击这些字段名时，标志就会消失。

效果是用户很容易混淆哪个字段名region的意思。波动标志有助于用户掌握高低字符，此外，用户已经采取了一些形式，在互动时磁感应是温暖的。

当涉及到用户输入时，不要依赖用户的记忆。让所有关键信息可见。图片:MDS

6.协助用户掌握功能转换。

当元素相互作用时，元素的功能也会发生变化。比如用户在脸上打一个键，哪个键代表不同的意思，动画可以帮助用户找到“现在哪个元素在做什么”这个谜语。

在计算机世界中，打开和关闭是功能修改的常见示例，动画有助于用户掌握当今元素的含义。

按钮在点击时会显示动画，这样用户就可以看到变化。图片:朱尔·豪特坎普

在某些情况下，单个元素的功能修改会导致团队世界的转变。比如汉堡莱丹出品的《X》就刺激出了一个新世界。

让用户明白对象实用程序已被更改。图片:TamasKojo

7.摘要

在巨大的情况下动画的使用长度通常会增长。解决了世界上很多功能测试分数，让用户感受到了物质真实和热情的反应。无论你构思哪个移动应用，动画都将帮助你更有效地向用户报道短篇故事。

帕扎马努写的

文章中:https://uxlanet.org/animated-transitions-in-mobile-apps-416b8e8478e7

译者:pazzamanu

翻译连线:https://www.jianshu.com/p/7f6648a09149

文章由@pazzamanu授权发布，作者已经同意劝阻转让。

图片来自PEPEPEELS，据CC0和平谈判。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/777108.html