分页样式设计（浅谈APP流式分页服务端设计）

本文目录

• 浅谈APP流式分页服务端设计
• 网页设计中如何实现分页的效果
• php thinkphp3.2.3怎么做分页样式
• 交互细节分析——分页
• 分页设计的难点问题
• word中分页符怎么弄
• 分页怎样处理才能对网站优化起到很好的效果

浅谈APP流式分页服务端设计

web开发中常用的分页方式，根据页码进行分页。暂且称为 Web式分页

根据页码 pageIndex 和分页大小 pageSize 进行分页。

这种分页方式，在web中使用没有什么太大问题，但是在App分页中能否套用这种分页方式呢？

App流式分页

App上的分页方式从表现上看，基本都是上拉加载更多形式的流式分页。如果后台接口仍然按照Web式分页方式进行设计，会有如下问题：
a、数据重复

b、数据缺失

c、offset过大时查询效率低
MySQL的limit给分页带来了极大的方便，但数据量一大的时候，limit的性能就急剧下降。
由此可见，传统Web式分页接口并不适合App分页。

a、cursor游标式分页

优点：
1)、能够避免数据重复/遗漏
2)、limit性能不会 cursor 数值大小影响，性能稳定
缺点：
1)、适用于只是按照时间追加的方式的简单排序

b、按照时间分片缓存
非全量数据，只是部分热门数据，因为数据变化太快，可以基于时间段生成多个缓存。对于数据可以按时间段（5分钟）生成一个缓存分片。
具体流程如下：

按时间分片式缓存流程

此处的timestamp值，请求第1页数据时，timestamp传0，服务端检查timestamp《=0，就将当前系统时间赋值给timestamp返回，请求第2，3，...n页数据时，将系统返回的timestamp传入。
缓存的key是根据timestamp进行计算的，比如5分钟一个分片，key=list_201605231700。

应用场景

比如首页热门，只是一些热门文章，排序有一定的复杂性，且相对容易变动。

目前专题中列表排序是按照点赞数排序的，分页请求

出现了重复的数据，是因为该排序是实时数据，且没有游标，无法感知前面加载的数据。

c、id列表一次性下发给App

1、请求第一页数据之前先缓存所有id列表
2、请求每页数据时，只需带入相关的id列表参数

这种方式适用于id列表不会很大（数百条数据）的业务场景，例如腾讯新闻。

网页设计中如何实现分页的效果

1、第"1"页是home的作用，始终有第"1"页，中间用"…"表示未显示的页码;
2、只提供"首页1+5个连续页码+最后一页"页码;开发者应该是考虑一般用户最多连续查看5页的内容。或者就直接跳至最后一页查看所以显示最后一页页码和直接跳至最后一页的快捷按钮;
3、搜索结果首次只提供10个页码;一般用户在这10页内还没找到想要的内容应该会更换搜索内容。脚印图形和下面页码对应都可点击翻页，增加了页面趣味性
4、因为搜索页面用户一般不会回到首页所以页面只有上一页和下一页的快捷按钮
5、点击任何一页码继续浏览，发现后续提供的页码是：当前页+9;便于用户扩大搜索范围放大。
6、花瓣"无限滚动翻页"，当用户浏览到页面底部，自动刷新页面展示新的信息;连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮"查看更多信息"，引导用户去浏览其他相关信息;页面过长时提供"回到顶部"按钮。

php thinkphp3.2.3怎么做分页样式

 $id = I("id");
        $Cate = M(’Article’); // 实例化Cate对象
        $count = $Cate-》where("cate=$id")-》count(); // 查询满足要求的总记录数
        $Page = new \Think\Page($count, 32); // 实例化分页类 传入总记录数和每页显示的记录数(25)
        $Page-》setConfig(’header’, ’条数据’);
        $Page-》setConfig(’prev’, ’上一页’);
        $Page-》setConfig(’next’, ’下一页’);
        $Page-》setConfig(’first’, ’首页’);
        $Page-》setConfig(’end’, ’末页’);
        $show = $Page-》show(); // 分页显示输出
        $list = $Cate-》where("cate=$id")-》order(’id DESC’)-》limit($Page-》firstRow . ’,’ . $Page-》listRows)-》select();
        $this-》assign(’list’, $list); // 赋值数据集
        $this-》assign(’page’, $show); // 赋值分页输出
        //大家都在看
        $click = M(’article’)-》limit(8)-》order("click DESC")-》select();
        $this-》assign(’click’, $click);
        //最新资讯
        $news = M(’article’)-》limit(8)-》order("click DESC")-》select();
        $this-》assign(’news’, $news);
        $this-》display();

交互细节分析——分页

Vonnie | 2012-02-04 | 交互设计
说说目前常用的三种分类显示信息方法：

常规翻页          信息滚动翻页         滚动条

前者是横向翻页方式，后两者是纵向的信息翻页。分页作为很小的一个组件，大多数网站都不会花费什么精力去设计，设计也大同小异，用户已经使用习惯学习成本为0，但如果能够在细节上做的更细致贴心一些，用户的使用体验会有所提升。

一、 先来看常规翻页

1) 组成结构
• 上页+页码+下页

•  跳转到__页/第__页”；

•  确认”按钮；

•  支持键盘操作；

2) 使用情景

当网页内容较多、不能在限定区域内显示完全时；

为了方便用户在多个页面间跳转和快速定位（尤其是按顺序翻页），通过翻页设计提供多个页面间的导航。

在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。

•   分页的内容是什么类型？

•   页面数量有多少？

•   查看最多的是哪些页面？

•    手动全部翻一遍的几率

•   是否会不按顺序翻页，为什么？

•   是否会查看已翻过的翻页？

•   翻页是否在列表顶部和底部都出现？

•   “最后一页”是否一定要有？

•   列表顶部什么情况下有翻页？

按照用户心理模型，浏览邮箱内容时是反复浏览型，且页面较长，此时需要在顶部添加翻页，但电商网站搜索结果页和新浪微博的用户是在浏览到页面底部时才会有翻页动作，因此不必在顶部放翻页。

•   是否可以mouseover就显示页面内容？什么时候可以？

设计前考虑完以上问题，针对情况进行取舍设计。

3) 交互分析

•   Google翻页
搜索结果首次只提供10个页码；

设计猜想：google开发者认为一般用户在这10页内就能找到想要的内容。
点击任何一页码继续浏览，发现后续提供的页码是：当前页+9；

设计猜想：当用户往下点击页码时，google开发者认为前10页内容不能满足用户，于是将搜索范围放大。

但最多提供20个页码；

设计猜想：但考虑到网页宽度还是不能继续无限制增加页码个数，于是设定最多一次提供20个页码。

•   Baidu翻页
始终有第”1“页，中间用”…“表示未显示的页码；

设计猜想：用户翻到后面页码也找不到想要的内容时，会返回第一页重新查找，此时第“1”页是home的作用。
选中页码和mouseover页码样式始终在一个位置不变，不需移动鼠标就可点击下一页，而后页码自动替换状态；

设计猜想：瞄准页码点击较困难，可以减少用户瞄准位置的次数。但没有做完美，用户每刷新一个页面，还是要滚动浏览器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中，减少鼠标瞄准操作。

但也最多提供20个页码；

•   Sina微博小分页
滚动翻页与翻页的结合使用；
上页与下页放在一起更便于点击；
通常情况下用户按“下一页”的情况最多，那么上页样式可以更简单些；

4) 用户心智模型分析

•   以Taobao搜索结果列表页为例：
用户输入关键词进行模糊搜索，然后出现相关结果列表，用户需要逐页翻看查找，此时“上一页”“下一页”使用最多,因此要设计的便于点击切换；或间隔两三页查看，因此样式上要区分查看过的页码和未查看过的；前几页浏览的几率最大，当翻到后面相关内容越来越少，用户会想要返回第一页，因此最好一直显示首页；页码数量不宜过长，不要导致用户视觉辨识困难；也不宜过短，以免给用户造成网站信息较少的错觉。

•   新浪微博信息列表翻页用户心智模型：
用户浏览的信息是关注的信息，会像读报纸一样逐页的浏览下去，因此“上一页”“下一页”用的次数最多；其次是跳转翻页，为体现轻量微博的概念，将传统翻页的中间页码部分简化成下拉菜单，既能标识当前页位置又能翻页切换跳转；

5) 总结

缺点是会打断用户阅读，影响用户关注的主要内容。

优点是条理清晰，便于分段查找信息，后台请求压力小；

与别的组件一样，分页不是单独存在的也要结合使用环境来交互设计。

二、 信息滚动翻页
GOOGLE图片

•    “无限滚动翻页”，当用户浏览到页面底部，自动刷新页面展示新的信息；

•    连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮“查看更多信息”，引导用户去浏览其他相关信息；

•    或需要点击一下才可翻页；

•   页面过长时须提供“回到顶部”按钮；
更多贴近用户心智模型，方便阅读浏览。缺点是当一段信息不能及时刷新出来时，无法跳跃浏览其下面的信息。

三、 滚动条

1) 滚动条与横向分页优先级

当同时使用滚动条和翻页时，该如何设计。

翻页与滚动条的相辅相成，都是页面过长，为分段呈现内容的方法;

•   翻页在滚动条内部

设计猜想：滚动条到最底部方出现翻页。大概出自浏览器，滚动条内放页面翻页；

QQ邮箱
例如浏览器，是因为软件与其内容的嵌套关系；

•   有翻页也滚动条，滚动内容不宜过长（PC端产品）

设计猜想：滚动条需要拖动滑块浏览，如果滑块过短便更不容易操作；统计过IE、FF、Office等常用软件，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时，滚动条的拖动体验就相当的差。

•   移动端产品则貌似无限制

设计猜想：不需拖动鼠标，移动端上手动点击是最方便常用的操作；
2) 分页不一定是click跳转的

有上下翻页同时能快速拖动浏览不同页的信息，适用于内容能够粗略浏览的页面；
四、 总结

1) 从信息的结构来看，传统翻页是横向信息分段显示，而“无限滚动翻页”属于纵向信息递增显示（随滚动页面信息增长）。

•   区分访问过/未访问过的页码样式，能更好的帮助用户记忆，不重复浏览；
•    链接的可点击区域尽量大，方便用户点击，页码间距足够避免用户误点击；
•   清晰标识当前页位置，一般处于页码中部；

•   可提供批量翻页（如，下10页）；

•   页面过长时，增加“返回顶部”;

•   不需要“上一页”“下一页”时就不显示，如后者比前者使用更频繁，前者可简化成符号》；

•   显示总页数（当不显示总数时，翻到最后一页就不能再翻页了）；
•    “上一页”“下一页”位置固定；

•   页码数量不宜过长（一下呈现过多导致视觉混乱，用户翻看页码困难）或过短（特别是搜索结果，会造成网站信息较少的印象）；

•   尽量使用首页和末页链接，且放在普通页码区外的固定位置；

•   除放第一页外，可选择放前面三页的页码，视觉上稳定些；

•    避免花哨交互，精简；
•   页码过多时，允许跳转翻页；

2) 同方向分页的Tab与翻页很少同时使用，滚动翻页与滚动条也是如此。但横向与纵向的组件可以交叉配合使用，比如滚动条与翻页。

3) 没有规定横向的一定是翻页，纵向的一定是滚动条，可以发散开来：横向为滚动条，纵向翻页，但此种方式似乎不便于操作。

所有组件的灵魂是用户操作方式。

相关标签

交互细节 交互设计 分页

分页设计的难点问题

在网站开发、移动 APP 开发的时候，遇到数据量多的时候，都会有人性化的分页功能。但是，看似简单的分页功能，其实存在很多的设计技巧以及不少的坑。

分页有三种样式：普通分页、首末分页、跳转分页

Google的翻页功能的设计

当超过10项的搜索结果，Google会自动分页，你是否曾注意到，这个分页的链接，只出现在网页的底部，而网页顶部却没有分页的链接？分页的链接如下图：

从用户体验的角度，如果顶部也出现分页链接，实际上可有可无。因为按照逻辑的操作，用户起码应该是快速浏览完每页的10项搜索结果，才会浏览下一页，或者干脆按键盘的“End”键，跳到网页底部，按“下一页”。

所以顶部的分页链接作用不大。除非是网页一屏就显示所有的内容，顶部的分页链接才会起到作用，但这时候仍然是可有可无的。

分页设计的两大难点问题

1.数据重复

2.一次性加载大量信息，加载缓慢

数据重复

传统分页的话，一般只考虑传页数和每页数据条数这两个参数给后端，为了方便后面描述，我们给这个传参方式起个名字叫传统分页。

这种传参方式对于静态数据（数据不会变动）的分页是没问题的，因为每条数据的顺序、数据的总量，都是不变的。

如果出现数据顺序变动或者数据总量变动的分页需求时，单纯的传page和limit已经不能解决了。不同的需求需要显示的列表也不一样。

关于列表分页主要关系到两个方面：

Ø总量（列表头插入了新数据）

Ø排列顺序

传统分页在总量不变，排列顺序不变的列表下是没有任何问题的，但只要这两个要素其中一个是变化的。

例如：

总量不变，排列顺序改变：排行榜

总量改变，排列顺序不变：文章留言列表

总量改变，排列顺序改变：评论列表（点赞数倒叙）

排行榜

现在有一个积分排行榜

假定每页显示3条数据，在某一时刻拿第一页数据时，得到 A、B、C三条数据。就在此时，用户D突然增加了100积分，最新的排行榜情况变成了

传统分页情况下，获取第二页数据时，从当前排行榜第四条数据开始获取，得到 C、E，用户看到的数据就变成 A、B、C、C、E。

C出现了2次，而且D消失了。这就是传统分页用在数据排列顺序会改变的列表时会出现的问题，因为列表顺序改变导致出现重复数据和丢失数据。

这种总量不变，排列顺序改变的分页问题暂时有两种方案解决：

一次性取出、

排行榜快照、通过变动记录表拿数据。

一次性取出（针对特殊需求）

这里说的一次性取出是针对类似“top100”这种取有限条数的需求。

在比较简单的列表数据结构下一次性取出100条数据对服务器性能来说问题不大，但是在复杂数据结构下（涉及关联多个表、数据格式化、数据处理等）一次性处理100或更多的数据是糟糕的做法。

排行榜主要的分页问题是影响排名的字段的值在不断变化导致列表顺序不断改变，我们现在可以一次性取出整个列表但是又担心复杂的数据结构导致服务器性能问题。

如果把整个功能拆分一下，用异步的思想来做这个功能设计如何呢？

分两个接口来做这个功能：获取排行榜列表和获取用户排行榜数据。

获取排行榜列表接口一次性取整个排名列表的用户ID和排名相关的字段数据，这样就保证了整个列表的排序是不变的同时，又不增大服务器性能。

获取用户排行榜数据接口 负责取排行榜要显示的用户的其他数据，这个接口接受多个用户ID的作为参数。

这个接口做了类似分页的功能，前端每次从排行榜中按分页的方式按顺序取部分用户ID，然后通过这个接口获取具体数据显示给用户。

下面以例子的方式来做具体说明：

这是一个积分排行 top100

这里的排行条件是 积分，那我们的 获取排行榜列表接口 只需要取“用户ID”和“积分”即可，剩下的 “昵称”、“胜率”等数据通过 获取用户排行榜数据接口获取。

前端先请求列表接口，获取到一下数据：

然后根据这个列表数据，先取前10条的用户ID：5、12、60、2、77… 请求获取用户排行榜数据接口，把获得的用户数据填充到排行榜中。

当用户下滑加载更多数据时再去列表取在11-20的用户ID重复上面的操作。

如果是 top100 的需求，这个方案是比较推荐的，因为没有性能和储存空间上的额外消耗。

排行榜快照（推荐）

因为考虑到主要问题出在排列顺序是变化的，而且通过其他APP也有看到过按时刷新的排行榜，所以想到了用快照的方式来解决。

可以通过写一个定时脚本，每5分钟生成一次排行榜的快照信息并存下来。接口请求时直接从快照中取数据，这一定程度上解决了列表排序一直在变化问题。

这里之所以说只解决了一定程度，是因为在每次刷新快照数据的时候，可能有用户刚好卡在这个时间点之间去请求（刷新快照前用户请求了第一页数据，刷新快照后用户请求第二页，这就出现传统分页同样的问题了）。

可以通过在快照中加上版本号来解决问题。

例如在生成快照的时候以当前时间戳作为版本号跟快照数据一起保存，同时需要系统保存多份快照数据以便用户获取旧快照数据。请求接口时默认拿最新版本的快照，如果接口传入了版本号就拿对应版本号的快照数据。

优点：

通俗易懂，传参方式跟传统分页类似。

请求处理效率高，生成快照时可以把数据进行处理再保存（例如日期格式转换、类型key值转类型名字等），使得请求到来时获取的数据可以直接返回给用户，无需再做处理。

易于测试和排查，在生成快照那一刻已经决定了整个列表的数据展示，测试和错误排查很方便。

缺点：

实时性比较差，用户拿到的数据不是最新的。

需要额外存储空间，需要额外的地方存储多个版本的快照数据。

需要定时器，对于本来存在定时器的系统架构，这一点不算缺点。

通过变动记录表拿数据

每个完备的系统都会有数据变动的记录表，用于追踪数据变动和操作明细。记录变记录着数据每次变动前后的变化和变动时间，这一特性为使得数据的每次变动都有迹可循，我们就是利用这一点来做排行榜的分页。

我们分页出问题的地方就是因为数据在不断变化导致排序不停改变。

上面说到每次数据变动都会有记录，那我们只需要根据某一时刻之前用户的数据来做排名，是不是就解决数据不断变动这个问题。

文字表达可能不太直观，看下面的数据演示应该能比较好理解。假定用户 A、B、C 初始默认都是100积分

表：score_log

表格中为了方便查看，用了varchar类型表示时间，在实际应用中应该使用int型来存储，因为需要加索引。

假定在03分的时候请求了数据，通过SQL语句就可以拿到03分之前的数据排行。

得到第一页数据：

第二页数据：

关于这种方式的请求，前端需要记录发起第一次请求时的时间，以后每页的请求都带着这个时间。

优点：

Ø无需额外存储数据，利用系统原有数据结构来解决数据变动问题，也无需做多版本控制。

Ø数据相对实时，每次拿到的排行榜数据都是请求第一页那一刻最新的数据。

缺点：

Ø效率相对较差，由于数据需要实时排序和获取，效率相比排行榜要低。而且上面例子只取了记录表中最基础的数据，实际需求中一般需要关联更多的表去取信息，所以效率将随着需求负责度增大而降低。

Ø只适用于用户量不大的情况，由于数据变动记录表的数据量随着用户量的递增是呈倍数递增的，所以用户量达到一定程度的情况下，这个方式效率会变得相当低。

文章评论列表

评论列表一般按照倒叙排列，而且顺序不变。因为是倒叙排列，所以最新的用户评论会放在最顶部，这就会导致问题了。我们还是用实际例子来说。

假定每页拿3条数据，此时请求第一页，得到ID分别5、4、3的评论。在请求第二页之前，突然又来了一条留言，此时列表变成：

用传统分页方式，此时获取第二页会得到ID 3、2、1，这里ID 3 就重复取出来了。

这个问题的解决方案相比排行榜列表分页问题简单而且易懂。评论ID是一个自增的字段，新的评论ID总是比旧评论ID要大，利用这一点我们可以很好的解决问题。

接口传参：

说一下lastid。当获取第一页数据时，因为没有上一页所以 lastid 传空或者不传，此时服务器取最新的数据即可。

获取第二页数据时，lastid 传第一页最后一条数据的ID，此时服务器取 ID 《 lastid 的数据，这就保证最新的评论不会影响到当前用户的分页。

这里做一个扩展，我们有时候看到某些页面在刷新的时候，会提示有多少条新的未查看评论（即列表头新的数据），这个功能的实现原理跟我们上面分页的原理差不多。

在获取第一页数据时，把第一页的第一条数据ID保存下来，后面请求每一页时都把第一条ID（firstid）带上，服务器每次查 ID 》 firstid 的数据条数，如果大于0即表示有新的评论。

评论列表（点赞数倒叙）

微博的评论排序也存在上面说到的分页bug，要完美解决这个需求的分页问题花费的代价（实现时间、服务器性能、存储空间等）大于功能本身，所以建议选择比较折中的方式来处理（与产品或上级沟通实现的难度）。

这个需求相比评论列表，多了点赞的功能，列表按点赞数量倒叙排列。

先说一下不严谨情况下这个分页的实现方式：

## 优先对点赞数量倒叙，再对评论ID倒叙 ##

这种方式会有两个问题：

1.评论点赞数的变化导致列表排序不断改变

2.新写的评论会影响列表的总量

可以沿用上面讲到的两个需求的解决方案。在解决列表排序问题上，沿用排行榜的通过变动记录表拿数据方式，增加一个表去记录评论的点赞变动记录（用空间换效率）。

优化:

1.分表:(固定某个表存多少数量的数据:例如:一张表存100w的数据量);

2.优化sql和建立适合的索引(复合索引);

3.使用redis缓存。(redis存一份ID.然后mysql存一份ID每次插入删除的时候同步即可。查询的时候只需要从redis里面找出适合的10个ID,然后到mysql里面查询出10条记录即可);

4.总数要单独处理:涉及到总数操作，专门维护一个总数。（例如:新注册一个会员,总数值加1，需要总数的时候直接拿这个总数,也可以在这个表上添加了触发器并创建一个专门用来统计总行数的表添加更新删除该表就会触发，分析条件后直接把统计表的相应字段累加,查询的时候直接读取统计表中的相应字段就可以了准确度没问题,如果有条件查询分页,那么分页表的数据就发挥不了左右)。

5.可通过定时任务去批量查询总数,例如:开启10个线程去批量计算总数,然后再各自相加即可,不过这样会导致内存(CPU)过高,而造成内存溢出。

6.修改原有界面内容,单独去查询总数,需要即去查询。也可以用ID建立一定的区间,比如查询最新的记录,每次只是查询2w条的记录。每次只要查最新的一条记录，id是自增字段，取当前的这个id值就可以大约知道总条数了（注意：项目里并不会删除参与记录）,但是这种不适合带条件的查询。

word中分页符怎么弄

word中设置分页符的方法是：

1、打开Word文档，将光标移动到需要插入分页符的地方。

2、点击“布局”，选择“分隔符”。

3、点击“分页符”，这样即可在光标位置插入分页符。

WPSforAndroid是WPSOffice的安卓版，WPSOffice是一款办公软件套装，可以实现办公软件最常用的文字、表格、演示等多种功能。内存占用低，运行速度快，体积小巧。具有强大插件平台支持，免费提供海量在线存储空间及文档模板，支持阅读和输出PDF文件，全面兼容微软Office97-2010格式（doc/docx/xls/xlsx/ppt/pptx等）。在2013年5月17日发布了WPS2013版本，更快更稳定的V9引擎，启动速度提升25%；更方便更省心的全新交互设计，大大增强用户易用性；随意换肤的WPS，四套主题随心切换（不含25周年纪念版和扩展主题，扩展主题需另行下载，25周年纪念版已在2014年01月01日绝版）；协同工作更简单，PC、Android设备无缝对接。

分页怎样处理才能对网站优化起到很好的效果

目前我们常见的分页处理大致分为这六大类：
第一种只有上一页先一页的分页处理，这种搜索引擎只能，一直重复下一页，下一页，无限循环才能让蜘蛛爬行到到最后的底层页面，对于读者的阅读也不是十分方便。
第二种只有1、2点击查看更多之后才能浏览更多的页面。
第三种图标分页设计，只适合比较少的分页设计，显得比较好看，但是并无分页关键字，对搜索引擎蜘蛛爬行造成极大不便。
第四种分页设计为国内日常常用搜索引擎的分页方式及大多数网站采用的分页模式，搜索引擎采用这种分页方式，因为自己对分页优化不是特别重视，而且搜索引擎蜘蛛本身为其公司自有产品，这点是不争的事实，况且百度及360对其搜索的优化程度并不大。简单的可以参照其URL地址。
第五种分页设计包含了首页末页以及以及点击页面为中间页5页的分页处理，对搜索引擎蜘蛛爬行能带来很好的指导作用，对于用户体验也是挺不错的。
第六种分页设计显示首页末页以及点击页面最近几页以及相邻十进制页面的分页处理，能让搜索引擎蜘蛛极其方便的爬行，而且对于用户体验应该是最好，他能随时跳转你想要查找的页面。
分页处理对搜索引擎优化最主要的作用就是方便蜘蛛快速有效的爬行到底层页面。