最近我对分页有一些零散的想法,所以我想试着在一个帖子中整理一下。这就是博客的工作方式,对吧?
一致的定位
如果有一种方法可以确保您的分页按钮不会移动,那就去做吧。每次都能以同样的方式点击-点击-点击(或轻触-轻触-轻触)是一种非常好的体验。当您到达结尾时,后续点击不会突然变成其他东西(因为您现在点击的是不同的按钮,或者什么都没有)。
如果一个按钮依赖于另一个按钮进行定位,也许您可以禁用一个按钮,并将其设置为 `opacity: 0.5;` 来指示其被禁用状态,甚至使用 `visibility: hidden;` 来隐藏它,但仍将其保留在文档流中。
垂直定位也很重要。如果分页按钮不会根据任意内容的高度跳动,那就更好了。如果不可避免,因为例如它们位于任意内容底部下方,那么也许这些按钮可以放在顶部。或者除了底部之外,这对于需要滚动的内容来说是很好的。
当然,所有情况都不一样,但也许即使对于某些分页元素,`position: fixed;` 也会有用,以确保这些位置保持稳定。
文字还是不文字?
分页过去的分页是什么?(快速说10遍)。按钮中的文字可以帮助说明这一点。
“更早的”
“更新的”
“下一页”
“上一页”
也许。但关于
“不太相关”
“更相关”
“不太受欢迎的内容”
“更受欢迎的内容”
虽然这确实可能是分页正在做的事情,但说出来有点令人沮丧。**我会倾向于说:如果分页的原因相当明显或不那么重要,那就只使用箭头吧。**

不显示文字的一个例外是方向性。用户会进入一个可以双向分页的页面吗?如果是这种情况,文字可能比较合适,以便引导那些没有从只能单向分页的页面开始体验的用户。
方向性
说到箭头,哪个方向最合适?**我倾向于发现大多数分页从指向右边的箭头开始。**(例如 Google 搜索结果)我听到过热烈的辩论,双方都有很好的论点。如果你想到时间轴,它几乎总是从左到右,所以如果你浏览时间,你会认为箭头应该指向左边,因为你正在查看最新的内容。但左边箭头与后退按钮相关联,后退按钮被广泛使用,用户通常理解它意味着返回到之前访问的区域。
如果用户很有可能从一个可以双向分页的页面进入你的网站,我会选择清晰度,并对按钮进行标记。
URL 结构
分页通常发生在类似于以下 URL 的情况下
website.com/page/1/
website.com/page/2/
这并不糟糕 - 至少它很干净。问题是 URL 不包含有关正在分页的内容的任何信息。更糟糕的是,这些页面上的内容可能会发生变化。今天在第 1 页上的内容可能在明天出现在第 3 页上。这在基于日期的分页中非常常见。
我们这些网络人总是非常关心保持 URL 生效,并且讨厌 URL 出现故障。但是,一个显示与上次引用时完全不同的内容的 URL 不是故障吗?这取决于具体情况,并且根据进行的分页类型,它可能不是一个可以解决的问题。但对于基于日期的分页来说,它可能是可以解决的。Gawker 网络上博客的当前设计有分页按钮,可以将您带到类似于以下 URL 的位置
lifehacker.com/?startTime=1411848000454
lifehacker.com/?startTime=1411749900413

这些 URL 更有可能随着时间的推移拥有相同的内容,因为它们是根据发布时间来引用内容的。
根据你网站的发布时间频率,也许你的分页按钮可以是几个月、几周或几天,而不是任意页面。从内容首页后退可能类似于
website.com/blog/
website.com/blog/2014/09/
website.com/blog/2014/08/
那么随着时间的推移,这些 URL 上始终会显示相同的内容。
即使你更喜欢使用基于任意时间顺序的整数分页,将数字反转是否有意义?不要让 1、2、3 反向回溯时间,而是让数字从你拥有内容的最大数量开始。
website.com/blog/
website.com/blog/page/523/
website.com/blog/page/522/
我想知道为什么似乎从来没有这样做过。也许这与旧数据库系统上的计数查询压力有关?
指示数量,还是不指示?
说到计数查询,你是否应该指示要分页的内容有多少?为了做到这一点,你需要知道有多少内容,这涉及到在某个时间点进行某种计数。
<- 第 1 页,共 302 页 ->
这有用吗?我可能会争辩说,如果数字在合理范围内有用,那么它是有用的。要么是因为你可以查看所有内容,要么是因为它让你了解搜索的广度,要么是因为你可能需要它在 API 中使用,或者类似的东西。在 Google 之类的地方,它可能不是特别有用,因为它告诉你它找到了很多结果,这实际上只是在炫耀而已。
除了数量之外,你是否应该能够在分页中跳转到更远的地方?
[<-] [1] ... [5] [6] [7] … [302] [->]
我不知道。我一直有点排斥这种分页,因为它看起来过于复杂,而且用处不大。更不用说更难实现一致的定位了。它确实提供了一种跳转到分页开头或结尾的方法,我认为这会很有用。只是那些更长的版本,允许我向前跳跃,比如跳过 4 页(但不能跳过 6 页!),这似乎让程序员离前端太近了 =)。
Ajax
分页非常适合在没有完整页面刷新的情况下进行,因为很可能页面上唯一发生变化的是正在分页的内容。但这引入了一些新的复杂性
- 你是否将新内容追加到当前内容区域的底部?
- 添加太多内容会导致 DOM 权重降低页面速度吗?你可以在任何时候移除内容吗?
- 你是否用新内容替换所有内容?
- 如果你这样做,你应该滚动到新内容的顶部吗?如何在不同浏览器中做到这一点?
- 你是否因此而“丢失”了页面浏览量?这会影响你的业务吗?你能跟踪这个,或者做同样的事情,这些事情原本会给你带来页面浏览量(例如,轮换广告)?
- 你是否以不同的方式引用分页,比如“加载更多内容”?还是说这只是网络工作者才会关心的事情?
- 你是否以这种方式提供双向分页?
- URL 是否会改变?
- 它可以通过渐进增强来实现,以便无论如何分页都能正常工作吗?
WordPress.com 主题正在朝这个方向发展。我查看了一些主题,它们往往有一个“旧文章”按钮,可以以 Ajax 方式加载新内容。

在这个特殊的“Eighties”主题中,没有 JavaScript 就没有分页。你可以访问内容,因为页脚中有指向不同月份内容的链接。在我看来,这似乎有点半成品。
一致性
无论你选择什么,在整个网站上都要保持一致。
天知道我需要在我的网站上实现这些东西中的一些。
关于你的“文本还是没有?”观点…
我认为,如果你将分页与排序配对,箭头将表示你正在向下移动已排序结果列表,并且不需要文本。所以“价格:从高到低”,第 2 页将是一组比第 1 页价格更低的选择。这对用户来说是显而易见的,但前提是排序选项是明确的。
有趣的想法,Chris。
我制作大众市场 Tumblr 主题,尝试过许多不同的选项,通常只是用左右箭头解决,但我现在正在制作的主题混合了 ajax 和传统的箭头(因为似乎有很多人讨厌无限滚动,也有很多人认为它是自切片面包以来最好的东西)。我打算让第一页有一个“加载更多”和一个右箭头,然后如果用户点击“加载更多”,它会自动加载所有后续页面,无需再次询问,如果用户点击箭头,他们会跳转到实际的第二页,该页面有“更早”和“更新”按钮。这是我的两全其美之策 :)
关于:多少数量的指示。
如果你在购物,这一点非常重要——尤其是在亚马逊等网站上,一个相当普通的搜索会给你成千上万的选择。如果 14,920 件商品与我的查询匹配,那么我知道我可能需要更加具体。
如果有超过 10 页,是的,我想能够快速跳转到前面。我知道实现起来并不漂亮,但如果你不确定合适的价位,这将非常有用。例如,研究特定地区的住房成本。我想知道完整的范围——但如果有 25 页,而 1-4 页都是 100 万美元以上,我需要一种方法跳到中间,以了解价格分布。
我不太喜欢为复制内容分页。感觉你仍然试图将网络变成一本书。
如果你让我选择切换到无限滚动,那么知道有多少内容就真的非常重要。无限滚动对于 300 件商品来说很棒。对于 1,000 件——就不那么好了。
关于你想要跳入 25 页搜索结果中间的例子,我认为这确实证明了仅仅拥有页码并没有什么用。是不是应该有一个其他搜索字段,你可以在其中按价格缩小搜索范围?
总的来说:是的,你应该提供一种方法让用户跳到中间。但使用有意义的路标,让他们知道自己要去哪里。对于博客文章,如果你有超过几页的结果,并且每添加新文章后,文章分配到页面的方式都会改变,那么“跳转到第 17 页”就没有多大意义。
相反,拥有一个链接到按年份/月份分组的已组织存档列表会很有用。
对于不同类型的列表,会有不同的等效“存档”,但在任何情况下,它都应该是一种查看已组织、易于浏览的内容列表或层次结构的方式。
[<- 更新 ] [1] [2] 3 [4] [5] [ 更早 ->]
[<<- 最新帖子 ] [ 存档 ->>]
这是一个细微差别。我不想总是跳到第 10 页——第 10 页每次都会不同。但有时我想快速浏览结果,而不是仅仅缩小搜索范围并获得一组全新的页面。
这仅仅是我作为“客户”的个人偏好。作为开发人员,我从来不喜欢分页。;^)
完全同意——对于很多其他情况也是如此。
想象一下,例如一个按字母顺序排列的列表——你想跳到以某个字母开头的条目。使用“典型”的编号分页链接,这需要一些(或很多,取决于数据量和分布)试错才能找到正确的页面。
关于使用标题属性(或其他形式的工具提示)来改进这一点怎么样?将鼠标悬停在第 X 页的链接上可能会显示“房价从 950,000 美元到 775,000 美元”作为你的例子,或者“以 Fo 到 Gh 开头的条目”作为我的字母顺序例子。
当然,这可能需要一些额外的数据库工作(但我们无论如何都会缓存这些东西,对吧?)。对于大型数据集,我们可能会省略到结果页面的链接,例如“1 … 136 137 138 … 1768”。但即便如此,我认为在某些情况下这可能是一种改进。
说得对,Rio。作为消费者,我真正关心分页的唯一时间是当我购物时遇到大型结果集并按价格查看。
例如,像 Zappos 这样的网站会显示 9000 个女靴结果。我可以使用他们巧妙的过滤器缩小搜索范围,但在某些日子,我可能并不确定自己想要灰色、棕色还是黑色。或者可能是红色。
Fuel UX 添加了一个文本输入,这样你就可以输入页码。
http://exacttarget.github.io/fuelux/javascript.html#repeater
我理想的分页控件会类似于他们的控件,但也许会混合使用文本输入/选择来选择中间的页码。
感谢你分享你关于分页的所有想法,
我认为,在可用性和观看者体验方面——他们习惯了什么?
…看看那些有长列表的网站,例如社交网站的“更多选项”垂直解决方案。
所以直观的垂直解决方案——向上和向下滚动以查看更早和更新的内容,是我会选择的,而不是左右滚动。
就我个人而言,我认为控件越多越好。类似于 << < 1 2 3 4 5 > >>,甚至是一个输入字段可以跳转到特定页面,尽管这可以通过使用 URL 栏来实现。
很好地总结了许多这种设计模式常见的实现问题。
我还要补充一点:键盘访问。对于开发人员来说,实现起来很麻烦,但如果你不实现,对于许多用户来说也很麻烦。
如果你要使用左右箭头按钮,或任何通常相当于前进/后退箭头的按钮,请对箭头键做出反应。这是一个常见的令人沮丧的问题。如果有超过 3-4 项要翻阅,我不想握住鼠标并将其保持在一个位置,我希望能够靠坐在椅子上轻松地敲击键盘。
如果你要通过滚动来触发新内容,请确保它也能在“上滚”/“下滚”键上生效(这通常不是连续加载网站的问题,因为这些按钮会触发正常的滚动事件,但就在今天早上,我卡在一个花哨的滚动到开始的动画网站上,它在下滚键上没有任何反应)。
我对文本方面的想法是,如果你不进行像编号分页或“跳转到第 2 页”这样的操作,你应该始终使用“更早的项目”或更具描述性的内容来描述用户将要跳转到的位置。我访问过很多网站,当我点击看起来像是下一个箭头时,它却把我带到了错误的地方,因为他们只是使用了箭头。现在我必须再导航两次才能到达我想要去的地方。
我还想说,如果你正在进行编号分页,看在所有二进制数据的面子上,请务必使你的数字大小合适。具有小字间距或不均匀宽度的编号分页会真正造成问题。更不用说字体大小了。网络上 9 像素的分页数量简直令人发指。
我最近发现了微软的 IE 专属“向前翻页”浏览功能。它是一个非常棒的分页解决方案。在你的 HTML 中,你指向“下一”和“上一”页面,浏览器会识别这些页面。接下来,你可以左右滑动进行导航,或者使用鼠标在屏幕上获得下一个按钮。它解决了用户必须找到下一个链接的问题。
不幸的是,它只适用于 IE,更糟糕的是,用户还必须手动启用它。
即使你更喜欢使用基于任意时间顺序整数的分页,反转数字是否有道理?不是按照时间顺序从 1、2、3 向后,而是让数字从你拥有内容的最高数量开始。现在你这么一说,这似乎是显而易见的。我不确定 WordPress 是否可以这样配置?
必须做点什么来解决无限滚动问题。它在以下情况下会导致严重的问题
无限滚动可能适用于 Pinterest,但我真的希望设计师停止随意地实施它,而不考虑其可用性成本。在大多数情况下,传统的分页并没有什么问题,而且我觉得无限滚动有时只是一个借口,为了让用户无意中加载更多内容,从而也加载更多广告。
我认为向右的箭头表示“向我展示我尚未看到的内容”,而向左的箭头表示“向我展示我之前看到的内容”。我也喜欢无限滚动的想法,其中顶部/底部分别表示新/旧。
不过,有趣的想法。对我来说,从第 321 页(或其他任何页)开始,一直浏览到第 1 页会感觉很奇怪。
请原谅这个粗略的例子,但我非常喜欢这种方法。你可以通过简单的单步分页获得两全其美的效果,但你可以跳到特定页面。
http://codepen.io/basement31/pen/AwBkl
更喜欢无限滚动,尤其是在响应式设计中。
手机每页多少结果?
讨厌分页。
我认为分页有其用途,但对我来说最烦人的是每页只显示少量结果。这可能取决于上下文,因为新闻/博客文章越旧,相关性就越低,但在电子商务环境中,必须显示“全部”(或足够多的数量)。
关于无限滚动,我认为混合方法可以很好地工作,你可以点击加载更多,但它仍然可以 Ajax 到同一个流并更新 URL。两全其美。
我也是,我讨厌分页,更讨厌有实际数字的分页,现在还有谁会点击超过 5 页?我认为,如果你在头三页/结果/视图区域/等中没有找到你想要的东西,那么问题不在于你的分页,而在于你的搜索引擎(嗨,亚马逊!)或你的导航。这就是为什么 Pinterest 不同,你是在浏览一个画廊,而不是搜索结果,时间线也是如此,浏览与搜索不同。
我更喜欢无限滚动,同样,滚动 3 次,然后提示用户;当然没有页脚,如果你可以做“反弹”边缘来加载更多,那就更好了。
无限滚动的問題在於,瀏覽器(即使是最新的瀏覽器)也會將所有內容緩存到内存中,最終會变得不堪重负并崩溃、卡死,或者其他一些难看的事情。
我认为关于该主题的讨论是完全可以的。
当我阅读你的博客,Chris,我经常会想“我在这里做什么?”
我只是快速发展的网站开发世界中的新手。
当我阅读评论和回复时,我会想“他们在说什么?”
但今天我作为网络浏览者的身份可以帮助你提供一些有用的信息。
为什么有人会想只使用一些“下一页”或“上一页”箭头或按钮来浏览很多页(图片/文章等)?
当提供“下一页”或“上一页”选项来浏览有限数量的页面(例如,作为之前搜索的结果)时,这可以接受。
不过,我的观点是:除非涉及不超过(假设)5 页,否则永远不要使用这些箭头。
Tesco 的 Blinkbox 在处理这个问题方面做得很好。你滚动到已加载内容的底部,然后点击加载更多。这将更新 URL,以包含页码。
你可以随时导航到该“页面”(或任何其他页面),它会立即跳转到该内容,并且只有在你向上滚动时才会加载之前的数据。
执行得非常出色。
+1 支持此解决方案
我认为,在分页链接中添加文本几乎总是必要的。用户想知道他们身处哪个页面,而许多用户不会查看页面 URL。
此外,当用户想跳到特定页码时,这非常有用。
你觉得 Paginator 3000 怎么样?
我一直认为更小的分页是一种为了获得广告点击率的方案。访问每页只有 5 件事但有 40 页的网站很痛苦,但如果没有分页,用户就会迷路“我想是在第三页”——这是一个微妙的平衡。