E5.08.2receding load-more button设计
按钮位置随内容增长而下移
别名: 加载更多下移 · moving target button · 末尾按钮
概念解释
加载更多被钉在当前批次的末尾,每追加一批,这枚按钮就跟着文档一起往下走。按钮随内容下移(receding load-more button)说的是它是一个会逃跑的目标:第一次很容易点到,第三次要先穿过刚长出来的那一截。这不管门闩本身是否保留控制,也不管这种模式适不适合有页脚的目录——它只问「下一次点击还在不在手里」。
机制
命中目标的代价随距离增加。按钮始终在「已加载内容的底部」,而「底部」在每次成功点击后被推远。用户若还想继续,必须先消费新出现的那一批(至少滚过它们),才能再次摸到按钮。这在浏览上是合理的——新内容应该被看见——但在「我已经决定连要三批」或「我只是在找某一条、中间的可以跳过」时,下移变成障碍:人被强迫以追加粒度重新扫视,不能把按钮当稳定的「再来」手柄。
还有布局跳动。追加若在按钮上方插入一大块,按钮会从指针或拇指底下溜走,出现点空或点到新插入的最后一项。加载中若按钮暂时消失再在更远处出现,连续点击的节奏被打断,有人会以为没有更多了。虚拟列表回收 DOM 时,按钮甚至会在滚动中短暂不存在。
边界
一批正好约一屏时,下移距离与一次翻页相当,逃跑感不强。批次极长时,下一次点击可能远到需要专门的滚到底,按钮几乎变成隐藏控件。把按钮做成相对视口固定(浮在列表下沿)能消除逃跑,但会挡住最后几行,也更容易误触,等于用遮挡换稳定位置。键盘用户 Tab 到按钮再激活,焦点若在追加后丢失,下移问题会变成「焦点被内容挤走」。
怎么落地
- 追加时把按钮留在文档流末尾,但加载过程中不要从指针下移除:用进行中状态占住同一槽,完成后再随新末尾移动。
- 提供不依赖找到按钮的继续方式:键盘快捷、在仍可见时的「再加载一批」,或跳到当前底部的动作。
- 插入新内容后若按钮仍在视口里,保持它相对拇指/指针的位置,避免一次点击落空。
- 验证:连续要三批,录下每次去点按钮之前的滚动距离。距离单调变长且没有别的继续手段,即逃跑已成立。再在追加瞬间看按钮是否从触点下滑走导致空点。