动效

合适的动效可以增强界面活力和体验舒适度,帮助用户理解信息层级和交互关系。该指南的意义是确保界面中的动效是流畅自然、简洁明了的。

原则

动效是视觉和交互的结合体,所以我们需要明确「合适的动效」的评判维度,一是视觉感官,二是用户体验。

视觉感官:流畅

  • 在视觉上是连贯的

  • 运动方式是自然的

  • 空间轨迹是通畅不发生碰撞的

用户体验:高效

  • 能够引导用户理解信息层级关系

  • 没有过多的修饰干扰用户

  • 动效出现的目的是清晰明了的

时间

企业级应用中,物体的运动时间需要把控的恰到好处。用户难以感知过短的运动时间,但是过长的运动时间会让用户感到不耐烦。

时间梯度

根据人类大脑认知水平,小于100ms的动画是难以感知的,大于1s的动画会让人觉得有吃力感。界面中动效的时间,与运动路径、物体大小和动画复杂程度有强相关,所以我们规范最短动效时间为100ms,以100ms递增。

时间 适用物体 适用动画 适用路径
100ms 基础组件&业务组件 渐隐渐显 -
200ms 基础组件 渐隐渐显+位移丨位移
300ms 业务组件 渐隐渐显+位移丨位移
400ms 业务组件 渐隐渐显+位移丨位移

时间间隔

企业级产品动效需要保证高效性,同一动效组的动效时间不宜过长,所以我们规范动效时延为25ms,兼顾动效递进节奏感和高效性。

速度

真实世界里,物体由于重力摩擦力等关系,自然运动是非匀速的。所以我们规范除渐隐渐显动效外,物体的运动动效使用更接近自然运动的缓动运动。

工具:https://cubic-bezier.com

运动类型 贝塞尔曲线参数 适用动画
linear - 物体的渐隐渐显
ease-in-out cubic-bezier(0.25,0.1,0.25,1) 界面视野内,物体的点到点位移
ease-in cubic-bezier(0.42,0,1,1) 物体离开界面视野
ease-out cubic-bezier(0,0,0.58,1) 物体进入界面视野

空间

时间和速度组成了位移,而x、y、z三轴的位移组成了物体的运动空间。物体在空间中的运动也应是自然的。

同级物体

  • 整体运动方向/递进顺序需符合用户预期

  • 确保物体运动顺序是从左至右、从上到下、顺时针的

从属物体

  • 着重表达核心物体的动效,从属物体的动效应当弱化或者捆绑运动

  • 确保物体们运动轨迹不发生碰撞

三维空间

  • 当物体在z轴上有变化时,物体尺寸应相应变化

  • 空间视差通过近大远小的位移差来实现

样式

规范不同类型物体的运动样式,方便设计师在设计中选择合适的运动样式。

物体/场景 推荐使用动效
文字的出现/消失/切换 渐隐渐显+y轴位移
组件/图片的切换 x轴位移
组件/图片的出现/消失 渐隐渐显+y轴位移