December 02, 2016

【解构ui】分页vs.无尽下拉

之前说到网格视图和列表视图的时候都有提到无尽的下拉模式，今天就来看一下分页和无尽下拉（Pagination vs. infinite scrolling ）

分页（Pagination）

分页是指在页面有一系列的链接将页面内容分割成多页。通常位于网页的底部，你可以点击任意按钮去到一页或或者直接去到你想去的页面。

比如Google，每个页面就有十个搜索结果，然后最底端用页码将搜索结果分开。每个页面之间的关联性相对较小。

有一些新闻网站会把长文章分割成多个页面。这种方法通常不大可取，因为这种做法不顾整篇文章的阅读体验，主要为了提高广告收入，而不是为了用户。

分页的设计应该根据网站的具体内容而设计。比如说联系方式按照字母排序，博客按照帖子的时间顺序，最新的在前面，搜索结果按照结果的相关性。Google的分页设计方式可能在博客中就不怎么适合了，因为next和previous可能会引起误解，如果使用older, newer posts会比较好理解。

Google的分页上面也有视觉提醒，只看gooooogle以及左右箭头用户也能理解，如果把gooooogle 的Logo去掉，可能视觉效果就减弱了，但是也更加的清晰。 Bing就是这样做的。

优缺点

优点：

Good Conversion.

当用户在特定的列表里寻找东西的时候，分页就很好使。而不是简单的扫视。

Sense of control

无尽的下拉让人感觉永远没有底，无论你下拉到哪里，你都觉得没有底。

当用户知道一定的数量的结果的时候，他们可以做出更好的决定。到达底部给人一种可控感。研究也发现用户知道有着一定限额的并且相关的搜索结果的时候，他们能更快的做出决定，找到他们想要的。

而且当用户可以看到搜索总数量的时候，他们能够预估要花费多少时间找到他们需要的。

Item Location

分页让用户能够更快的定位东西在哪。他们不需要知道具体的页数，但会有一个大致的印象。对于电子商务网站也是，有分页的话用户可以知道回到哪里，找到之前看中的东西。

缺点：

Extra actions

如果要去到分页的下一页，用户就得点击。等待页面加载。最主要的问题是，大部分的网站在单个页面上只给用户展示一小部分内容。可以考虑让页面长一点。用户就少点击一点。

最佳实践

分页的重要性取决于内容和上下文。比如对于Google来说，分页很重要，因为Google可以给到同您搜索最相关的前十条消息。

提供合理的页面长度。

不要把你的页面弄的太短。网站或者app都不是书，书的页面因受到物理尺寸纸张的限制尤其大小局限性。但是网站就有着无限的高度可以放下我们想放的所有东西

研究表示一页上最合适的展现内容的数量是25-75个内。然而，这个数字也是估算，合适的数字应该取决于你的网站内容和行业。

对于spec-driven products（电子设备，硬件，汽车部件）应该展现较少的内容(lower range)，best buy在每一页面上展示了15个条目.

相反的，对于有视觉对比的产品，衣服之类的，用户能够看到更多的东西，比如eBay，每一页上展现了超过300个条目.

提供较大的可点击元素

有许多的网站和应用低估了分页控件的可点击范围。对于任何导航链接来说，较大的可点击目标是很重要的，不管是主页导航还是分页器。

区分当前页面

我在哪里是用户必须清楚的一个答案。因此用户很多的时候是通过视觉元素来回答这个问题的。你应该通过视觉元素的区别告知用户。你的用户需要知道他们现在在哪。不要只是以来颜色来区分，确保即便是没有颜色用户也能区分。

控制页数

页数应该包含最多10个页面链接，如果没有十个就有几个展示几个。

同时你也应该确保页数之间有足够的空白空间，确保用户不会点错。

提供前一页和后一页链接

在大部分的情况下，前一页和后一页链接对于用户来说很有用。但是，为了能够创造出更好的分页控件，你应该将他们同其他的页面数字分开，给到足够的空间和距离表示区分。使用箭头符号区分相比较previous 和next的文字来说就比较合适

尽量不要使用最前页或者最后页链接有一些分页器有直接跳转到第一页和最后一页的按钮。有时候，前一页和后一页用两个箭头表示，这样的设置容易让用户迷惑。

如果换作文字也容易点错，因为间距很近

在大多情况下，第一页和最后一夜并不是必须的，因为用户喜欢按照顺序看内容。因为用户没有必要从最后一页看起，除非他们是要找过往的信息。

然而，提供回到首页的功能相对来说就比较实用。第一页通常来说有着最相关的内容。当用户翻页到很后面的时候，他们可能还会想要立刻回到首页，一个个点击上一页显然不合适。因此将第一页的标签一直放着比较合适。

适合手机端的分页器

手机端的屏幕有限，因此对于手机端来说Google只提供了必要的部分，当前页面以及基本导航选择（第一页，前一页以及后一页）

可以让键盘的方向按键和tabs操控

让用户仅用键盘就能操控页面。提示用户可以使用键盘操作分页器。

使用页数或者前一页后一页的组合导航

如果你只有很少的页数，比如两位数内，将你的页数全部展示出来能够很好的鼓励道用户全部看到底。

然而如果你的分页有超过两位数或者更多，如果你全部展示出来就不合适了，因为用户不可能全部看完。

除非你觉得这个页码可以帮助用户更快的定位到用户看到的内容。

总而言之，当页数少就全部展现，但是如果多的话，就用前一页和后一夜。

无尽下拉（infinite scrolling)

无尽的下拉也是一种常见的视图方式，移动端尤为常见。用户在下拉到最低端的时候，会不断的有新内容产生，从而使得用户无需跳转就能在同一页面上看到更多的内容。

无尽下拉适用于无法预测滚动到何时才能看到所需信息的场景。比如购物网站上常常采用这种模式，很多用户逛网上商店是没有目的性的，因此一次性将内容不断的展现给用户，能加快他们的扫视，找到自己感兴趣的内容。

优缺点：

优点：

用户沉浸以及内容发现。（User Engagement and content discovery ）

当你用无尽下拉作为发现内容的主要方式的时候，这可能就会让用户在你的页面上多待一会儿，也会提高用户的参与度。随着社交媒体的覆盖，大量的信息需要被消化， infinite scrolling就提供了这样一种浏览众多信息的方式，而不需要等待页面一页页的加载。

对于一些应用里发现更多的交互界面， infinite scrolling几乎是必须的，当用户没有特定目标去寻找某样东西的时候，他们就需要看很多东西，然后来找到他们喜欢的。

比如facebook news,用户会意识到他们其实看不完所有的新闻，因为新闻总是经常更新，因此facebook就提供了这样一种方式帮助用户尽可能的发现更多的信息。

下拉要比点击好（Scrolling is better than clicking）

鼠标的滚轮或者触屏上都让下拉速度更快，比点击要轻松。

对于较长的连续性的内容，比如电商物品展示，下拉就提供了比翻页更加好的可用性。

下拉对于移动端很合适。

屏幕越小，下拉就越长。在移动端使用下拉是一个很自然的动作。

缺点：

Page performance and device resources

页面加载的速度是一个很重要的用户体验因素，如果加载速度过慢，用户就会失去耐心，将你的应用、网站关掉。而对于无尽的下拉来说，加载的越多，页面承受的压力也就越大，容易减缓页面速度。

Item Search and location

当用户到达一个点的时候，他们没有办法在他们的位置上做标记，然后再回来，如果他们离开了这个页面，等他们再回来的时候，他们就得从头开始下拉。

人们希望在查看产品后回到产品列表的时候能够停在原来下拉到的位置，

没有用的下拉滚轮irrelevant scroll bar

另一个恼人的问题是，下拉滚轮不能反映出实际的信息数量。当你下拉的时候，你可能很开心觉得马上就要到底部了，但是结果发现加载了更多。

永远看不清的底部栏（Lack of footer）

底部栏包含了用户需要额信息，如果用户找不到他们想要的东西，希望看到更多的信息的时候，就会去底部栏，如果使用无尽的下拉，每次用户达到底部的时候，底部栏就转瞬而逝了。

如果要用无尽下拉方式，可以考虑将底部栏的信息换个位置展示，或者固定住。

最佳实践

保持导航栏可见（Keep the Navigation Bar Visible）

当你使用infinite scrolling的时候，最好保持导航栏永久可见，这样方便用户可以去到不同的地方。如果用户看不到导航栏，那么用户就得网上拉到顶部，找到导航栏。

在移动端，可以考虑下拉的时候将导航栏隐藏，当用户上啦的时候再展现

一个非常神秘的现象是，Apple HIG上有写道说导航栏要在每一个界面可见，这一准则在国外的很多app，比如Facebook和Twitter上都有很好的贯彻，但是到了国内就神奇的消失了，底部导航栏只有在第一层界面的时候才有，就拿微信来说，第一层的四个界面，微信，通讯录，发现和我不管去到这四个的哪个界面都能看到底部导航栏，但是如果去到发现里的朋友圈，导航栏就不见了，而朋友圈的导航栏偏偏也用的是无尽的下拉模式，没有捷径回到顶部。只能通过回到发现再进入朋友圈刷新才能回到顶部。

给大家看两张图就明白了：

Twitter不管去到哪个页面，基本导航栏都在底部。

而微博只要深入一个层级，底部导航栏就不见了，这就会造成，当用户浏览到更深的层级的时候，就得不断的按返回键，而Twitter的用户只需要要按底部的任意按键就能回到最初的层级。

另外，底部导航栏还扮演着返回顶部和刷新的作用，双击底部的tab,就能双击返回顶部，而失去了底部导航栏的微博，用户要是想要回到顶部就麻烦了。 weibo

如果你有底部栏(footer)，可以考虑用“加载更多”（Load more）按钮

由于无尽的下拉阻碍了用户可以看到底边栏，而如果你的网站有底部栏（footer）而且对你很重要的话，可以考虑用“加载更多” ，新的内容不会自动加载，除非用户点击l“加载更多”.

Back button Bring Users back to their previous spot

infinite scrolling最主要的问题是他不会记录某个位置状态。在用户查看具体内容后回到列表之后，一定要让他们回到离开的位置，不要让他们再从头下拉列表了。

Add the possibility to bookmark particular items

在下拉的时候提供做标记的功能比如收藏之类的，方便用户之后看。

提供视觉反馈，当加载更多内容的时候

当新内容加载的时候，记得给到用户一个反馈。可以考虑使用progress indicators来告知用户新的内容加载。加载新内容应该是速度很快的一件事，使用2-10秒的时间，你可以使用一点动效告知用户系统在工作。

分页控件vs.无尽下拉vs.加载更多

研究发现对于有分页展示商品的网站用户通常在首页停留的比较久，相比于有load more和infinite scrooling的网站，他们不太愿意看更多的擦恨难平。

如果使用infinite scrooling，用户会觉得所有的产品已下载载入，不管他们有没有看到所有的产品，因此如果正确使用这种方式，用户体验会较为连贯（seamless）.用户只要下拉就能看到产品，不会分散注意力。不需要交互，只要用户下拉就能看到产品。但最初展示的产品曝光度就减少了。因此infinite scrolling比较适合想要将所有的类别全部展示给用户，但是因为用户会不停的下拉扫视，因此他们不会在一个产品上花太多时间。

在研究的50个美国电商网站里只有8%的网站用了load more . 这是一个很简单的设置，用户不需要思考翻页问题，只要回答他们想不想看更多搜索结果就可以了。同分页相比用户的确会看到更多的产品，但是Load more还是需要用户自主交互，因此同infinifte scrolling相比,用户看到的产品就就没有那么多了，但同时用户也会比较容易关注某一个产品。

使用load more和infinite　scrolling产品页面增长了，而不是说原先的页面被新的页面取代了。 load more 让用户可以在整个页面很方便的进行比较。让产品的曝光度提高。

因此，应该使用哪一种？没有一个方法是完美的。

对于产品分类，使用load more 和lazy -loading的结合
对于搜索，使用load more,
在手机端，使用load more ，但是不要一下子展现太多。

在加载最新产品的功能最好的解决方式是鉴于load more 和 infinite scrolling之间的lazy -loading：

先展示10-30个产品，然后再lazy-loading10-30个产品，直到有了50-100个产品，再展示load more按钮，如果点击，再展示10-30个产品，然后再lazy loading 下一个50-100产品，再展示load more. 50-100个结果是一个门槛，决定了什么时候打扰用户，lazy-loading的门槛则是表现最优化，来减缓扫加载时间和服务器压力。

要注意的是，展现产品的数量要根据网站的内容和行业。

延迟加载的例子： http://www.crutchfield.com/g_10420/Home-Theater-Receivers.html?&pg=2

这样做的好处是，页面可以很快加载，因为初始化的加载并不多，更重要的是，对于小型或者中型的分类来说，会帮助用户不受打扰的就可以浏览产品。对于长一点的列表，用户拉到最下面的时候，他们会看到load more的按钮，如果用户愿意继续看，就可以很方便。而且用户很容易可以看到底部信息（footer)。

Lazy loading 和infinite scrolling的弱点在于，页面高度（page height）不断在增加。如果用户直接拉倒底部他们会看到footer一下下，然后又有更多的内容加载了。这种感觉不大好，如果结合load more则比较好的能找到一个平衡点。然而如果你在寻找一个更加爱完美的方法的话，可以考虑制作伪页面高度（faking height）计算一下你页面的预估高度，区别只是lazy loading之前是延展页面（extending page）,现在是占据了空白控件的页面（taking up the empty space）.

加载页面用在搜索结果展示(Load more for search results)

研究发现大部分的网站搜素结果都有上千条。而且搜索结果通常按照相关度来区分，因此，第五条通常比第100条的相关度要高，这也就意味着，当用户在搜索产品的时候，他们不应该看到第一百个商品去，而是应该一开始就找到比较想要的。并且会仔细关注。因此搜索结果只展示25-75个就够了，因此Infiinite scrolling也不应该用在这里。

分页和加载更多按钮会比较合适。因为我们在这里不鼓励用户去迅速的查找，而是希望他们关注在头两页，并且能在一开始就找到心仪的结果。

搜索的首页加载数量应该根据产品的相关度来来决定，如果前28个产品相关度很高，而后面的产品相关度一下子跌了，那么就展示28个在首页，如果说有100个都很有相关度就放一百个，让用户有足够的选择。