F7.04.1Shared-element identity设计研究

共享元素维持对象的连续身份

别名: 共享元素 · 英雄转场 · 对象连续

概念解释

列表里的那张图和详情页的那张大图,若只是一页淡出、另一页淡入,人必须重新确认「这还是刚才那一项吗」。让同一块像素在两页之间连续变形,是在解对象对应问题:视觉系统把前后当成同一个客体,而不是两个碰巧长得像的表面。共享元素维持的是身份,不是「新面板从哪个按钮长出来」——后者是另一个物件在声明归属。

机制

注意把客体登记成对象档案:位置、表面、标签。切页会打断档案,除非有一条时空连续的表面把新旧位置焊在一起。共享元素提供这条焊缝:缩略图的边界连续变成大图的边界,中间没有「旧的死掉、新的出生」。对应成功后,人带着原来的标签进入新页,扫视代价下降。

对应失败时,两套表面互相融化,身份比硬切更糟——硬切至少是两个完整对象,错误对应是一个不存在的中间物体。共同命运帮的是「谁和谁一组」,共享元素帮的是「这一个还是这一个」。

怎么研究

对象对应 / 隧道效应类范式:中间被遮挡或变形时,人是否仍报告「同一个」。界面侧做有共享元素 / 无共享元素的导航,测再认(这是刚才那一项吗)、返回列表时能否落回原项、以及详情页首屏的搜索时间。

自变量:是否共享表面、中间帧的形变幅度、列表项是否高度相似。因变量:身份再认、返回定位、首屏搜索时间。高度相似的网格是压力测试:没有共享路径时串项率会上升。

边界

  • 两页上根本不是同一客体(广告位换成了另一张图),共享会伪造身份,必须放弃。
  • 用户在转场时没在看,焊缝建不成,回来只看到终态。
  • 身份连续不等于空间模型已经讲清:大图仍可能让人不知道自己在层级的哪一层。

怎么落地

  • 从集合到详情,让那一项的主视觉在两页间连续变形,而不是两边各自淡入一张图。
  • 共享的是「被当作同一客体的那块表面」,不要把整张卡片的阴影、装饰一起形变。
  • 验证:转场中途截一张问「这是列表里的哪一项」。指错项,就是对应没建立。

延伸

  • 同组F7.04.2 转场前后元素尺寸差异过大会失真 · F7.04.3 共享元素失败时需退化为普通转场
  • 相邻F7.07 动效表达空间关系 · F7.01.2 表达元素之间的来源与归属关系 · A2.03 连续性
  • 站内检索shared element · object correspondence · hero transition

同组卡片

快捷操作

分享

分享当前页面

ios_share

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