A2.05.3Asynchronous motion implies independence设计

不同步的运动暗示元素独立

别名: 异步动效 · motion desync

概念解释

反过来看共同命运:元素之间只要在移动的时机、速度或方向上出现明显的不一致,即便它们位置相邻、外观相似,也会被看成互不相关、各自独立的个体,而不是同一组的一部分。这条结论既能被有意利用(让某个元素显得独立于其余内容),也会在不经意间造成破坏(本该被看成一组的元素因为动效实现的偏差而被拆开)。

机制

共同命运要求的是运动轨迹之间的相关性,这种相关性对时机和速度的偏差相当敏感——判断运动是否"共命运",靠的是持续追踪每个元素的位置随时间变化的曲线是否吻合,哪怕只是起止时间上的小幅错位(比如动画延迟不同、缓动曲线不同),也足以让追踪结果显示出不匹配,从而被归到不同的运动流里。这和相似性、接近性这类基于单一瞬时判断的线索不同:共同命运的判断窗口是一段时间,时间上任何一点的错位都会被纳入判断依据。

边界

这个效应依赖不同步的幅度要达到可觉察的程度;如果时机、速度上的差异极其微小(远低于人眼能分辨运动相位差的范围),不会真正产生"独立"的知觉效果,动效实现上的细微误差不必过度纠结。

当画面里同时存在其他强分组线索(比如这些元素本来就用容器框在了一起)时,动效不同步造成的"独立感"可能被其他线索部分抵消,具体谁占上风取决于线索各自的强度,不能只看动效这一项就下结论。

怎么落地

  • 需要让某个元素明确区别于周围内容(提示气泡、临时通知、非本页内容的浮动元素)时,给它一个和周围内容明显不同步的运动节奏(不同的出现时机、不同的缓动方式),比单纯换颜色或加边框更能快速传达"这是独立于当前内容的东西"。
  • 反过来,本该被看成一组、需要一起变化的元素(同一批被选中的项目、同一个对象的多个部件),要检查动效实现里是否存在不该有的时机或速度偏差——常见于依赖同一动画系统但参数配置不一致的组件,偏差会在用户没意识到的情况下把它们拆散成看起来互不相关的东西。
  • 验证办法:把界面动效录屏后逐帧对比,标出每个元素开始移动和停止移动的具体帧,检查本应属于同一组的元素是否共享同一组起止帧,还是存在肉眼能看出的错位。

延伸

  • 同组A2.05.1 同步运动的元素被感知为一体 · A2.05.2 转场中同步移动表达归属关系
  • 相邻A5.07 注意捕获 · A8 运动控制
  • 站内检索motion asynchrony · perceptual segregation · animation timing

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A2.05.3