网站制作之什么是分页导航

在博客、杂志甚至是大多数站点中，分页的点击次数可能比搜索还要多，因为在很多时候，访客并没有明确自己的需求，只是在网页中一页接着一页的浏览信息，如果在分页上有良好的用户体验同时又能引导访客进行浏览，就能大大增加网站制作的黏性。但在很多站点中，分页并没有得到足够多的重视，即便是花时间来制作分页也不过是基于图标的样式和设计，对分页组件的整体理念并没有清晰的认识。

下面是几个关于几个分页导航的样式和细节：

在浏览网页时，经常会遇到分页导航的情况。分页导航主要有四个作用：告诉用户要浏览的信息量;让用户快速跳过一些不想看的信息;便于定位和查找;减少页面大小，提高加载速度。此外，分页导航实际上还给了浏览网页的用户一定的停顿，可以让产品“更有节奏感”，减少用户浏览的疲劳感。

下面以国内外常见的几个网站(主要为搜索引擎和电子商务网站)为例，分别从几个方面来谈一下分页导航的设计。

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 而故意分割文章增加页数吸引用户点击的行为真的是令人发指。

在这之前我们首先要明白的是“什么是分页导航”。在搜索引擎的搜索结果页中，“下一页”、“上一页”、“2”、“3”这样的链接就是一个分页组件，如果用户在第一页没有找到自己需要的信息则会下一页下一页地反复浏览页面，当然，如果用户迫切的需要找到一段时间以前的信息，也可能选择跳页，良好的分页设计就是能够在最少的时间内帮助用户到达他需要的页面。这其中包括一些基本的分页设计原则和技巧，虽然它们很微小但却常常成为新手最容易忽略的问题：

在原标签页中打开

听起来像是再简单不过的一件事，但确是新手最容易犯错的地方。可以想象一下如果当你点击“下一页”“上一页”这些按钮时，突然打开一个新的标签页，如果点击的太快还有可能打开多个标签页，不管网站内容本身有多好，当你反复的被这样的分页困扰时也没有兴趣再浏览下去。很多人习惯在中标注新窗口打开，在设计分页时就需要额外注意这点。

最后一页

在百度的搜索结果页和淘宝中，都能发现他们并不提供直接跳转到最后一页，一方面是数据本身很大不利于计算，一方面则是考虑到排名的有利性。在用户浏览时如果多出一个最后一页，我想很多人在反复找不到自己需要的信息也会从后往前找，但是在具有排名性的搜索结果中最好不要提供最后一页的选项，这样才能够规定用户必须是从前向后。想象一下如果存在“最后一页”的按钮，根据排名来算最后一页的信息肯定是低质的，当用户直接跳转到最后一页时会大大影响体验，对百度来说也不好在最后一页再搞上竞价。

当然这也是根据行业不同而有所区别的，比如一些资源网站，提供最后一页跳页等等翻页功能可能会对用户的浏览有帮助，如果你考虑是否要放置这样一个按钮也要结合实际的网站类型，并不是说取消“最后一页”的按钮就是最好的选择。

跳页

有过浏览论坛经验的朋友能发现在论坛中都会出现“电梯”“跳往几楼”之类的按钮，这有些类似于搜索的自定义选择，如果用户对他的信息检索排页方式不满意或者清楚的知道自己需要的信息大约在哪一页就会使用“跳页”，但也不是说跳页就是必须要有的功能，比如淘宝有按时间排列按销售排列这样的功能，跳页就能很好的展示商品，而搜索引擎则只是为了保证信息按质量和相关度排列，所以尽可能的简化操作取消跳页，他们的目的在于让用户从前几页中获取信息。

在添加跳页时也需要考虑用户的感受，特别是跳页后的确定按钮是否能够友好的点击到（不少论坛都很难点击），当激活跳页输入框时，按下Enter键要也可以触发事件，在浏览一定的页面之后才出现跳页输入框等等，用户虽然不会直观的明白你所有的细节，但他们能感受到一个网站是“好”还是“坏”。
快速返回首页

通常处理快速返回首页的办法是，在浏览到较多的页面时，将“1”代表的第一页独立出来，和最近展示的几个页码放在一起，用户当然知道这里的“1”就是直接跳往第一页。实际上这只有在列表页面和较多的展示内容时才会有所体验，很多开发者喜欢直接放上一个“首页”按钮，但相比较而言，在浏览之后才出现“1”这样的设计更能给用户好感。因为这样的“1”按钮在第一页时是默认不可点击作为页码显示，而“首页”这样的按钮如果频繁出现则会给用户造成选择上的困难，当你在一排中放上多个按钮，即便是每个按钮上都有明确的文字，也是在让用户选择，一个成功和具有高度用户体验的网站的要点就是，让用户尽快的明白自己要做什么，哪里才需要自己点击。

有的开发者也注意到几乎所有的搜索引擎都没有返回第一页的按钮，因为搜索引擎是按相关性排列的，当你浏览超过5页时可能这个搜索词就与你的预期结果有一定差距，这时用户会选择搜索引擎在分页旁边推荐的“相关搜索”和其他关键词进入其他页面。
整体的平衡性

当你留给分页组件一个足够大的区域时，你可能想设计拥有“上一页”、“下一页”、“跳页”等等按钮，在浏览多个页面时也给予用户选择第一页的权利，但要注意这时不能再展示过多的页码。想像一下，一个页面上有近十个页码，同时又有这些功能性的按钮，会严重干扰用户的选择。比如提供了前后各5页的展示还有跳页，当用户想要往后跳转7页时就有很多种选择，他既可以输入7来跳页，又可以先往后翻5页，也能先点击下一页浏览再点击页码跳页等等，这样的犹豫对于用户来说会很烦躁，有时候并不是留给用户的选择越多越好。

准确而精简的设计往往最能得到用户青睐的。

说起来这也不过是网站用户体验中的一小部分，我也没有系统的收集各方面的资料分析，只是分享一些自己的经验看法。仔细想想这些细节给用户带来的感受时，我更觉得开发者并不能只专注代码、运营、设计，要为用户考虑的更多，毕竟网站还是做给访客的，并不能看作开发者自娱自乐的产品。

对一些纯编程、后端、算法工作者转向前端或建站之类的工作来说，可能对代码倾注的注意力过大而导致网站太专业化，在同行业里固然是不错的作品甚至是艺术品，但对大众用户来说则并没有良好的体验。分页上的整体理念不过是站点的一个缩影，真正能拿出来说的干货并不多，只是借由这细微的一点来谈谈用户体验而已。