网站制作之无限滚动网页的制作形式案例

长期或无限卷动的网站最近越来越普遍，并不仅仅是趋势或巧合。长滚动的技术允许用户遍历大量的内容，而不会中断或额外的交互 – 信息只是在用户向下滚动页面时出现。

无限滚动是各种长滚动，允许用户滚动大量的内容，没有终点线（这是您在Facebook，Twitter和Tumblr Feed上看到的无限滚动）。

进一步阅读 SMASHINGMAG：链接

• 使用Adobe XD快捷键的快速UX原型（PDF作弊表）
• 无限滚动，分页或“加载更多”按钮？电子商务中的可用性发现
• 功能动画如何有助于改善用户体验
• 底部导航设计的黄金规则

长滚动具有以下好处：

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

滚动为设计师打开了许多新的大门。然而，这种模式并没有缺点。它需要设计师对内容和导航的关注。在这篇文章中，我将讨论一些好处，需要考虑的事情和快速提示。如果您希望通过您的设计获得更多的创意，您可以免费下载并测试Adobe XD，并立即开始使用。

何时使用长滚动？链接

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

• 对于讲故事（它创造了一个线性结构，讲故事者可以利用）;
• 对于连续和冗长的内容，例如长篇文章或多步骤教程（它提供了更好的用户体验，而不是将其分成几个单独的页面）;
  

  

• 当内容不能分为单独的部分，应该作为一个整体呈现（例如，信息图表）;
• 突出产品在故事中的特征，品质或属性。

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

如何实现长滚动链接

以下10条规则将帮助您为长时间滚动提供良好的用户体验。

鼓励用户滚动链接

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

• 提供一个很好的介绍。（一个很好的介绍设置内容的上下文，并帮助回答用户的问题，“这是什么？”）
• 使用引人入胜的图像。（用户密切关注包含相关信息的图像。）

2.保持导航选项持久链接

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

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

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

确保“后退”按钮正确连接

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

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

4.根据滚动位置链接更改URL

长时间滚动最常见的问题之一是不可能在网页上与特定地点共享网址：用户的滚动位置不会反映在网址中，网址会导致页面顶部。当用户不能轻易地在设备之间切换时，用户将变得轻而易举地从当前位置继续浏览，因为该URL不能捕获该位置。从HTML5开始，可以更改浏览器中显示的URL，而无需重新加载页面。该history.pushState（）函数使我们能够调用一个URL变化而无需重新加载页面，从而使我们能够匹配滚动行为给用户的期望。

5.考虑跳转选项链接

长滚动的另一个常见问题是定向障碍：用户可能难以找到以前在页面上看到的内容。当内容分解成多个同样重要的部分或块（例如长教程）时，这可能是一个严重的问题。“跳到部分”选项将解决这个问题。例如，在Tumblr上，用户可以跳下页面，或者如果丢失，可以跳回到开始。页面上的内容被分解成几个明确区分的块，大的指示符点固定在屏幕的左侧。

提示：如果要使用“跳转到部分”功能，请确保该系列的点容易使用。如果它们很小或难以用鼠标点击或者在触摸设备上准确地按下，那么它们将阻碍用户。因此，确保点的大小适当。

6.加载新内容链接时提供视觉反馈

根据Jakob Nielsen的10项启发式的可用性，系统状态的可视性仍然是用户界面设计中最重要的原则之一。用户希望在任何给定的时间在系统中知道他们当前的上下文，网站不应该让他们猜测 – 它应该通过适当的视觉反馈告诉用户发生了什么。如果您的网站动态加载内容，那么用户需要一个明确的迹象表明网站正在做这个。通知他们 使用进度指示器显示新内容正在加载，并将很快出现在页面上。

因为加载的内容应该是快的（它不应该花费更长的2到10秒），你可以使用循环的动画来表明系统正在工作。

7.不要劫持滚动链接

劫持滚动的网站控制滚动并覆盖网络浏览器的基本功能。滚动劫持是坏的，因为用户不再具有对该页面的完全控制，并且无法预测其行为。

在苹果Mac Pro页面上可以看到这个问题。无论您滚动多快，布局以预定速度移动。由于此页面上的所有内容都与滚动相关联，因此访问者被迫以缓慢的速度浏览该页面。

8.优化页面加载时间链接

加载时间慢是长滚动页面的常见问题。但对于网站来说，表现不佳是一个致命的打击。事实上，47％的用户期望网页在2秒内加载。如果页面在3秒内没有加载，则57％的用户将离开。

虽然加载时间是长滚动页面的一个问题，但是它可以解决。页面加载时间可以使用顺序加载技术进行优化，例如延迟加载，使用户能够真正快速访问基本内容。了解Smashing Magazine团队根据“卫报”重新设计所取得的业绩改进。

9.考虑您的页面消耗多少资源链接

如果您使用长滚动（特别是对于具有大量图像和动画的页面），请始终考虑您的页面消耗的资源（CPU和内存）数量。滚动多张照片，动画GIF和视频没有页面重新加载可能会对系统资源造成重大损失，而有限资源的设备（如iPhone）可能会由于正在加载的资产数量而开始放缓。因此，使用不同的设备测试您的网站，并在用户滚动过去时使用暂停动画和视频等技巧。

10.在页面链接上考虑用户行为

要确定长滚动的有效性，请查看用户如何与之进行交互。分析数据能够回答这个问题。例如，在Google Analytics（分析）中，您可以打开页面分析，查看有多少人点击下方。根据数据，您可以在必要时调整设计。

电子商务网站长滚动链接

电子商务网站经常使用长滚动。对于产品列表和搜索结果，此模式具有一个主要优点：用户可以滚动产品或结果列表而不会中断。不需要交互 – 产品只是在用户向下滚动页面时显示。

但是，要创建良好的用户体验，您需要解决一些常见问题。

导航和过滤器粘贴链接

过滤后，过滤器使用户可以将网站上的数千种产品的选择范围缩小到仅满足需求的几个产品。与导航菜单一样，保持过滤器选项一直可见是重要的，因为用户希望感觉到控制。

启用单个项目被书签链接

喜欢的项目的简单书签（或“保存为以后的功能”）供将来参考是用户的强大工具。

显示匹配结果链接的数量

显示可用的项目数量，以便用户可以决定要花多长时间滚动浏览结果。

使页脚可访问链接

人们理解一个页脚的概念，他们希望找到链接到那里的重要网站信息（例如联系信息），但漫长的滚动往往会阻碍用户访问页脚：新的项目在用户接近底部时继续加载列表，推页脚出来。虽然这听起来像是一个严重的问题，可以通过“加载更多”按钮来解决。使用此解决方案，内容按需加载：新的内容将不会自动加载，直到用户单击“更多”按钮。这样，用户可以轻松地到达页脚，而无需追逐它。您可以在文章“无限滚动，分页或”加载更多“按钮中找到有关如何实现此解决方案的实用技巧。电子商务中的可用性发现 “。

长滚动链接的视差效应

互动设计是长滚动网站的基础，动画是这个设计的重要组成部分。考虑到用户对网络的关注度大约在8秒左右，令人愉快的滚动体验肯定会延长用户兴趣。一个有趣的动画可以让用户感到视觉效果。

使用视差滚动，背景图像比前景中的内容移动得更慢，造成深度和沉浸的错觉。这种效果使图像感觉不那么平坦和更立体。

何时视差滚动有效？链接

在网页设计中，旅程可以像目的地一样愉快。视差是一种有趣的视觉效果，可以带来很好的第一印象，并鼓励游客滚动更多。当您想哇您的观众时，这非常有用。

视差滚动在指导讲故事中也非常有效。当您想要以平滑，线性的方式讲故事时，将长滚动与视差效果配对可以创建完全身临其境的浏览体验。在船上，如下所示，随着用户滚动，动画将他们带到下一个屏幕，同时创建一个跟随内容的路径。这会使滚动更有趣，让用户想知道“接下来会发生什么？

当视差滚动错误的方法？链接

如果大多数用户希望完成清除任务（例如购买产品），请避免使用此技术。想像一下，例如，如果您每次想要购买产品时必须看到视差效应，亚马逊将会如何令人沮丧。

视差和页面性能链接

绝大多数使用视差效应的网站都受到可怕的滚动性能的影响。对于具有高像素密度的设备，像iPhone一样特别糟糕。虽然所有潜在的性能问题都无法完全解决，但您仍然可以通过以下简单技术来提高滚动性能：

• 只能使用便宜的属性来浏览动画。这是translate3d，scale，rotation和opacity。
• 不要动画大量图像或大幅调整大小。强制浏览器调整图像大小（尤其是巨大的图像）可能是昂贵的。
• 避免一次动画化很多东西。

您可以在Dave Gamache 的文章“ Parallax Done Right ” 中找到更多关于视差效果的实用技巧。

视差和辅助功能链接

考虑如何使用视觉上触发的前庭障碍的用户将使用您的网站。动画能使这组用户感到头晕。Val Head对于设计师如何设计更安全的运动有一些实用建议，一个完美的视差建议：如果您的网站有很多运动，涵盖了很多视觉场景，提供另一种方式来查看内容 – 考虑一个选项关闭运动。这可以通过按钮或切换开关来实现，以减少或关闭您网站上的全局动画。为了探索这个想法，Nat Tarnoff开发了一个可以在任何网站上使用的切换开关的原型。