INTERACTION
分页控件Pagination
页码 + 省略号 + 前后箭头：当前页品牌实心，其余可点。
效果预览
1
2
3
…
18
适合用在哪
列表页、搜索结果、博客归档、后台表格。
容易踩的坑
- 页码按钮小于 44×44px，移动端频繁点错相邻页码。
- 当前页缺少 aria-current=page，读屏用户无法知道自己在第几页。
- 翻页后不滚回列表顶部，用户停在页脚以为内容没刷新。
设计提示词 · Prompt
分页控件（Pagination）：结构 = 首页/上一页箭头 + 页码组（当前页前后各 1-2 页 + 省略号 + 首尾页）+ 下一页/末页箭头。当前页品牌实心圆角块，其余 ghost（悬停浅灰底）。页数 ≤7 全展示；更多时用省略号折叠。移动端简化为"‹ 2 / 18 ›"。旁边配"共 N 条 · 每页 M 条"元信息。内容切换时列表区滚回顶部（smooth）+ 骨架屏过渡。SEO 场景给页码加 rel=prev/next 与可抓取链接。
Pagination: Structure = first/previous arrows + page number group (1-2 pages before and after the current page + ellipsis + first and last pages) + next/last arrows. The current page is a solid brand-color rounded block; the others are ghost (light gray background on hover). Show all pages when there are ≤7; fold with ellipses beyond that. On mobile, simplify to "‹ 2 / 18 ›". Add meta info alongside: "N items total · M per page". When content switches, scroll the list area back to the top (smooth) + transition with a skeleton screen. For SEO, add rel=prev/next and crawlable links to page numbers.
常见搭配
同一页面里经常和「分页控件」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-pagi"> <button class="d-pagi__btn">‹</button> <span class="d-pagi__n">1</span> <span class="d-pagi__n is-on">2</span> <span class="d-pagi__n">3</span> <span class="d-pagi__n is-gap">…</span> <span class="d-pagi__n">18</span> <button class="d-pagi__btn">›</button> </div>