网页设计中网页分页导航优化细节分享
author:一佰互联 2020-02-01   click:114
  在网站设计的过程中,导航系统可以说是最重要的一部分,一般情况下所有网站都会有导航系统,而提到网站的导航设计,分页导航可以说也是最常见、最重要的一种,随便点开一个网站基本都可以看到分页导航的存在。
  分页导航主要作用:
  告诉用户要浏览的信息量;
  让用户可以快速跳过一些不想看的信息;
  便于定位和查找;
  减少页面大小,提高加载速度;
  分页的使用可以增加每个用户的网站的综合浏览量;
  提高用户体验,通过分割用户需求信息的细化,提供更小的精华内容块,促进用户浏览页面内容的深入便捷度。
  此外,分页导航还给了用户一定的停顿,可以让产品“更有节奏感”,减少用户浏览的疲劳感。
  下面列出了几个网站的分页导航,根据这些导航特点分别从几方面谈一下分页导航的设计。
  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来跳转到其对应的导航页码所在的页面上去。再看百度现在的新分页导航,每一个页码上面都有一个百度小熊掌,而且在当前页码上,上方还会变成一个点亮的大熊掌,这样每一次都是在很好的宣传品牌,另外配色也可以和品牌宣传结合起来。
  写在最后
  在进行网站设计的时候,我们一切都是从用户需求的角度出发来进行思考和设计的。产品是需要同时满足用户需求和公司需求,所以有时候,不得不考虑其它的一些东西。比如内容页的分页导航,在你浏览某些新闻资讯类网站的时候,你会发现,每一页的内容只有可怜的一两段,然后就又得翻页,一篇不长的文章,被分割成了十几页,这种情况是属于内容页分页导航了,一般都是为了增加收录,增加pv量。但是这种内容页的分页导航往往也会有不利的因素:
  1.增加用户的无效点击,让用户感到厌烦,页面停留时间短,跳出率高。
  2.大量重复内容,页面标题与url意义多样化。
  3.页面图片alt属性的确定与添加,编辑人员工作量加大,网页加载服务器可能加大负载。
  4.页面核心内容相关性与下一页承载关系容易混乱,会导致索引擎抓取收录出错。
  5.分页会导致分散链接,权重分散,让搜索引擎不好判断第几页作为权重传递页面。
  所以分页有时是必要的,但也应谨慎使用。在一些情况下,它可在不修改您的网站的内部链接结构情况下实现你的内容更相关性类别的划分。如果操作不好对搜索引擎优化和用户体验有着严重的影响。并且如果文章内容足够长不方便阅读,且每一段都围绕着一个核心点,可独立支撑起一个页面内容量的情况下可以考虑分页使用,每个页面可以用标题(1)、标题(2)的形式,并且可以用标签代码来引导搜索引擎,这里就不多说了,总之纯粹为了增加网站 pv 而故意胡乱分割文章增加页数吸引用户点击的行为应该终止。


代表案例:气力输送系统www.qlssxt.cn 网站建设 万州律师www.wanzhoulvshi.cn 如何建网站?(www.vhost100.cn www.yx10011.com www.bagscm.com)