分页

本词条尚无可操作示例；插画为编辑示意，展示分页控件与结果列表的关系，不代表已验证的实现。应用到产品前仍须确认每一页都有稳定地址，并在键盘与读屏下验证当前页标记。

{
  "states": [
    "first",
    "middle",
    "last",
    "loading"
  ],
  "a11y": [
    "分页区域是一组有可访问名称的导航，当前页被标记为当前项",
    "上一页、下一页在不可用时被禁用而不是移除，位置保持稳定"
  ],
  "motion": "翻页直接替换内容；无需过渡动画"
}

{
  "id": "pagination",
  "type": "interaction",
  "name": {
    "zh": "分页",
    "en": "Pagination"
  },
  "aliases": [
    "Paging",
    "Pager",
    "翻页",
    "页码导航"
  ],
  "granularity": "component",
  "intents": [
    "browse-detail",
    "navigate-sections"
  ],
  "tags": [
    "翻页",
    "结果列表",
    "页码",
    "长列表",
    "加载"
  ],
  "definition": "把一份很长的有序结果切成若干页，一次只呈现其中一页，并提供上一页、下一页与页码入口，让用户按自己的节奏逐页前进或回到某一页。",
  "boundary": "本词条指浏览型内容的分页，不指线性流程里的\"下一步\"——填表流程应该用继续与返回，而不是页码，因为那些步骤不是同一份结果的切片。它也不是无限滚动：无限滚动在接近底部时自动追加内容，没有稳定的页边界，也不给用户\"停在第几页\"这一概念。只有一页内容时不应显示分页控件。",
  "signature": [
    "结果被切成有稳定边界的页，每页大小可预期",
    "提供上一页、下一页与可直接跳转的页码",
    "当前页在控件中被明确标出"
  ],
  "when": [
    "一次加载全部内容会让页面明显变慢",
    "大多数用户只需要前一两页的内容",
    "用户需要引用或分享某一页，或从中断处回来"
  ],
  "when_not": [
    "用于填表一类的线性流程，页码会让步骤看起来可以随意跳转",
    "总共只有一页内容却仍显示分页控件",
    "把内容切得极碎以增加页面浏览量"
  ],
  "tradeoff": "分页把加载成本与阅读节奏都变得可预期，代价是跨页比较变得困难：需要同时看到第 1 页与第 5 页的内容时，用户只能来回切换或自己记住。",
  "comparison": {
    "focus": "按用户自己的节奏逐页前进并能回到某一页",
    "mechanism": "有稳定边界的切片加上页码与前后入口",
    "cost": "跨页比较困难，需要来回切换"
  },
  "sources": [
    {
      "id": "pagination-govuk",
      "title": "GOV.UK Design System · Pagination",
      "url": "https://design-system.service.gov.uk/components/pagination/",
      "claim": "该组件建议在\"把全部内容放在一页会让页面加载过慢\"以及\"大多数用户只需要第一页或前几页\"时考虑分页；它要求只有在分页确实改善性能或可用性时才拆分内容，建议避免无限滚动（会给键盘用户造成问题），明确指出不要把分页组件用于填表一类的线性流程（应改用继续按钮与返回链接），并规定只有一页内容时不显示分页、用户访问已不存在的页面时重定向到第一页。本词条的适用条件与边界据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://design-system.service.gov.uk/components/pagination/",
        "status": "pending",
        "checkedAt": "2026-09-22T11:52:51.008Z",
        "error": "status-request-failed",
        "jobId": "spn2-bbb681ace3906b9fac8e67ea9961977522879660"
      }
    },
    {
      "id": "pagination-ui-patterns",
      "title": "UI Patterns · Pagination design pattern",
      "url": "https://ui-patterns.com/patterns/Pagination",
      "claim": "该模式把分页的问题描述为\"用户需要以可理解的形式查看一份已排序数据的子集\"，并记录 Paging 为其别称；本词条据此确认这一模式针对的是有序结果集的浏览。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://ui-patterns.com/patterns/Pagination",
        "status": "pending",
        "checkedAt": "2026-09-22T11:59:52.093Z",
        "error": "status-request-failed",
        "jobId": "spn2-3528b9a741fd9c44cb30701970092a0544f3986b"
      }
    }
  ],
  "relations": [
    {
      "target": "search-and-filter",
      "kind": "composes_with",
      "condition": "结果集仍然很大，翻页无法解决\"找到某一条\"的问题",
      "reason": "分页只决定一次看多少，筛选决定还剩多少；结果过多时先缩小范围比翻更多页有效。",
      "basis": "editorial"
    },
    {
      "target": "wizard",
      "kind": "alternative",
      "condition": "内容是必须按顺序完成的步骤而不是结果的切片",
      "reason": "向导表达\"必须依次完成\"，分页表达\"可以任意跳转\"；用错会让用户误以为步骤可以跳过。",
      "basis": "editorial"
    },
    {
      "target": "visibility-of-system-status",
      "kind": "composes_with",
      "condition": "用户需要知道自己在整份结果中的位置",
      "reason": "当前页与总页数是位置信息；缺了它，翻页就变成没有尽头的前进。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "分页出现在浏览型列表上",
      "instruction": "标出当前页与总量，并让每一页有稳定可分享的地址；只有一页时不显示分页控件。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "用户请求的页码已不存在",
      "instruction": "重定向到第一页并说明原因，而不是显示空结果或错误页。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "first",
      "middle",
      "last",
      "loading"
    ],
    "a11y": [
      "分页区域是一组有可访问名称的导航，当前页被标记为当前项",
      "上一页、下一页在不可用时被禁用而不是移除，位置保持稳定"
    ],
    "motion": "翻页直接替换内容；无需过渡动画"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示分页控件与结果列表的关系，不代表已验证的实现。应用到产品前仍须确认每一页都有稳定地址，并在键盘与读屏下验证当前页标记。",
  "image": {
    "src": "/images/pagination.webp",
    "alt": "一张虚构结果列表示意：上方是数行灰色占位结果条，下方一排分页控件，最左是上一页箭头，紧接着是被填成橙色的当前页，其后依次排开其余页码。"
  },
  "searchTerms": [
    "paging",
    "result list",
    "page number",
    "long list",
    "loading"
  ]
}