Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

无限滚动

Infinite Scroll

加入比较 +

列表在用户滚动到接近末尾时自动加载并追加下一批内容,不需要点击翻页,看起来像一条没有尽头的连续内容流。

示意图 · 编辑插画,尚无可操作示例
一张名为 FIELDNOTES 的虚构手机界面示意:一列由灰色占位条构成的卡片向下延伸,最底部一张卡片以淡出的骨架形式正在加载,旁边的小插图是一排其中一格被高亮的分页方块作为对照,页脚被推到画面之外,只露出一角。
一张名为 FIELDNOTES 的虚构手机界面示意:一列由灰色占位条构成的卡片向下延伸,最底部一张卡片以淡出的骨架形式正在加载,旁边的小插图是一排其中一格被高亮的分页方块作为对照,页脚被推到画面之外,只露出一角。

识别特征

  • 接近列表末尾时自动追加下一批内容,无需点击
  • 没有页码,也没有稳定的"第几页"位置
  • 加载新内容时在列表末尾显示加载状态

概念边界

无限滚动与分页的分界在于有没有稳定的页边界:分页把结果切成编号的页,用户可以说"在第三页"并回到那里;无限滚动只有一条不断变长的列表,没有页码这个概念。"加载更多"按钮介于两者之间:它同样追加内容,但每一批都要用户主动点击,因此页脚始终可达、也不会造成"已经到底"的错觉。本词条只指自动追加的形式。它也不是虚拟列表这类渲染优化:后者讨论的是如何只渲染可视区域内的条目,与内容何时加载、用户能否定位无关。至于无限滚动是否会让人停不下来,本词条不作为事实陈述,仅在取舍中作为编辑意见提及。

什么时候考虑它

  • 条目同质、用户没有明确目标,只是随意浏览,如资讯或图片流
  • 主要在手机上使用,用户本来就习惯连续滑动
  • 列表顺序本身不重要,用户很少需要回到某个特定条目

什么时候慎用

  • 用户要找某个特定条目,或要在长列表中比较前后相隔很远的几项
  • 页脚里放着用户确实需要的链接或信息
  • 用户常从列表进入详情再返回,而返回后无法回到原来的位置
  • 大量用户使用低带宽网络或依赖键盘与读屏软件

取舍

无限滚动省掉了翻页的点击与等待,让浏览不被打断;代价是位置感消失——用户很难记住某个条目在哪里、也很难回去,页脚变得够不着,还可能在下一批尚未出现时误以为已经看完。一些评论者还认为没有终点的列表会延长停留时间,这是编辑意见,本词条的来源并未就此给出证据。

条件规则 · 编辑建议

当用户从列表进入某个条目的详情后返回建议恢复到离开时的滚动位置与已加载的条目,不要让用户从顶部重新滑下去。
当列表在滚动中批量追加条目建议用 feed 角色与 aria-busy 告诉辅助技术内容正在更新,并提供跳出列表的键盘方式。
当页脚、联系方式或法律信息只出现在列表之后建议改用需要点击的加载更多,或把这些信息放在不依赖滚动到底的位置。

相关词条

分页 ↗条件替代 · 一份很长的有序结果需要分批呈现

分页给出稳定的页边界,便于定位与回访;无限滚动去掉翻页动作,换来不被打断的浏览。用户要找特定条目时偏向分页,随意浏览时偏向无限滚动。

骨架屏 ↗可以配合 · 下一批内容需要一段可感知的时间才能到达

在列表末尾放置骨架占位,让用户知道还有内容在加载,减少"已经到底"的误判。

站点页脚 ↗条件冲突 · 页面在无限滚动列表之后还放着用户需要的页脚

列表每次接近末尾就继续追加,页脚会被不断推远而无法到达;此时应改用加载更多或把页脚信息移到别处。

搜索与筛选 ↗可以配合 · 用户在一条很长的信息流中其实想找某类内容

无限滚动不擅长定位,提供搜索与筛选能让有明确目标的用户绕开逐条下滑。

来源与支持范围

Nielsen Norman Group · Infinite Scrolling: When to Use It, When to Avoid It (Tim Neusesser, 2022-09-04) ↗

该文把无限滚动定义为随用户向下滚动持续加载内容、从而不再需要分页的列表做法;列出的问题包括难以记住并回到某个条目、误以为已经到底、页脚无法到达、键盘与读屏用户的可访问性问题、加载性能与搜索引擎抓取;建议在用户要找特定条目、比较相隔较远的条目或只看前几条结果时避免使用,并考虑在用户从详情页返回时保留列表位置,需要页脚时可改用"加载更多"。本词条的定义、适用条件与和分页、加载更多的对比据此转述。

检索日期:2026-10-20 · 快照待确认
W3C WAI-ARIA Authoring Practices Guide · Feed Pattern ↗

该模式把 feed 描述为随用户滚动自动加载新内容段落的页面区域,常表现为看似无限滚动的文章列表,并指出由滚动触发的加载会给辅助技术用户带来可用性与互操作问题;它建议批量增删条目期间把 aria-busy 设为 true、完成后务必改回 false,并给出 Page Down / Page Up 在条目间移动焦点、Control + End 跳到列表之后第一个可聚焦元素等键盘约定。本词条的可访问性要求据此转述。

检索日期:2026-10-20 · 快照待确认

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意,展示列表末尾自动追加的新卡片与加载状态,并与带页码的分页对照,不代表已验证的实现。应用到产品前仍须实测返回时的位置恢复、键盘跳出列表的方式与读屏软件对新增内容的播报。

{
  "states": [
    "idle",
    "loading-more",
    "appended",
    "end-of-list",
    "error"
  ],
  "a11y": [
    "新条目追加时不抢走当前焦点,读屏用户能感知到列表正在更新",
    "键盘用户可以在条目间移动,也能一步跳到列表之后的内容",
    "加载失败时给出可重试的入口,而不是静默停止追加"
  ],
  "motion": "新内容直接出现在末尾,避免让已有条目跳动位移"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。