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

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

　　将导航和过滤器粘贴

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

　　（图像：id90travel）

　　启用个别项目为书签

　　一个简单的书签（或“稍后保存”功能）的喜爱项目，作为今后用户参考的一个强大的工具。

　　书签可以帮助用户在作出决定之前回到某些项目。

　　显示匹配结果的数量

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

　　项目总数显示在分类标题下方。

　　使页脚可访问

　　人们理解一个页脚的概念，他们希望找到链接到那里的重要网站信息（例如联系信息），但漫长的滚动往往会阻碍用户访问页脚：新的项目在用户接近底部时继续加载列表，推页脚出来。虽然这听起来像是一个严重的问题，可以通过“加载更多”按钮来解决。使用此解决方案，内容按需求加载：新的内容将不会自动加载，直到用户单击“更多”按钮。这样用户可以轻松地到达页脚，且无需追逐它。你可以在文章《Infinite Scrolling, Pagination or ‘Load More’ Buttons? Usability Findings in eCommerce》中找到有关如何实现此解决方案的实用技巧。

　　使用“加载更多”按钮来按需求加载内容。 （图像：Skechers）

视差效应的长滚动

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

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

　　什么时候视差滚动有效果？

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

　　视差效应产生令人着迷的三维感觉。 （图像：firewatchgame）

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

　　The Boat以平滑，线性的方式讲故事。

　　什么时候视差滚动是错误的方法？

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

　　视差和页面的性能

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

　　仅使用浏览器便宜的属性进行动画制作。这些是转化3D，缩放，旋转和不透明度。

　　不要有大量图像或大幅调整大小。强制浏览器调整图像大小（尤其是巨大的图像）可能是昂贵的。

　　一次删除很多东西。

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

　　视差和辅助功能