长滚动页面的最佳实践

　

长或无限滚动的网站比来越来越遍及，这不但仅是趋势或巧合。长滚动的技术允许用户来回移动大量的内容，且不会中断或额外的交互，信息只是在用户向下滚动页面时出现。无限滚动是各种长滚动，允许用户滚动大量的内容，没有终点线（这是你在Facebook，Twitter和Tumblr Feed上看到的无限滚动）。

长滚动具有以下好处：

更多的吸引潜在用户。（滚动最小化实现各种用户目标所需的交互成本。不需要点击“下一步”就可以让用户参与内容，而不是专注于导航到下一页的机制。）很好地转化为移动设备。移动屏幕使用的增加在广泛接受这种技术方面发挥了关键作用：屏幕越小滚动的时间越长。移动设备的手势控制使滚动更直不雅观和有趣。滚动为设计师打开了许多新的大门。但这种模式也不是没有缺点的。它需要设计师对内容和导航的高度关注。

在这篇文章中，我将讨论一些长滚动的优势和需要考虑的快速提示。

何时使用长滚动？

长滚动不适用于每个网站。在以下情况下是适当的：

1. 讲故事（它创造了一个线性结构，讲故事者可以利用）;

2. 对于连续和冗长的内容，例如长篇文章或多步骤教程（它提供了很好的用户体验，而不是将其分成几个单独的页面）;

Dropbox’“用户指南”是长时间滚动操作的示例。 （来源： Dribbble）

3. 当内容不能分为单独的部分，应该作为一个整体呈现（例如，一个信息图）;

4. 突出产品在故事中的特征，品质或属性。

在Hans Brinker的网站上长篇大论，突出了故事中办事的品质和属性。

在这些情况下，长的滚动和长的阅读是相同的。

如何实现长滚动？

以下10条规则将帮手你为长滚动提供良好的用户体验。

1. 鼓励用户滚动

尽管人们通常会在页面加载时就开始滚动，但是内容上方的内容仍然非常重要。页面顶部显示了访客的初始印象和质量期望。人们会滚动，但只有当人们对上面的内容是感到希望的时，才会滚动页面。因此，将最令人信服的内容放在首要位置：

提供一个好的介绍。（一个好内容上下文的介绍设置，会帮手回答用户的问题，“这是什么？”）使用引人入胜的图像。 （用户密切关注包罗相关信息的图像。）2. 连结导航选项持续

当你创建一个长滚动的网站时，请记住，用户仍然需要一种标的目的感（即他们当前的位置）和导航感（其他可能的路径）。长滚动可能会引发用户导航问题：如果导航栏在用户向下滚动时失去其可见性，当它们在页面内部时，将不得不向后滚动。这个问题的解决方案显然是粘贴菜单显示当前位置，并始终连结在屏幕上的一致位置。

滚动式粘帖性导航（图像：Zenman）

仅适用于移动设备：由于移动屏幕比其他大多数设备小得多，因此导航栏可占据相对较大的屏幕部分。如果屏幕显示滚动进制，则当用户滚动新内容时，，你可以隐藏导航栏，然后不才拉回到顶部时显示。

 （图像：lmjabreu）

通过按照滚动标的目的隐藏导航栏，Facebook可以节省一些垂直空间。

提示：你还可以让用户在增补导航的页面部分之间跳转。例如，下面的动画解决方案帮手用户跟踪他们的进度，同时也可以作为特定部分的快捷方式。

（图像：WebDesignCrowd）

3. 确保“后退”按钮正常工作

长滚动通常会导致用户丢失在页面上位置。当他们在长滚动列表中点击时，会发生这种情况，当通过点击“返回”按钮返回时，它们将被移动到原始页面的顶部，而不是他们离开的位置。但是当用户跟随页面上的链接，然后点击“返回”按钮时，他们希望返回到原始页面上的同一个位置。丢失他们的位置迫使他们必需滚动他们已经看到的内容。令人惊讶的是，用户因为没有正确的“回到位置”功能而迅速沮丧。

激活Feed中的元素时，用户必需能够返回激活它的原始元素。 Flickr是将浏览器的“返回”按钮行为与用户期望相匹配的一个很好的例子。网站记住用户的滚动位置，所以当用户按下“返回”按钮时，它们还会返回本来的位置。

Flickr将浏览器的“返回”按钮行为与用户的期望相匹配。

4. 按照滚动位置更改网址