网页设计模式的无限滚动
作为网页设计师的我们是否怀疑无限滚动是否是一个不错的选择，有一个冗长的搜索结果、产品、订单或数据条目列表，当然您已经拥有各种过滤器以及排序和搜索。但是，您还需要帮助客户浏览相关条目，而要做到这一点，您需要支持并加快条目浏览速度。当我们拥有非常独特的用例，那么无限滚动真的是个好主意吗？我们都对无限滚动有强烈的看法，而且通常不是很好。
有时地址栏中的 URL 在滚动时会发生变化，但更多情况下不会发生变化，如果我们想稍后继续浏览，我们就会从头开始。如果我们想将 URL 发送给自己或我们所爱的人以一次探索一组特定的项目，这通常会很痛苦，因为我们无法真正为列表中的位置添加书签。如果我们想到达页脚，每次滚动时，我们都需要滚动快一点，以便在新的项目流进入之前获得一个到达页脚的神奇机会。有时用户发现自己面临滚动挑战，而同时击中Esc——及时取消无限滚动。（通常不成功。）
最重要的是，无限滚动会破坏滚动条，因为每次滚动都必须重新校准用户对页面长度的期望。滚动条是对页面实际长度的承诺，但是对于新加载的项目，承诺总是错误的。更不用说向屏幕阅读器正确宣布新加载项目的可访问性问题以及断断续续的连接上的性能问题。
上面列出的所有问题都只是可用性差。因此，我们经常将无限滚动视为一种产生更多问题而不是解决方案的时尚技术，这并不奇怪。毫不奇怪，作为设计师，我们倾向于使用其他选项：分页和“加载更多”按钮。另外，有一种控制在给定页面上显示多少数据的感觉（通常使用控件来更改每页的项目数），每个页面的 URL 都不同，页脚很容易到达并且出现的选项页面更易于管理。
不幸的是，在可用性测试中，有时分页效果并不好。它更容易预测和管理，但与无限滚动相比也慢得多，因此用户经常浏览的次数明显减少并且经常感到“慢下来”。似乎在前几页上花费的时间更多，并且在那段时间使用过滤器和排序的频率更高，但与无限滚动相比，它们查看的项目总数更少，并且通常参与度更低。
如果我们想保持分页的好处但避免无限滚动让用户不堪重负，我们可以使用“加载更多”模式来代替。有了它，当用户开始滚动时，最终他们可以选择在点击或点击时加载更多项目。在一些实现中，当用户开始向下滚动时，首先会自动出现更多项目，但是一旦达到某个阈值，就会出现“加载更多”按钮。
我们还可以通过允许用户输入他们的电子邮件并获得一个链接来提供稍后继续浏览的选项，该链接稍后会将他们带到他们当前所在的列表中的位置。这解决了以后无法继续浏览的问题，可能是在另一台设备上，或者在不同的时间。
“加载更多”在电子商务中效果很好——用户可以控制他们看到的所有项目，因为所有项目都显示在一个页面上，并且页脚始终可用。此外，如果每次用户点击“加载更多”按钮时更改 URL，我们将无限滚动的速度与分页的舒适性和安全性结合在一起。用户似乎确实浏览得更多并且参与度更高。这使得这种模式成为考虑冗长列表的好选择。这是否意味着我们可以完全放弃无限滚动？不必要。无限滚动的一个重要好处是显示结果的速度——当用户想要查看更多内容时才显示新项目。事实证明，有一些技巧和策略可以让无限滚动变得更好。但这需要解决我们之前概述的所有问题。
借助所有这些技术，我们解决了许多众所周知的无限滚动问题。我们现在可以更好地控制滚动显示的项目数量，并且可以随时停止浏览并稍后继续。我们可以很容易地发现“旧”和“新”段。URL 会随着用户向下滚动页面而更新，我们也允许他们将 URL 复制到列表中的当前位置。
用户始终可以到达页脚，滚动条指示他们当前所在的位置以及可以跳转到的位置。他们也可以跳转到任何特定页面，因为我们也提供分页功能。此外，我们仍然需要实现无限滚动，以确保键盘的可访问性并宣布新项目。但是：我们利用了无限滚动提供的所有好处：尤其是浏览速度。
有时地址栏中的 URL 在滚动时会发生变化，但更多情况下不会发生变化，如果我们想稍后继续浏览，我们就会从头开始。如果我们想将 URL 发送给自己或我们所爱的人以一次探索一组特定的项目，这通常会很痛苦，因为我们无法真正为列表中的位置添加书签。如果我们想到达页脚，每次滚动时，我们都需要滚动快一点，以便在新的项目流进入之前获得一个到达页脚的神奇机会。有时用户发现自己面临滚动挑战，而同时击中Esc——及时取消无限滚动。（通常不成功。）
最重要的是，无限滚动会破坏滚动条，因为每次滚动都必须重新校准用户对页面长度的期望。滚动条是对页面实际长度的承诺，但是对于新加载的项目，承诺总是错误的。更不用说向屏幕阅读器正确宣布新加载项目的可访问性问题以及断断续续的连接上的性能问题。
上面列出的所有问题都只是可用性差。因此，我们经常将无限滚动视为一种产生更多问题而不是解决方案的时尚技术，这并不奇怪。毫不奇怪，作为设计师，我们倾向于使用其他选项：分页和“加载更多”按钮。另外，有一种控制在给定页面上显示多少数据的感觉（通常使用控件来更改每页的项目数），每个页面的 URL 都不同，页脚很容易到达并且出现的选项页面更易于管理。
不幸的是，在可用性测试中，有时分页效果并不好。它更容易预测和管理，但与无限滚动相比也慢得多，因此用户经常浏览的次数明显减少并且经常感到“慢下来”。似乎在前几页上花费的时间更多，并且在那段时间使用过滤器和排序的频率更高，但与无限滚动相比，它们查看的项目总数更少，并且通常参与度更低。
如果我们想保持分页的好处但避免无限滚动让用户不堪重负，我们可以使用“加载更多”模式来代替。有了它，当用户开始滚动时，最终他们可以选择在点击或点击时加载更多项目。在一些实现中，当用户开始向下滚动时，首先会自动出现更多项目，但是一旦达到某个阈值，就会出现“加载更多”按钮。
我们还可以通过允许用户输入他们的电子邮件并获得一个链接来提供稍后继续浏览的选项，该链接稍后会将他们带到他们当前所在的列表中的位置。这解决了以后无法继续浏览的问题，可能是在另一台设备上，或者在不同的时间。
“加载更多”在电子商务中效果很好——用户可以控制他们看到的所有项目，因为所有项目都显示在一个页面上，并且页脚始终可用。此外，如果每次用户点击“加载更多”按钮时更改 URL，我们将无限滚动的速度与分页的舒适性和安全性结合在一起。用户似乎确实浏览得更多并且参与度更高。这使得这种模式成为考虑冗长列表的好选择。这是否意味着我们可以完全放弃无限滚动？不必要。无限滚动的一个重要好处是显示结果的速度——当用户想要查看更多内容时才显示新项目。事实证明，有一些技巧和策略可以让无限滚动变得更好。但这需要解决我们之前概述的所有问题。
借助所有这些技术，我们解决了许多众所周知的无限滚动问题。我们现在可以更好地控制滚动显示的项目数量，并且可以随时停止浏览并稍后继续。我们可以很容易地发现“旧”和“新”段。URL 会随着用户向下滚动页面而更新，我们也允许他们将 URL 复制到列表中的当前位置。
用户始终可以到达页脚，滚动条指示他们当前所在的位置以及可以跳转到的位置。他们也可以跳转到任何特定页面，因为我们也提供分页功能。此外，我们仍然需要实现无限滚动，以确保键盘的可访问性并宣布新项目。但是：我们利用了无限滚动提供的所有好处：尤其是浏览速度。
分享：
相关资讯
阿里云、腾讯云、华为云严选优质服务商
