揭阳企业网站开发：如何设计冗长，冗长的页面

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

无限滚动是各种长滚动，允许用户滚动浏览大量内容，看不到终点线（这是你在Facebook，Twitter和Tumblr提要上看到的无限滚动）。

长滚动具有以下好处：

• 它更有可能吸引用户。（滚动可以最大限度地降低实现各种用户目标所需的交互成本。不必单击“下一步”的优势可以让用户参与内容，而不再关注导航到下一页的机制。）

• 它可以很好地转换为移动设备。移动屏幕的使用增加在广泛接受这种技术中发挥了关键作用：屏幕越小，滚动越长。移动设备的手势控制使滚动直观且有趣。

揭阳企业网站开发滚动为设计师打开了许多新的大门。然而，这种模式并非没有缺点。它要求设计师对内容和导航给予高度重视。在本文中，我将讨论一些好处，需要考虑的事项以及长滚动的快速提示。如果您希望通过设计获得更多创意，可以免费下载和测试Adobe XD并立即开始使用。

何时使用长时间滚动？

长卷轴不适用于每个网站。适用于以下情况：

• 讲故事（它创造了讲故事者可以利用的线性结构）;

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

  

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

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

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

如何实现长滚动

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

1.鼓励用户滚动

尽管人们通常在页面加载后立即开始滚动，但首页内容仍然非常重要。页面顶部显示的内容为访问者设置了初始印象和质量期望。人们会滚动，但只有当数字以上的东西足够有希望时。因此，将您最引人注目的内容放在首位：

• 提供一个很好的介绍。（一个很好的介绍设置内容的上下文，并有助于回答用户的问题，“这个页面的内容是什么？”）

• 使用引人入胜的图像。（用户密切关注包含相关信息的图像。）

2.保持导航选项持久

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

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

提示：您还可以使用户能够通过辅助导航在页面的各个部分之间跳转。例如，下面动画中显示的解决方案可以帮助用户跟踪他们的进度，同时可以用作特定部分的快捷方式。

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

长时间滚动通常会导致用户失去在页面上的位置。当他们从长滚动列表中单击时，会发生这种情况，并且在通过单击“后退”按钮返回时，将被带到原始页面的顶部而不是它们停止的位置。但是，当用户按照页面上的链接然后单击“后退”按钮时，他们希望返回到原始页面上的相同位置。失去他们的位置迫使他们必须滚动他们已经看过的内容。毫不奇怪，用户由于没有获得正确的“返回位置”功能而很快就会感到沮丧。

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

4.根据滚动位置更改URL

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

5.考虑跳转选项

长滚动的另一个常见问题是迷失方向：用户可能难以找到他们之前在页面上看到的内容。当内容被分解为多个同等重要的部分或块（例如长篇教程）时，这可能是一个严重的问题。“跳转到部分”选项可以解决这个问题。例如，在Tumblr上，用户可以跳过页面或者如果丢失则跳回到开头。页面上的内容被分解为几个明确区分的块，并且大指示点固定在屏幕的左侧。

提示：如果您要使用“跳转到部分”功能，请确保该系列点易于使用。如果它们很小或难以用鼠标点击或在触摸设备上准确按压，那么它们会使用户感到沮丧。因此，请确保点的大小适当。

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

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

因为内容的加载应该很快（不应该花费2到10秒的时间），所以可以使用循环动画来指示系统正在运行。

7.不要劫持滚动

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

问题可以在Apple的Mac Pro页面上看到。无论您滚动多快，布局都会以预定的速度移动。由于此页面上的所有内容都与滚动相关联，因此访问者必须以较慢的速度浏览页面。

8.优化页面加载时间

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

虽然加载时间是长滚动页面的问题，但它可以解决。页面加载时间可以通过顺序加载技术进行优化，例如延迟加载，使用户能够非常快速地访问基本内容。了解Smashing Magazine团队基于The Guardian重新设计所取得的性能提升。

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

如果您使用长滚动（特别是对于包含大量图像和动画的页面），请始终考虑页面消耗的资源（CPU和内存）。在没有页面重新加载的情况下滚动浏览多页照片，动画GIF和视频可能会对系统资源造成重大影响，而且资源有限的设备（如iPhone）可能会因为加载的资产数量庞大而开始放慢速度。因此，使用不同的设备测试您的网站，并在用户滚过它们时使用暂停动画和视频等技巧。

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

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

电子商务网站的长时间滚动

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

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

使导航和过滤器粘滞

完成后，过滤器使用户能够将网站对数千种产品的选择范围缩小到仅满足其需求的少数项目。与导航菜单一样，保持过滤器选项持久可见非常重要，因为用户希望能够控制住。

启用单个项目以进行书签

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

显示匹配结果数

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

使页脚可访问

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

长滚动的视差效应

交互设计是长卷轴网站的基础，动画是这种设计的重要组成部分。考虑到用户在网络上的注意力大约是8秒，令人愉快的滚动体验肯定会延长用户的兴趣。可以让用户满意的一个有趣的动画是视差效果。

通过视差滚动，背景图像比前景中的内容移动得更慢，从而产生深度和沉浸感。这种效果使图像感觉不那么平坦，更具立体感。

PARALLAX滚动何时有效？

在网页设计中，旅程可以像目的地一样愉快。Parallax是一种有趣的视觉效果，可以给人留下良好的第一印象，并鼓励访客滚动更多。当你想这是非常有用的哇你的听众。

视差滚动在引导讲故事方面也非常有效。当您想要以流畅，线性的方式讲述故事时，将长滚动与视差效果配对可以创建完全身临其境的浏览体验。在The Boat中，如下所示，当用户滚动时，动画会将它们带到下一个屏幕，同时创建要遵循的内容路径。这会让滚动更有趣，让用户想知道“接下来会发生什么？”

什么时候PARALLAX滚动错误的方法？

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

视差和页面性能

绝大多数使用视差效果的网站遭受可怕的滚动性能。对于具有高像素密度的设备，如iPhone，它尤其糟糕。虽然无法完全解决所有潜在的性能问题，但您仍可以通过以下简单技术提高滚动性能：

• 仅使用浏览器便宜的属性进行动画处理。这是translate3d，scale，rotation和opacity。

• 不要为大量图像制作动画或大幅调整大小。强制浏览器调整图像大小（特别是大图像）的成本可能很高。

• 避免一次动画很多东西。

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

视差和可访问性

考虑具有视觉触发的前庭疾病的用户将如何使用您的网站。动画能够让这群用户感到头晕目眩。Val Head为设计师提供了一些关于如何设计更安全运动的实用建议，其中一个完美的视差建议：如果您的网站有很多运动覆盖了很多视觉基础，请提供另一种查看内容的方法 - 考虑一下关闭动作的选项。这可以通过按钮或切换开关来完成，以减少或关闭您网站上的全局动画。为了探索这个想法，Nat Tarnoff开发了一个可以在任何网站上使用的拨动开关原型。

结论

长滚动可以创建完全身临其境的浏览体验。如果用户喜欢用户界面并且发现它很直观，那么他们就不会真正关注滚动的长度。因此，关注他们的目标，让您的用户更方便。

揭阳企业网站开发