移动中的水平滚动——滚动界面的用户体验

来源：Medium网站

作者：CanvasFlip

翻译：奥创

阅读时长：6min

水平滚动的历史

回到2005年，全国范围的网络可用性报告指出，绝不应该为网站使用横向滚动网页设计。这是因为横向滚动的整个用户体验令用户感到困惑，而且它不符合传统的网页设计标准。

趋势如何变化？

随着iPad等技术的出现以及近年来智能手机的广泛使用，水平滚动的接受度也在逐步提升。使用移动设备，滑动移动变得更加直观，并且在指尖的滑动下，用户可以获得整个站点的信息。水平滚动的趋势可以很好地归因于——

当我们点击打开一个应用程序时，包括你和我在内的大多数人会立即向下滚动。那么，我们可以做设计师使水平滚动直观吗？我发现我的设计很少。在这篇文章中，我将谈谈这些技巧中的一些......

1.仔细规划 - 找出适合的地方

好吧，好吧 - 这可能不是列表中最令人兴奋的小费，但它绝对是列表中最重要的一个。

仔细规划界面是我们学习设计的第一步。有时，时间紧迫，短期限或懒惰的日子会导致计划失败。但是，采用水平设计，你肯定想花时间计划出来，绘制纸张原型和模型，并找出一切适合的地方和方式。有很多事情需要考虑，因为它不是大多数设计师或访客所习惯的，你必须比垂直网站更多地计划。

2.在特定情况下使用水平滚动

当您想要显示类别的子集时，水平滚动效果最佳。水平卷轴取得良好成功的几种情况是——

• 显示大量产品或项目，以便轻松显示不同的产品类别

来自Myntra应用程序的屏幕截图

• 在一个不容易看到的大视觉区域中显示信息（例如地图）

Airbnb app截图

• 显示有关应用程序的谨慎部分或幻灯片

 

3.直观展示

对于访问者来说，水平站点并不像他们每天都看到的垂直站点那样直观。因此，桌面使用箭头或点来显示相同 的内容。你的访问者更愿意被引导，而不是点击一下来弄清楚每件事情是如何工作的，即使它对你作为设计师完全有意义。但这适用于台式机。移动设备是基于触摸而非基于点击的。

对于手机，您必须采用不同的方式。您的设计必须有一个视觉提示，即一组内容可以水平滚动。最好的办法是，让可滚动内容的一部分偷看！

iMusic的屏幕截图

4.表明清单的极端情况

对于用户来说，知道滚动何时结束是很重要的。我们注意到用户重复滚动操作，因为他们认为他们在之前的尝试中没有滚动得足够多。

• 一个简洁的动画可以帮助用户意识到他们已经到达列表的末尾。

来自Medium应用程序的gif

• 指示列表结尾的另一种方法是在末尾使用额外的空间。

截图来自Myntra app

水平滚动的正面

• 这是一种在所有设备上几乎100％一致的设计。

• 它旨在为次要信息留出空间，不会占用页面空间。例如，在照片库中显示图像时，水平滚动可让用户查看内容的一小部分样本，并为他们提供快速“滑动”或单击以获取更多内容的选项。

• 水平滚动可节省大量垂直屏幕空间。水平布局不是一次在非常长的页面上显示所有内容，而是向用户介绍较小的信息块。布局更灵活。可以在两个方向上添加内容 - 垂直和水平。

• 水平滚动允许用户看到一个类别中的选项通过滑动到一侧，或向下滚动以查看不同的类别。这种二维使用可以帮助用户显示各种选项，而无需访问单独的类别页面。

结论

互联网上关于水平滚动的使用及其对用户体验的影响存在很多争论。但我相信，如果明智地使用它可以节省大量的垂直空间，并有助于在应用程序上划分内容。我很高兴听到您对水平滚动的想法，并学习更多使其直观的提示。

---------------------------------

喜欢请点赞分享并关注哦~~