更适用于响应式设计的“横纵滚动”模块

Posted 2021-04-30 一鸣而已

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了更适用于响应式设计的“横纵滚动”模块相关的知识，希望对你有一定的参考价值。

更新一篇翻译旧文

这篇文章是关于一个答案复杂的简单问题。

问题是什么？

星期一下午，我们的会议室开始闷热。我们站在 20 位专业的营销人员面前做报告，他们都是国际非营利组织的代表。我们刚刚阐述了他们全新的全球网站的重构交互方案。

“关于滚动的问题，您要怎么解决？”

这个问题让我们吃了一惊。

“滚动问题？”我们问道。

经过一番讨论后，我们客户提到的“滚动问题”竟然是他们当前移动网站的长度。页面需要在移动设备上比在桌面设备上滚动更多，这被视为需要修复的缺陷。

“现在我们的移动网页变得很长”

所以，我们需要“修复”滚动问题吗？

滚动不需要修复

将滚动视为一个问题与大量讨论的“隐藏之上”论点并不相悖，“隐藏之上”论点是将所有重要内容放在页面最初可见区域的讨论。关于这个话题有很多有趣的文章和用户体验研究，我只将其中的两个链接放到下面。简而言之，他们中的大多数都证明用户参与度恰好在隐藏处或接下来的内容达到峰值，使得“隐藏之上”的参数无效。

https://medium.com/rareview/the-above-the-fold-myth-f0f93b1b9875

http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/

在我看来，这种用户行为归结为两个原因：

用户缺乏耐心：他们不会等到页面完全加载后才去滚动并发现内容。

用户已经习惯了滑动：在移动化优先的世界中，滑动已经成为内容载体的第一交互方式。永无止境的信息流已经一遍又一遍地向用户传授了这种交互。

因此，许多网页和博客（不知不觉）都会接受这种交互方式。并且他们中的大多数，包括最受欢迎的 Wordpress 主题，都在页面顶部突显了媒体标题。我们称之为“心灵捕手”。它没有附加任何特定功能，但其有助于提示用户接下来的内容是什么。

更适用于响应式设计的“横纵滚动”模块

所以，用户习惯于滑动操作。这是否意味着没有页面滚动问题？并不完全是。

需要修复错误的响应式方案

我们的客户有一个观点：当用户想要跳过他们不感兴趣的部分（在他们当前的页面上）时，他们必须滚动浏览所有内容。结果就会在此过程中失去部分潜在用户。

但真正的问题不在于滚动，而是“偷懒的”交互设计：使用原有桌面设计模式并将它们直接移植到移动设备。

这个问题有数百种可能的解决方案，其中大多数都采用了移动优先的方法和逐步增强的思想。但就像许多桌面导航解决方案无法在移动设备上使用一样，许多移动导航方案在桌面上也无法很好地使用。以选项卡为例：它们被认为是移动应用程序最有效的导航类型之一。但是，它们在响应式网站上却很少见。桌面上有很多可用空间，为什么不用它来显示来自不同模块的内容，而是将其隐藏在导航链接之后呢？在桌面上，所有服务都是为了调动页面的不同区域来使用户产生兴趣。而在移动设备上，我们需要做的是可以让大量内容在小屏幕上易于导航。

响应式设计总是与妥协有关，它是关于寻找适用于所有设备和所有尺寸的自适应导航解决方案。但是我们目前的桌面和移动导航模式似乎不兼容。

那么我们如何解决客户需求的响应式设计？

横纵滚动模式

目标

我们的任务是显示来自不同设备的大量内容。主要有三个条件：

1. 不要为桌面设备和移动设备创建两种不同的交互体验

2. 不要将内容隐藏在菜单后面（不要让用户在看到相关内容前经常点击，但也不要让页面的内容超载）

3. 不要让用户滚动太多以查看相关内容

这一切都归结为基于营销心理的用户旅程：

注意：向用户显示能提供的一切

兴趣：对你提供的特殊功能产生兴趣

欲望：让用户表达“我想知道更多”

行动：让用户点击

解决方案

在我们的所有想法中，有一个解决方案引起了我们的注意。也是当我们在会议室中被问及“滚动问题”时第一个想到的方案。我们提出的解决方案并没有标准化的命名，有些人可能会简单地说“水平滚动”，其他人可能会将其称为滑块，我们称之为“横纵滚动”（Bidirectional Scrolling）。

Bidirectional：朝两个方向移动（通常是相反的）- WIKI

更适用于响应式设计的“横纵滚动”模块

一个横纵滚动网站重要的是要区分主要和次要滚动方向。

在大多数情况下，滚动的主要方向应该是垂直的。这意味着当用户滚动时，整个页面将在垂直轴上移动。并且许多研究表明，横向滚动不利于用户体验，并且与垂直滚动相比，参与度更低。但这并不意味着必须完全放弃水平滚动。

横纵滚动网站中次要方向是水平的。该方向由页面的各个独立部分使用，而不是整个页面。每个部分都可以单独进行滚动。

为什么？

这个滚动系统允许我们从不同部分取得大量内容，在此过程中我们不需要滚动，不必在菜单后面隐藏信息，并且界面不会因为显示太多内容而在视觉上混淆。最重要的是：它适用于台式机和手机。

通过这种方式，用户可以通过垂直滑动方式轻松地跳转到另一部分。而且，他们仍然可以通过水平滑动浏览内容，从而了解每个部分的内容。以这种方式选择相关内容而不强迫用户首先选择，这样更利于激起用户兴趣。并且用户习惯于看到各种（个性化的）内容，例如，当他们打开 Facebook 时不会询问你是否想看事件，新闻或图片。它只是向你展示一切，并让你选择查看每种类型的更多内容。在设计一个可以鼓励用户探索网站的界面时，消除障碍非常重要—避免复杂的导航，尽可能减少点击次数并关注用户可能感兴趣的内容。

更适用于响应式设计的“横纵滚动”模块