关于分页

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

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

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



设置场景去验证可用性。

1  用户模糊搜索一个关键字,往往会出现很多相关的结果。用户会逐页的去翻页去寻找,此时用户会使用“上一页、下一页”或附近的数字进行逐页检索。
根据心智模型 ,保持用户点击的连贯性。“上一页、下一页”距离相对固定,让用户使用上一页下一页不断切换时很方便;分页长度不宜过长,过长会导致用户视线游离;也不宜过短,过短会导致页码显示过少,给用户造成网站信息较少的错觉。
京东这一点可用性较好,“上一页、下一页”距离相对固定。同时页码数量显示适中。新蛋、淘宝距离不定且距离较长,容易使用户实现游离,可用性不好。


2  用户往往会选择根据价格从低到高排列或销量从高到低排列来作为自己的购买参考。用户翻页到后面20几页发现销量越来越不好,价格越来越高,此时他会想返回第一页去看。
此场景说明首页是有存在的必要
京东、苏宁没有给出回到第一页的快捷途径
上述例子中有2中快捷途径:
a / 第一页始终显示
b/给用户一个自定义页码,用户输入页码直达。


3  实际情况表明,在这种信息量大的页面上,
用户往往不知道具体页码上的具体内容,不会去自定义某个页码去查看,会逐页或间隔两、三页去查看 ,翻到一定页数时用户发觉结果越来越背离自己的初衷,所以会返回第一页或重新检索。同时要显示出最后一页,系统需要计算出所有的页数,在商品很多时,会导致页面性能降低。


在设计时,我们要注意:

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



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

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


谷歌图片检索的弱化分页,让用户顺着屏幕一直不间断的浏览下去,到轻博客点点网随着用户的滑动自动加载更多的内容,这些微妙的交互可以让我们的体验更加愉悦


也使我坚信交互设计师是可以用户做更多的,是很有价值的。


PS:祝全天下的父亲节日快乐。

29 Comments

  1. 好文章,转载到互联网的一些事(yixieshi.com)

    [回复]

  2. 水墨 说:

    你好,看到你这篇文章感觉蛮巧的,因为昨天我刚好也写了一篇关于分页的文章。http://www.shui-mo.com/2011/06/19/websitepage/ 这是我写的文章的地址。我个人觉得,不同类型的网站分页需求不太一样,你文章里大部分举例都是电商网站的分页,但是最后又出来个豆瓣,会不会有点不太合适。关于你文章里的其他观点我也是比较认同的,虽然分页只是个小模块,但是由于它是很常用,所以确实应该认真对待分页的设计。有空可以看看我那篇文章,欢迎批评指正:)

    [回复]

  3. Mouce 说:

    淘宝C2C的分页规范有误,文中所示是旧版本,新版本已经上线很久

    [回复]

  4. 原来这里是原创啊,我看了转载给的这个文章链接,才来的。

    [回复]

  5. Steven Kwok 说:

    不错,挺细致!

    [回复]

  6. 一个好的分页 首先应该是用户操作步骤要少
    能显示页面总数 能随意跳转
    当前页始终处于导航中部 上下按钮易点击

    [回复]

  7. 京东PD 说:

    京东的分页不是你图中所示,http://www.360buy.com/products/670-671-672-0-0-0-0-0-0-0-1-1-7.html 自己去看吧。

    [回复]

    admin 回复:

    @京东PD, 您好。我所截的是搜索结果页面,确实人图所示。你所列的是三级页面的分页。有所不一致。
    没说明清楚,敬请谅解

    [回复]

  8. 美搭商城 说:

    美搭购物狂商城_wo.meida5.com_ltj1pf人长得漂亮不如活得漂。

    [回复]

  9. 9a7d02cc4【爱淘百科3g.my580.com】,bs8y8e博主我看你气度不凡,谈吐间隐隐有王霸之气,日后必有一番作为|www.lolibao.com,支持你!bs8y8e

    [回复]

    admin 回复:

    @9a7d02cc4爱淘百科, 想法不错

    [回复]

    admin 回复:

    @admin, 支持

    [回复]

    admin 回复:

    @admin, 顶

    [回复]

    admin 回复:

    @admin, 你好

    [回复]

    admin 回复:

    @admin, 顶123

    [回复]

  10. 爱淘百科 说:

    [爱淘百科3g.my580.com]-在这个充满喜悦的日子里,我衷心祝愿你;愿将一份宁静和喜悦,悄悄带给你,博主给力!

    [回复]

  11. 爱加爱等于非常爱http://www.lolibao.com/?i0oe0k,爱减爱等于爱的起点,爱乘爱等于无限的爱,爱除爱等于惟一的爱。博主文章写的太好了!强烈支持……

    [回复]

  12. 爱淘百科 说:

    [爱淘百科 3g.my580.com/sitemap.php?n7lb77]-在这个充满喜悦的日子里,我衷心祝愿你;愿将一份宁静和喜悦,悄悄带给你,博主给力!

    [回复]

    admin 回复:

    @爱淘百科,测试

    [回复]

    admin 回复:

    @admin, 测试

    [回复]

    admin 回复:

    @admin, 呜呜呜呜呜呜呜

    [回复]

    admin 回复:

    @admin, 呆呆呆呆呆呆地

    [回复]

    admin 回复:

    @admin, 阿瑟斯

    admin 回复:

    @admin, 测试的大幅度的

    [回复]

  13. 台前论坛 说:

    [台前论坛www.tqlt.net]支持博主。
    台前论坛是河南台前第一大综合社区,包括音乐,影视,游戏,生活等,欢迎各方朋友加入。1pxn1t

    [回复]

    admin 回复:

    @台前论坛, 测试

    [回复]

  14. 减肥资讯 说:

    【jf.lolibao.com/update.html?a0gw1d】
    博主文章不错要支持,学习博客评论!要每日坚持一评论!

    [回复]

  15. 想法 说:

    天涯何处觅知音,博主的博客我很喜欢,文笔很好!

    [回复]

Leave a Reply