在家用电脑浏览网页时，你有没有注意到那些翻页的小图标？比如在查菜谱、看新闻或者给孩子找学习资料时，页面底部总有一排小按钮，写着“上一页”“下一页”，旁边还可能有个小箭头。这些就是分页控件，而它们的图标设计其实有讲究。
为什么分页图标要统一
想象一下，爸爸刚学会在网上查火车时刻表，点开一个页面看到向右的箭头代表“下一页”，结果换了个网站，同样的箭头却跳回首页，这肯定让人犯迷糊。所以图标设计得有标准，用户才不用每次都重新猜。
常见图标的通用含义
现在大多数网站都默认采用一些约定俗成的图标。比如：
- 一个向左的三角形或箭头（◀）表示“上一页”
- 向右的箭头（▶）代表“下一页”
- 双竖线加左箭头（⏮）回到首页
- 双竖线加右箭头（⏭）跳到最后一页
这些符号虽然小，但一旦统一，家里老人孩子用起来也顺手。
大小和间距不能太抠门
有些网页把分页按钮做得又小又挤，手指一粗就点错。尤其家里用平板或手机查资料的多，图标至少要有 44px 高，按钮之间留出足够空隙，避免误触。别小看这点距离，妈妈一边做饭一边看步骤，点错了可得重新翻好几页。
颜色和状态要看得清
当前所在的页码可以用深色或加边框突出，不可点击的状态（比如已经是最后一页了）就变灰。这样一眼就知道在哪，不会反复点无效按钮。
代码怎么写才规范
如果自己做个小网站，比如给家庭相册做个在线展示页，可以用下面这种结构：
<div class="pagination">
<button aria-label="首页" disabled>⏮</button>
<button aria-label="上一页">◀</button>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<button aria-label="下一页">▶</button>
<button aria-label="末页">⏭</button>
</div>加上 aria-label 能让读屏软件识别，对视力不好的家人更友好。
别乱创新，实用最重要
有人喜欢用“<<”或“Next”代替图标，也不是不行，但全家人都习惯的符号，没必要非改成花哨的新样式。特别是给长辈用的页面，稳当比好看更重要。