这周为大家带来一篇有关动效使用场景的心得体会。

以前说到动效可能大家更多会觉得是一直视觉上华而不实的小把戏，但是随着技术和用户体验研究的发展成熟，动效已经日趋走向功能性和实用性了，好的动效可以让产品更加生动，而且让用户更加真切的感受到互动。

接下来我会列举几个典型的动效应用场景来和大家聊聊到底动效是怎么从功能层面和情感层面提升产品质量的。

1.系统状态

多数App和服务器交互的过程需要花些时间，这时候UI是不会变化的，比如下载数据，计算等等。这时候你举要让用户知道app并没有挂掉，只是正在后台处理某些工作。一些视觉上的进度标识可以让用户感知到这个过程，从而有种“掌控”这个App的感觉。

这个几乎是避免不了的，一个有创意的动效当然解决不了等待的问题，但是它一定可以让等待变得不那么枯燥。研究结果表明好的加载动效可以有效减少用户在这个过程中的流失率，同时用户对产品的好感度会显著上升。

这个也是很多App会用到动效的场景，这个动效同样也是解决等待的问题，创意、有趣也是这个场景的核心，值得注意的是这个动画一定要适配整个App的风格，如果UI是极简线条风格，那这个动画也应该一样。

因为动的东西天生会更加吸引注意力，所以重要的提醒做成动效往往会收获更多的用户好评，同时动效也可以减少文字说明和介绍。

2. 导航和过场

最基础的动效应用就是过场了，产品使用动效帮助用户注意到不同页面的功能转换和布局变化，这样比直接跳转要更加连贯，逻辑和视觉上不会丢失焦点。“汉堡”菜单就是个经典案例

信息传达的准确和平顺与否总是考量用户体验的重要标准之一。设计师一般用动效来引导用户的视觉焦点过渡的新的页面，从而把上下文串联起来，帮助用户更好的理解整个流程。

相比于静态元素，动画可以更好的诠释各个元素之间的关系以及他们之间是怎么样互动的。下面这个案例就能清晰的看出菜单展开和关闭对各个元素产生的影响，展开时菜单高亮，其他元素会变暗弱化，并且位置随之下移；关闭时其他元素又会恢复原始状态。

在某些场景下，设计师会被迫在同一个元素上通过动效表达不同的功能，通常是在移动设备上因为空间受限而采取的办法。播放和暂停可能是最常见的多状态例子。

这种动效展示了元素状态随用户操作而变化。下面这个例子，当用户点击按钮，“+”会变成“铅笔”，同时弹出几个小一点的按钮，这样就暗示用户“铅笔”是主要的添加方式，其他小的则是次要的。这个小细节可以让用户直观感受到按钮功能的变化，避免跳转带来的不确定性。

视觉反馈可以说是最基本但是最关键的用户体验要素之一。用户通过反馈来感受每次交互的成功与否，同时这些感觉会积累成为一种对于产品的把控感，而这种把控感很大程度上决定了产品的总体体验。

虽然隔着屏幕玻璃，但是UI元素要让用户感觉是真的可以触及的。真实世界中点按不同钮按会带来不同的反馈，这些反馈的细节构成了我们对这个按钮质量的感受。在虚拟世界中，这种感受也同样成立，动效可以很好的弥补这方面的体验。

动效可以从让用户的操作获得更好的结果反馈，从而让用户获得一种愉悦感。下图这个例子里面，打钩的动效让用户感觉自己的支付成功，好像小时候做题正确的时候老师在卷面上批改的过程，让人有成就感。

动效是一种非常优雅，细致的利器，可以直击用户体验的核心，在产品UI越来越同质化的今天，让你脱颖而出，在用户心里快速占据一席之地。当然，好的动效需要不断打磨调校，每一帧的完美可以让产品展示出一种工匠气质。