{ "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.", "schemaVersion": "1.0.0", "kind": "entry", "locale": "en", "id": "pagination", "name": { "zh": "分页", "en": "Pagination" }, "page": "https://designvocabulary.com/en/entries/pagination/", "self": "https://designvocabulary.com/en/entries/pagination.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/pagination.json", "en": "https://designvocabulary.com/en/entries/pagination.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 137, "index": "https://designvocabulary.com/en/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.", "sources": [ { "id": "pagination-govuk", "url": "https://design-system.service.gov.uk/components/pagination/", "title": "GOV.UK Design System · Pagination", "checkedAt": "2026-09-16", "archive": { "status": "pending", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20260916*/https://design-system.service.gov.uk/components/pagination/" } }, { "id": "pagination-ui-patterns", "url": "https://ui-patterns.com/patterns/Pagination", "title": "UI Patterns · Pagination design pattern", "checkedAt": "2026-09-16", "archive": { "status": "pending", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20260916*/https://ui-patterns.com/patterns/Pagination" } } ], "lists": [], "ordered": false, "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is." }, "entry": { "id": "pagination", "type": "interaction", "name": { "zh": "分页", "en": "Pagination" }, "aliases": [ "Paging", "Pager", "翻页", "页码导航" ], "granularity": "component", "intents": [ "browse-detail", "navigate-sections" ], "tags": [ "paging", "result list", "page number", "long list", "loading" ], "definition": "Splitting a long ordered result set into pages, presenting one at a time, and offering previous, next, and numbered entry points so users move forward at their own pace or return to a particular page.", "boundary": "This entry means pagination for browsing content, not the \"next step\" of a linear flow — a form should use continue and back rather than page numbers, because its steps are not slices of one result set. It is also not infinite scrolling, which appends content automatically near the bottom, has no stable page boundary, and gives users no notion of which page they are on. Pagination controls should not appear when there is only one page.", "signature": [ "Results are cut into pages with stable boundaries and a predictable size", "Previous, next, and directly reachable page numbers are offered", "The current page is explicitly marked in the control" ], "when": [ "Loading everything at once makes the page noticeably slow", "Most users only need the first page or the first few", "Users need to cite or share a particular page, or come back to where they stopped" ], "when_not": [ "It is used for a linear flow such as a form, where page numbers imply the steps can be jumped between freely", "There is only one page of content yet the control is still shown", "Content is sliced very thin to inflate page views" ], "tradeoff": "Pagination makes both load cost and reading pace predictable, at the cost of cross-page comparison: someone who needs page 1 and page 5 at once must switch back and forth or remember.", "comparison": { "focus": "Moving forward page by page at the user’s own pace and returning to a given page", "mechanism": "Stable-boundary slices plus numbered and adjacent entry points", "cost": "Comparing across pages is hard and requires switching back and forth" }, "sources": [ { "id": "pagination-govuk", "title": "GOV.UK Design System · Pagination", "url": "https://design-system.service.gov.uk/components/pagination/", "claim": "The component advises considering pagination when showing all the content on one page makes it take too long to load and when most users need only the first page or first few; it says to split content only if that improves performance or usability, advises avoiding infinite scroll because it causes problems for keyboard users, states explicitly that the component must not be used for linear journeys such as completing a form (use a continue button and a back link instead), and requires hiding pagination when there is only one page and redirecting users who request a page that no longer exists to the first page. This entry paraphrases the conditions and the boundary from it.", "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": "The pattern states the problem as \"the user needs to view a subset of sorted data in a comprehensible form\" and records Paging as an alternate title. This entry takes from it that the pattern addresses browsing an ordered result set.", "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": "The result set is still large and paging cannot solve finding one particular item", "reason": "Pagination decides how much is seen at once while filtering decides how much is left; when there is too much, narrowing beats turning more pages.", "basis": "editorial" }, { "target": "wizard", "kind": "alternative", "condition": "The content is a sequence of steps to complete rather than slices of a result set", "reason": "A wizard says the steps must be done in order while pagination says they can be jumped between; the wrong one makes users think steps are skippable.", "basis": "editorial" }, { "target": "visibility-of-system-status", "kind": "composes_with", "condition": "Users need to know where they are within the whole result set", "reason": "The current page and the total are position information; without them, paging becomes an advance with no end in sight.", "basis": "editorial" } ], "rules": [ { "when": "Pagination appears on a browsing list", "instruction": "Mark the current page and the total, give each page a stable shareable address, and hide the control when there is only one page.", "strength": "must", "basis": "editorial" }, { "when": "A user requests a page that no longer exists", "instruction": "Redirect to the first page and say why, instead of showing an empty result or an error page.", "strength": "recommend", "basis": "editorial" } ], "behavior": { "states": [ "first", "middle", "last", "loading" ], "a11y": [ "The pagination region is a navigation group with an accessible name and the current page is marked as current", "Previous and next are disabled rather than removed when unavailable, so their position stays stable" ], "motion": "Turning a page replaces the content directly, with no transition needed" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch of how the control relates to the result list, not a verified implementation. Before shipping, confirm that every page has a stable address and verify the current-page marking with a keyboard and a screen reader.", "image": { "src": "/images/pagination.webp", "alt": "A fictional result list sketch: several rows of grey placeholder results above, and below them a pagination control with a previous arrow at the left, the current page filled in terracotta right after it, and the remaining page numbers running on from there." }, "searchTerms": [ "翻页", "结果列表", "页码", "长列表", "加载" ] } }