F7.04.2Shared-element scale distortion设计研究
转场前后元素尺寸差异过大会失真
别名: 尺度失真 · 共享元素拉伸 · 形变中间帧
概念解释
24 像素的图标被拉成全屏照片时,中间那些帧既不像图标也不像照片。尺度跨度过大,共享元素不再被读成「同一客体在变大」,而被读成一次材料拉伸。身份连续要求表面在形变中仍可识别;尺度差把可识别性抽走之后,焊缝变成失真。
机制
对象档案依赖的是可匹配的表面特征:轮廓、纹理尺度、裁切。线性放大把高频细节从无到有变出来,或把已有细节撕成色块。中间帧的空间频率和两端都不匹配,对应过程失去锚点,视觉系统改用「有个矩形在胀」来解释,客体标签脱落。
宽高比再一变,拉伸不是相似变换,脸和文字会出现非刚体扭曲,比单纯变大更像另一个物体。裁切区域不同(列表里是居中裁切,详情是完整构图)时,中间帧还会长出或吃掉内容,进一步破坏「还是那张图」。
怎么研究
系统变化起始与终止的尺寸比、宽高比差、是否跨裁切,让观察者评「还是同一个 / 变成别的东西了」,并做中间帧的再认。自变量:线性尺度比、宽高比差、内容类型(人脸、文字、纯色块)。因变量:身份保持评分、中间帧再认、不适报告。人脸和文字对非刚体扭曲更敏感。
边界
- 纯色或极简图标在大尺度变化下仍可能被接受,因为没有纹理可被撕开。
- 模糊或低细节的封面图比锐利照片更能熬过放大。
- 尺度差不大但走了很长的空间路径,问题会从失真变成跟踪失败,那是距离–时长的问题,不是这条。
怎么落地
- 共享元素优先选尺度差有限的主视觉;图标到全屏照片不要硬拉,改用照片本身做共享,图标留在原位。
- 锁住宽高比,用裁切而不是非等比拉伸填满终点。
- 验证:抽出中间帧单独看。认不出原项或出现扭曲的脸/字,就不要用共享,退回淡入或小范围位移。