F7.01.2Origin and belonging设计研究

表达元素之间的来源与归属关系

别名: 来源轨迹 · 归属关系 · common fate

概念解释

新表面如果凭空出现在中央,人不知道它属于哪一次点击。让面板从被点的按钮长出来、让缩略图飞向购物车,路径把「谁引发了谁」画出来。这是动效用轨迹回答的来源与归属(origin and belonging),靠的是共同命运式的空间绑定,而不是把注意拽到某处闪光。

同一次位移也可能顺便产生瞬变,但那是副产品。这条要的是:看完路径之后,人能指出新界面从哪个旧元素来、回去该找谁。

机制

人对客体做的是源—路径—目标的编码。一个表面从控件 A 的位置展开,视觉系统把新表面登记为 A 的延伸,而不是一次无主的图层插入。共同命运(common fate)在这里起作用:一起从某处生长或一起收回到某处的东西,被看成同一组。

没有路径时,归属只能靠静态邻近或记忆。按钮在左上、面板在中央时,邻近不够用,记忆又很容易在切页后丢掉。轨迹是临时的空间索引:它在几百毫秒里把因果画完,然后可以消失。

这和「同一对象在两页之间保持身份」不是一件事。这里的新表面往往是另一个物件,只是需要声明自己挂在谁名下。

怎么研究

可用路径有无作为处理:同一对「触发器—新表面」,一组从触发器展开,一组在固定位置淡入。

因变量:事后能否指出触发器、返回时是否点回原控件、错误关闭率。眼动上看展开过程中注视是否从触发器跟到新表面。共同命运的经典显示是同步运动被归为一组;转场研究把它做成「展开源是否被绑定」。

注意:实验室一次试验里触发器很显眼,产品里触发器可能只是工具栏上的一个小图标,绑定失败会更常见。

边界

  • 触发器已离开屏幕(列表滚动走了、页已切走),路径会指向空白,归属线索失效。
  • 多个候选源距离相近时,轨迹可能绑错对象。
  • 全屏模态本来就不属于某个按钮,硬从角落飞出反而伪造归属。
  • 来源表达一旦建立,就不要在下一屏用无关的方向再讲一遍,否则两条空间故事互斥。

怎么落地

  • 由控件打开的菜单、卡片、轻提示,从该控件的位置展开或收回,而不是从屏幕边缘统一滑入。
  • 加入收藏、移入文件夹这类「对象换容器」的操作,让对象沿路径进入目标容器。
  • 验证:打断转场问「这个面板是从哪来的」。说不出触发器,就是路径没完成归属编码。

延伸

  • 同组F7.01.1 引导注意到变化发生处 · F7.01.3 填充等待,改变对时长的主观感知 · F7.01.4 不承担上述功能的动效是纯成本
  • 相邻F7.07 动效表达空间关系 · F7.04 共享元素转场 · A2.05 共同命运
  • 站内检索origin and belonging · common fate · source path goal

同组卡片

快捷操作

分享

分享当前页面

ios_share

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