带页码的翻页体验与设计比较
写于 2007年01月19日 22:22 评论(17)
别看翻页就占那么点儿地方，它体现的是市场的策略、程序的算法和交互设计。我选择了 Amazon、Google、Flickr、新浪和淘宝这五个网站，体验他们的翻页设计。这几个站点应该还算有代表性，Amazon 是国外购物网站，Google 是搜索引擎，Flickr 是 Web 2.0 和 Yahoo 的代表，新浪是中国门户，淘宝是国内购物站点（同时还拥有优秀的设计团队）。
Amazon 商品列表页的翻页
- 是五个网站中唯一一个区分访问过、没访问过的链接的颜色；
- 不需要“上一页”、“下一页”的时候就不显示；
- 第一页的链接永远存在；
- 告知用户列表总数量和当前显示的数量（Amazon有些页面将数量显示在列表顶部）；
- 不提供所有的页，上图中 400 页是极限，400 页之后的内容可以通过分类选择来缩小范围（同时给出提示）。
Google 搜索结果的翻页
- 富有创意的设计；
- 不需要“上一页”、“下一页”的时候就不显示；
- “上一页”“下一页”的链接区域很大，容易点；
- 不提供所有的页，上图中 100 页是极限，100 页之后的内容或许可以更换关键词重新搜索，但是没有提示。
Flickr 照片列表的翻页
- “上一页”“下一页”永远显示，但不同情况显示不同样式；
- 按了“上一页”或“下一页”之后则边框加粗（成为重点），引导你继续往下点；
- 告知用户列表的总数量；
- 数量少得情况下，提供了“最后一页”的链接（图上没有）；
- 可以访问到所有的页，可惜如上图所示超过一定的页码，显示上有问题（IE 和 FF 都这样）。
新浪文章留言部分的翻页
- 新浪评论部分的翻页，Ajax 可以拖动翻页（显摆用的）；
- 永远提供“第一页”“最后一页”“上一页”“下一页”的链接，但是样式基本一致没有差别；
- 告知用户列表的总数量；
- 提供批量翻页（“上 10 页”）。
但是在新浪博客（新浪比较有代表性的新产品）中，我们也可以看到以下相对比较粗糙的翻页：
新浪博客的翻页
- 给出了“最后一页”的链接，直接显示为“第 n 页”，如上图中的“第 7 页”；
- 在单个博客页面上的翻页，以“>>”作为下一页，而不是常见的“>”；
- 提供了批量翻页（“上 5 页”）。
淘宝商品列表的翻页
- 永远显示“上一页”“下一页”，并且状态和形状有区分；上一页使用率较低，所以设计的较小；
- 永远提供“第一页”“最后一页”的链接；
- 提供页面的跳转，但是默认值为当前页；
- 在列表的顶部右侧提供了一个简化的翻页，并且与底部的翻页设计一致。
小结
- 必须提供“上一页”和“下一页”的链接，并根据状态和使用率区分设计；
- 数据量大且更新快的情况下，并且当列表按照特定排序时，一定要提供返回“第一页”的链接；“最后一页”的链接根据访问情况而定；
- 突出当前页的数字，并且尽量使页码容易点击（不要紧紧地靠在一起），也不要一下子把所有页码都显示出来；
- 一般不需要在列表的上下都提供翻页，增加程序负担并且干扰视觉；淘宝列表顶部提供的简化的翻页想法不错，但不知道使用率如何；
- 批量翻页是无意义的（但是可以增加 PageView），可以通过优化页码排列来替代；比如在当前页的左右两侧各提供一定数量的页码；
- 对于“第一页”和“最后一页”的链接，如果是在页码序列中显示，一般会附带显示第二页和最后第二页的链接，比如本文中的淘宝翻页的截图，显示为“1 2 ... 96 97”。如果单独提供，可能视觉上会以为这不是页码序列的一部分，特别是最后一页的数字，用户可能没有概念；
- 对于用户比较熟悉的内容，或者用户自己的内容，尽量提供“最后一页”的链接，比如 Flickr 对于个人照片就是这样处理的（文中的翻页取自某个 tag 的照片）。
如果可以通过数据确定用户的行为是较为随意和没有目的性的浏览，那么提供多种方式的翻页很有必要，比如提供跳转到固定页码。比较理性的行为，不会使用直接跳转到某页，因为无法知道那里是什么。
Shark 在白鸦的那篇淘宝的体验文章中回复到“有些东西出现在页面上是有很长的故事的，不便多说了。”我想来想去，写本文并且截图只是看看这些公司在细节上面是怎么处理的、是否用心设计，不存在绝对的对错。
数据很重要，我曾经做过一个活动广告，点击率大约是 1%，后来在广告上增加了“点击查看详情”，并且采用默认的蓝色加下划线的链接形式，点击率提高到了 10% 左右。
最后更新：2007-01-22 / 和 xiaoxiao 交流了一下，增加了本文小结第 6 和 7 点。
Warm Regards,
J.
J.
原文地址：http://www.junchenwu.com/2007/01/design_of_turning_pages.html
评论(17)
分析的不错, 细节决定成败!
淘宝是国内购物站点（同时还拥有优秀的设计团队）
不敢同意这个观点！一个只支持ＩＥ的网站，实在谈不上所谓的“设计”！如果用户都使用不了，何来“设计”二字。
to yyq: 淘宝只支持IE么？我在淘宝的交易全部是在 Firefox 下完成的。要怪，只能怪网上银行是 IE only 的。
淘宝还是做得比较好的，看得出来经过思考。
暂时来说...可用性、易用性是甜品...
我们希望每顿饭都能有好吃的甜品...
但不是每个餐厅都会做甜点。。。
而且重要的是...有好些中式餐厅即使没有甜品也很火...
希望甜品师们能越来越重要：）
在TaoBao发布商品时，有很多编辑功能无法使用，打客服电话确认Taobao不支持非IE的浏览器，至于什么时候支持说不知道。
我觉得，只有能用，才能可用！
To 小甲：我不知道，你是不是觉得盲道和无障碍设施，是不是也只是甜品？对于你可能无关紧要，而对于有些先天不足的人可能就是鸿沟。一个社会应该是有人文关怀，应该是平等的，而且对于所有人这些权利都应该是平等的。
国内的很多银行，也只支持IE，那其它人怎么用，我是在和银行交易？还是在和M$交易。在奢谈可用性之前，请先保证我能用好吗？
所以我觉得－－在评论或者赞赏某些网站时，应该排除那些限制用户的网站！
> 在TaoBao发布商品时，有很多编辑功能无法使用，打客服电话确认
> Taobao不支持非IE的浏览器，至于什么时候支持说不知道。
> 我觉得，只有能用，才能可用！
这点确实 Taobao 搞得有问题。但是“一个只支持ＩＥ的网站，实在谈不上所谓的“设计”！”这句话，有些伤人呐。
> 暂时来说...可用性、易用性是甜品...
即使是“暂时”，那也不对。对于可用性，是盛饭的碗，是产品的基础。对于易用性，同意 yyq 所说。
我们的兼容性要求是IE6、IE7和Firefox，前几天才把IE5.x去掉。如果有发现FF的兼容性问题，可以直接联系我。非常感谢！
这么细心！学习！转贴了：）
Good Topic!
Ajax Rolling 显摆用的...
这个，说老实话，我还是蛮喜欢的……只不过他们做的难堪了点儿。
看看www.getk2.com这个就不错~
很有用，参考了，谢谢！
好文，顶~
细致的分析和总结是提高的好途径，向你学习 呵呵
Shark 说：
我们的兼容性要求是IE6、IE7和Firefox，前几天才把IE5.x去掉。如果有发现FF的兼容性问题，可以直接联系我。非常感谢！
====
单单Taobao支持有什么用，Alipay不支持还是白搭
顶
奇怪了，有些图片不显是怎么回事，吴老大进来了就处理一下
1、不同的用户环境需要不同的翻页
2、数据很重要
很实在的经验，感谢分享！
分析的很细致，很受用。。。 谢谢