将其发挥到极致——长滚动网站概述

长滚动，或无限滚动，网站就是这样：页面比“平均”网站页面长得多，因此滚动“无限”。 这些类型的网站已经在社交媒体网站和 Pinterest 等包含大量用户生成内容的网站以及一些新闻和博客网站中流行起来——个人网站和投资组合也开始采用长滚动技术来增加用户参与度和人们在网站上花费的时间长度。

无限滚动已成为一种流行且常见的设计模式，然而，UI 设计师在设计使用长滚动的网站时应该注意一些潜在的陷阱。 还有一些类型的网站不适合采用长滚动设计模式。

长卷轴的目的和好处

长滚动网站的最大好处之一是它们可以让访问者在网站上停留更长时间。 当人们不必有意识地决定消费更多内容时，他们就不太可能点击离开。

可以将其视为类似于 Facebook、YouTube、Netflix 和类似网站在用户观看完视频时自动播放视频的方式。 他们知道，如果访问者必须努力点击新视频，他们很可能会完全点击不同的网站。 但如果视频继续播放，他们更有可能继续观看。

当长滚动站点被正确编码时，它们会为每个新内容加载一个新 URL。 这等于网站的更多页面浏览量，这可以增加广告收入和网站的整体价值。

与任何 UX 决策一样，在决定格式之前权衡实际使用网站的人的优点和缺点是很重要的。 对于某些类型的网站，长滚动可能是一个不错的选择，而在其他情况下，它只会让用户感到沮丧。 了解两者之间的区别很重要。

何时使用长滚动（何时不使用）

考虑长滚动时要记住的关键是无论设计什么样的网站，内容都应该规定格式。 长滚动网站非常适合某些类型的内容，但可能会导致其他类型的用户体验失败。

总体而言，面向任务和目标的网站不会从无限滚动设计中受益（例如，电子商务网站和教程或其他用户希望看到明确进展的教育网站）。 这些类型的网站需要给用户一种完成感和成就感，而这对于长滚动网站来说更难实现。

例如，Etsy 在 2012 年尝试了无限滚动设计，最终切换回分页。 他们发现，虽然客户仍然以大致相同的速度购买，但用户参与度却大幅下降。 甚至像执行的搜索次数这样的事情也下降了。

一些电子商务网站为访问者提供的一个选项是查看产品页面时的“查看全部”选项。 如果用户选择这样做，这使用户可以选择以无限滚动格式查看站点，同时为喜欢该格式的用户保留较短的结果页面。

当人们按时间顺序查看信息很重要时，分页也很有帮助。 一页滚动网站可能会鼓励人们浏览和跳过，分页会减慢访问者的速度并增加他们以正确顺序消费信息的可能性。

单页滚动网站真正能够大放异彩的地方是阅读额外内容或文章是自然流程的网站。 这适用于新闻网站或主题博客等内容。 这些网站上的用户通常希望一次获取大量信息，而无限滚动使其变得更容易。

无限滚动是流行的 UX 选择的另一个明显领域是社交媒体网站或具有大量用户生成内容的网站。 Facebook、Pinterest 和 Twitter 都使用无限滚动。 这些网站希望尽可能长时间地让用户留在网站上，无限滚动就可以做到这一点。

长卷的心理成本

任何设计决策的心理影响都应该仔细考虑。 对于单页滚动网站，无论是对它还是对它都有心理影响。

首先要考虑的是用户不介意有目的的点击。 从一开始，点击就几乎成为了计算、图形用户界面和互联网的一部分。 人们已经习惯了这种特定类型的交互，并且如果他们必须单击几个链接才能获得更多内容，他们也不会被关闭。

默认情况下，许多用户不喜欢无限滚动。 面对要滚动的极长页面可能会感觉有点像淹没在永无止境的信息海洋中。 当用户查找特定信息时，滚动很少是最有效的查找方式。

由于无法准确显示页面长度，无限滚动会破坏页面侧面的滚动条。 虽然不是每个用户都使用滚动条，但在这方面，那些使用滚动条的用户可能会发现无限滚动令人沮丧。

无限滚动还消除了用户从完成任务或在一个页面上达到目标然后单击下一页获得的完成感。 失去这种完成感会阻碍用户并导致他们为相同的信息或任务寻找其他来源。

长滚动网站可能产生的另一个负面心理影响是，用户倾向于查看页面下方的内容不如顶部的内容重要。 使用标题可以帮助解决这个问题，因为它有点“重置”访问者的大脑“顶部”在哪里。

长滚动网站最佳实践

如果确定网站项目适合长滚动设计，则需要牢记一些最佳实践，以确保它提供最佳的用户体验。

首先，放弃页脚！ 当内容不断加载时，页脚将不断被推离页面底部。 这意味着页脚中包含的任何内容或信息都将保持在视线之外。 更糟糕的是当用户瞥见页脚但在他们有机会点击任何东西之前就看不到它。 使用粘性页脚是解决此问题的一种方法，尽管完全摆脱页脚通常是更好的选择。

使用视觉提示很重要，尤其是当主屏幕加载时页面上的内容更多时并没有立即明显。 具有较大标题图像或在页面加载时填满屏幕的视觉内容的网站通常包含箭头（有时是动画）或类似图像，以指示下面有更多内容。

通过使用粘性标题或带有导航链接的固定侧边栏，导航应该始终可见。 移动设备上的例外情况是，粘性标题会占用宝贵的屏幕空间。 Facebook 很好地处理了这一点，当用户向下滚动时标题消失，但当他们开始向上滚动时重新出现。

Chrome 网络浏览器在屏幕底部的控件执行类似的操作； 当用户向下滚动时它们会消失，并在用户开始向上滚动时重新出现。 这是创建最大化可用屏幕空间的界面的一种非常直观的方式。

值得庆幸的是，在无限滚动网站中变得越来越普遍的一项重要 UX 功能是在滚动到每个部分时更改 URL。 有些人使用页面内的内部书签来做到这一点。 其他网站，尤其是新闻网站和博客，会在用户滚动时更新整个 URL。 这很重要，因为它允许用户准确链接到他们想要链接的内容，而不管页面本身的更改。

一些网页设计师选择创建一个可以被认为是“混合”长滚动网站，带有一个“加载更多”按钮，可以将内容直接加载到同一页面上。 一些 UI 设计师在页面上重复使用它，而另一些则选择只包含一次，然后将网站变成更传统的长滚动格式。

除了这些长滚动网站特定的设计注意事项之外，其他用于创建良好设计的 UI 和 UX 最佳实践仍然适用于使用无限滚动的网站。

正确完成长滚动的示例

然后是这个网站，来自 Andrew McCarthy。 虽然设计是独一无二的，但它会一遍又一遍地无限滚动相同的信息。 由于 McCarthy 是一名设计师，为了在人群中脱颖而出，这很可能是经过深思熟虑的选择。

还有另一个来自 Sam Rosen 的例子，他也不断重复相同的内容，尽管这个站点循环回到顶部而不是重新加载所有内容。

结论

虽然长滚动网站并不是什么新鲜事，但它们正在达到一个新的成熟水平。 设计师不再将它们用作下一个“大”事物，而是关注模式如何影响用户体验。

在创建无限滚动网站时遵循最佳实践允许设计师创建一个让用户满意而不是让他们失望的用户体验。 同时，正确实施的长滚动网站也可以帮助品牌实现其网站目标。

• • •

进一步阅读 Toptal 设计博客：

• 有说服力的设计：有效地使用高级心理学
• 设计心理学和真棒用户体验的神经科学
• 体验就是一切——终极用户体验指南
• 终极用户体验钩子——用户体验中的预期性、说服性和情感设计
• UX 久经考验的真实法则（附信息图）