【译】无限滚动加载最佳实践

本文转载自：众成翻译
译者：文蔺
连接：http://www.zcfy.cc/article/673
原文：https://uxplanet.org/infinite-scrolling-best-practices-c7f24c9af1d#.1xzr65wil

无限滚动（Infinite scrolling），有时候被称为无尽滚动（endless scrolling），这种技术容许用户在大量内容上滚动，眼中看不到结束的地方。这种技术很简单，就是页面往下滚动的时候保持刷新。

这项技术使用户在没有打断和额外交互的状况下滚动列表 —— 随着用户滚动，一条条的内容就出现了。Facebook 的新闻推送页，Google 的图片搜索，Twitter 的时间线，这些页面都用到了这项技术。虽然听起来还挺有诱惑力的，但并非对全部网站或应用都通用的。

优秀无限滚动的五项原则

将无限滚动作好，并非不可能完成的任务。为了完成它，记住并遵照如下方针。

1. 导航条保持可见

使用无限滚动时候，最好保持导航条持续可见，这样能够很快导航到页面或应用的不一样区域，对用户来讲也更简单。若是找不到导航条，用户将不得不一路向上将页面滚回去。

仅适用移动设备：由于移动端屏幕要小得多，导航条所占比例能够相对大一些。若是屏幕上是滚动的内容，用户滚动获取新内容的时候，导航条能够隐藏起来；当用户开始往回滚动试图回到顶部的时候再显示出来。

2. 若是有页脚，加上“加载更多”按钮

无限滚动阻碍用户的访问页脚。实际上，这也是无限滚动设计的主要挑战之一：用户到达列表底部的时候，内容在不断地加载进来，用户会有一两秒时间看到页脚，直到下一组结果加载成功并将页脚挤出视图以外。这阻止用户接触到页脚。

拿 Bing 图片举例子。页脚包含“了解更多”、“帮助”等连接，但用户没办法真正点到任何一个，直到过一下子，页面中止无限滚动。

若是你的网站或应用有页脚，且它对你（或者，更要紧的，对你的用户）很重要，那就应该用“加载更多”的方法。新内容不会自动加载，直到用户点击了“加载更多”的按钮。这构成了一个很简单的交互界面，也使得按需加载额外内容的认知负荷多是最小。

Instagram 使用“加载”更多按钮以便页脚简单可及，而且不会强制用户再三点击“加载更多”。

3. 返回按钮将用户待回至以前的位置

有时候，无限滚动的实现带来一个主要的可用性缺陷：滚动位置并未被记录为“状态”。若是用户从列表中的连接跳转了，而后点返回按钮，他们但愿能回到页面原来相同的位置。可是列表的位置再也不存在了，这意味着使用浏览器的返回按钮通常都致使滚动位置重置到页面顶部。无怪乎用户很快就以为沮丧，都没有一个合适的“回到列表”的功能。

别让你的用户就由于使用返回按钮，找不到列表的位置。很重要的是，用户经过列表访问了某一个项目的详情页，他们点击浏览器返回按钮返回列表的时候，也应该在相同的位置。

Flickr 监听用户点击浏览器后退按钮的行为，知足用户的指望。APP 记住用户的滚动位置，因此当用户按后退按钮的时候，返回到原始位置。

4. 提供为特定项添加书签的可能

无限滚动最多见的缺点之一就是，内容出现的时候，无法添加书签。喜好内容的简单的书签（或者
“保存稍后再看”），做为将来的参照，对用户来讲是颇有用的工具。当网站或应用提供书签功能的时候，用户会使用的。比方说，Pinterest，使用书签工具帮助用户保存创意。

5. 加载新内容时提供视觉反馈

当内容在加载的时候，用户须要明确的指示，说明正在进行中。使用进度指示（process indicator）让用户知道，新内容正在加载，很快就会在页面上显示。

由于加载新内容是一个很快的动做（不会超过 2-10 秒钟），你可使用循环动画来提供反馈，代表系统正在工做。

也能够有助于为用户添加额外的清晰,包括文本解释了为何用户等待(例如“加载评论…”)。
为用户添加额外声明，提供说明为什么用户在等待的文本（如“正在加载评论”），也是颇有用的。

结论

无限滚动实现得好的话，能够达到使人难以置信的光滑无缝体验。很好的是，关于好的无限滚动，你已经得到一些线索了，这会帮你创建完美的用户体验。

谢谢！