利用长滚动式进行网站建设的技巧分析

发布日期：[2017/6/1] 编辑：奇亿广州网站建设

　　长滚动或者无限滚动式的网站建设越来越流行，这也许又是用户体验下的又一产物，利用长滚动式建站可以解决网站因大量内容而影响用户体验的问题，这种技术允许用户来回移动大量内容，并只在用户向下滚动时出现更多信息。怎样利用好长滚动模式建站呢？

　　首先，奇亿网络先来说说长滚动式网站有哪些好处。

　　1、更多的吸引潜在用户。（滚动最小化实现各种用户目标所需的交互成本。不需要点击“下一步”就可以让用户参与内容，而不是专注于导航到下一页的机制。）

　　2、很好地转化为移动设备。移动屏幕使用的增加在广泛接受这种技术方面发挥了关键作用：屏幕越小滚动的时间越长。移动设备的手势控制使滚动更直观和有趣。

　　3、滚动为设计师打开了许多新的大门。但这种模式也不是没有缺点的。它需要设计师对内容和导航的高度关注。

　　那么，利用长滚动式进行网站建设有哪些技巧呢？

　　1. 鼓励用户滚动

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

　　2. 保持导航选项持续

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

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

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

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

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

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

　　4. 根据滚动位置更改网址

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

　　5. 考虑跳转选项

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

　　在一次点击中，用户可以转到主页的所需部分。

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

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

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

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

　　细微的动画（如Tumblr的加载指示器）告诉用户“我正在为您加载更多内容”。

　　7. 不要劫持滚动

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

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

无论你滚动多快，布局都以预定的速度移动。

　　8. 优化页面的加载时间

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

　　虽然加载时间是长滚动页面的一个问题，但这是可以解决的。页面加载时间可以使用顺序加载技术进行优化，例如：延迟加载，使用户能够真正快速访问基本内容。

　　9. 考虑你的页面使用多少资源

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

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

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

　　长滚动式网站建设并不单单讲究一种模式，归根结底，网站还是要围绕用户体验来实现建站效果，才是其根本目的！

　　本文由奇亿网站建设原创，原文地址：http://www.gzqiyi.cn/news/1806.html 转摘请保留版权，谢谢！