初识

7.翻页页码 - 图1一个列表有很多很多项内容,不希望页面无限长,于是将每几十项算作一页,整个列表就分成了若干页,为了能方便的在这些页之间往来,就有了翻页页码。
提炼一下,翻页页码可以概况为这样…
7.翻页页码 - 图2
仔细看,包括这么几部分:

  • 当前页+临近几页:通常页面空间有限,不足够显示出所有页的页码,于是就只显示当前页和临近的前几页和后几页。
  • 上一页和下一页按钮:为了让连续的往后(前)翻页更加方便,在页码两端加了“上一页”和“下一页”按钮,这样,连续的翻页操作位置就固定了,操作更方便。
  • 首页和末页:为了能快速跳转到第一页或最后一页,在页码的两端可以始终显示第一页和最后一页的页码。另一种办法是在两端加“首页”“末页”两个特殊的页码,也可以使用“<<”“>>”图标代替。
  • “跳转到”功能:为了快速的跳转到特定页,可以增加“跳转到[ ]页”功能,用户输入或下拉选择页码,再按“确定”按钮。

翻页页码在手机上产品上出现的相对较少,PC产品上更常见。


“首页和末页”是否需要?

论坛里,帖子按时间顺序排列,用户经常是一页页往后翻,需要能方便的回到第一页,看看是不是又有新帖子了,就在页码左端加了“首页”页码,为了对称,右端加了“末页”。
列表不止论坛帖子列表,搜索结果列表,商品列表,社交产品中好友的帖子列表,新闻列表… 特意要看最不相关的几个搜索结果?要看这个产品分类下排在最后的商品?
通观这些列表,我们也大致可以说:很少有人需要“末页”按钮。
前面淘宝的例子里也能看到,淘宝没有给出“末页”。
回到第一页,除了给出“首页”这个页码,也还有其它方法,比如google这样:
7.翻页页码 - 图3google是不提供“首页”也不提供“末页”页码的,现在是第10页了,要快速回到第一页,怎么办?直接再点一次上面的搜索按钮吧,也很方便。


“跳转到”是否需要?

“跳转到”功能越来越少见了。因为用户的操作成本高,要输入页码,再按提交。
另一个原因是:用户是不是真的要跳转到第20页?他能大致猜到第20页里有些什么内容吗?如果不能,他为什么会想去?尤其是对于论坛、社交类产品,列表内容在几分钟内很可能已经变化了,用户更加没法判断第20页里是什么内容。如果列表内容是比较固定的,快速跳转到某一页还是比较有用的。


翻页页码VS触屏滚屏

手机上,如果用翻页页码,每个数字的热区通常很小,难以操作,所以很少用。
手机上通常是“向下滚屏加载更多”。
手机上不用,只是因为手机屏幕小,没法用,并不意味着翻页页码这个功能是没价值的。
翻页页码仍旧有独特的价值:它可以粗略的导航整个列表,比如,列表全部内容有200项内容,每页显示20项,共10页。当前在第一页,用户要看第70项左右的那些内容,可以点第4页,直接跳转到61—80项。如果是“向下滑,加载更多”,要滚到第70项左右,就得滚很久,说不定滚过了自己都不知道。
不过,还是上面那个质疑,用户真的会需要看第4页的内容吗?
这个质疑不仅让我们反思“跳转到”功能,就连翻页页码本身也值得反思了。


不要为了不滚屏而翻页

7.翻页页码 - 图4
这是一个买卖股票的APP,这个列表有几十项,却为了能不出现滚屏,而使用翻页页码,让每页只显示5个股票。
触屏设备问世之初,出现过这种认识,认为:触屏设备上不应该像PC网页那样上下滚屏,而应该是像电子书那样的。于是一些产品尝试用翻页页码将列表切的足够短,使其不滚屏,让用户向左滑显示下一页,但实践证明,这样的方式并不好。因为:

  1. 每向后翻一页都意味着一次新的网络数据请求,加载慢,卡顿,甚至向前翻也是。当然,这可以在技术上优化。
  2. 即使不考虑技术上的局限,一个相对长的列表也仍旧有好处:在一张大纸上看20项内容,总好过在4张小纸上,每张纸5项内容。20项内容全在一张纸上,会让用户觉得更安全,“这20项我都拿到了。”