关于分页的一些想法

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean 提供适用于您旅程每个阶段的云产品。开始使用 $200 免费信用!

最近我对分页有一些零散的想法,所以我想试着在一个帖子中整理一下。这就是博客的工作方式,对吧?

一致的定位

如果有一种方法可以确保您的分页按钮不会移动,那就去做吧。每次都能以同样的方式点击-点击-点击(或轻触-轻触-轻触)是一种非常好的体验。当您到达结尾时,后续点击不会突然变成其他东西(因为您现在点击的是不同的按钮,或者什么都没有)。

如果一个按钮依赖于另一个按钮进行定位,也许您可以禁用一个按钮,并将其设置为 `opacity: 0.5;` 来指示其被禁用状态,甚至使用 `visibility: hidden;` 来隐藏它,但仍将其保留在文档流中。

垂直定位也很重要。如果分页按钮不会根据任意内容的高度跳动,那就更好了。如果不可避免,因为例如它们位于任意内容底部下方,那么也许这些按钮可以放在顶部。或者除了底部之外,这对于需要滚动的内容来说是很好的。

当然,所有情况都不一样,但也许即使对于某些分页元素,`position: fixed;` 也会有用,以确保这些位置保持稳定。

文字还是不文字?

分页过去的分页是什么?(快速说10遍)。按钮中的文字可以帮助说明这一点。

“更早的”
“更新的”

“下一页”
“上一页”

也许。但关于

“不太相关”
“更相关”

“不太受欢迎的内容”
“更受欢迎的内容”

虽然这确实可能是分页正在做的事情,但说出来有点令人沮丧。**我会倾向于说:如果分页的原因相当明显或不那么重要,那就只使用箭头吧。**

在这里,在 Dribbble 上,文字是不必要的。点击那个箭头将显示更多内容,这是一种网络习惯。

不显示文字的一个例外是方向性。用户会进入一个可以双向分页的页面吗?如果是这种情况,文字可能比较合适,以便引导那些没有从只能单向分页的页面开始体验的用户。

方向性

说到箭头,哪个方向最合适?**我倾向于发现大多数分页从指向右边的箭头开始。**(例如 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 就没有分页。你可以访问内容,因为页脚中有指向不同月份内容的链接。在我看来,这似乎有点半成品。

一致性

无论你选择什么,在整个网站上都要保持一致。

天知道我需要在我的网站上实现这些东西中的一些。