分页系统
目的
分页系统技能提供了一种方法论，用于设计将大型数据集划分为离散页面的界面。它确保用户能够遍历长列表项（产品、搜索结果、文章），同时保持清晰的“当前位置”和“剩余内容量”感知。一个健壮的分页系统在导航精度与简洁性之间取得平衡，最小化认知负荷，防止用户迷失方向。
用例
- 为电商或目录网站设计搜索结果页面。
- 组织长篇幅的博客或新闻归档。
- 为内容中心实现“加载更多”与传统数字分页的选择。
- 为数据密集型仪表盘表格或日志创建导航。
- 优化多页面表单或分步式向导，其中各个部分被视为不同的视图。
何时不使用
- 小数据集 (<12 项): 如果所有内容能够舒适地容纳在一两个屏幕内，分页会增加不必要的点击和摩擦。
- 无限滚动上下文: 用户正在探索发现性强的社交信息流或新闻流，且特定页面地址不重要时（应使用
infinite-scroll-implementation）。 - 单个叙事性内容: 对于遵循线性流程的文章或故事，使用“上一页/下一页”链接就足够了。
输入
- 总项目数: 收藏集中总共有多少项？
- 每页项目数: 标准密度是多少（例如，12、24、48 项）？
- 当前页面上下文: 用户当前正在查看哪一页？
- 显示约束: 分页栏有多少水平空间可用（来自
responsive-grid-system）？
输出
- 分页解剖规范: 为页码、上一页/下一页按钮和“跳转”控件（省略号）定义视觉样式。
- 状态矩阵: 为默认、当前、悬停、聚焦和禁用（例如，第一页上的“上一页”按钮）状态定义视觉处理方式。
- 响应式策略: 分页栏如何从桌面端（完整范围）折叠到移动端（紧凑视图）的计划。
- 无障碍地图: 对 ARIA 角色、标签和键盘交互模式的明确定义。
工作流
1. 定义范围策略
根据总量确定一次显示多少页码：
- 简单 (3-5 页): 显示所有页码。
- 中等 (6-10 页): 显示第一页、最后一页以及当前页附近的窗口。
- 复杂 (10 页以上): 使用省略号 (
...) 表示跳过的范围（例如，1 ... 4 5 6 ... 20）。
2. 设计导航控件
建立分页栏的视觉层次：
- 主要操作: 上一页和下一页按钮应清晰可见，并位于分页栏的两端。
- 当前页指示器: 使用高对比度样式（背景色或粗边框）使当前页一目了然。
- 页码: 确保它们看起来像可交互元素（例如，使用
interactive-state-system）。
3. 应用流体间距与尺寸
使用 fluid-spacing-system 确保目标区域可用：
- 触摸目标: 每个页码和按钮应至少为 44x44px；如果视觉密度要求更小的控件，WCAG 2.2 (2.5.8 目标尺寸最小值) 设置了绝对下限为 24x24px，且目标之间应有足够的间距以避免意外激活。
- 内部间隙: 在页码之间使用一致的间距（例如，
--space-xs）以避免误点击。
4. 建立无障碍支持 (WCAG AA/AAA)
- 地标: 将分页包装在带有
aria-label="pagination"的<nav>元素中。 - 当前页: 在活动页面链接上使用
aria-current="page"。 - 禁用状态: 确保当在第一页时，“上一页”按钮在视觉和程序上被禁用（例如，
aria-disabled="true"）。 - 键盘路径: 用户必须能够通过
Tab键导航到每个页码和控件，并且聚焦的控件绝不能完全被粘性页眉/页脚遮挡（WCAG 2.2, 2.4.11 焦点不被遮挡）。
5. 规划响应式适配
映射从桌面端到移动端的过渡：
- 缩减规则: 在移动设备上，隐藏大多数页码，仅显示“上一页”、“下一页”和当前状态（例如，“第 4 页，共 20 页”）。
- 视觉规模: 如果必须保留页码，则将“窗口”缩小到仅当前页及其直接相邻页（例如，
1 ... 4 ... 20）。
决策规则
- 数字 vs. 加载更多: 当用户需要为特定结果添加书签或分享时（例如，“查看第 4 页”），使用数字分页。当目标是延长探索和比较时，使用“加载更多”。
- “最多 7 项”规则: 在桌面端，避免在分页栏中显示超过 7-9 个项目（包括省略号和按钮），以保持布局整洁。
- 可预测性: 始终将“上一页”放在左侧，“下一页”放在右侧。永远不要隐藏这些按钮；只需在不适用时禁用它们即可。
- 即时反馈: 点击页码应立即将用户滚动到内容列表顶部，或提供清晰的“加载中”状态。
约束
- 无障碍: 分页必须可通过键盘导航，并且对屏幕阅读器友好。标签必须具有描述性（例如，“转到第 5 页”，而不仅仅是“5”）。交互式目标必须至少满足 WCAG 2.2 的 24x24px 最小值 (2.5.8)，主要上一页/下一页控件首选 44x44px。
- 响应式: 分页栏绝不能导致水平溢出或与其他 UI 元素重叠。
- 视觉层次: 分页应在视觉上与内容区分开，但不能比内容本身更突出。
常见失败模式
- 微小的触摸目标: 在移动设备上，小而密集的数字无法准确点击。
- 不可见的激活状态: 用户不知道自己在哪一页，因为“激活”样式过于微妙。
- 键盘循环中断: 忘记在页面内容通过 AJAX 更新时处理焦点（用户应被移至结果顶部）。
- “移动端爆炸”: 试图在移动屏幕上显示 10 个页码，导致水平滚动或布局破坏。
- 模糊的标签: 仅使用数字而没有
aria-label，使屏幕阅读器用户难以理解上下文。
验证标准
- 当前页面在视觉上与众不同并具有
aria-current="page"。 - 导航被包装在带有描述性
aria-label的<nav>中。 - 触摸目标至少满足 24x24px 的 WCAG 2.2 最小值（主要上一页/下一页控件为 44x44px）。
- 禁用状态（第一页上的上一页，最后一页上的下一页）清晰且已按编程方式定义。
- 定义了响应式行为（移动端的紧凑视图）。
- 键盘用户可以浏览整个分页栏。
- 对大范围正确使用了省略号。