界面动画（微交互）分析

工作中，我们往往只关注静态页面的视觉效果、流程及页面之间跳转逻辑。但在设计过程中，设计师很容易忽略对界面跳转动作的处理。

这些未经处理的跳转由于没能提供足够的预期，导致用户在使用时经常会觉得困惑，用设计的能力去引导和帮助用户消除困惑，提升产品体验

界面动效其实跟交互，跟UI一样，都是传递产品信息的一种渠道

她可以传递很多种可能，可以是：信息的来源、去向、情感、属性等

其实对于任何一个新的产品，不管是PC或者APP，让用户理解页面之间的关系至关重要，直接关系到操作效率

为了让我们产品体验更加完美，减少用户的理解成本，我们对入场、出场、过渡、加载等动效形式及方式做了深入的研究及沉淀

如何做，才能把动效设计到完美呢？

电影行业有句话是这样说的：“糟糕的剧本注定是糟糕的电影”，设计也是一样，好的动效其实就是一场电影，它需要让观众沉浸其中。通过动画，充分吸引用户来到它们的世界。然后让他们的注意力可以完全投入到工作中去。 让用户不要觉得他们在操作一个界面，而让他们更直接的触达任务

跳转流程就是我们故事的梗概，这个故事的发展怎么写，就是我们设计要做的事情。

除了剧本，我们还要知道影片时间，一场电影时长一般是在90到120分钟之间。太长的时长会分散观众们的注意力，只有较短且紧凑的情节才能够让观众们更加专注，在界面动画中，对动效时长的控制也是至关重要的。

用户在作出反应后的理想的响应时间应该是100毫秒内，因为人体最快的潜意识动作（一次眨眼的平均持续时间是100-150毫秒），100ms给用户的感觉就是瞬间，所以点击动作要在瞬间完成的，人脑在处理动态图像模型时，捕捉到一个图像，平均需要230毫秒的时间，低于200毫秒时，用户可能捕捉不到变化，超过500毫秒会让用户觉得有延迟，所以在每一个元素的动画不超过500ms；因为在操作后1秒左右的时间，用户会短暂进入心流状态，会专注于获取响应，如果反馈时长超过2秒的话，页面跳转会有明显顿挫感，所以我们把动画时间做了严格的控制1s

拿我们搜索入口举例，时长确定了，怎么写好首页搜索入口跳转这个剧本，我们做了一些探索和分析

前期我们设定了一些跳转DEOM来预想剧情发展，方案1从右侧滑出，方案2从单点发散，方案3全屏覆盖；

但是拆分落地页面我们发现，搜索中间页有搜索框、列表、键盘等多个元素，除了要表现元素属性变化以外，

还要将这些元素之间的层级关系传递出来，同时不会给用户带来很强的跳出感

加入元素动效后

第一个Deom键盘与页面切换呈十字交叉效果，这样在元素之间的变化上会有很强的冲突感，给用户带来不适

第二个Deom全屏放大展开，这种效果有虽然酷炫，但元素之间的行为路径较长，等待时间较长，容易出戏，不利于后续剧情发展

第三个Deom整个变化过程偏柔和，剧情循序渐进，运动路径清晰，主次关系明确，通过消除屏幕上的跳变，不让用户吃惊和费解，从而让体验更加愉快，所以我们选择了第三种方案

但是剧本+时间并不等于完成

同样的剧本，不同的演员，演技高低的不同会给影片带来不同的观影体验，在界面动效中，也有演技的高低

界面中，动作的完成是一种机械行为，没办法传递给用户产生共鸣，因为机械行为的运动方式并不是人们日常生活中可以观察到的自然行为，是没有灵魂的，它没办法反映运动相关对象的质量、密度、质地、阻力等。

所以我们要通过改变时间曲线来控制元素状态、材质、缓动等，让元素动效变得更加自然，更符合物理定律，这样才能更好的让用户想象其背后的物体属性及关系

这里我们运用到了曲线的概念，曲线可以让元素运动更自然，更符合物理定律

对跳转搜索页面动作增加曲线，让物理世界的运动用在动画中，让整个动画更加符合自然规律

最终实现的效果是这样的，这样就更好的缩短了用户和界面之间的距离，让用户更专注于任务而不是理解界面

这个小红条滑块的动画设计时，除了刚才我们说到的剧本、时间、自然行为外，还用到了拟人画动效语言，夸张现实手法

夸张现实的方式，常见于我们熟悉的动画片当中，动画师可以通过夸大某个细节来引起更多的注意力，表现动画张力

在UI界面中对某些对象使用夸张现实的手法可以使用户更容易理解，使其更加“现实”，更加有趣，从而使UI界面更吸引人

微交互项目升级中，不仅对独立界面跳转动效做了优化，还对常态界面的动效统一性做了调整，

最常见的就是我们的遮罩层，未统一前，我们的遮罩层是

结合之前的分析研究，我们对各场景遮罩层做了一致性测试，给出了一套可复用且符合物理属性的遮罩动效

再配合各场景弹层，我们可以得到这样的效果，统一且符合物理规则的遮罩层，降低了用户视觉重心，起到了很好的配角作用，给主角流出了更多的表现空间

我们做了这么多研究，大家可能更关心的是如何实现

首先我们要掌握和具备做Demo的能力，我常用的软件就是AE和Pr

其次是可以结合Demo将动画信息量化表述，我一般会根据动画的难易程度提供给技术一份动画数据，可以借助AE插件Flow去导出动画参数给到开发，也可以根据开发诉求辅助填写参数文档，可视化demo和动画信息量化表述，可以减少很多“我认为”的空间，和开发高效配合的同时，能避免被一句“没法实现”给打发回来

推荐大家一个曲线动画网站https://easings.net，还有迪士尼动画十二原则

我在看到一些好的动效时，会思考它的实现方式，然后有一个小口诀分享给大家

说了这么多，做了这么的分析和研究，肯定会有人会问，我们研究和推动界面动效的价值是什么？用户可能对我们所做的工作没有感知，也不会产生什么收益？

我会告诉他们………

但是，我觉得有时候动效更多的是营造一种环境的氛围；

我理解他就像是电影中的气氛组、群演、龙套…他可能在你看不到的地方，没有他可能不会对整个电影有太多的影响，但是如果一旦有他的出现，会让你觉得整个气氛很融洽

最后用一句话结束这次分享和复盘，贝克汉姆说过….你不接球的话一定会错过射门，其实大部分设计师并不是很习惯设计300~400毫秒的界面动画，但就是这个细节可能会给你所做的产品带来不一样的体验！

感谢，喜欢的铁子就点个赞吧！