网页设计之分页导航设计

网页设计之分页导航设计

1、分页导航的长度

分页导航既不可过长，又不可过短。过长的分页导航，加重了用户的负担，而过短的分页导航，不能很好地起到导航的作用。百度和谷歌的分页导航页码数量都是10，360、bing、淘宝和亚马逊及京东都采用了可变长度的形式。360的起始长度为10，随着页面的下翻，分页页数逐渐增加，最终保持20页的长度；bing的起始长度为5，分页页数逐渐增加，最终保持9页的长度；而亚马逊最初只有4页，最后维持在5页的数量上；淘宝最初是5页，最终保持9页的长度；京东起始长度为4页，分页页数逐渐增加，最终保持8页的长度。

可以看到电子商务网站的分页导航页码数量普遍少于搜索引擎，最主要的原因当然是电商网站的搜索结果数量远远不及搜索引擎。其次因为电商网站主要是卖东西的，不是像搜索引擎把信息简单的呈现给用户，它们更愿意让用户仔细地浏览前面几页的商品，而不是引导用户随意地点击任意一个页面去查看商品。

2、是否需要首末页导航链接？

很多网站的分页导航中都没有首页和末页的链接,google、bing、360和百度这些搜索引擎没有首页和末页可以理解，因为搜索结果数量太大，页数太多，所以提供末页没有太大的意义，用户也看不到那么多去。并且他们的分页导航长度都至少在10页以上，而绝大多数用户都能在10页以内就能够找到自己想要的信息，如果前10页都没找到需求的信息，估计早就换搜索词了，所以“首页”链接意义不大。

而淘宝、亚马逊及京东这种电商网站，用户的商品信息需求更加个性化，对搜索准确性的要求不如搜索引擎那么高，用户更多的是进行对比，所以电商网站的用户所需要的商品信息更接近于平均分布到各个检索结果页中，而不是像搜索引擎那样集中在首页的导航里就可以解决需求。另外还有一种可能是，如果用户翻到一定页数时，发现结果越来越背离自己的需求或觉得还是最前面看的好，就可以直接点击“1”返回首页了，这就和“首页”链接是一个效果，同理上面几个电商网站的末页链接也很好的设置在了分页导航里面，和前面的“1”效果是一样的。

3、是否需要自定义页码

自定义页面对选项数目有限的分页来说是很常见的。淘宝、京东以及亚马逊以前都提供了这种导航方式。但是现在只有淘宝还存在，个人觉得在这种信息量很大的页面上，而且在用户不知道具体页码上的具体内容的情况下，这种自定义页面没什么效果，如果你的分页导航能够很好的进行远距离跳转，基本没有必要做自定义页码，如果分页导航相对比较简单，可以用这个弥补一下。另外如果你的产品确实比较多，并且想提高排名靠后的商品的曝光度，也可以有这个需要。

4、页码数字的间距

页码数字间距太小，用户容易误点击，而间距太大，会增加鼠标工作。google这一点似乎做得有些欠佳，出现双位数的页码后，google的分页导航显得就有些拥挤。难道是google为了保证每个页码数字都和分页导航上方的字母o对齐？

5、鼠标响应

鼠标划过或者点击页码时，页码应该有一定的响应，这样就能够提醒用户鼠标当前所划过或点击的页码。这一点上面所例举的网站都做得很好，这样用户能很好的知道鼠标所在的位置以及当前所点击的页面，能很好的加强用户的体验。

6、“上一页”和“下一页”

“上一页”和“下一页”一般分别放在页码导航的左端和右端，并且通常会有向左和向右的箭头来形象化地指引用户。“上一页”和“下一页”的位置也很重要，位置好相对固定，让用户可以很方便地在同一个位置使用上一页和下一页来进行页面切换。另外京东还在页面的右上角提供了简单的上翻和下翻功能，下面是完整的分页功能，上面是简化功能。产品页下面需要完整的分页功能很好理解，因为用户都是浏览完该页产品再翻页，所以把完整功能置于底部，但有很多时候用户看不到最低端就想翻页了，这个时候上面的简化分页就起到了很好的作用。

7、当前所在页

用户当前所在页的页码应该与其它页码的样式有所区别，以此来提示用户当前所在的位置，便于导航。这一点想必大部分分页导航都会这样设计。另外当前页应该是不可链接的，所以鼠标放上去之后，应该不会变成hover状态。而在京东的网页上，鼠标放到当前页上面时，当前页会像其它页码一样，背景变成蓝色，鼠标也会变成手指的形状，这样会误导用户，以为当前页是可以链接的。

值得一提的是新浪微博。新浪微博的默认方式是，随着用户向下浏览，自动加载两次，之后再出现分页。对于大多数用户，在闲暇时浏览微博，加载两次的内容已经能够满足他们，对于需要浏览更多信息的用户，也让他们知道自己到底浏览了多少。这种方式无疑更加灵活，既保证了用户浏览信息的连续性，又提供了快速导航和预估信息量的作用。

8、导航页码中的品牌宣传

看一下google 的导航页码上方是一个变形的 googlelogo，每个页码都对应 logo里面的一个字母o。用户甚至可以通过点击这些o来跳转到其对应的导航页码所在的页面上去。再看百度现在的新分页导航，每一个页码上面都有一个百度小熊掌，而且在当前页码上，上方还会变成一个点亮的大熊掌，这样每一次都是在很好的宣传品牌，另外配色也可以和品牌宣传结合起来。

本文名称：网页设计之分页导航设计
转载来源：https://www.cdcxhl.com/news/217769.html

成都网站建设公司_创新互联，为您提供品牌网站设计、响应式网站、网站内链、网站改版、用户体验、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联