分页功能的分析与设计

写导语：我们在网页上浏览内容时，划到最下面时总是需要进行翻下一页调查新的内容，也完全可以选择跳转到很多页数；让我们在浏览消息是更加清晰，以免目前页太多消息造成混乱；本文作者仔细讲解了分页功能的解析与设计，我们一起来就这样看一下。

一、分页功能解决的问题在网页上浏览内容时，一般在该页面的底部，会有个分页的功能，通过翻页等操作，跳转到很多页面调查新的内容。

当有超级多的消息需要展示给玩家时，为了减少玩家单次请求对服务器发生的性能压力和时光损耗，每当只加载特定数量的少量消息。

玩家浏览完之后，通过操作分页功能，再向服务器发起请求，以获得再多内容。

详细来说分页功能解决了以下两个问题。

分页功能减少了单次请求对服务器发生的性能压力有内涵的网名和等待时光：当有成百上千个图片要展示给玩家时，若不做分页，服务端就需要将这么超大的资料量只能用一次的传递给前端，会造成安装量大——服务器压力大，相对应的玩家等待资料加载的时光也会更长。分页功能减少了低价值请求：以上图的天猫中笔记本查询搜索结果页面为例，每页60个商品，总页数76页，总共4560个商品；若不做分页功能，玩家的一次查询搜索请求，就需要一次将4560个商品包含图片全部加载出去；但事实状态是，玩家真的会把这种4560个商品全部就这样看完吗？也许他只就这样看了前5页就确认了购置意向，那这时后面71页的内容就是白加载了，这其实就是无价值的加载请求。

二、分页子功能极其作用不一样场景下分页的构成元素不一样，构成元素的不一样使分数页功能的作用也有有的差别。

下图是一个常见的分页设计样式，子功能主要有页码展示、资料量展示以及翻页操作。我们来解析这种基础分页设计有哪些作用。

1. 页码展示如图所示，页码展示包括目前页码展示、目前页码相邻几个页码的展示以及首末页页码展示。

页码展示帮助玩家定位内容：比如玩家在某个商品的查询搜索结果页浏览时，观看到的第5页，这时还是认为第2页的一件商品更想买，于是就可以通过点一下页码2回到展示该商品的页面；这就达到了通过页码迅速定位商品地点的目的，而不用逐个商品逐个商品地往回来查找该商品在哪里。

2. 消息量展示消息量展示包括页面总数、每页资料数量以及资料总量。

消息量的展示用数字体现了资料的多少，让玩家对要处理的浏览任务有心理预期和把控。

商品列表页、内容列表页，一般会在数量较大的时候展示页面总数和资料总量。

客观的数字展示出去，一方面是会让玩家觉得该平台的商品或内容很多，是个可以寻找满足要求的商品或内容的平台，对平台发生好感；另一方面是对浏览的内容有预期，比如某个商品的查询搜索结果共有500页，由于数量太多不可以就这样看全部就这样看完，于是决定按销售额排序，从前20页中选择一个最满意的。

管理后台的列表页，也会展示消息量；管理后台是企业人员处理事情的地方，这里展示消息量，方便事情人员对平台中的消息量，以及任务量有清晰和客观的了解。

某个图书管理后台，到货但未上架书籍的列表页展现了消息量，这时管理员就能明白：目前到货的数量（消息量），以及要上架书籍的数量（任务量）。

3. 翻页操作翻页操作包括上一页下一页这样的逐页翻页，以及不相邻页码的跳转。

逐页翻页操作方便玩家按顺序浏览；玩家浏览消息时会像读书一样逐页地浏览下去，“上一页”、“下一页”用的次数较多；如果没有逐页翻页的操作，玩家就只能点一下不一样地点的页码去采访不一样的页面，十分不方便。

不相邻页码的跳转功能提升了跳转的效率；当需要跳转到距离目前页很远的一个页面时，就会用到这种功能；比如某件商品的查询搜索结果页面按价钱从低到高排序时，翻了前5页，还是认为这种价位的太低，于是可能会使用该功能直接跳转到第20页开始浏览。

三、分页功能的设计1. 确认配合元素不一样场景下分页的构成元素不一样，分页功能设计的第一步，需要根据场景确认该功能由哪些元素构成。

可选的元素有哪些，各自有什么用呢？

资料总量：资料总量说明了玩家需要浏览的内容的总量；常见的场景，例如在管理后台筛选符合条件的资料记录时，查询搜索结果页一般会展示这种消息，这让运营人员在操作时有心理预期。

页面展示数量：这种元素能控制每冬瓜炒虾仁一个页面展示多较少数据；当查询搜索结果很多，成百上千，只需粗略浏览时，这种功能可以扩展每一个页面展示的消息数量，避免频繁翻页导致的效率低下；一样的，当查询搜索结果不多，需要细腻浏览时，又可以将每页的数量调少。赶集瓜子网

上一页和下一页翻页：这是分页功能中最基础的构成元素，通过点一下上一页回到前一个浏览的页面，通过点一下下一页进入后一个要浏览的页面；就像读书时会有按页面逐页浏览的状态寄托的意思，网页也会总是出现这样逐页浏览的状态；当内容非常少的时候，就可以只要这种基础的构成元素，比如轮播图中的上下翻页其实就是一样的元素。

目前页码：目前页码说明了目前所处的地点。

相邻页码展示：页码数字展示一般展示目前页码的前后几页，例如目前在第10页，页码数字展示前后各5页，那页码数字就为5、6、7、8、9、10、11、12、13、14、15；连续页码的展示方便玩家迅速跳转到周围的页面。

再多分页：当资料量很大时就需要很多的分页来承载内容；但页面大小是有限的，不可以将全部的页码数字都展示出去，于是就省略了离目前页面很远的页码数，再通过点一下图标就能采访这些被省略页码的页面。

总页数：总页数说明了内容总共有多少页，就像一本纸质书有总页数，一本有声书有总时长；通过这种元素，玩家才能知道内容的多少，对整理内容有个把握。

页码跳转：页码跳转帮助玩家从目前页面跳转到很多某个页面；例如玩家在查询搜索了某件商品，按销售额排序，这时浏览到了第15页，满意度越来越低；于是打算从前5页选一个，这时就能通过页码跳转迅速跳转到第1-5页了。

2. 后端分页且局部刷新请求资料在设计分页功能时，一般选择后端分页且局部刷新的途径来加载资料。这个途径减少了服务器压力。

不一样于前端分页中将资料只能用一次的全部取出去，后端分页是每当请求只查询一页的值，这样做避免了服务端将超大的资河南省一本分数线料量一次传递给前端，造成安装量大和服务器压力大等问题。

局部刷新就是，当点一下下一页之后，前端发起请求去后端拿资料填充到页面的过程中，页面没有进行全局刷新（全局刷新可以理解为页面进行了一次跳转，从头开始跳转到自己），只是页面特殊地区通过前端更新。

就这样看下图这种管理后台的举例，这是经历过筛选后，语言为英文，分类为浪漫的图书列表，当点一下下一页后：

如果是全局刷新，服务端需要返回整个页面，包括筛选地区和结果列表内容，玩家会观看到的该页面刷新了一次，也就是页面进行了一次跳转，从头开始跳到自己。

如果是局部刷新，服务端只用返回结果列表，此时此刻页面除了结果列表地区会加载出新的资料，很多部分都不可能刷新，减少了服务器的压力。

四、总结PC端商品、新闻内容的列表页面，一般会有个分页的功能，通过翻页等操作，玩家可以跳转到很多页面调查新的内容。

分页功能减少了单次请求对服务器发生的性能压力、玩家等待时光以及低价值请求。

分页的子功能主要有页码展示、资料量展示以及翻页操作，分别都有各自的作用，比如内容定位、对内容的预期把控等；我们在设计分页功能时，可以根据业务需要来选择不一样的构成元素。

本文由 @相与 原创发布于每一个人都是业务经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议