翻页 - UCD大社区

简化翻页提升可用性

千鸟 — 2009-03-12 20:24:35

去年曾针对有时间先后的翻页记录了思考片段。之后没来得及调整一直是默认和插件并用，虽然难看但似乎可用性还凑合，没空所以没改。今天给WP-PageNavi升级偶然看了看结构代码，发现还算比较灵活，于是花了点时间尝试调整。

感觉用户对wordpress默认的翻页并不是很排斥，但个人认为wp-pagenavi默认的效果还不如wordpress。这类增加了可点击范围的方框链接中规中矩，更适合CMS系统，并且也不融于我当前的设计风格。下边个效果好点，但点“下一页”还是不方便，而且语言传达太啰嗦。

还好wp-pagenavi字符集开放很彻底，之前也尝试了2个数字效果，不过发现链接是多余，于是干脆精简到只显示1个数，很类似把默认的newer和older换成数字。如果把“下一页”换成英文Older Entries，正好保证时间传达的清晰准确。比较遗憾的是，链接不能控制title，先用看。

相关话题：翻页源地址：http://blog.rexsong.com/?p=5853

细节设计（一）-----页码

mooqii — 2009-01-22 14:42:45

1.让下一页更容易点击

对于浏览器来说后退按钮比前进按钮使用频率更高，firefox3优化了前进后退按钮。

对于网站来说，下一页比上一页使用更频繁，我们也可以借鉴firefox的设计思路来优化页码

2.原来滚动条也可以实现页码效果
把滚动条往底部拖动，google read就会加载更多项目，比单纯点击 more 然后加载更多内容的页码设计的用户体验更流程。

3.时间轴也可以用来做页码。
miniblog----plurk的时间轴设计

功能更强的的google财经的时间轴的应用。

除了第一条的设计能被普遍使用，另外两条的设计需要根据实际环境来使用。在我个人来说，我非常看好用时间轴作为页码的设计方法。

我们需要的是怎样的分页？

schiy — 2008-08-17 07:38:43

互联网上的资源多不胜数，无论我们搜索资料还是查阅新闻，或者是在网上淘物等等，肯定没少见分页！
分页模式和表现方法也是各有千秋。
我们来看看下面这些图片：
A.我爱设计网

1.当前页的标示不统一，标示形式比较奇怪。
在第一页的时候看不出当前页是第几页，而且标示形式是在页码前加了一个“>”，感觉怪怪的。
2.当前页的按钮呈可点击状态。
既然在当前页，我们还需要一个按钮点击到当前页吗？
3.没有判断当前页是第一页和最后一页。同样，他们都处于可点击状态。

B.蓝色理想

1.各种页面状态标示的非常清楚。
2.有页数少和页数多两种方式。
页数少的时候，在每篇文章的标题下面加上了章节跳转链接，而且按顺序标题。

C.网易

当前页的标示很清楚，不过当前页是第一页或者末页的时候，上一页和下一页按钮都呈可点击状态，上一页和下一页都是跳转到第一页。我们可以理解为循环吧，起码比第一个例子好^_^

D.Google

Google的大多数都是页数多的分页形式，当前页标示、上一页和下一页是否可点击都分得很清楚。

E.淘宝

同样，淘宝也属于多页数的分页形式，而且在Google的分页形式上添加了输入页码跳转功能。
……

当然，这里列举的只是众多模式中的几种而已，不能代表全部，这里只是肤浅的做个别举例。
欢迎大家讨论：我们需要的是怎样的分页模式和表现方法？

相关话题：翻页源地址：http://www.schiy.com/blog/article.asp?id=177

创新式翻页

Banlon — 2008-08-14 02:42:58

看到这么一个关于翻页的设计：

1.没有常见的页码样式。

2.也页面的第一屏的最下端有一个“more results”的button.

3.点击“more results”后，在下方展开更多搜索结果，展开的高度为向下扩展一屏。同时，“more results”的button也扩展到第二屏的最下方。如图：

4.依次点击可以看到更多的页面

大家可以点击这里体验具体的效果。

这是一个非常新颖的交互方式。我印象中在微软live search的曾经一个测试版本用过类似翻页。他的好处在于将使页面加载的过程在当前页面内完成。相比翻页要重新载入新的页面，这种方式还可以满足加载过程中查看以前页面的内容。这样一个优点就极大的节省了用户的等待时间。

统计数据显示用户在搜索结果页面寻找内容时，翻页一般不会超过10页，所以这种翻页方式是满足常态下的翻页需求的。

引申一下，这种more的概念跟古代的简书类似。古代的简书是由很多片非常窄的竹片串接而成，在每片竹片上写字而成书，为便于存储，人们便将简书卷成书卷存储。阅读时，先展开一部分书卷，阅读完毕后再慢慢展开更多，直至读完。

当然，这种翻页方式并不是很完美，有些需求它还暂时无法满足，比如：跳页；页码定位等等。但是这种翻页的思路值得我们去思考和优化。

ps：在北京的朋友上班时是不是经常遇到订餐的烦恼？我推荐一个在线订餐的网站：豆丁。你可以在他们网站上选择你要的菜，提交后他们的客服帮你联系饭店送餐，就是这么简单。点击这里注册豆丁，他们还提供积分奖励的哇。

相关话题：翻页源地址：http://www.uesee.com/archives/156

邮件的排序与翻页

Azero — 2008-11-05 13:10:38

先看看国内邮箱的情况，几乎是清一色地使用“上一封”、“下一封”的描述方式。

图中网易vip邮箱，上一封下一封的点击是按收件箱的信件列表的排序决定。

点击上一封，回到我之前阅读的邮件，这使我很明确“上一封”就是按收件箱排序，表示被排在当前阅读的信件的上面的。

再来看看gmail：

图中表示收件箱共有20封邮件，且告诉我正在阅读第3封，那么“前一页”的链接，你是否会理解为去第2封呢？我还真的纳闷过此事。

我忽然想起千鸟写过的一篇《有时间先后的翻页》。他在文中说道：“凡是有时间先后逻辑的信息集聚系统，排序都应该按照用户正常使用的心智模型组织。比如Gmail的翻页方案，特点在于只告诉用户数据位置，没说到底在哪页，前后关系准确，可以不断往前翻寻找历史……”

也许我不明白这是什么心智模型。

以邮箱为例，按收件箱的列表排序方式，无一例外，所有邮箱的收件箱的邮件排序，均使用倒序。即最近收到的排在最前，过去收到的在后。那么按我阅读的顺序，前后不是应该等同于浏览器的后退前进功能么？（前一页回退收件箱的靠前部分，后一页前进收件邮的靠后部分）

好了！到此为止。不是要搞本土化经营么？连一个翻页都得让用户研究用法，已经不是个好设计了！

带页码的翻页体验与设计比较

JunChen — 2008-11-17 23:43:41

别看翻页就占那么点儿地方，它体现的是市场的策略、程序的算法和交互设计。我选择了 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% 左右。