086a2b27ad98d541abcd7ce71d81ef90
7. 翻页页码

初识

一个列表有很多很多项内容,不希望页面无限长,于是将每几十项算作一页,整个列表就分成了若干页,为了能方便的在这些页之间往来,就有了翻页页码。

提炼一下,翻页页码可以概况为这样…

仔细看,包括这么几部分:

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

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


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

论坛里,帖子按时间顺序排列,用户经常是一页页往后翻,需要能方便的回到第一页,看看是不是又有新帖子了,就在页码左端加了“首页”页码,为了对称,右端加了“末页”。
列表不止论坛帖子列表,搜索结果列表,商品列表,社交产品中好友的帖子列表,新闻列表… 特意要看最不相关的几个搜索结果?要看这个产品分类下排在最后的商品?
通观这些列表,我们也大致可以说:很少有人需要“末页”按钮。
前面淘宝的例子里也能看到,淘宝没有给出“末页”。

回到第一页,除了给出“首页”这个页码,也还有其它方法,比如google这样:
google是不提供“首页”也不提供“末页”页码的,现在是第10页了,要快速回到第一页,怎么办?直接再点一次上面的搜索按钮吧,也很方便。
 


top Created with Sketch.