A2.05.2Synchronized motion in transitions设计
转场中同步移动表达归属关系
别名: 共享元素转场 · shared element transition · 归属动效
概念解释
界面状态发生变化(点击卡片展开成整页、列表项转成详情)时,如果属于同一个对象的元素在转场过程中以相同的方向和节奏一起移动,用户会把变化前后的内容识别成"同一个东西变了形状",而不是"旧内容消失、新内容凭空出现"。这是利用共同命运原则,在时间轴上把变化前后的身份连起来。
机制
共同命运判断依据的是运动轨迹是否相关,这条判断不需要用户先理解画面内容是什么,只要转场中的元素运动方向、速度保持一致,视觉系统就会自动把它们识别成同一个正在运动的整体,从而把变化前后的状态在知觉上焊接成一条连续的身份线——这比让用户去比对文字内容、推理"这大概是同一个东西"要快得多,也不需要主动注意力参与。反过来,如果转场里各元素各走各的、时序或方向不一致,这条自动焊接就不会发生,用户得不到"这是同一个东西"的免费信号,只能靠其他方式(比如记住点击前的内容)去拼接身份。
边界
这条机制解决的是身份连续性的问题(这是不是同一个东西),不解决转场速度是否合适、动效时长是否拖慢操作这类问题,那是另一套独立的考量,不能把两者混在一起评估。
如果转场涉及的元素数量很多、各自需要用不同路径到达终点(比如网格重排),完全同步的运动在物理上未必可行,此时能不能仍然传达归属关系取决于运动模式有没有某种整体一致的规律(比如统一沿弧线路径、统一保持相对位置关系),而不是要求逐像素同步。
怎么落地
- 状态切换涉及"这是同一个东西的展开/收起"时,让代表该对象的关键元素(标题、缩略图、主色块)在转场全程保持连续移动到新状态里对应的位置,而不是让旧状态突然消失、新状态突然出现。
- 一个转场里如果有多个元素,让它们的运动起止时间、方向逻辑保持一致的整体规律,即使各自路径不同,也要让人能看出这是一套统一的运动,而不是各自独立的动作。
- 验证办法:把转场动效去掉声音和文字提示,只保留视觉运动,请没见过这个界面的人观看后回答"变化前的哪个元素变成了变化后的哪个元素",看识别是否符合预期的归属关系。