做网页或App界面时，分页控件几乎是绕不开的元素。不管是电商商品列表、新闻资讯页，还是后台数据表格，用户总得一页一页地看。而分页控件里的图标，比如“上一页”“下一页”“首页”“末页”，虽然小，但直接影响操作体验。
图标要一眼能懂
用户不会花时间琢磨一个箭头到底指向哪是什么意思。常见的左箭头代表“上一页”，右箭头是“下一页”，这是长期形成的视觉习惯。如果你非要把左箭头放在右边，哪怕标注了文字，也会让人迟疑一下——这一下，体验就打折了。
首页和末页图标的处理也类似。通常用双竖线 |< 表示首页，>| 表示末页。这种符号在专业排版中叫“段落标记”，在分页场景里已经被广泛接受。如果换成房子图标代表“首页”，虽然创意十足，但在陌生用户眼里可能得反应两秒。
尺寸与间距要合理
手机屏幕上，手指点按区域不能太小。图标的最小点击区域建议不小于 44px × 44px，这是苹果人机指南里的推荐值，安卓也差不多。别为了美观把箭头缩得太小，尤其在表格底部一堆数字页码中间，夹着两个迷你箭头，用户点不准会直接发火。
图标和数字之间的间距也要留够。太挤显得乱，太松又割裂感强。一般留 8px 到 12px 的空白比较舒服，具体看整体布局。
状态反馈要清晰
当前在第一页时，“上一页”和“首页”应该变灰不可点；到最后一页时，“下一页”和“末页”同理。这时候图标可以降低透明度，或者换一种浅色，但别完全隐藏。隐藏了用户会怀疑功能是不是没了，而置灰能让用户知道“哦，已经到头了”。
可点击的图标要有 hover 或 press 状态。比如鼠标悬停时背景变浅蓝，或者手指按下时颜色加深。这种微反馈能让用户确认“我碰到了”。
代码中的常见实现方式
前端实现时，常用简单的 HTML + CSS 来构建分页图标。下面是一个基础结构：
<div class="pagination">
<button class="prev" aria-label="上一页">❮</button>
<button class="page active">1</button>
<button class="page">2</button>
<button class="page">3</button>
<button class="next" aria-label="下一页">❯</button>
</div>其中 ❮ 和 ❯ 是左右箭头的 HTML 实体，不用加载图标字体也能显示。配合 CSS 控制禁用状态：
.prev:disabled, .next:disabled {
opacity: 0.4;
cursor: not-allowed;
}考虑国际化场景
如果你的产品面向多语言用户，图标的作用就更重要了。阿拉伯语用户从右往左阅读，他们的“下一页”其实是向左翻。这时候图标的指向逻辑要反过来，整个分页组件也需要 RTL（从右到左）布局支持。单纯靠文字“Next”就行不通了，图标方向必须同步调整。
别小看这几个小箭头，它们是用户翻页时最频繁互动的元素之一。设计得好，用户滑得顺；设计得潦草，再好的内容也可能被嫌弃难用。