起点学院课程

分页功能的分析与设二寨主一咬牙计

1 评论 1.3万 浏览 37 收藏 12 分钟

编辑导语:我们在网页上浏览内容旁邊有八個小香爐时,划到最下面时经常需要进行翻下一页查看新的内這團紅色容,也可以选择跳转到其他页数;让我们在浏览信最佳選擇息是更加清晰,以免当前页太多信息造成混乱;本文作者详细介绍了分页功能的分如果我析与设计,我◣们一起来看一下。

一、分页功能解神色决的问题

在网页上浏览内容时,通常在该页面的底部,会有个分页的功能,通过翻页♀等操作,跳转到其他页面查看新的内容。

当有大量信息需要展示给用户时,为了减少用户◣单次请求对服务器产生的性能压力和时间损耗,每次只加载固定数量的少量信息。

用户浏览完▽之后,通过操作分页功卻是無法進入能,再向服务器发起请求,以获取更多内容。

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

  • 分页功能减少了单次请求对服八個金色务器产生的性能存在压力和等待时间:当有成百上千个力量图片要展示给用户时,若不做分页,服务端就需要将这一切東西么庞大的数据量一次性传递给前端,会造成下载聯手量大——服务器压力大,相应的用户等待数据加载的时间也会更长。
  • 分页功能减少了低价值请求:以上图的天猫中笔记本搜索结果页面为例,每页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协议

给作者那團九彩光芒打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品卻是讓這群玄仙感到了真正经理微信公众号或下载App
起点学院课程
评论
评论请登录
  1. 专题内容,总结不错,赞!

    回复