F7.04.2Shared-element scale distortion设计研究

转场前后元素尺寸差异过大会失真

别名: 尺度失真 · 共享元素拉伸 · 形变中间帧

概念解释

24 像素的图标被拉成全屏照片时,中间那些帧既不像图标也不像照片。尺度跨度过大,共享元素不再被读成「同一客体在变大」,而被读成一次材料拉伸。身份连续要求表面在形变中仍可识别;尺度差把可识别性抽走之后,焊缝变成失真。

机制

对象档案依赖的是可匹配的表面特征:轮廓、纹理尺度、裁切。线性放大把高频细节从无到有变出来,或把已有细节撕成色块。中间帧的空间频率和两端都不匹配,对应过程失去锚点,视觉系统改用「有个矩形在胀」来解释,客体标签脱落。

宽高比再一变,拉伸不是相似变换,脸和文字会出现非刚体扭曲,比单纯变大更像另一个物体。裁切区域不同(列表里是居中裁切,详情是完整构图)时,中间帧还会长出或吃掉内容,进一步破坏「还是那张图」。

怎么研究

系统变化起始与终止的尺寸比、宽高比差、是否跨裁切,让观察者评「还是同一个 / 变成别的东西了」,并做中间帧的再认。自变量:线性尺度比、宽高比差、内容类型(人脸、文字、纯色块)。因变量:身份保持评分、中间帧再认、不适报告。人脸和文字对非刚体扭曲更敏感。

边界

  • 纯色或极简图标在大尺度变化下仍可能被接受,因为没有纹理可被撕开。
  • 模糊或低细节的封面图比锐利照片更能熬过放大。
  • 尺度差不大但走了很长的空间路径,问题会从失真变成跟踪失败,那是距离–时长的问题,不是这条。

怎么落地

  • 共享元素优先选尺度差有限的主视觉;图标到全屏照片不要硬拉,改用照片本身做共享,图标留在原位。
  • 锁住宽高比,用裁切而不是非等比拉伸填满终点。
  • 验证:抽出中间帧单独看。认不出原项或出现扭曲的脸/字,就不要用共享,退回淡入或小范围位移。

延伸

  • 同组F7.04.1 共享元素维持对象的连续身份 · F7.04.3 共享元素失败时需退化为普通转场
  • 相邻F7.02.3 位移距离越大所需时长越长 · A1.27 知觉恒常性
  • 站内检索scale distortion · shared element · non-rigid transform

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F7.04.2