C3.07.2Rubber-banding at pan bounds设计研究

平移到内容边界时的回弹表达边界

别名: 橡皮筋回弹 · overscroll · 边界回弹

概念解释

表面有边。平移把视口推到内容尽头之后,若画面干脆锁死,人分不清是手势没被识别,还是已经没有更多。回弹(rubber-banding / overscroll)让内容被手指拽出一点空隙,松开再弹回边界。空隙是边界的可见证明,不是又一段可浏览的内容。

机制

跟手在边界内侧增益仍为 1;越过边界后增益迅速降到小于 1,位移被压成一条越来越紧的橡皮筋。视觉上出现的空白、阴影或拉伸,把“这边完了”编码成空间而不是文字。抬起后用弹簧把越界量收回到 0。若越界时增益仍为 1,人会以为外面还有地图;若越界完全禁止位移,接触会像粘在墙上,常被报告成卡死。回弹方向必须与被越过的那条边一致,斜向顶角则两条边同时拉。

怎么研究

让人平移到已知边界之外,比较硬钳制、回弹、无反馈三种。因变量包括“还有没有内容”的判断正确率、在边界上重复猛拉的次数、松开后回到边界的时间。测量越界增益曲线:过大的残余运动会让人以为加载了新块。顶部回弹还要和“下拉刷新”分开编码,否则同一次越界会被两套语义认领。

边界

循环画布、地球仪在经度上没有边,硬套回弹会在 180° 附近制造假边界。分页吸附的轮播在页边用的是档位弹簧,不是内容尽头的橡皮筋,两者手感接近但语义是“还有下一档”而不是“没有了”。无障碍减少动态效果时,回弹可能被关掉,这时需要静态的边缘阴影或不可再滚的视觉裁切来补边界信号。

怎么落地

  • 越过边界时降低跟手增益并露出空白或边缘阴影,抬起弹回;不要在越界方向继续按 1:1 走。
  • 把“没有更多”的回弹和“下拉加载”在阈值和视觉上分开:前者弹回原位,后者越过第二条线才武装刷新。
  • 请人把地图推到东南角再加力。应看到空隙并在松手后回到角上;若画面纹丝不动,他们应能口头说出“到边了”。两种都做不到,边界就没有被表达。

延伸

  • 同组C3.07.1 平移是内容随手指等距移动的连续操纵 · C3.07.3 平移与轻扫共用起始动作,需按速度分流
  • 相邻C3.06 快滑与惯性 · C3.15 下拉刷新
  • 站内检索rubber-banding · overscroll · content bounds

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C3.07.2