[自译]滑无止尽，如何设计无限滚动的页面

原文链接：Just Keep Scrolling! How To Design Lengthy, Lengthy Pages

原文作者：Nick Babich

这篇文章在探讨Long Scrolling的设计时非常全面：从优劣两个方面来看到long scrolling的使用；并且总结了10条建议帮助我们更好地设计long scrolling页面；其中作者不仅考虑了long scrolling对用户产生了影响，也引入了很多与技术和性能相关的探讨（视野很宽广）。在广泛应用的电商web中，也进行了一些细致的分析。最后引入了有趣的滚动视差，帮助你让滚动页面变得更为有趣。嗯，在这里作者也引入了技术性的论述，甚于学术性的web动画讨论文章，如何让前庭视觉神经紊乱症的人能够接受你的网站？哈～有趣。

无限滚动和超长页面的网站变得越来越普遍，这不仅仅是一种趋势或巧合。长页滚动允许用户在没有干扰和额外交互的情况下，尽情的浏览内容。只要华东页面，信息就会简单的呈现出来。

无限滚动（infinite scrolling）是一种长滚动形式，用户可以通过滚动操作浏览大量的内容，永远也看不到终点线（你在Facebook,Twitter,Tumblr上的feeds就是这种形式）。

Long scrolling有以下优势：

-它有更大的潜力去激励用户。滚动操作最小化了用户实现目标的交互成本。不需要点击“next”，让用户更专注于内容，而无需分心如何导航进入下一页。

-更好的迁移到移动端设备。移动端的快速普及，也让long scrolling被广泛接受：屏幕越小，滚动越长。移动设备的手势控制，使得滚动更加直观和有趣。

滚动操作给设计师们打开了更多创意的大门。然而这种模式并非没有缺点，它需要设计师关注更多的内容和导航。在这篇文章中，我将会讨论一些设计优势，需要考虑的事情，以及设计scrolling的一些要点。

什么时候使用Long Scrolling?

Long Scrolling并不适合每个网站，在下面这些场景中是合适的：

故事讲述（它创建了一个线性结构可以帮助讲述者更好地陈述）；

连续冗长的内容，例如一篇长文或分步骤的教程（相比于将内容分割为单独的几个页面，它提供了更好的体验）；

Dropbox的“User Guide”就是一个长滚动的实例（来源： dribbble Dropbox-Guide）

-当内容不能够被分割单独展示时，必须作为一个整体呈现（例如信息图）；

-在故事中强调特性，品质，或产品的某一种属性。

网站在一个故事中强调了品质和服务的特性（ http://hansbrinker.com/amsterdam/）

在这些情景下，越长的滚动，也意味着越长的阅读。

如何实现Long Scrolling

下面的十条建议可以帮助你在设计Long Scrolling的时候，提供优秀的体验：

1.鼓励用户去滑动

尽管人们有时候会在页面加载的时候就开始滚动，但是顶部被折叠的信息仍然重要。页面顶部显示的内容，会让访客建立初步印象，并且影响他对接下来内容质量的期望。人们确实会下意识的滚动，但也是在顶部内容提供了足够的质量保证的情况下（我应该会下面的内容感兴趣）。因此，你需要把能够吸引人的内容放在最上面：

提供一个很好的介绍（一个好的介绍建立了情景，能够回答用户的问题：“这个页面是关于什么的？”）

使用吸引人的图像。（用户会更关注包含信息的图片）

2.保持导航功能的存在感

当你创建了一个long-scrolling的页面时，请记住用户需要方向感（当前我在哪？）还有导航能力（其他可能的路径）。Long scrolling会让用户对导航产生困惑：如果导航在用户滚动的时候不见了，而用户又处在页面深处的时候，他可能需要一直向上滚动去寻找导航。解决这个问题最明显的方法就是通过一个菜单，显示它当前所在的位置，并始终固定在屏幕上的这个位置。

滚动页面中的固定导航（图片来源：Zenman）

对移动设备来说，因为屏幕比其它设备要小很多，导航条的存在可能会占据相当大的部分。如果拼命显示了滚动的feed，当用户滚动新内容时，可以隐藏导航栏，在它们下拉的时候再在顶部显示出来。

Facebook通过在滚动方向上隐藏导航，节省了很多的竖向空间，图片来源： Imjabreu

Tip：你也可以补充导航元素来让用户在页面各个部分跳转。例如下面的动画帮助用户追踪它们的进度，也可以作为索引特定部分的快捷方式。

图片来源： https://dribbble.com/webdesigncrowd

3.确保“返回”按钮正常生效

Long scrolling通常会导致用户在页面上失去位置。发生这种情况时，用户会倾向点击“返回”离开页面，但是很多时候点击的结果是返回顶部，而不是退出页面。当用户点击页面中的一个跳转链接后，想要返回到原来阅读的同一位置时，点击“返回”往往是重新载入了页面，不得不自己再去寻找之前阅读到的位置。这些非正常的“返回”反馈会让用户感到沮丧。

当激活页面中的一个元素后，用户必须能够返回到激活元素的位置。Flickr就是一个很好的例子，它将浏览器中“后退”按钮的行为与用户期望匹配一致。网站还能记住用户滚动的位置，当用户按下“回退”按钮，他们就会会退到原来的位置。

flickr将浏览器的“返回”与用户预期匹配一致

4.能够附带滚动位置的URL

long scrolling的一个最常见问题是，将URL与页面上的某个位置分享出去是不可能的：用户的滚动位置不能够反映在URL中，URL指向顶部。当用户不能够灵活地在设备之间切换方便继续浏览，用户就会感到失落。URL是无法捕捉到这个位置的。但是从HTML5开始，更改浏览器中显示的URL而无需重新加载页面是可能的。pushstate（）函数是我们能够在不重载页面的情况下调用URL change，从而能将滚动位置与用户期望保持一致。

5.考虑跳转选项

long scrolling的另一个问题就是容易迷失方向：用户很难找到他们之前在页面上看到过的东西。当页面被分为了很多模块的时候，这可能是一个严重的问题。“jump to section”选项可以解决这个问题。例如，在Tumblr上，用户可以跳过页面，或者跳转到开始的地方。页面在内容上被分为了几个模块，每个模块都是清晰的，指示器被安置在了屏幕的左边。

轻点一下，用户就可以跳转至相应的位置

Tip:如果你想要使用“jump to section”功能，请确保这一系列的点容易使用，如果它们很小，或者很难点击，那么就会让用户失望。因此，注意保证这些原点大小适当。

6.当加载新内容时，提供可视化的反馈

根据Jakob Nielsen的10项可用性原则，系统状态的可见性仍然是用户界面设计中最重要的原则之一。用户希望在任何时间都能了解他们当前的环境，而产品不应该让用户去猜想，它应该通过适当的视觉反馈告诉用户发生了什么。如果你的网站动态加载内容，那么用户需要一个明确的信号，说明网站正在这样做。让他们了解情况，使用进度指示器来显示新内容正在加载，并且很快就会出现在页面上。

因为内容的加载应该是快速的（不应该花费2～10秒的时间），你可以通过循环动画来暗示正在进行工作。

微动画（例如Tumblr的加载）告诉用户：“我正在为你加载更多内容”

7.不要劫持滚动

劫持滚动的网站可以被控制滚动，覆盖浏览器的基础功能。着很糟糕，因为用户不再对页面完全控制，无法预期行为。

这个问题在Apple’s Mac Pro的页面上可以看到，不管你滚动的多快，布局都是以预定的速度切换。由于页面上的所有内容都与滚动有关，因此访问者不得不缓慢的浏览页面。

你尽管滚动，页面都是一个速度加载

8.优化页面的加载时间

加载慢也是long scrolling页面的一个问题。但是对网站来说，缓慢的性能是一个致命的打击。事实上，47%的用户希望web在2秒内加载。如果一个页面没有在3秒内加载，57%的用户将会离开。

这个问题也可以通过一些技术手段来解决。通过顺序加载技术进行优化，比如延迟加载，让用户能够快速地访问基本内容。

9.考虑页面消耗了多少资源

如果你长时间的滚动（特别是对于有大量图片和动画的页面），你的页面会消耗多少资源（CPU&内存）？在页面没有被重载的情况下，滚动浏览大量照片，gif和视频，会对系统资源造成影响。而资源有限的设备，会因为加载数量过多而缓慢运行。因此，用不同的设备测试你的网站，当用户滚动浏览时，通过一些技巧来减少资源消耗，比如暂停动画和视频。

10.考虑页面上用户的行为

为了确定long scrolling的效果，找出用户是如何与之交互。分析数据可以回答这个答案。例如，在Google Analystics中，看看有多少人点击了下面的内容，根据数据，你可以在必要时对设计进行调整。

电商网站的Long Scrolling

在电商网站中，long scrollnig经常被使用。对于产品列表和搜索结果，这一模式有一个好处：用户可以在不打断的情况下滚动产品列表和结果。不需要交互-产品只在用户滚动页面时出现。

但是，为了创建良好的用户体验，你需要解决一些问题。

使导航和过滤器连接

当正确使用的时候，过滤器可以将一个网站数千种产品的选择范围缩小到那些符合他们需求的产品。与导航一样，保持过滤选项的可见性是很重要的，让用户感觉一切都在掌控之中。

图片来源：ID90travel

使单项可以被标签

一个简单的标记（或“感兴趣”功能）供以后参考，这对用户来说是一个强大的工具。

显示匹配结果数量

显示有效的数量，这样用户可以决定他们花多少时间浏览滚动结果。

让页脚可以访问

人们理解页脚的概念，他们希望在那里找到网站相关的信息链接，但是long scrolling阻碍了用户访问页脚；这看起来像是一个严重的问题，但它可以通过“加载更多”按钮来解决。有了这个解决方案，内容就会按需加载：新内容不会自动加载，直到用户点击“更多”。这种方式下，用户可以轻松的到达页脚。

Long Scrolling中的视差效应

long-scrolling网站下的交互设计中，动画也是设计的一个重要部分。考虑到用户在web上的注意力持续约为8秒，令人愉悦的滚动体验肯定会延长用户的兴趣。一个有趣的动画可以让用户开心，那就是视差效应。

在视差滚动的情况下，背景图的移动速度比前景内容要慢，造成了深度和沉浸感的错觉。这样的效果时图像不那么扁平，更加立体。

什么时候有视差效应？

在web设计中，路程可以像到达目的地一样愉悦。视差是一种有趣的视觉效果，它能给人留下深刻的印象，并鼓励访问者更多的互动，当你想要吸引观众的时候，这非常有用。

视差滚动在引入一个故事的时候非常有效。当你通过平滑的线性视差滚动讲述一个故事的时候，可以创造非常好的体验。在The Boat中，当用户滑动，动画会创建路径带入到下一个场景。这让用户有了兴趣并且期待：“接下来会发生什么？”

什么时候是视差的错误用法？

如果大多数用户希望完成任务（例如购买商品），那么就避免使用。试想一下，你每次想要购买一款产品，你必须看到视差效果，Amazon应该会很难过吧。

视差和页面性能

使用视差效果的绝大多数网站，都有糟糕的滚动性能。它在高像素密度的设备上尤其糟糕。虽然性能问题不能被完全解决，但你仍可以通过以下简单的技术来提高滚动性能：

只使用那些对浏览器来说很简单的属性。3D改变，缩放，旋转，调整不透明度。

不要对大量的图片进行动画，或者大幅调整他么的大小，强迫浏览器调整图片尺寸的代价很高。

视差和可访问性

想想看，前庭视觉神经紊乱症的人如何使用你的网站？动画会让这组用户感到晕眩。（designing safer web animation for motion sensitivity）这篇文章会告诉你如何创建安全的动画。如果你的网站有很多动画，提供一种查看内容的方式-关闭运动。这可以通过一个按钮或者开关实现，Nat Tarnoff开发了一款原型可以关闭任何网站的动画（https://codepen.io/nattarnoff/pen/JoMxpK）。

结语

Long scrolling可以创建完全沉浸式的浏览体验。如果一个用户喜欢UI，那么他们就不会介意滚动的长度。因此专注于他们的目标，让你的用户更加方便。