制作超长滚动页面？7个你应使用的方法助你成功

很多时候，我们都遵循一个选择——让内容保持在一页之内，但这不总是适用的，有些时候我们需要一个可以持续向下滚动的页面，允许他们长时间浏览，并保持用户的关注。

滚动加载是最佳的吸引住用户的方式之一，可以呈现在单页上无法实现的功能，例如通过滚动，可以动态加载更多的内容。诚然，这种方式有不利于抓取等缺点，但如今的用户非常习惯滚动这种使用方式，所以我们需要放下成见，在适当的地方使用它们。

1.有参与度的内容

这类网站成功的关键是内容质量，没有什么是比内容更加重要的。

不幸的是，不存在一种测试可以告诉你什么内容质量比较好，你只有投入使用后通过用户分析来实现这一点。

尽管如此，你仍然有几种方法可以创建更加的内容：

• 讲一个有趣的故事，并代入你的内容
• 使用高分辨率的和有趣的视觉内容，如照片、插图和视频
• 给用户滚动的理由，比如某些章节的中断，促使他们滚动继续阅读
• 限制选择。给用户操作空间，但不要给予过多选择，每个页面或加载的内容块中，有一个交互内容就足够了。
• 动人的内容。虽然视觉效果可以创造第一印象，但内容才是真正促使用户阅读的原因。使用生动的词汇，创作有代入感或认同感的可信故事。

2.建立一个视觉主题

强有力的视觉主题将帮助用户理解页面的内容。一些视觉上的提示，比如下划线、箭头和链接线，可以有助于保持用户在页面上滚动查看内容。

如果你希望知道滚动设计是否在网站上奏效，可以分析用户的停留时间——在开启这个设置之前，用户的停留时间是更长了还是更短了？他们和页面的互动是增加了还是减少了？最终对转化的期望是增加了还是减少了？

滚动页面应该有助于提升网站流量，如果并没有，说明用户不能很好地理解你的视觉主题，或者滚动页面的设计概念根本不适合这个用户群。

3.增强互动效果

长滚动页面的好处之一就是可以在网络上创造沉浸式的阅读体验，使用取悦用户的小型的交互技术可以提升这种体验。

切换动画，幻灯片操作，变形的图像，这些在滚动中的小型交互可以帮用户保持联系。上面截图中的网站Beatrate就使用了诸如视频、动画框、悬停效果、旋转计数器和图像滑块等交互技术。

滚动的每个部分对应的动画都应该是相关的，这样才有助于用户的理解。

4.滚动技术的使用

设计师青睐滚动加载网站的原因之一，就是它们可以在桌面和移动端上都良好地运转。

许多用户实际上更喜欢滚动而不是点击，尤其是在更小的设备上，因为这不仅不需要切换页面而且访问起来更加容易。

使用滚动技术，如时差、色彩遮挡或混合的内容来保持设计的流畅感，这些设计将提示用户内容的变化，同时保持页面趣味性。同时，它们也将鼓励用户滚动，因为用户会期望看到接下来会出现什么。

通过滚动设计，大部分内容将在单一页面上呈现，这也让你不必重新考虑弹出窗口或隐藏移动导航等问题。

5.长滚动和短滚动

正如在滚动中可以交替使用各种设计效果，长滚动和短滚动也可以搭配使用。短滚动应该包含可以快速接受和易于消化的内容块，如图像和大字体的少量文字。而长滚动则可以包括信息图或大量文本等模块。对于长短滚动的选择可以遵循这个基本的原则。

混合长滚动和短滚动可以帮助用户保持新鲜感，就像在撰写书籍时，长短句搭配可以防止形式上的单调并防止读者感到无聊。

6.提供一个线路图

如果你的网站需要长时间滚动，用户会想知道他们在阅读什么位置，以及他们什么时候可以到达目的地。这就是线路图的作用。

线路图有多种形式可供选择：

• 固定位置的导航
• 显示剩余内容的点或类似元素
• 指引操作的箭头或符号
• 回到起始点或前进到末尾的方式

7.明确设计意图

长滚动网站包括无限滚动网站，不应该是漫无目的的。设计应该包括开始和结束，并为用户提供明确的目标。

不论设计看起来多么好，你都需要给用户空间，否则网站有什么意义呢？

所以，在思考设计事前，你需要明确设计的最终目标。滚动的每一个部分，都应该设计为用户达成这个目标，就像上面的例子一样，每个页面或滚动都包含号召性用语（如“立即购买”、“查看详情”或“联系我们”）的按钮，它位于设计的核心位置，易于查看和点击。

在多个位置安置号召性用语很重要，因为并非每个用户都会看到长页面的结尾——无论故事有多么好，视觉内容有多么棒，交互有多么精彩——大多情况下甚至会用很短的时间（几秒钟内）做出决定。所以，你需要确保号召性用语按钮在一开始就清晰可见，并在每个阶段都可以很容易地访问。

英文来源：Design Shack

英文标题：7 Ways to Ensure Your Long-Scrolling Website Is Successful

原作者：Carrie Cousins

翻译：卡米雷特