分页这个功能往往因为设计点太小而被忽视，但其实分页这个功能，也有许多细节值得考虑。这篇文章里，作者就对分页的作用、结构等方面进行了经验分享，一起来看。

分页在B端是一个很重要的功能，但往往因为设计点太小而被设计师忽略。上一周我在优化系统的大数据表单页面，发现了许多问题，也踩了点坑，记录下来和各位分享点经验。

一、什么是分页

Element：当数据量过多时，使用分页分解数据。

Ant Design：采用分页的形式分隔长列表，每次只加载一个页面。

TDeisgn：用于模块内切换内容的控件。

也就是说当页面出现数据量过多或者长内容列表需要加载时，可以利用分页器控制单页内的信息数量，把大内容切割成为小块展示在页面上。

虽各大厂对分页的设计略有不同，但往往都逃不过以下这几个元素。其中，「上一页」「当前页」「下一页」是分页最基本的三要素。

二、分页的作用1. 减少用户单次请求对服务器产生的性能压力和时间损耗

在大数据量的场景下，若不做分页，服务器就需要承担巨大的压力，庞大的数据量一次性传给前端，导致加载缓慢甚至服务器崩溃。

2. 减少低价值的请求

在大数据量的结果页中，若用户在查看完前几页之后发现该数据不是自己想要的，就能立马退出页面，无需等待所有的结果加载完成，从而减少了无价值的加载请求。

三、分页的结构1. 总数据数

总数据数的显示可以让用户具有掌控感和安全感，让用户在操作时更具心理预期。

2. 单个页面显示的条数

单个页面显示的条数也可称为步长设置。在步长的规则设计上，各家系统略有不同。Acro在当前页面切换步长后自动跳转回第一页。

而Element在设置步长后则保持原位置不动。

看似Element的做法是更优解，但设置步长这个操作并没有什么意义，也会给前端开发工程师徒增工作量。不论是选择Acro还是Element的做法，切换步长时，数据位置已经改变，用户也找不到刚刚看到的数据去了什么位置。

在优化系统时，PM提出了给分页加步长的这么一个需求，原因是因为他使用的电脑分辨率比我的要高，因此在我页面上显示十行数据时为满屏状态，而他的页面底部还有许多留白。

此时靠用户改变步长增加了用户的交互成本，但如果让前端工程师把「页面展示规定数量」规则放开，改成「自适应显示」，不限制每行Min-Height，保证低分辨率正常显示，超出滚动的规则，问题也就解决了。

3. 相邻页数

相临的页码是为了让用户能够更快速的点击跳转到附近页面。

设计师需要注意页码展示的数量一定要够长，不然点击临页的作用就会等同于「上一页」「下一页」的按钮。