分页(Paging)

问题

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

解决方案

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 今天是第二学期开学的第一天。放了太久的假期,上课的时候根本进入不了状态。刚到教室大家就热火朝天地聊起来,让我想起小...
    EveleenZhou阅读 112评论 0 0
  • 深圳,晴。昨天晚上我的情绪,在一瞬间彻底崩溃了。有那么一瞬间,真的是想死的心都有了。 昨天故事经过很简单。亲密关系...
    Echo可可阅读 287评论 0 0