用户愿意浏览大量内容以查找他们感兴趣的内容。用户将专注于内容，然后专注于其他内容，无限滚动格式允许用户找到他们想要的内容。本文主要分析滚动设计，让我们来看看吧

随着社交网络的普及，无限滚动的源流已成为探索更多内容的必要方式，正如Flickr和Facebook所做的那样。用户愿意浏览大量内容以查找他们感兴趣的内容。用户将专注于内容，然后专注于其他内容，无限滚动格式允许用户找到他们想要的内容。

此外，无限滚动的线性结构使网页编辑易于操作。当用户向下滚动页面时，奇怪的布局可以与各种微动画效果相结合，营造出让用户感到好奇和“接下来会发生什么”的氛围。

船是一个很好的例子。无限滚动增强了讲故事效果，并创建了一种新形式的可视化副本布局。

无限滚动格式为设计师打开了一扇新的大门，但他也有缺点。它要求设计师专注于内容，导航和动画。

如果无限滚动是您的最佳选择，那么最好记住以下几点：

引导用户滚动导航表单以适应滚动动画以加强滚动表单。 1.引导用户滚动。

尽管用户通常在加载页面后向下滚动，但第一屏幕的内容仍然非常重要。

第一屏幕的内容将给出第一印象并且让用户对后面的内容的质量具有相应的期望，并且当第一屏幕的内容足够有吸引力时，用户将愿意更多地滚动。无论是在手机，平板电脑还是PC上，这种情况都适用。仅当用户认为滚动查看的内容是值得的时才这样做。

1.为用户提供有趣的内容

用户不需要支付任何操作费用来查看允许用户产生向下滚动行为的能力。为了确保用户下拉以查看更多内容，您必须提供用户感兴趣的内容。因此，第一个屏幕必须提供最具吸引力的内容：

良好的页面介绍是内容的缩影，可帮助用户了解此页面的作用。有趣和真实的内容可以吸引用户产生持续的关注。有吸引力的图像（内容和质量）用户非常关注包含他们感兴趣的相关信息的图像

提示：使用名称称为折叠的位置？免费工具，以查看当前流行的屏幕分辨率中您的第一个屏幕内容有多少？

2.避免错误的底页显示

第一个屏幕的内容将影响其余的内容，第一个屏幕的内容应该在滚动后提示用户拥有更多有价值的内容。当您错误地显示主页的底部，或者显示第一个屏幕的内容时，下面似乎没有更多内容，那么用户没有理由相信下面有更多内容，因此用户很少滚动。

避免错误的主页底部实际上非常简单，只是在视觉上建议用户下面有更多信息。例如，可以在第一个屏幕的末尾裁剪网格或卡片布局，以告诉用户滚动的位置和更多内容

或者你可以直接告诉用户滚动——一个明显的提示，例如：指向屏幕底部的箭头或短语“向下滑动以查看更多”，这可以清楚地提醒用户有更多内容。

其次，调整导航表单以适应滚动

导航会对代购源码网站的用户体验产生好的或坏的影响。良好的导航至关重要，因为用户必须能够快速找到他们在页面上的位置，并知道如何转到他们想要的页面。

1.使用固定导航（列）

长滚动可以使导航非常麻烦。如果用户在向页面深入滚动后没有看到导航栏，则必须向上滚动到顶部。一个非常简单的解决方案是固定导航栏，可以随时保持导航栏的可见性，使用户可以轻松快速地导航到不同的页面或区域。

但是，如果要保存有限数量的屏幕空间，可以隐藏导航栏并以相反方向查看它以使其可用。

这种方法在移动端尤其有用，因为移动电话的屏幕比平板电脑，笔记本电脑和PC小得多，导航条占据了相当大的屏幕空间。如果屏幕显示滚动瀑布流，则用户可以在用户滚动新内容时隐藏导航栏，并在用户准备好返回顶部时显示。

2.考虑使用导航按钮

无限滚动的另一个常见问题是——可能会导致用户迷路。当页面内容被分成许多同等重要的部分或块（例如，非常长的用户指南页面）（用户丢失）时，用户可能难以找到先前在页面上查看的内容，看起来很明显，使用页面快速修复按钮可以解决这个问题。

页面定位实际上是页面内的一系列链接，允许用户快速跳转到页面的相关内容。它与内容目录几乎相同。例如，在Tumblr上，用户可以直接跳到页面底部，或者在丢失时跳回到顶部。页面内容被分成不同的块，这些块易于区分并且具有固定到屏幕左侧的大锚点。

3.确保后退按钮易于使用

当用户在页面中打开链接（不跳转）然后单击后退按钮时，他们应该能够返回到上一页的相同位置。

但是如果页面上的位置没有保留，那么使用浏览器的后退按钮会将位置重置到页面顶部，丢失之前的阅读位置将导致用户滚动浏览他们已经看过的内容。在这种情况下，用户很容易受挫，因为没有返回原始位置的功能。

Flickr的后退按钮是一个符合用户期望的好例子。它会记住用户的下拉位置，因此当用户单击后退按钮时，它将返回到上一页中的原始位置。

第三，使用动画来增强滚动形式

考虑到用户对页面的关注可以集中大约8秒，非常愉快的滚动体验可以显着延长用户的停留时间，并且适当的动画可以在滚动体验中很好地引导用户。

1.滚动激活的动画效果

考虑到页面被分成可滚动的部分，每个部分都可以被动画化以引入其内容。当用户滚动时，动画通过创建内容的运动轨迹将用户的视线移动到下一个屏幕。

这是使用户对下一个内容感兴趣并将其呈现给用户的内容流的非常有效的方式（通过动画化不同块的内容并保持用户的持续兴趣）。

2.视差效应

当您的代购源码网站想要使故事流畅时，长滚动加视差效果可以创建完全身临其境的浏览体验。

视差滚动意味着背景内容的移动速度比前景元素慢一点，当您向下滚动页面时，它会产生3D效果。如果使用得当，它可以产生非常好的深度感。这种格式非常适合描述故事的故事，使用良好的视觉元素来创造更加身临其境，更有趣和令人兴奋的体验。

提示：视差代购源码网站的代码开发可以阅读Dave Gamache撰写的文章“Parallax DoneRight””。

设计具有长滚动和动画网页的Web时，必须考虑用户加载页面所需的CPU和内存消耗。多页面和多内容滚动，包括各种图像，GIF图像和视频，以及重新加载页面的需要将占用大量系统资源。您可以在不同设备上进行测试并使用一些提示。例如，当用户翻转时不播放动画和视频以减少这种存储器资源的浪费。

3.加载时提供视觉反馈

此方法特别适用于无限滚动的页面，并且对于具有大量内容的长滚动页面也很有用。当加载新内容时，用户需要代购源码网站传递显式加载信号，使用过程信号来显示正在加载新内容并且将在页面上快速显示以供用户感知。

因为加载新内容是一种非常快速的行为（通常不超过2-10秒），您可以使用小圆圈动画作为反馈信号来通知系统它正在工作。不可否认，这个动画很短，可以重复使用。

还可以添加附加信号以通知用户包括使用副本来解释用户等待的原因。

4.避免过渡到滚动

以滚动格式绑架的代购源码网站忽略了网页浏览的基本功能。滚动劫持的体验非常糟糕，因为用户无法完全预测自己的操作行为和结果，用户对代购源码网站滚动交互的期望不应该被狭隘的经验所劫持。

Tumblr在他们当前的主页上使用滚动劫持

在这里，tumblr已经被作者变成了一本负面的教科书。一般的想法应该是批评tumblr滚动屏幕太多，总共六个屏幕

5.缓解SEO的缺点（SEO=搜索引擎优化，这部分不是特别容易理解）

长时间滚动会对SEO产生负面影响，但如果您遵循Google推荐，则可以避免。进行用户行为分析，了解您设计的代购源码网站的实际运作方式。

让我们看看他们说了什么:(这是指谷歌的建议）

确定每个屏幕上的内容：

确保如果搜索用户直接访问此页面，他们可以轻松找到他们想要的内容（在定位您想要的内容之前没有太多的卷轴）;使用合理的页面（分屏）来加载时间

指定内容以使拆分屏幕不重叠。

四，结论

在网页设计中，用户的浏览过程应该与目标内容一样有趣。正如Josh Porter所说，长滚动创建了完整的沉浸式浏览体验：

“滚动是一个过程，点击做出决定。 ”的

如果用户喜欢该页面的UI，那么他们将不关心滚动的长度。因此，关注用户的目标并使页面浏览更容易。

说明：我喜欢翻译国外互动设计体验设计代购源码网站优秀文章案例，仅供相互学习和讨论，翻译有版权，如有任何错误，请指正！〜/p>

原作者：Nick Babich

原始链接：http://www.uxbooth.com/articles/best-practices-for-scrolling/

本文由@vanhelsinglhj出版。未经许可，禁止复制

该地图来自Pexels，基于CC0协议

« 超实用指南页面设计基本手册 | 公司如何选择建立车站系统？ »