UE设计中移动设备上的轮播

触摸屏上的轮播受到可发现性低和顺序访问的困扰，并且并非所有设计都将滑动作为轮播控件来实现。

在台式机上，轮播一直是在不占用太多空间的情况下将多个内容粘贴在首页上的一种流行方法。在移动设备上，首次推出iPad时，轮播越来越流行。（原始的iPad设计着迷于蚀刻屏幕的美学，并希望以最小的细节来控制布局。因此，它们通常避免垂直滚动，而倾向于使用卡片或类似转盘的设计。）

像菜单和手风琴一样，轮播在移动设备上也具有重要优势：它们可将大量内容放入相对较小的空间中。他们的第二个大优点是，他们可以允许所有人在主屏幕上进行标记（即使它通常会变成看不见的标记），从而可以解决组织内的内容优先级争执。但是，轮播也有一些重要的缺点：

它们基于顺序访问：用户必须逐一浏览轮播中的所有项目才能到达最后一个。这种交互是无效的。

它们并非总是可发现的。即使人们认出了旋转木马，他们通常也无法在不与旋转木马互动的情况下知道其中装有什么类型的物品。

此外，并非所有轮播控件都在触摸屏上正确实现。

在本文中，我们讨论了一些可用性准则，旨在缓解移动设备上的这些问题。

顺序访问

一个接一个地浏览项目，希望可能会找到感兴趣的项目，这并不是一件有趣的事情：大多数人在轮播中查看3-4个不同的页面后会停下来。因此，我们建议用户应该能够以3–4步（即点击或滑动）到达转盘中的最后一项。

如果您有很多项目，请改用列表视图，并允许人们直接访问页面上的任何项目。

请注意，建议使用3到4步才能达到最后一项，但这并不一定意味着轮播中应该只有3或4项。如果每页显示多个项目，则轮播可能更适合。在下面的Netflix示例中，英雄轮播每页仅显示一项，需要5次滑动才能达到轮播中的第 6 项，而其他轮播则每页显示3项（因此，需要16次滑动才能到达页面中的最后一项清单50）。

目的是确定轮播项目的优先级，以便首先显示用户最感兴趣的项目。考虑使用个性化设置，使前几次滑动与特定用户更加相关。优先级减轻了顺序访问的繁琐程度，因为用户通常不需要执行许多步骤。同样，通过优先显示最佳项目，优先顺序可以吸引用户，并鼓励他们坚持旋转木马的时间要长于随机序列。

适用于iPhone的Netflix（左）使用轮播显示长列表：Netflix轮播上的“流行”有70多个项目，并且要求用户滚动23次以上才能转到最后一个项目。相反，Showtime.com（右）仅在其英雄轮播中正确使用了4个项目。

可发现性

寻找特定内容的匆忙移动用户可能永远不会注意到轮播。即使轮播是自动动画的，移动页面也是如此小，以至于轮播图像更改时，用户可能已经向下滚动并不再看到它。

传统上，有三种类型的轮播提示用于在移动设备上发出轮播信号：

• 点或线

• 箭

• 连续性的幻想

一些轮播提示比其他提示更强。点通常是较弱的指示符：由于点很小，因此人们通常不会注意到它们。由看起来像是连续超出屏幕垂直边缘的半个图像或文本所造成的连续性错觉是强烈的轮播提示-用户很快就会意识到，通过超出屏幕边缘可以获取更多内容。

容易错过诸如箭头和点之类的轮播提示的另一个问题是它们经常出现在轮播图像的顶部。当UI元素出现在繁忙背景的顶部时，它们与周围图像的对比度可能较低，并且可以与周围图像融合。这个问题在移动设备上尤为重要，在移动设备上，由于外部使用而产生的眩光也会影响对比度的质量。

以下是带有强或弱轮播提示的设计示例。

Zara手机版首页

Zara.com没有使用轮播符号来向用户指示他们可以通过水平滑动来访问更多内容。轮播是自动动画的，但是向下滚动经过大图像的人没有注意到它。

NBC的移动首页，带有白色背景图片和顶部白色箭头

NBC.com：轮播图片顶部的箭头与图片融合在一起。

屏幕的下半部分是一个带有股票图表和下方小点的轮播

轮播提示不足：iPhone的股票在轮播下方显示了低对比度的点。

屏幕截图中的轮播显示了侧面的截断项目。

强烈的轮播提示：一半的图像（如iPhone的FilmStruck应用程序-左）和不完整的单词（如iPhone的OpenTable应用程序-右）表示用户左右有更多内容。

即使对于带有良好指示符的旋转木马，如果第一项对他们来说并不有趣，人们可能也不会费心去看后续的项。第一项是轮播中其余内容的推荐信，并且实际上是其他项的信息气味的来源-如果第一项似乎与他们的目标相关，人们将浏览轮播，而忽略如果不是，它（尽管实际上，轮播中的其他元素可能是相关的）。

从而：

• 轮播中的项目应该彼此高度相关，因此人们将能够预测他们与轮播互动时会发现的内容类型。

• 英雄轮播中使用的重要项目应该以其他方式访问，以防用户完全忽略内容。如果内容是至关重要的，则应该有其他途径。

控制轮播

当人们想要与触摸屏上的轮播互动时，他们会滑动。不支持此手势来推动旋转木马是完全出乎意料的，这会带来糟糕的用户体验。到目前为止，大多数用户已经熟悉了用于水平导航的手势。确保您的轮播支持滑动。

计算机监视器的图像，其下方有文字，文字下方有圆点

Dropbox不允许用户滑动以移动轮播；取而代之的是，人们不得不点击它下面的小点。（除了是一种陌生的交互技术外，由于菲茨定律，要求在任何UI中都击中小点是有问题的；由于肥手指问题，在触摸屏上尤其不利。）

使用滑动控制轮播会在iOS上产生滑动歧义的问题。滑动歧义性指的是，可以根据执行手势的确切位置将相同的滑动手势解释为不同的意思。自iOS 7以来，滑动歧义已成为iOS一直存在的危险。例如，在Safari浏览器中，左边缘的水平滑动与Back相同，它将用户带回到上一页。使用iPhone X，在屏幕的下边缘附近水平滑动即可切换应用程序。不幸的是，当在屏幕上稍有不同的位置启动时，相同的手势也可用于在轮播中导航。由于非触摸设备上不提供滑动手势，因此某些响应式设计选择放弃在移动设备上使用，而用其他推进轮播的方式代替它。例如，Dropbox希望人们点击转盘图像下方的小点来推进转盘。首先，尽管圆点在iOS轮播中始终可以点击，但绝大多数用户甚至都不愿轻敲它们-他们不知道这些点可用于控制轮播。其次，即使他们想敲击它们，它们又很小又彼此靠近，以至于任何选择一个的尝试都是徒劳的。

解决因刷卡歧义而产生的问题的部分解决方案是在转盘周围留一个“页沟”-本质上讲，是一些空白，告诉用户转盘边界未到达屏幕边缘。一些用户将继续在屏幕边缘附近滑动以移动轮播（并意外地离开当前页面导航），而其他用户将手指保持在可见的轮播边框附近，从而不会出现滑动歧义的情况。

左屏幕截图：下方带有点点的连衣裙的图像。 右屏幕截图：两张图片

Jcrew.com：轮播占据了整个屏幕宽度；用户在使用滑动手势时不小心返回了上一个浏览器页面。

左：这条裤子在侧面带有箭头； 右：穿着灰色背景，图片周围有一些空白。

Net-a-porter.com（左）和Macys.com（右）使用户更容易地通过在转盘和屏幕边缘之间留出一些空白来滑动转盘。Net-a-porter上的箭头提供了额外的保险，可防止滑动歧义（用户始终可以选择轻按箭头而不是滑动以保护自己免受滑动歧义）。

结论

使用旋转木马来节省小屏幕上的空间的诱惑可能很大，但是旋转木马的物品却几乎没有发现性，尤其是当广告没有很好地暗示时，例如对连续性或箭头的错觉。如果最终在移动网站或移动应用程序中使用轮播，请确保该轮播中没有过多的元素并且支持滑动。