整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
辑导语：什么时候用分页加载，什么时候用无限加载呢？本文作者总结了分页加载和自动加载的区别和各自的优缺点，供大家理清思路，在做交互稿时能够选择更恰当的方式。推荐对交互设计感兴趣的朋友们阅读。
几天前，我接到一个搜索相关的需求，用一句话概括就是：
用户通过关键词搜索相关文档。
这听起来就简单极了，你脑海中可能都已经出现交互稿的模样了吧。
我也是这么想的，三下五除二的便画出了交互稿，一个搜索框，一个内容区，一个分页，轻轻松松搞定～
当我去给老板过稿时，他问我为什么不采用自动加载的方式。
说实话，我……没想清楚。
因此，接下来我仔细思考了两种加载方式（分页加载和自动加载）的区别，也是这篇文章的来由。
除了梳理两种加载方式的区别外，也希望通过这篇文章记录解决问题的思路，希望能够以小见大。我通常通过竞品分析、桌面调研和个人观察来探索问题的解决方案。
搜索是一个特别常见的场景，市面上有许多成熟的产品，比如Google、Bing等浏览器，知乎、微博等社区产品，它们的产品细节必然经过无数次的打磨，因此，观察这些产品便是在研究最前沿和权威的资料。
其次是桌面调研，加载方式作为一个常用组件，网上肯定存在一些调研总结，我通常会通过Google、知乎、人人都是产品经理等网站查找一些他人的总结。
个人观察也是十分重要的，产品经理有产品sense，设计师也有设计sense，只有多看多体验，才能真正感受到不同组件直接细微的区别。
三种方式并非独立进行，而是互相融合、相互补充，最终得出结论。
分页加载便是在内容区底部放置分页按钮，用户可以通过页码切换信息。
分页加载有以下几个特点：
第一，对信息的数量以及目前所处的位置一目了然。
信息有10页还是100页，我目前看到了第几页，还有多久能够看完有很清晰的认知。
第二，方便回溯定位。
比如用户浏览到后面时，突然想返回去查找前几页的一条信息，是可以很方便地通过分页实现快速跳转的。
第三，留给用户思考时间。
我们在点击页码之后是需要一定的加载时间才会出现信息的，这会打断用户的思路，可是也留给了用户一定的思考时间，我能够通过这个关键词获取到想要的信息吗，接下来是继续浏览还是离开网站呢？
我们再来看都有谁在使用分页加载。
咱们最常见的搜索引擎，例如Google、Bing和百度等以搜索为护城河的产品，都非常默契统一地采用了分页的模式。
再比如邮箱、B端产品似乎都倾向于采用分页加载。
我刚开始一直想不通为什么google等搜索产品会使用分页加载，使用无需跳转的自动加载可以更快地达到目的啊。这时候，再回头看一下分页的特点，你会发现分页给予用户强烈的掌控感。
像Google、邮箱或者是其他B端产品，它们都偏向于工具型产品，用户使用时带有明确的目的，更可能用完即走，我们对于工具通常需要更强的掌控感。
自动加载无需用户手动操作，一直下滑即可。自动加载有以下特点：
第一，无法感知内容数量，已经浏览到那个部分，剩余多少。
因为页面是自动加载的，我们无法知道什么时候才能结束。通常用户会在得到结果或者大概率无法得到结果时选择结束。
第二，无法快速定位之前的信息。
有些人可能会说有滚动条啊，因为滚动条会随着自动加载的次数发生变化，几乎没有太多价值。
第三，加载内容过多时，页面过长。
这会导致用户难以及时返回搜索框，切换关键词，为了解决这个问题，通常有两种方案，在右下角加一个置顶的悬浮图标（我个人访谈了解到很少有人真正使用置顶按钮），或者滚动时搜索框置顶。
第四，永远看不到footer。
无法在底部添加其他信息。
第五，非常顺滑。
自动加载操作简单，只需要滚动即可，信息之间没有明显的界限或停顿。
总体来讲，自动加载可以让用户用最少的操作、最短的时间找到需要的信息。
并且自动加载是一种非常沉浸式的体验，不会打断用户思路，甚至没有操作和时间的感知。
这对于以休闲娱乐为主的社交型产品是非常适用的。比如知乎、微博等平台，都在使用无限加载的方式，这可以尽可能把用户留在平台上。
分页加载和自动加载是最基础的加载方式，现在还出现了一些手动加载和自动加载相结合的方式。
通常是在2～3次自动加载后，便会给一个button触发手动加载。这是一种比较折中的方式。
从用户的角度看，我已经浏览到第一页的末尾了，意味着我还想看第二页的内容，为什么还要用分页打断我获取信息。
自动加载2次后产生的信息大概在9屏左右，这对用户来讲不会是一个很长的页面，造成心理负担；并且如果9屏依然找不到想要的结果，要么是搜索词不对，要么是检索技术不行，真正去点击手动加载的用户就没多少了。
比如简书、google图片搜索就在采用这种方式。
了解不同加载方式的区别是基础，对于具体需求我们应该采用哪种方式，永远都是具体问题具体分析，有时候还需要考虑技术问题。
我们的产品是一款更加偏向工具型的产品，最好像Google一样采用分页的方式。但是这种搜索最好能在第一页就给到结果，我们目前的技术无法达到非常精准的结果匹配。因此综合来看，选用了更加折中的自动加载与手动加载相结合的方式。
作者：栗子；公众号： 栗子设计喵
本文由 @栗子设计喵 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Pixabay，基于 CC0 协议
辑导语：我们在网页上浏览内容时，划到最下面时经常需要进行翻下一页查看新的内容，也可以选择跳转到其他页数；让我们在浏览信息是更加清晰，以免当前页太多信息造成混乱；本文作者详细介绍了分页功能的分析与设计，我们一起来看一下。
在网页上浏览内容时，通常在该页面的底部，会有个分页的功能，通过翻页等操作，跳转到其他页面查看新的内容。
当有大量信息需要展示给用户时，为了减少用户单次请求对服务器产生的性能压力和时间损耗，每次只加载固定数量的少量信息。
用户浏览完之后，通过操作分页功能，再向服务器发起请求，以获取更多内容。
具体来说分页功能解决了以下两个问题。
不同场景下分页的构成元素不同，构成元素的不同使得分页功能的作用也有一些差别。
下图是一个常见的分页设计样式，子功能主要有页码展示、数据量展示以及翻页操作。我们来分析这个基本分页设计有哪些作用。
如图所示，页码展示包括当前页码展示、当前页码相邻几个页码的展示以及首末页页码展示。
页码展示帮助用户定位内容：例如用户在某个商品的搜索结果页浏览时，看到第5页，这时还是觉得第2页的一件商品更想买，于是就可以通过点击页码2回到展示该商品的页面；这就达到了通过页码快速定位商品位置的目的，而不用逐个商品逐个商品地往回去查找该商品在哪里。
信息量展示包括页面总数、每页数据数量以及数据总量。
信息量的展示用数字体现了数据的多少，让用户对要处理的浏览任务有心理预期和把控。
商品列表页、内容列表页，通常会在数量较大的时候展示页面总数和数据总量。
客观的数字展示出来，一方面是会让用户认为该平台的商品或内容非常多，是个可以找到满足需求的商品或内容的平台，对平台产生好感；另一方面是对浏览的内容有预期，例如某个商品的搜索结果共有500页，由于数量太多不能看全部看完，于是决定按销量排序，从前20页中挑选一个最满意的。
管理后台的列表页，也会展示信息量；管理后台是企业人员处理工作的地方，这里展示信息量，方便工作人员对平台中的信息量，以及任务量有清晰和客观的认识。
某个图书管理后台，到货但未上架书籍的列表页显示了信息量，这时管理员就能明白：目前到货的数量（信息量），以及要上架书籍的数量（任务量）。
翻页操作包括上一页下一页这样的逐页翻页，以及不相邻页码的跳转。
逐页翻页操作方便用户按顺序阅读；用户浏览信息时会像读书一样逐页地浏览下去，“上一页”、“下一页”用的次数较多；如果没有逐页翻页的操作，用户只能点击不同位置的页码去访问不同的页面，十分不方便。
不相邻页码的跳转功能提高了跳转的效率；当需要跳转到距离当前页很远的一个页面时，就会用到这个功能；例如某件商品的搜索结果页面按价格从低到高排序时，翻了前5页，还是觉得这个价位的太低，于是可能会使用该功能直接跳转到第20页开始浏览。
不同场景下分页的构成元素不同，分页功能设计的第一步，需要根据场景确定该功能由哪些元素构成。
可选的元素有哪些，各自有什么用呢？
数据总量：数据总量说明了用户需要浏览的内容的总量；常见的场景，比如在管理后台筛选符合条件的数据记录时，搜索结果页通常会展示这个信息，这让运营人员在操作时有心理预期。
页面展示数量：这个元素能控制每个页面展示多少数据；当搜索结果很多，成百上千，只需粗略浏览时，这个功能可以扩展每个页面展示的信息数量，避免频繁翻页导致的效率低下；同样的，当搜索结果不多，需要精细浏览时，又可以将每页的数量调少。
上一页和下一页翻页：这是分页功能中最基本的构成元素，通过点击上一页回到前一个浏览的页面，通过点击下一页进入后一个要浏览的页面；就像读书时会有按页面逐页阅读的情况，网页也会经常出现这样逐页浏览的情况；当内容非常少的时候，就可以只要这个基本的构成元素，例如轮播图中的上下翻页其实就是一样的元素。
当前页码：当前页码说明了当前所处的位置。
相邻页码展示：页码数字展示通常展示当前页码的前后几页，比如当前在第10页，页码数字展示前后各5页，那页码数字就为5、6、7、8、9、10、11、12、13、14、15；连续页码的展示方便用户快速跳转到附近的页面。
更多分页：当数据量很大时就需要很多的分页来承载内容；但页面大小是有限的，不能将全部的页码数字都展示出来，于是就省略了离当前页面很远的页码数，再通过点击图标就能访问这些被省略页码的页面。
总页数：总页数说明了内容一共有多少页，就像一本纸质书有总页数，一本有声书有总时长；通过这个元素，用户才能了解内容的多少，对整理内容有个把握。
页码跳转：页码跳转帮助用户从当前页面跳转到其他某个页面；比如用户在搜索了某件商品，按销量排序，这时浏览到了第15页，满意度越来越低；于是打算从前5页选一个，这时就能通过页码跳转快速跳转到第1-5页了。
在设计分页功能时，通常选择后端分页且局部刷新的方法来加载数据。这种方法减少了服务器压力。
不同于前端分页中将数据一次性全部取出来，后端分页是每次请求只查询一页的值，这样做避免了服务端将庞大的数据量一次传递给前端，造成下载量大和服务器压力大等问题。
局部刷新就是，当点击下一页之后，前端发起请求去后端拿数据填充到页面的过程中，页面没有进行全局刷新（全局刷新可以理解为页面进行了一次跳转，重新跳转到自己），只是页面特定区域通过前端更新。
看下图这个管理后台的例子，这是经过筛选后，语言为英语，分类为浪漫的图书列表，当点击下一页后：
如果是全局刷新，服务端需要返回整个页面，包括筛选区域和结果列表内容，用户会看到该页面刷新了一次，也就是页面进行了一次跳转，重新跳到自己。
如果是局部刷新，服务端只用返回结果列表，此时页面除了结果列表区域会加载出新的数据，其他部分都不会刷新，减轻了服务器的压力。
PC端商品、资讯内容的列表页面，通常会有个分页的功能，通过翻页等操作，用户可以跳转到其他页面查看新的内容。
分页功能减少了单次请求对服务器产生的性能压力、用户等待时间以及低价值请求。
分页的子功能主要有页码展示、数据量展示以及翻页操作，分别都有各自的作用，例如内容定位、对内容的预期把控等；我们在设计分页功能时，可以根据业务需要来选择不同的构成元素。
本文由 @相与 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
、页中加JS代码：
<script type="text/javascript">
function page()
{
var page1=document.getElementById("page1").value;
var href=location.href;
if (/page=\d+/.test(href)) {
href=href.replace(/page=\d+/, "page=" + page1);
} else if (href.indexOf('?')==-1) {
href=href + "?page=" + page1
} else {
href=href + "&page=" + page1
}
location.href=href;
}
</script>
二、加上输入页码的文本框和跳转按钮
<input type="text" name="page1" id="page1">
<a href="javascript：void(0)" onclick="page()">跳转</a>
*请认真填写需求信息，我们会在24小时内与您取得联系。
