时间： 15:37 来源： 作者：佚名
　　在浏览网页时，经常会遇到分页导航的情况。分页导航主要有四个作用：告诉用户要浏览的信息量;让用户快速跳过一些不想看的信息;便于定位和查找;减少页面大小，提高加载速度。此外，分页导航实际上还给了浏览网页的用户一定的停顿，可以让产品&更有节奏感&，减少用户浏览的疲劳感。
　　下面以国内外常见的几个网站(主要为搜索引擎和电子商务网站)为例，分别从几个方面来谈一下分页导航的设计。
　　1：分页导航的长度
　　分页导航既不可过长，又不可过短。过长的分页导航，加重了用户的负担;过短的分页导航，不能很好地起到导航的作用。
　　淘宝和京东的分页导航页码数量为6，Google、Bing 和 Yahoo 是10。百度和亚马逊采用了可变长度的形式。百度的起始长度为10，随着页面的下翻，分页页数逐渐增加，最终保持20页的长度;而 Amazon 最初只有4页，最后维持在5页的数量上。
　　Google的分页导航
　　Bing的分页导航
　　Yahoo的分页导航
　　百度的分页导航
　　Amazon的分页导航
　　淘宝的分页导航
　　京东的分页导航
　　可以看出，电子商务网站的分页导航页码数量普遍少于搜索引擎。最主要的原因当然是电商网站的搜索结果数量远远不及搜索引擎。其次，因为电商网站主要是卖东西的，相对于以把信息呈现给用户为目标的搜索引擎来说，它们更愿意让用户仔细地浏览前面几页的商品，而不是引导用户随意地点击任意一个页面去查看商品。
　　2：是否需要首末页导航链接
　　Google、Bing、Yahoo、Amazon、百度、淘宝、京东这几个网站的分页导航中都没有首页和末页的链接。
　　Google、Bing、Yahoo 和百度这些搜索引擎没有首页和末页，我们可以理解，因为搜索结果数量太大，页数太多，所以提供末页没有太大的意义。并且他们的分页导航长度都在10页以上，而用户很有可能在10页以内就能够找到自己想要的信息，即使找不到，也可以通过点击第1页方便地回到首页，所以&首页&的链接用处不大。
　　而 Amazon、淘宝和京东这种电商网站，用户的商品信息需求更加个性化，对搜索准确性的要求不如搜索引擎那么高。所以电商网站的用户所需要的商品信息更接近于平均分布到各个检索结果页中，而不是像搜索引擎那样集中在首页。另外，还有一种可能是，如果用户翻到一定页数时，发现结果越来越背离自己的需求，通常会修改搜索条件(如限定男装、女装、品牌等)，或者重新搜索。
　　此外，以上两类网站的共同点是，搜索结果里面的链接默认会在新窗口中打开，所以，如果用户浏览到后面的页面时，又想再浏览首页中的商品信息或搜索结果，可以通过切换窗口来实现(前提是你没有关闭窗口的强迫症)。
　　3：是否需要自定义页码
　　自定义页面对选项数目有限的分页来说是很常见的。淘宝和京东都提供了这种导航方式。但是，我觉得，在这种信息量很大的页面上，用户往往不知道具体页码上的具体内容，所以不太可能自定义某个页码去查看。我们可以把淘宝和京东提供的这种功能理解为对没有在导航页码中放&首页&链接的一种补充。另外，电商网站提供这种自定义页码功能，也可以提高排名靠后的商品的曝光度，从电商平台的角度出发，这也是一种需要。
　　4：页码数字的间距
　　页码数字间距太小，用户容易误点击;间距太大，会增加鼠标。在这一点上，Google 似乎做得有些欠佳。出现双位数的页码后，Google 的分页导航显得有些拥挤。我们姑且可以将这理解成是 Google 为了保证每个页码数字都和分页导航上方的字母o对齐。
　　出现两位数页码后，Google 的页码数字间距太小
　　5：鼠标响应
　　理想状况下，鼠标划过或者点击页码时，页码应该有响应。这样能够提醒用户鼠标当前所划过或点击的页码。当鼠标划过页码时，淘宝是将对应的小方框加上橘黄色 border，京东是将对应的小方框变成蓝色，百度和 Bing 是将对应的小方框变成灰色，而谷歌是将对应的页码数字加上下划线。当鼠标点击时，百度和 Google 会将对应的页码数字变为红色。
　　以上处理方法应该都是正确的，但 Google 的处理方式有点让人不解。给链接加上下划线，本来是 HTML 的默认处理方式，以此来提醒用户这是一个链接，这种方式貌似是万维网之父 Tim Berners Lee 所定义的。但是，随着用户对网页的熟悉，很多时候即使不加下划线，用户也知道那是个链接。我记得6月份的时候，新浪就去除了其首页所有链接的下划线，那时我还真感觉页面清爽了许多，可没过多久，它又给加上了。再回过头来，看 Google 的导航链接，鼠标放上去的时候会出现下划线，就连&上一页&和&下一页&这两个链接也有下划线。我个人觉得，这可能是没有必要的，因为绝大多数的用户其实已经知道那是一个可以点击的链接了。也许 Google 又是在用这种复古的风格来彰显与众不同吧。反正复古和潘烤鸵徊街！
　　6：&上一页&和&下一页&
　　&上一页&和&下一页&一般分别放在页码导航的左端和右端，并且通常会有向左和向右的箭头来形象化地指引用户，如 Yahoo、Amazon、百度、淘宝和京东。
　　&上一页&和&下一页&的位置也很重要。位置最好相对固定，让用户可以很方便地使用上一页和下一页来进行页面切换。在这一点上，上述几个网站都做得不错。而百度的前 20 页分页页码会随着页码的下翻而向右移动，这一点体验并不是太好。可能百度的出发点是想让用户在20页之内方便地进行页面的切换。
　　另外，淘宝和京东还在页面的右上角提供了简单的上翻和下翻功能。下面是完整的分页功能，上面是简化功能。产品页下面需要完整的分页功能很好理解，因为用户都是浏览完该页产品再翻页，所以把完整功能置于底部。那什么时候用户需要在产品页上面使用分页功能呢?可能是在用户不想看产品页内容就翻页的时候，可能是在用户想了解自己所处位置的时候。另外由于产品页上部的分页模块常常和产品筛选条件模块放于一处，所以这里的功能需要尽量简化、节约空间。此外，淘宝和京东还在此处显示了搜索结果的总页数，可能是为用户提供是否重新输入检索词或者修改搜索条件的决策支持信息。
　　淘宝页面右上角的简单翻页功能
　　京东页面右上角的简单翻页功能
　　7：当前所在页
　　用户当前所在页的页码应该与其它页码的样式有所区别，以此来提示用户当前所在的位置，便于导航。Google、Bing、Yahoo 和百度都使用了黑色的字体来表示用户当前所在页的页码，京东用了橘黄色的字体来表示，而淘宝将当前所在页的小方框背景设置为黄色。
　　另外，当前页应该是不可链接的，所以鼠标放上去之后，应该不会变成 hover 状态。而在京东的网页上，鼠标放到当前页上面时，当前页会像其它页码一样，背景变成蓝色，鼠标也会变成手指的形状，这样会误导用户，以为当前页是可以链接的。
　　值得一提的是新浪微博。新浪微博的默认方式是，随着用户向下浏览，自动加载两次，之后再出现分页。对于大多数用户，在闲暇时浏览微博，加载两次的内容已经能够满足他们，对于需要浏览更多信息的用户，也让他们知道自己到底浏览了多少。这种方式无疑更加灵活，既保证了用户浏览信息的连续性，又提供了快速导航和预估信息量的作用。
　　新浪微博信息流中的页码导航
　　8：区分访问过/未访问过的页码
　　按照 HTML 的默认设置，访问过和未访问过的链接颜色是不同的。但是，上述网站中，只有百度和 Bing 将访问过和未访问过的页码导航链接用颜色区分出来了。我个人认为做这一区分是有必要的，尤其是当我用搜索引擎搜索信息的时候。
　　9：导航页码中的品牌宣传
　　前面提到过，Google 的导航页码上方是一个变形的 Google Logo，每个页码都对应 Logo 里面的一个字母o。用户甚至可以通过点击这些o来跳转到其对应的导航页码所在的页面上去。
　　另外，配色也可以和品牌宣传结合起来。Google 的导航页码的蓝色和其Logo 中的G和g的颜色很相近，百度的导航页码上方显示的是百度的Logo，京东的导航页码中使用的橘黄色和蓝色是其 Logo 的主要颜色，淘宝的导航页码中使用的橘黄色也是其 Logo 以及网站的主要颜色。
　　10：其它
　　在进行产品设计的时候，我们一切都是从用户需求的角度出发来进行思考和设计的。但是，产品是同时满足用户需求和公司需求(通常是盈利)的东西，所以，有时候，不得不考虑其它的一些东西。比如，在你浏览某些新闻资讯类网站的时候，你会发现，每一页的内容只有可怜的一两段，然后就又得翻页，一篇不长的文章，被分割成了十几页。这种为了增加网站 PV 而故意分割文章增加页数吸引用户点击的行为真的是令人发指。
围观: 9999次 | 责任编辑：坐怀不乱
您可以分享到:
21507 人浏览
27451 人浏览
15256 人浏览
13353 人浏览
3028 人浏览
本站由七牛提供云存储突然很多网页不能用翻页功能了，求帮助…
一直都用的很顺畅，前两天突然很多网页都不能用翻页功能了。将所有的翻页选项全部打上了勾，还是一个都不能用。网页页面也与之前不同，貌似被缩放了。可是恢复默认设置也没用。求教导……
该帖共收到 10 条回复！
发表于 日 20:43
就像百度搜索的页面还是可以翻页的，但是到百科，知道就不行了
发表于 日 20:44
那是百度的问题
发表于 日 20:44
uc阅读或者求助之类的如现在的页面也可以翻页
发表于 日 20:47
RE: 突然很多网页不能用翻页功能了，求帮助…
一毫米微蓝 发表于 日 20:44
那是百度的问题
其他的很多也不行啊。
发表于 日 20:50
RE: 突然很多网页不能用翻页功能了，求帮助…
一毫米微蓝 发表于 日 20:44
那是百度的问题
而且，明明之前一直都正常的。
发表于 日 20:54
uc大全里，点到细的分类也没法翻页了…
发表于 日 21:00
RE: 突然很多网页不能用翻页功能了，求帮助…
pilot6 发表于 日 20:58
特别是触屏翻页，更容易失效
习惯翻页了，突然不行很不习惯啊…
发表于 日 21:13
RE: 突然很多网页不能用翻页功能了，求帮助…
pilot6 发表于 日 21:04
看我上报的。/thread--1.html
发表于 日 22:12
不能翻页的还是不能翻页啊…
发表于 日 13:59
友友好，如果您发现有网页不能翻页，希望您可以提供具体的链接给我们测试哦，麻烦友友您啦，如果测试重现，我们会上报问题的，期待您的反馈O(∩_∩)O~JSP及JSP页面的翻页_JSP教程_编程技术
您的位置： &
& JSP及JSP页面的翻页
js|翻页|页面
在以列表的形式显示数据时需要对页面进行翻页控制，基本在项目的各模块中都会用到。为了最大限度地实现翻页的可重用和易移植，利用组件的形式对翻页逻辑进行封装。 翻页控制器的分析 描述： 翻页控制器用来实现对WEB页面的翻页内容的显示和翻页的各种操作的控制。通过JSP调用，将分页内容显示到WEB页面。它支持多种方式和风格的显示。 翻页控制器的设计 下面分别创建翻页控制器的一个PageConfig类、一个Page类、一个PageView类。 ? PageConfig.java 类 类 PageConfig 声明 public class 描述 这个类用来保存页面属性的值,如每页显示几行等。 超类 执行 属性描述 属性 属性描述 定义 [PageConfig] |--PAGE_SIZE 页大小 public static final int |--PAGE_SIZE_SMALL 小型页面的大小 public static final int |--PAGE_SIZE_NORMAL 正常页面的大小 public static final int |--PAGE_SIZE_BIG 大型页面的大小 public static final int |--PAGE_SIZE_BIGGER 较大页面的大小 public static final int |--PAGE_SIZE_BIGGEST 最大页面的大小 public static final int ? Page.java 类 类 Page 声明 public class 描述 这个类用来保存页面属性的值,如每页显示几行等。 超类 执行 java.lang.Serializable 属性描述 属性 名称 属性描述 数据类型 |--EMPTY_PAGE 空白页面 描述一个空白页面，即不含内容的页面。 Page对象 |--objects 结果集列表 结果集列表 java.util.List或java.util.Vector |--start 开始记录号 开始记录号，从0开始 正整数和0 |--end 结束记录号 结束记录号 正整数和0 |--viewStart 显示在页面开始记录号 显示在页面开始记录号，从1开始 正整数 |--viewEnd 显示在页面结束记录号 显示在页面结束记录号 正整数 |--hasPrevious 是否有上一页的开关 是否有上一页的开关 布尔值 |--previousPageNumber 上一页的页码 上一页的页码 正整数和0 |--hasNext 是否有下一页的开关 是否有下一页的开关 布尔值 |--nextPageNumber 下一页的页码 下一页的页码 正整数和0 |--total 总行数 一共有多少行记录 正整数和0 |--totalPage 总页数 一共有多少页 |--currentPageNumber 当前页 描述当前是第几页 正整数和0 |--pageSize 页大小 描述每页有多少行 正整数和0 构造器 构造器 构造器描述 参数 [Page] |--Page(List l, int s, boolean hasNext) 创建页面 l 结果集s 开始记录号，从0开始hasNext 是否有下一页的开关 |--Page(List l, int s, boolean hasNext, int total) 创建页面 l 结果集s 开始记录号，从0开始hasNext 是否有下一页的开关total 一共有多少行记录 |--Page(List l, int s, int size, boolean hasNext, int total) 创建页面 l 结果集s 开始记录号，从0开始size 每页有多少行hasNext 是否有下一页的开关total 一共有多少行记录 |-- Page(List l, int num, int size, int total) 创建页面 l 结果集num 当前是第几页size 每页有多少行total 一共有多少行记录 |-- Page(List l) 创建页面,不进行分页 l 结果集 方法 方法 方法描述 返回值 [Page] |--autoCalculate () 自动计算，根据当前页、页大小、总行数计算出其它属性的值 private void |--getList() 获得结果集 public List |--getViewStart() 获得显示在页面的开始记录号，从1开始 public int |--getViewEnd() 获得显示在页面的结束记录号 public int |--hasNextPage() 是否有下一页 public boolean |--hasPreviousPage () 是否有上一页 public boolean |--getPreviousPageNumber () 获得上一页的页码 public int |--getNextPageNumber () 获得下一页的页码 public int |--getTotal () 获得结果集中记录总行数 public int |--getTotalPage () 获得总页数 public int |--getCurrentPageNumber () 获得当前页码 public int |--getPageSize () 获得每页多少行记录 public int |--getStartOfNextPage () 获得下一页在结果集中开始的记录号，从0开始 public int |--getStartOfPreviousPage () 获得上一页在结果集中开始的记录号，从0开始 public int |--getSize() 获得当前页包括的记录行数 public int |--isEmpty() 判断当前页面是否是空白页面,如果当前页面是空白页面,返回true,否则,返回false public boolean PageView.java 类 类 PageView 声明 public class 描述 通过JSP调用，将分页内容显示到WEB页面。不支持图片、按钮等，只支持文字。用法:在JSP页面按如下形式定义:&% PageView view = new PageView(request,out,page); %&按缺省形式显示&% view.setVisible(true); %&按指定形式显示&% view.setVisible(true,0,1); %& 超类 执行 属性描述 属性 名称 属性描述 数据类型 [PageView] |--currentUrl 当前页面的URL 当前页面的URL 字符串 |--style 风格 风格 字符串 |--useSquareBrackets 是否加[]的开关 在&上一页&两边是否加上&[&和&]& 布尔值 |--page WEB页面 WEB页面 Page对象 构造器 构造器 构造器描述 参数 [PageView] |-- PageView (HttpServletRequest request,JspWriter out,Page page)) 创建一个分页内容 request 客户端请求out 页面输出对象page WEB页面 方法 方法 方法描述 返回值 [PageView] |--setVisible(boolean visible) 按缺省形式显示分页内容,如果visible为true,则显示分页内容,否则,不显示分页内容 public void |--setVisible(boolean visible,int style,int order) 按指定形式显示分页内容,如果visible为true,则显示分页内容,否则,不显示分页内容 public void |--setVisible(boolean visible,boolean useSquareBrackets,int style,int order) 按指定形式显示分页内容,如果visible为true,则显示分页内容,否则,不显示分页内容 public void |--viewPage(boolean useSquareBrackets,int style,int order) 按指定形式显示分页内容,order为0,表示完整形式,按如下顺序显示:共计:18 分页:2 当前页:1 每页:10 首页 前页 后页 尾页 转到□□□□order为1,表示简洁形式,按如下顺序显示:前页 后页 尾页 1/2order为2,表示完整形式2,按如下顺序显示:共计:18 每页:10 转到□□□□ 首页 前页 后页 尾页 1/2 public void 翻页控制器的编码 只需按翻页控制器的设计进行编码，这里不用再讲了。 翻页控制器组件的源代码 a)PageConfig.java b)Page.java c)PageView.java 源代码：立即下载 翻页控制器的调用 翻页控制器的调用实在太简单了，调用方法： ? 导入翻页控制器包 &%@ page import=&java.util.List,com.cwap.oa.controller.web.page.Page,com.cwap.oa.controller.web.page.PageView&%&? 创建一个Page对象，Page.EMPTY_PAGE为空白页面 Page page = Page.EMPTY_PAGE;? 创建一个PageView对象 &% PageView view = new PageView(request,out,page); %&? 显示分页的内容： 按缺省形式显示 &% view.setVisible(true); %&按指定形式显示 &% view.setVisible(true,0,1); %&? 调用翻页控制器的例子 下面是在论坛板块中的一个JSP中调用的示例，用来显示所有的论坛板块列表，下面只列出部分代码： &%@ page language=&java&%&&%@ page contentType=&text/ charset=GBK&%&&%@ page import=&java.util.List, com.cwap.oa.controller.web.page.PageView,com.cwap.oa.controller.web.page.Page&%&&jsp:useBean id=&forumBoardHelper& scope=&page& class=&com.club8090.forum.forumboard.client.ForumBoardClientHelper&/&&%String tmp=request.getParameter(&pageNumber&);int pageNumber = 0;if(tmp==null || tmp.equals(&&)){pageNumber = 1;}else{try {pageNumber = Integer.parseInt(tmp);}catch(java.lang.NullPointerException npe){pageNumber = 1;}catch(java.lang.NumberFormatException nfe){pageNumber = 1;}}Page page = Page.EMPTY_PAGE;//page初始化为Page.EMPTY_PAGE空白页面page = forumBoardHelper.getAllForumBoards(pageNumber);%&…&table&&tr&&td&NO.&/td&&td&名称&/td&&td&描述摘要&/td&&/tr&&%List items = page.getList();if( items.isEmpty() ) {out.println(&&tr colspan=3&没有记录存在&/tr&&);}else{//页面中显示的行数for (int i = 0; i & items.size(); i++) {ForumBoardModel forumBoardModel = (ForumBoardModel)items.get(i);no = page.getViewStart() +%&//显示记录列表&tr&&td&&%= no %&&/td&&td&&%= forumBoardModel.getName() %&&/td&&td&&%= forumBoardModel.getSummary() %&&/td&&/tr&&%}PageView view = new PageView(request,out,page);view.setVisible(true,0,1);}%&&/table&…　
( 09:59:00)
( 18:16:35)
( 12:01:37)
( 22:52:03)
( 11:26:36)
( 15:35:08)
( 13:45:35)
( 17:18:00)
相关排行总榜关于浏览网页翻页快捷键的问题
关于浏览网页翻页快捷键的问题 10
每次翻页都要用鼠标去找&下一页&,再猛击一下，好麻烦，用键盘可以控制吗？如何可以，下一页翻页的快捷键是什么？
有的网页可以用方向键来控制翻页，可大部分是不能的，好像和网页编辑者设置有关吧，我也不太懂。不过在浏览网页需要翻页的时候，可以试试用方向键（一般是左，右键），看能不能用来翻页
其他回答 (1)
提供几种方法

1
空格就可以
空格最快，不过空格只能向下
pageup
pagedown

2
如果你是通过GPRS连接
用ucweb

3
IE快捷键： 
F11：在全屏幕和常规浏览器窗口之间进行切换 
TAB：在WEB页，地址栏和链接栏中向前移动到下一个项目 
shift+Tab：在web页，地址栏和链接栏中向后返回到上一个项目。 
Alt+home:进入你的主页。 
Alt+向右箭头：转到下一页 
Alt+向左箭头或backspace：返回前一页 
shift+F10:显示某个链接的快捷菜单 
ctrl+Tab或F6:在不同框架之间向前移动。 
shift+ctrl+Tab:在不同框架之间向后移动。 
向上箭头：向文档塌始处滚动。 
向下箭头：向文档结尾处滚动。 
Page up:向文档起始处翻页 
Page Down:向文档结尾处翻页 
hone:移动到文档的开头 
end:移动到文档的结尾。 
ctrl+F:在web 页中查找。 
F5或ctrl+R：仅当Web上的页面与本机存储的Web页时间戳不同时，才刷新当前页 
ctrl+F5:即使web上的页面与本机存储的web页时间戳相同，仍然刷新当前页 
Esc:停止下载Web页 
Ctrl+O或ctrl+L：转到新位置并且不保存在地址栏中。 
ctrl+N:打开新窗口 
ctrl+W:关闭当前窗口 
ctrl+S:保存当前页 
ctrl+P:打印当前页或当前框架。 
ctrl+E:在浏览器中找开搜索页。 
ctrl+I:打开收藏夹 
ctrl+H:打开历史记录。 
ctrl+向左箭：在地址栏中时，将光标左移到相邻的逻辑分隔符（。或/） 
ctrl+向右箭：在地址栏中时，将光标右移到相邻的逻辑分隔符（。或/） 
ctrl+enter:在址栏中将“www.“添加到键入的文本的前面，将“.com&添加到文本的后面(只适用于IE5). 

相关知识等待您来回答
互联网领域专家
& &SOGOU - 京ICP证050897号【导读】道具页面翻页方法。问：道具页面满了怎么翻页啊，或怎么往下拉能看到下面的道具？答：不能拉，你可以把不需要的卖掉，比如贵重物品，300多块1个。一点用都没有，只有卖钱。相关攻略推荐：◆◆◆◆
像素海盗，道具
1、如果您未安装91盒子，请选择“游戏高速下载”。2、安装好91盒子客户端后，请重启浏览器，点击“高速下载”按钮盒子将自动下载游戏。
热门游戏专题
猜你喜欢的游戏
<a href="/game/1232.html" target="_blank" title="红色警戒2尤里的复仇红色警戒2尤里的复仇}