【译】移动应用中的动画切换

2018-07-18  本文已影响12人  3fe75b3d621a

原文链接:Medium

图例1

ramotion

动效是用户体验中的重要部分。当移动应用遇到切换的情况时,我们可以用动画做很多巧妙地交流。发送消息,打开设定,选中选框,导航到另一个页面等等所有的变化瞬间。将过渡行为动画化是强化用户行为的绝佳方式。

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


提供系统状况

当用户触发了某个动作时,他们期望看到一个视觉反馈——系统必须明确表示它收到了请求并且正在处理它。以下是几个增强用户体验的反馈动效。

确认用户动作。用户知道系统收到了这个指令。当用户获得视觉反馈时,可以防止重复点击元素。

提示用户他们操作的结果

Gollin Garven

使用下拉刷新来更新内容。这种视觉反馈形式的加载指示帮助用户了解:系统正在处理他们的请求。

微妙的动画可以帮助用户理解正在发生的事情

等待内容加载不必乏味。当加载内容时,几乎任何一个应用都可以使用微妙的动画来避免用户退出。加载动效可以吸引用户注意力,并且让用户感觉上加载变快了。

交互动效可以在内容完全加载之前吸引用户

UI8


在多步骤进程中保证每个步骤具有连贯性

有时用户需要经过很多步骤来完成一个操作,此时就要求步骤之间的连接是清晰的。交互动效可以帮助你把各个步骤连贯的融合成一个体验整体。

下面这个绝佳的实例就是如何用动效创建一个事件的线性流程。

动效与流程的表达关系密切

Jakub Antalik

动效可以帮助设计师设计渐进式信息架构。渐进式信息架构通过减少同一时间所呈现的信息量来使用户界面更加易懂。下面是渐进式信息架构很好的实例,他们运用了具有象征实意的块来呈现信息。

通过动效展现预约流程 通过动效展示购票流程

引入新元素

当我们需要在页面中引入新元素时,我们需要让用户集中精神在这个客体上并帮他们回答“为什么我会看到这个新元素?”动效可以在引入新元素时帮你定义客体之间的关系和层级。

动效可以帮助用户了解新元素是从哪里来的。


给予用户空间感

动效可以帮助用户建立空间信息的心理模型。并且对移动端用户格外重要——在一个小屏幕上,大量快速出现的信息结合在一起,会使用户感觉进入了屏幕里的迷宫。

我们能用动效来引导用户。动效展示了信息流从一个状态变化到另一个状态之间的联系是什么。通过向用户提供他们正在进行的操作的信息,可以避免用户迷路。

导向性动画让你知道你现在在哪里与你来自哪里

Jae-seong, Jeong

在下面这个案例中,浮动动作按钮变成了一个头部栏,这可以帮助用户了解这两个客体是如何联系到一起的。

动效可以帮助用户了解元素之间的联系

Anish Chandran


最小化认知负荷

认知负荷指的是用户在使用产品时所需要花费的精力和脑力,他直接影响用户使用的难易度。总的来说,认知负荷越大月不理想。

作为设计师,我们要设计出简单易用的用户界面。当动效使用得当时,用户完成操作所需要的经理和脑力就会减少。

几乎所有的应用都会要求用户填写一些表单。许多表单都将文本占位符作为字段的标签,当用户点击这些字段时,标签会消失。因此用户在填写时会不明白这些字段代表什么,浮动标签可帮助用户时刻看到上下文,并使其与长表单交互更加舒适。

当需要用户输入时,不要依赖用户的记忆。时刻保持关键信息可视

MDS


帮助用户理解功能的变化

当元素发生交互后,功能将改变。举个例子,当用户点击了按钮之后,按钮会被赋予新的意义,这种动效会帮助用户理解“这个元素现在变成了什么?”

滑动切换标签是许多移动应用上常见的功能变化动效,这个动效帮助用户理解该元素当前的状态。

点击按钮的动画可以帮助用户看到变化

Jurre Houtkamp

有时,单个元素的功能变化会导致整体视觉的变化。比如点击汉堡菜单,他会变成“X”并且激活新的视觉模式。

让用户知道元件的用法改变了

Tamas Kojo


总结

动效使用复杂,但是可以很有效。他可以解决很多功能问题并且生动、真实的反馈给用户。无论您设计什么应用程序,它都会向用户讲述故事,而动效可以帮助你更有效地讲述故事。

原文作者:Nick Babich

上一篇 下一篇

猜你喜欢

热点阅读