交互动效设计指南

那些用于引导和响应用户交互行为的动效，它们与用户的交互行为密切相关，起到帮助用户理解、提供操作反馈、提升感知流畅性的作用。

什么是交互动效？

在验收阶段，由于项目排期时间紧，开发有别的 bug 要改，可能没有时间去处理动效方面的优化，从而导致了线上出现体验问题。

不符合预期，产生理解困难：交互动效用于传达页面变化过程，如果过程缺失，可能会导致变化不符合用户预期，使得用户产生理解困难。

感知卡顿：缺失必要的手势动效会导致用户操作的不流畅，缺失必要的转场动效则会影响视觉观感的流畅性。

必要的场景缺失动效直接上线，可能会产生较多体验问题

为什么要重视交互动效？

场景聚焦

优先级评估

动效评估

舒适：动效需要符合现实世界的物理属性，贴近用户的心智认知，感知上舒适、同时兼具视觉美感。

高效：高效响应并减少过长的位移和时间，使动效触达不拖沓。

流畅：不卡、不闪、不跳，帧率稳定、响应及时、跟手操作是动效流畅体验的基础要求

统一：同个产品内的动效体验感知统一，体现在相同的控件动效保持一致、相似的动效编排一致。

简单清晰：界面元素运动尽可能少且简洁，减少路径及不必要的元素，确保动效过程清晰、重点突出。

克制有度：控制出现频率，不增加额外操作，不干扰用户，确保动效有意义。

动效原则

常见的变化类型有：位移、透明度、大小、旋转、3D 旋转...

变化

复杂程度：复杂的动画比简单的动画需要更多的时间来表达

区域范围：动效运动在一定的范围内进行，小范围内比大范围的运动所用的时间相对更短

入场/退场：一般来说，退场的动效时长要比入场短，让用户更把注意力放在后续的内容中

时长

加速曲线：适用原本在视线中的物体，需要消失或退场，逐渐加速符合退场行为特征，例如弹窗/浮层退出、卡片删除等。

减速曲线：适用原本在视线外的物体，需要出现或进场，逐渐减速符合进场行为特征，例如弹窗/浮层出现、页面进入等。

缓入缓出曲线：先加速后减速，适用于运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律，例如图片缩放、tab 切换、开关等。

曲线

动效属性

单向淡入淡出：在前后层叠的场景中，只有前景元素进行淡入或淡出动作，下方元素无变化。

交叉淡入淡出：存在退场元素与进场元素的场景下，一个淡入视野，另一个淡出。在整个过程中，会存在两个元素和它们后面的内容同时可见的时候。

错开淡入淡出：在入场元素淡入之前，将退场元素完全淡出。这种方式可以规避视觉上出现重叠元素，但是可能会造成有一瞬间出现容器内容为空的情况。

淡入淡出

共享元素

共享容器

共享动势

一镜到底

运动路径

振荡

纵深变化

交错

其它编排技巧

动效编排

动效 demo 附件：方便开发直接查看整体的动效效果

触发条件：说明动效发生的条件，即用户通过什么行为触发该动效

元素示意：将动效中发生变化的元素进行拆解，通过图示清晰示意

变化属性：元素的什么属性发生，例如透明度、位置、大小等等

动效时间：「延迟开始时间」表示元素从触发条件发生后延迟多长时间开始执行，「持续时长」表示该变化持续发生多长时间变化值&贝塞尔曲线：描述属性具体的变化值范围，以及相应使用的贝塞尔曲线参

转场动效的标注文档中需要包括以下要素：

动效落地

动效设计

交互动效的设计流程和方法

交互动效设计指南