问题

用户需要浏览大量的项目列表才能找到最感兴趣的项目

解决方案

分页呈现项目结果，每页都有固定数量的项目。同时允许用户在当前页轻松地跳转到其他页面。

From www.digg.com

何时使用

用户经常需要浏览一个数量庞大的项目列表。 这个模式非常适用于项目太多而不能在一页里面承载的情况。 这些项目通常是排好序的，用户很可能在列表的前几条就能找到他们想要的项目。例如 “搜索结果”（Search Results）就需要经常用到“翻页”（Paging）模式。这个模式也经常和 “列表建造器”（List Builder）用在一起，例如一个基于网页的邮件系统。项目的数量一般是10条到200条不等。这些项目可以是诸如“邮件标题、姓名、照片、电话号码等”的任何信息。

如何使用

在项目列表的下面显示页面的导航。提供直接跳转到特定页面的链接，和允许在页面中“行进”（Stepping） 的上一页/下一页 的链接。每页大约呈现5到10条项目，同时也显示项目总数和一个描述项目类型的标题。

导航条的基本结构是：“项目数量”、“上一页”、“1 2 3 4 5… ”、“下一页”。 “上一页”和“下一页”链接只在当前页存在上一页/下一页的情况下显示。 此外,还可能会添加跳转到首页或最后一页的链接。

取决于页码字体大小的页码尺寸会因为太小而不便于点击。这时候，通过合并热区（像用“11-20 21-30 ...” 代替“1 2 ...”）来创建一个扩大的 “点击区域”（Enlarged Clickarea） 。这个模式有个不好的地方是当项目非常多的时候，你可能会发现页码很快就把页面空间挤满了。在这种情况下，可以让这个模式只显示当前页和更多的两页，然后使用省略号“...”，最后加上最后一页。

为什么使用

导航条可以把列表最重要的信息传达给用户：总共有多少项目,现在看了多少以及怎样看到其余的项目。 把导航条放到列表的下面——一个用户最需要它的位置——在浏览完当前页的所有项目之后。（译者注：这个位置上用户的场景是浏览完当前页的所有项目之后，最需要用到导航条来跳转到其他页面。）

尽管分页是一种很常见也已经被接受的交互方式,但是 Ajax技术的到来带来了新的可能性：我们可能不再需要分页（paging）了。 所有的结果简单的呈现，但是仅仅随着用户滚动页面加载数据。 看网站例子如： Dzone 

更多例子

这个例子来自 www.google.com .用多个字母O来表明导航条的数字和上一页/下一页按钮的可点击区域被放大了。

From www.google.com

在 www.uxmag.com中，放在小框里面的页码可以让用户很容易选中目标。

From www.uxmag.com

www.flickr.com, Squidfingers和其他许多网站也使用这种方式扩大点击区域。

在 www.alltheweb.com中，页码数字被另外一种方式扩大了点击区域。

www.alltheweb.com

参考文献

无穷无尽滚动的内容:

http://www.codeandcoffee.com/2007/04/17/ajax-and-the-endless-scrolling-feature-of-pages/ http://looksgoodworkswell.blogspot.com/2005/06/death-to-paging-rico-livegrid-released.html http://way.nu/archives/2006/08/humanized-very-nice-ajax-eternal-scrolling-ui/

原文链接：
http://www.welie.com/patterns/showPattern.php?patternID=paging