关于网站分页的那点事

本文所描述的分页是指电子商务网站的产品分页，如果想要直接了解本文的精髓，请直接参照下面的附图，不言自明。

电子商务网站的产品分页设计是很小块的设计，绝大多数的网站不会在这里花费什么精力，但是，如果能在细节上做的更贴心一些，对用户的购买体验还是有所提升的，毕竟用户每次购买都会多次使用该功能模块。

首先要说的是，分页是用户普遍接受的产品页面浏览方式，设计也是大同小异，用户的学习成本为零。

现在的电商网站通常选择在产品页的上下部分均放置分页，下面是完整的分页功能，上面是简化功能。产品页下面需要完整的分页功能很好理解，因为用户都是浏览完该页产品再翻页，所以把完整功能置于底部。那什么时候用户需要在产品页上面使用分页功能呢？那是在用户不想看产品页内容就翻页的时候，是在用户想了解自己所处位置的时候，另外由于产品页上部的分页模块常常和产品筛选条件模块放于一处，所以这里的功能需要尽量简化、节约空间，好的设计可参照下图中的乐淘，如果用户体验做的更好一点，这里可以再加入产品页第一页的链接，毕竟用户返回第一页的需求是硬性需求。

对于产品页下部的分页设计，各个网站最大的区别就是是否放置自定义选择页的设计。用户看页面的习惯分两种，一种是按照顺序往后看的，另一种是挑页面去看的。由于现在电商网站的产品筛选条件比较丰富，用户很少从后面的产品页往前面的产品页浏览或是直接看中间的产品页，如果网站没有要增强后面产品的曝光需求，可以拿掉自定义选择页模块（注：淘宝应该还是很需要这个模块的）。

在产品页比较多的情况下，用户浏览到中间的页面会出现如何进行分页导向的问题。解决办法分两种，一种是中间放置五个页码，两边是开始页和最后页，中间省略号，此类做法可以参照下图中的乐淘分页设计，令一种做法是类似淘宝、当当的设计，由于已经有自定义选择页设计，可以简化前面页码，省略掉一个省略号以及第一页的页码。两者的结合体可以参见下图中的1号店和凡客，看起来元素有点冗余了。

另外，从方便用户使用的角度来说，分页的页码点击区域应该大一些，反例请参考下图的凡客，在凡客你必须把鼠标移到页码的数字上面才可以点击，悲剧。

产品分页可以说的内容不是太多，暂时先说到这里，关于电商网站的设计文章会陆续出炉，欢迎关注：）

常见电子商务网站产品分页说明图

来源：http://www.shui-mo.com/2011/06/19/websitepage/

今天小池提出一个问题讨论，如何使分页做的更友好。做了一些调研和思考，做了些总结。

分页在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。我们在设计时要考虑：

• 分页的长度
• 首末页存在的必要
• 自定义页面的必要

设置场景去验证可用性。

1  用户模糊搜索一个关键字，往往会出现很多相关的结果。用户会逐页的去翻页去寻找，此时用户会使用“上一页、下一页”或附近的数字进行逐页检索。
根据心智模型 ，保持用户点击的连贯性。“上一页、下一页”距离相对固定，让用户使用上一页下一页不断切换时很方便；分页长度不宜过长，过长会导致用户视线游离；也不宜过短，过短会导致页码显示过少，给用户造成网站信息较少的错觉。
京东这一点可用性较好，“上一页、下一页”距离相对固定。同时页码数量显示适中。新蛋、淘宝距离不定且距离较长，容易使用户实现游离，可用性不好。
2  用户往往会选择根据价格从低到高排列或销量从高到低排列来作为自己的购买参考。用户翻页到后面20几页发现销量越来越不好，价格越来越高，此时他会想返回第一页去看。此场景说明首页是有存在的必要
京东、苏宁没有给出回到第一页的快捷途径
上述例子中有2中快捷途径：
a / 第一页始终显示
b/给用户一个自定义页码，用户输入页码直达。
3  实际情况表明，在这种信息量大的页面上，用户往往不知道具体页码上的具体内容，不会去自定义某个页码去查看，会逐页或间隔两、三页去查看 ，翻到一定页数时用户发觉结果越来越背离自己的初衷，所以会返回第一页或重新检索。同时要显示出最后一页，系统需要计算出所有的页数，在商品很多时，会导致页面性能降低。

在设计时，我们要注意:

• 少就是多，精简。避免花哨
• 以方便用户使用最先。避免为交互而交互

优点，符合用户在模糊结果是翻页的情景，视觉焦点相随聚集；始终显示第一页，给用户快速回来的途径；用用省略号表示还有没有显示出来的页面，引导用户去查看；交互方式良好，做到了精简，没有附加花哨交互。

根据上述理由，以及苏宁VI色，给出苏宁易购分页的优化方案，抛砖引玉。求PK，求调教…

从谷歌图片检索的弱化分页，让用户顺着屏幕一直不间断的浏览下去，到轻博客点点网随着用户的滑动自动加载更多的内容，这些微妙的交互可以让我们的体验更加愉悦
也使我坚信交互设计师是可以用户做更多的，是很有价值的。

来源：http://www.ue-ui.com/about-page.html

© 推荐 for 互联网的那点事, 2011. | Permalink | 4 comments | Add to del.icio.us
Post tags: 交互设计, 用户体验

你可能也喜欢：
Facebook计划收购位置社交网站“烫手土豆（Hot Potato）” (@36kr)	HowMutch: 面向品牌公司的社交问答网站 (@36kr)	网易网站设计(思想)	2010年最佳Flash网站	未来社交网站的5大趋势
无觅

Feed enhanced by Better Feed from Ozh