10月 19, 2020

网站水平滚动：奇迹还是灾难？

智能手机的出现彻底改变了我们在移动设备或笔记本电脑上滚动的方式。今天，垂直滚动是自然的和预期的。当一个人必须在笔记本电脑或台式机上使用鼠标时，除了垂直之外的任何其他滚动似乎都是被迫的！

在智能手机出现之前，由于大量使用鼠标，用户习惯于垂直和水平滚动。随着越来越多的用户迷上手机，滚动的性质开始演变。毫不奇怪，61% 的数字媒体时间花在了移动设备上，只有 39% 的时间花在了桌面设备上。从阅读消息到查看视频列表再到查看社交媒体上的通知，一切都涉及以垂直模式移动。由于对智能手机的依赖如此之大，垂直滚动是大多数用户的自然反应。

因此，大多数网站更喜欢使用它而不是水平的，这很合适。然而，与大多数技术一样，许多元素会卷土重来，保持强大几年，然后消失在深渊中，几年后又重新出现。我们选择的主题也是如此。水平滚动。

这是否意味着它不可靠并且应该避免？

在 2005 年代初期，水平滚动曾被视为完全禁忌。这是您可以对您的网站做的最糟糕的事情。这是因为横向滚动的整个用户体验让用户感到困惑，而且它不符合传统的网页设计标准。此外，垂直网站被认为更易于实施且效率更高的因素。因此，一个相对困难的概念需要公众支持并且会让开发人员花费更多的时间在编码上，并没有被人接受。

让我们来看看一些人对 Quora:

上的水平滚动有什么看法

Quora 用户 1 (2012):

水平滚动更糟糕。这是违反直觉的，并且不适用于鼠标上的滚轮。除了当您想将某些东西固定在正在滚动的对象下方时，我看不到任何用例。

Quora 用户 3 (2014):

大多数消费者觉得水平和垂直滚动都很烦人。确保内容以有意义的方式呈现，我认为你不会有问题。当客户端不必使用水平滚动条来查看它时，最好使用水平滚动。这意味着使用交互式箭头/按钮或滑动功能使滚动变得轻松简单。

然而，随着平板电脑的发明，这种看法开始发生变化。由于提供了用于查看的屏幕尺寸，这些设备使用户可以滚动而不是水平滚动而不是垂直滚动。这就是横向滚动等大胆而大胆的设计所需要的推动力，这也是用户和开发人员的意见开始发生变化的时候。

即使移动依赖支持垂直滚动，Apple产品继续集成水平滚动以在下意识地让用户习惯它。

菜单屏幕底部的白点几乎是所有设备的标准配置。无论他们推出哪个软件版本或哪个新设备，菜单都只能通过水平滑动来完全访问。与 android 相比，这完全不同，因为一些设备使用上述技术，而另一些设备则坚持使用垂直滚动菜单。

那么，对于使用它的品牌来说，这意味着什么？

品牌在其网站上使用水平滚动的某些元素并非闻所未闻。默认情况下，大多数人在桌面视图上都有元素，但在他们的移动视图中尝试使用它只是为了减少网页的长度。然而，有些人宣称他们的个性、独特性以及他们不愿适应社会标准。

查看一些违反社会规范的品牌示例：

多边形设计：

约瑟夫马克风险投资公司：

那么，品牌什么时候应该进行横向滚动？

在开始之前，我们强烈建议您阅读 Jerry Cao 的文章“滚动的新规则网页设计”，了解滚动的优势以及它们如何影响网站的成功率。

现在，让我们来看看品牌何时应该选择使用水平滚动。

在大多数情况下，当您想要显示如下类别的子集时，水平滚动效果最佳：

显示多张图片（例如，用于摄影网站或设计作品集）
在大的视觉区域中显示信息，一目了然（例如地图）
显示应用程序信息的离散部分或幻灯片
显示产品或项目的大型目录，以便轻松显示不同的产品类别

查看“移动设备中的水平滚动” 由 CanvasFlip 了解如何直观地显示这些指针。

水平滚动能否成为品牌网站的一部分，但不是唯一的滚动选项？

哦，绝对！

您不必重新发明轮子并辞去一个全新的网站！大多数电子商务网站都使用水平滚动。查看以下几种在电子商务网站上使用它的方法：桌面或移动视图：

Net-a-porter 的桌面视图上的鞋类图像上的箭头图标向用户表明，虽然他们可以看到垂直格式的缩略图，为了让他们看到展开的视图，他们需要水平滚动。

在 Myntra 的应用程序的移动视图中，您可以在图像下方看到微弱的点，鼓励用户水平滑动以查看不同的同一产品的图片。

虽然大多数网站更喜欢执行上述操作，但也有其他网站将其用作主要滚动条，这仅仅是因为他们想要共享的信息量很大。看看下面的几个例子：

Netflix 印度：

亚马逊印度站：

Amazon.in

那么，在您的网站上加入水平滚动条对您有何帮助？

作为一种设计，它在所有设备上几乎 100% 一致
它节省了大量的垂直屏幕空间，因为它旨在为辅助信息留出空间，不会占用页面区域
它允许用户通过滑动到侧面或向下滚动来查看不同类别中的选项。

但是，任何事情都必须有某些缺点！

要在台式机上使用水平滚动，与笔记本电脑或手持设备上的滚动箭头相比，用户必须依赖滚动条。这给用户带来了负担，需要持续的注意力和更大的体力来维持拖动
由于对垂直滚动的潜意识依赖，用户可能会忽略通过水平滚动访问的内容，因为他们不希望那里有内容
即使人们确实注意到水平滚动的提示，他们也可能不想冒险加载隐藏的内容并且他们无法控制

那么，如何解决呢？

根据经验，应该牢记以下几点Reactive Graphics，在他们的文章中，“水平滚动：有争议的网页设计”在创建自己的水平滚动网站时要牢记以下几点：

不要将“滑动”作为主要导航
确保您考虑到每台设备，并了解您的用户可能不具备滑动操作的能力。应用可访问的单击选项或使用垂直鼠标滚动水平工作的滚动。

告诉用户还剩多少内容。
添加滚动条或页码指示器，这样您的用户就不会被卷入深渊。

为水平滑动创建明显、可见的提示。
使用箭头和“单击此处，查看更多，查看更多”标签等提示来引入滑动、滚动和单击，让用户轻松导航。

查看 “反对水平滚动网站的案例” 设计你的方式，了解更多关于合并水平滚动的信息。

过去我们在相当多的网站上工作过，以下是我们牢记的几点：

设计一个带有水平滚动元素的网站在所有设备上都能很好地工作，但是一个完全水平的网站在桌面上表现不佳。用户将被迫使用滚动条而不是鼠标上的滚动板进行导航。今天的大多数鼠标都没有水平滚动板。像 Apple Magic Mouse 这样的智能鼠标正在慢慢改变这种情况，但可能还需要一段时间才能成为主流并让所有人都能轻松负担得起
横向滚动的体验会使屏幕抖动并产生令人头疼的感觉
如果您不对滚动速度进行控制，很快就会出现问题，内容会飞速过去或需要永远移动
用户习惯于在页面范围内从左到右慢慢向下阅读。当用于需要阅读的内容很多的网站时，它应该作为一个子部分而不是核心滚动策略。

查看 Damian Reese 在他的文章中对水平滚动用户体验的看法，“水平滚动的用户体验视角”

结论

关于完全水平滚动的网站是否会成为科技界的下一件大事，最终的共识仍然存在分歧。已经形成了三个用户群。第一个讨厌它，第二个不确定，第三个喜欢它。但是，我们不能忽视这样一个事实，即将其用于您网站上的某些元素肯定有其好处，并且许多网站正在这样做！

你是否应该这样做的最终决定完全取决于你想要展示的品牌形象。

这是一个大胆而大胆的举动。我们不确定它会怎么样，但最能看透它的人是最希望它发挥作用的人，你！

参考文献：

https://designmodo。com/scrolling-web-design/

https://uxdesigncc/best-practices-for-horizontal-lists-in-mobile-21480b9b73e5

https://www.web-designlondon.co.uk/horizontal-scrolling/#:~:text=Horizontal%20scrolling%20saves%20a%20lot, added%20both%20vertically%20and %20水平.

https://www.designyourway.net/blog/inspiration/the-case-against-horizontal-scrolling-websites/

https://designmodo.com/scrolling-web-design

https://uxplanet.org/horizontal-scrolling-in-mobile-643c81901af3#:~:text=Horizontal%20scrolling%20saves%20a%20lot,to%20smaller%20chunks%20of% 20information.&text=This%20use%20of%20two%20dimensions,them%20visit%20separate%20category%20pages.