开学特惠 会员低至4.4折 限时加赠 10000 AI积分 立即前往 arrow

分页、加载更多还是无限滚动?列表设计的选择方法

文章目录
免费使用墨刀
更新时间: 2026年10月06日

需要定位某条记录、比较候选项或稍后继续处理时,分页通常更容易建立位置感;用户主要连续浏览相似内容时,可以考虑无限滚动;希望连续浏览又保留主动停止点时,“加载更多”往往是更稳妥的折中。选择应跟着用户任务走,不能简单理解为“电脑用分页,手机用滚动”。

决定形式之前,先用墨刀原型验证列表浏览与返回路径。同一个人从列表打开详情再返回,能否继续原来的比较,比页码长什么样更值得先检查。

分页、加载更多与无限滚动三种列表呈现方式
页码、主动加载和连续滚动提供不同的浏览控制方式。

先问用户是找、比较,还是随便看看

以课程列表为例,“找到周六下午的摄影课”是查找任务,“比较三门入门课”是比较任务,“看看有什么感兴趣的课”是探索任务。三个人面对同一份课程数据,所需要的控制方式不同。

查找依赖搜索、筛选和可预测的结果;比较需要保留候选、方便回到刚才的位置;探索则更在意连续浏览是否轻松。分页和滚动只能帮助组织结果,不能替代有效的筛选,也不能解决内容本身缺少比较信息的问题。

方式更适合的任务最需要补齐的行为
分页找记录、分批处理、反复定位筛选后页码重置、当前页范围、详情返回
加载更多探索候选,同时保留停止点已加载数量、失败重试、追加后的焦点
无限滚动连续浏览相似内容加载反馈、返回位置、页尾替代入口

NN/g 的无限滚动设计分析讨论了重新寻找内容、页尾可达和可访问性等限制。它不能被简化成“无限滚动一定更好”或“一定更差”;关键在于这些限制是否破坏当前任务。

分页要让用户知道当前处在哪一段

有可靠总量时,可以显示“共86门,当前21—40门”,帮助用户判断筛选效果。总量未知或者计算成本高时,不要用编造的数字撑满界面;可以显示已加载范围和前后翻页能力。页码过多时保留当前页附近、首尾和前后入口,不必把所有数字一次铺开。

筛选或搜索条件发生变化后,通常回到第一批结果。否则用户在第八页选了一个更窄的条件,结果只剩两页,却看到一张空白列表。页面要说明当前筛选,而不是让用户误以为数据丢失。

更改每页条数时,要明确是回到第一页,还是尽量保留当前首项所在位置。两种方式都能成立,但整个产品应保持一致。数据实时变化时,某项可能已经移到另一页;因此准确找回某条记录,还需要记录标识或稳定查询条件,不能只依靠记住页码。

列表同时支持人工调整顺序时,还要区分“翻到下一页”和“改变整份列表顺序”。只在当前页拖动一行,可能影响其他页的条目位置;可结合拖拽排序的范围与保存规则,明确自定义顺序在分页、搜索和筛选下是否可用。

手机空间不足时,不必强行压缩成一排极小页码。可以保留上一页、当前范围和下一页,把每页条数等低频设置放在次级位置。桌面上使用的“跳到第几页”也不应机械删除:如果用户确实依赖指定页定位,可以提供一个清晰的输入入口。响应式调整改变控件安排,不能在没有说明的情况下改变筛选和返回规则。

加载更多:按钮之外还要有结果反馈

“加载更多”让用户决定是否继续,比较适合课程、模板、案例等探索型列表。按钮文案可以配合“已展示20门课程”,并在确实知道总量时显示剩余数量。不要把“还有更多”做成外观相同却有时追加、有时跳转新页的按钮。

点击后将按钮变成加载状态,避免连点产生重复请求。成功后追加新内容;失败时保留已有课程并在同一区域提供重试。不要因为后一批加载失败,把前面已经浏览的内容全部替换成大面积错误页。

键盘用户触发加载后,也需要知道新内容已经出现,并且能顺着操作进入新项目。焦点留在什么位置、如何到达第一条新增内容,要与实际实现一起确认。不能只在视觉上向下增加卡片,假定所有用户都能感知变化。

墨刀原型中课程列表的分页、加载更多和从详情返回原位置的对照
列表呈现方式可以不同,详情返回时都应保留筛选条件与浏览位置。

无限滚动不能让用户失去终点

无限滚动省掉一次次翻页,但也减少了“我已经看了多少”的地标。至少要明确区分正在加载、暂时失败、已经到底三种状态。只有一块空白时,用户无法知道是网络慢、没有更多,还是页面坏了。

如果页尾包含联系方式、条款、语言切换等重要内容,不应让它随着每次追加永远下移。可以提供固定的相关入口,或者改用可控的加载更多。回到顶部也不能替代找回上一条课程;两者解决的是不同问题。

当用户频繁比较不同位置的项目时,可考虑收藏、短名单或比较栏。无限滚动只是结果呈现方式,不应迫使用户用记忆保存候选。内容数量很大时,还需与研发评估渲染、网络和内存表现;不能把“有滚动动画”误认为加载体验已经完成。

真正容易漏掉的是详情返回

课程列表滚到第六批后,用户打开一门课,再按返回。如果列表回到顶部,之前的寻找成本就全部重来。设计说明至少记录搜索词、筛选、排序、已加载范围以及返回锚点;是否可分享同一状态的链接,则由产品场景决定。

列表数据变化后,旧锚点可能不存在。此时可回到最接近的位置并提示变化,不必伪装成什么都没发生。浏览器返回、页面内“返回列表”和关闭详情抽屉,应尽量遵守同一套恢复规则。

尤其要把“返回”和“刷新”区分开。用户返回列表通常希望继续刚才的浏览;主动刷新则可能希望看到最新结果。对于持续新增内容的列表,可以提示有新内容并让用户选择更新,而不是在阅读中把新项目插到顶部,使他刚记住的位置不断移动。

用户动作应保留什么需要重新计算什么
打开详情后返回筛选、排序、浏览位置记录是否仍存在
切换筛选新的筛选条件结果范围与当前位置
加载下一批失败此前已展示内容本批加载状态
重新进入一段已分享的列表链接中支持的条件当前真实结果,避免展示失效缓存

用一次比较任务检查整套方案

让评审者筛选周末课程,打开第一门详情,返回继续找到第二门,再清除一个筛选条件。观察他是否知道位置、是否重复浏览、是否误认为“没有结果”。把失败重试和全部加载完成也加入原型分支,不只展示满屏卡片。

如果是数据密集、需要固定列和批量处理的管理页面,可继续参考B端表格的字段、筛选与操作安排。它和探索型课程列表的目标不同,不必为了全站视觉统一强行使用同一种加载方式。

选择列表模式,最终是在分配控制权:什么时候由系统继续加载,什么时候让用户决定,返回时谁负责记住位置。把这三件事说清楚,页码或按钮才有实际意义。

免费在线原型设计工具

内容丰富组件拖拽即用

多人在线编辑实时协作

海量模板素材快速复用

一键分享交付在线评论互动