稀土 2018-03-29
动画效果是用户体验设计中绕不开的环节,而在移动端交互当中,动效是作为转场的润滑剂,承上启下的重要环节而存在。无论是发送信息,打开设置,选中元素,导航到下一个页面,这些变化发生的时候,动效让这一切不那么突兀,自然地过渡,呈现状态变化,帮助用户更清晰的明白当前的状态,这是绝佳的方式。
在今天的文章当中,我们尽可能系统地呈现动画和动效在视觉和交互上的常见功能和作用。
当用户通过交互触发界面行为的时候,他们希望能够看到视觉上的响应——整个交互系统应该明确地表示它已经收到了请求并且进行处理。以下是动效反馈让用户受益的几种常见的情况:
确认用户行为。系统收到用户的反馈之后,通过动效告知用户它已经收到反馈了。视觉反馈防止了用户再进行更多的操作。
通知用户他们交互的结果。
下拉刷新更新内容。以加载指示器为代表的视觉反馈告知用户,系统已经开始处理之前的请求了。
微妙的动画能够帮助用户理解正在发生的事情。
等待内容加载时的动画。加载不一定是无聊的。现在几乎所有的 APP 当中都会在加载的时候借助微妙的动画来组织用户离开。加载动画给予用户「信息正在逐步加载」的视觉反馈,因此用户会在这个过程中感觉时间没有实际上那么快。
有的时候,用户需要通过一系列的步骤来完成操作,步骤和步骤之间是需要连接起来的,借助动画,帮助用户将流程串联起来,顺畅地完成整个历程。
下面的案例当中,展示了动画是如何将线性的事件串联起来的。
设计师能够使用动画创建渐进式的展现形式。渐进式的展现能够减少一次展现出来的信息量,使得界面更加顺畅,易于学习。下面是渐进式展现信息的案例: