E5.08.2receding load-more button设计

按钮位置随内容增长而下移

别名: 加载更多下移 · moving target button · 末尾按钮

概念解释

加载更多被钉在当前批次的末尾,每追加一批,这枚按钮就跟着文档一起往下走。按钮随内容下移(receding load-more button)说的是它是一个会逃跑的目标:第一次很容易点到,第三次要先穿过刚长出来的那一截。这不管门闩本身是否保留控制,也不管这种模式适不适合有页脚的目录——它只问「下一次点击还在不在手里」。

机制

命中目标的代价随距离增加。按钮始终在「已加载内容的底部」,而「底部」在每次成功点击后被推远。用户若还想继续,必须先消费新出现的那一批(至少滚过它们),才能再次摸到按钮。这在浏览上是合理的——新内容应该被看见——但在「我已经决定连要三批」或「我只是在找某一条、中间的可以跳过」时,下移变成障碍:人被强迫以追加粒度重新扫视,不能把按钮当稳定的「再来」手柄。

还有布局跳动。追加若在按钮上方插入一大块,按钮会从指针或拇指底下溜走,出现点空或点到新插入的最后一项。加载中若按钮暂时消失再在更远处出现,连续点击的节奏被打断,有人会以为没有更多了。虚拟列表回收 DOM 时,按钮甚至会在滚动中短暂不存在。

边界

一批正好约一屏时,下移距离与一次翻页相当,逃跑感不强。批次极长时,下一次点击可能远到需要专门的滚到底,按钮几乎变成隐藏控件。把按钮做成相对视口固定(浮在列表下沿)能消除逃跑,但会挡住最后几行,也更容易误触,等于用遮挡换稳定位置。键盘用户 Tab 到按钮再激活,焦点若在追加后丢失,下移问题会变成「焦点被内容挤走」。

怎么落地

  • 追加时把按钮留在文档流末尾,但加载过程中不要从指针下移除:用进行中状态占住同一槽,完成后再随新末尾移动。
  • 提供不依赖找到按钮的继续方式:键盘快捷、在仍可见时的「再加载一批」,或跳到当前底部的动作。
  • 插入新内容后若按钮仍在视口里,保持它相对拇指/指针的位置,避免一次点击落空。
  • 验证:连续要三批,录下每次去点按钮之前的滚动距离。距离单调变长且没有别的继续手段,即逃跑已成立。再在追加瞬间看按钮是否从触点下滑走导致空点。

延伸

  • 同组E5.08.1 显式加载保留用户控制与页脚可达 · E5.08.3 适合内容有限且需要页脚的场景
  • 相邻E5.09 回到顶部 · E5.07 无限滚动
  • 站内检索load more · moving target · content shift

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.08.2