流动之美·提升用户体验的交互动效（一）

现如今丰富的交互动效已经遍布于各类优秀产品界面中，交互动效展现了元素之间的层级空间关系，展现状态切换过程，与用户增加情感链接，引导用户实现自己的目的，交互动效设计在产品设计中越来越被认可与重视。

Objective 动效的目的

1. Guide 有效指引

人脑灰质对运动的物体保持敏感, 人类的注意力本能的更容易被运动中的物体吸引。动效利用注意力的特点可以有效地暗示、引导用户去关注我们希望用户去关注的重点。

2. Continuity 连续性体验

物理世界中物体都有一个转变的过程，不会瞬间开始或结束，人类的眼睛习惯于物理世界中物体连续的有速率的移动。在界面中，突然的弹框或跳转如果引导不到位会使用户感到不知所措，迷失在 customer journey 中，合理明晰的动效可以用连续、平滑的方式让用户能够充分感知到界面中所发生了什么变化，理解多个元素在不同状态中是如何转换，得以维持整个产品的连续性体验，提升产品可用性。

3. Relationship 与用户增加情感连接

用户的情绪是多元的、复杂的综合事件，合理的动效可以引导用户持续处于正向情绪中。例如在页面加载中时，动效可以及时为用户提供反馈，提升用户对产品的包容度，缓解用户等待的焦虑感，有趣的动效更是可以与用户增加情感强连接，使用户对产品印象深刻或提升好感度。

Good UI Animation

1. Natural 自然

好的动效会给人一种经过深思熟虑、有目的、非随机却又符合常理的美感，一定是自然且舒服的。

仔细去感知一个物体，物体拥有质量，当给物体施加足够的力时它便会移动，它的物理运动可以让我们感知它是轻的还是重的，坚硬的还是柔软的。物理世界中质量较重且较大的物体与质量比较轻小的物体在移动时速度是完全不同的，同理，页面中面积较大一些元素移动时达到最高速度或者回到停止状态都需要更多的时间，页面中面积较小的元素加减速则都更快一些。

自然的动效会让用户一直沉浸于产品功能的使用中，不会引起用户的过度注意。相反，不自然的动效会让用户因速度变化转移注意力，视觉感知的不舒适会持续不断的干扰用户完成自己的目标。

2. Limpid 清晰

好的动效是逻辑清晰目的明确的。时刻明确你到底需要把用户的注意力吸引到哪里？清晰明确的动效并非设计师个人炫技而是有功能性的设计，会阐述清楚页面元素在空间中的层级关系、功能，暗示用户页面即将发生的变化，为用户的操作做合理的反馈，时刻聚焦于帮助用户理解和感知当前所处的状态。清晰明确的动效会让用户感觉产品功能设置合理且非常流畅。

本文转载自 DataFunTalk 公众平台。

原文链接：https://mp.weixin.qq.com/s/uIH6QFjkHm10IEe6Nq0ZMQ