什么是互动动效？当用户与界面进行交流和交互时，信息以运动效果的形式传达。在用户与产品的沟通过程中，信息的传递是双向的——用户向系统发出操作指令，系统接收到信号后，将系统发出的信号在动效或其他用户可识别的视觉形式，实现用户与产品的交互。系统的双向交互。交互动画是指在交互操作之后发生的具有交互属性的动画设计。交互动效的作用通过交互动效，可以有效传递信息，实现用户与产品的实时交流。同时营造动态虚拟现实的时空感和界面空间的真实感，让用户在交互过程中感受到操作的合理性，从而降低界面使用的学习成本。此外，动感设计还可以突出产品的品牌特色和差异化。交互动效对产品的作用可以分为三个层次——第一，实用性是第一层次，交互动效的实用性与其使用场景相关。常见的动画使用场景包括过渡、加载、引导、反馈等，动画效果在不同场景下的作用和目标是不同的，后面会详细介绍；其次，交互动画的认知是在第二层，帮助系统更有效地传达信息；最后，审美是在认知和实用基础上的升华，最能体现产品的品牌属性，是情感设计的有效切入点，也是动态效果的切入点。最高评价标准。实用性——提高产品易用性交互动画的核心功能是传递信息，解释界面跳转之间的逻辑，帮助用户更好地与产品进行交互。交互动画的实用性需要根据场景来区分。最常见的场景有四种：过渡动画、反馈动画、加载动画、引导动画：过渡动画。过渡动画是指从一个界面过渡到另一个界面的过程。过渡动画帮助用户理解界面之间的层级关系，也给用户一种方位感和空间感。通过转场动画，用户可以更清楚地了解产品的界面框架、逻辑结构、界面与元素的空间关系，随时感受界面与元素的空间变化。常见的过渡形式包括位移、变形、旋转和缩放。下图展示了几种常见的过渡形式：反馈动画。反馈动画是用户执行操作后，系统以动态的形式向用户传达信息的过程。用户可以通过反馈动画效果了解系统的运行状态，使用户对移动应用的操作反馈结果更加直观，方便用户操控。加载动画。加载动画常用于应用系统还在运行的场景。它的主要目的是利用动画的形式来减少用户的等待感。如下图的哔哩哔哩加载动画，延缓了用户的等待，强调了品牌形象。开机动画。引导用户操作的动效是引导动效，常用于新手引导。引导动效的主要目的是通过移动元素吸引用户注意力，达到引导用户操作的目的，如下图所示。指通过动态效果传达信息的功能。通过动效的形式，虚拟化用户生活体验中物体的运动状态，从而降低用户使用产品的学习成本。Motion符合用户的心智模型，这在新产品和功能的设计中尤为重要。下图是华为手机充电的动态效果，用移动的圆点模拟电流进行充电。动效美学——提升产品品牌1、时间和速度体现运动物体的质感和性格。动态设计的两个核心参数是运动时间和运动速度。动画的质量和特征。因此，动画效果的时间和速度是促使产品品牌差异化的关键因素。1）改变动作时间元素时，速度要适中，既不能太慢以免用户等待，也不能太快导致用户不能及时识别信息。界面中最佳的动画时长为200-500ms，而移动界面中最合适的时长为200-300ms。运动时间的长短可以体现物体运动的性格和质感，从而影响整个产品的品牌调性。运动时间越少，动作越敏捷，能传达效率感；时间越长，动作越慢，可以传达的越稳定。2）运动速率和缓动曲线运动效果的运动速率是表现运动效果质感的另一个重要因素。在动效设计中，常用“位移-时间”运动曲线来表示运动速率：横轴代表时间，纵轴代表一个方向上的位移时间。在现实生活环境中，物体的运动遵循物理规律，带有阻力的缓和曲线可以营造出真实自然的感觉。这些真实物理世界的运动状态可以通过调整运动效果的缓动曲线来模仿，从而表现运动主体的质感。常用的缓动曲线包括标准曲线、减速运动曲线、加速运动曲线和弹跳运动曲线。缓动曲线也可以组合使用。标准曲线（缓入和缓出）在静止时开始和结束，没有加速和减速。标准曲线更适用于移动主体都在界面中的动态效果，如卡片移动、标签切换、图片缩放、加载动态效果等：减速运动曲线（easeout）移动主体从最高速度和逐渐降低的速度是减速曲线。这种动态效果的出现往往代表运动主体进入画面时：加速曲线速度从0开始，逐渐加速完成运动的曲线称为加速曲线。这种形式的运动速度一般用于物体离开画面的运动效果：弹跳运动曲线：物体向一个方向加速，然后向相反方向减速，到达最高点后继续返回之前的方向的加速度。用弹跳曲线模拟球落地的速度来表现物体的“弹性”质感。比如手机锁屏时，落屏时的弹跳：2.两种不同风格的案例介绍。当今市场上的许多移动应用程序都高度同质化。品牌差异化可以通过提高互动动态效果的美感来实现。给用户带来愉快的用户体验。表达动态效果的审美功能需要考虑产品的品牌定位和用户的特点。1）夸克——简洁美观的品牌定位例如夸克浏览器采用“简洁美观”的品牌定位，旨在打造简洁高效的搜索体验。动态设计更快，突出“效率”属性；运动形式较为简洁，符合极简的产品品牌定位，也为用户提供高效快捷的使用环境；在语音识别页面，使用了线条的视觉元素，突出简洁感。2）故宫日报——庄重典雅的国风品牌然而，定位为传统古风的故宫日报APP在动效设计上却采用了截然不同的风格。选择日历、祥云、月光作为产品的主要视觉符号。过渡速度缓慢，突出庄重感；过渡方式多采用透明度的变化，犹如古代水墨画的朦胧感……产品的视觉设计和动效设计呈现出温文尔雅的外观，尽显品牌沉稳端庄之感。结论本文介绍了交互动画的基本概念，并从交互动画的实用性、认知性、审美性等方面分析了其对产品体验的影响。交互动效是用户与产品之间信息交流的桥梁，也是提升移动应用产品情感的重要表现形式。从品牌传递到体验优化，设计师需要不断打磨动效细节。下一期，笔者将与大家分享《设计师如何系统地设计交互动效》。
