原文：Carousel Usability: Designing an Effective UI for Websites with Content Overload
作者：Kara Pernice (2013-09-14)
阅读时间：10m23s

摘要：轮播图允许多重内容占据同一个人人觊觎的空间。这可能会平息公司内讧，但在大型或小型的视窗中，人们都往往会直接滚动跳过轮播图。在用户界面中，一个静态的横幅图片或内容整合展示可能会是更好的解决方案。如果轮播图就是你的主要元素，良好的导航和内容可以使它更高效。

随处可见的轮播图

有很多种不同的 UI 元素，你都可以将其视为轮播图。

例如，可点击的几张图片的幻灯片（如戴尔网站上的）。

或者是，展示多个导航标志的动画（如 Nest 网站上的）。

但最普遍的类型是特征区域的轮播图（如本文所讨论的），它通常具有以下特征：

• 出现在主页顶部
• 占据首屏大部分空间
• 在同一位置同时显示多个内容
• 提供一些指示（或导航），表明这个轮播图中有多个特色内容或多帧数
• 每一帧中都包含了图片和少量文本
• 包含了关于集团的品牌或使命、特色信息的内容，或由广告宣传组成
  
  

轮播图最大的优点

使用轮播图最大的好处在于，它可以让多个内容在主页上占据同一个重要位置，这有助于消除任何关于谁的内容最具价值的内部争论。另外一个好处是，使更多的信息显示在可视区域的顶部，因此人们有更大的机会真正注意到它们。

轮播图最大的缺点

你无法指望人们会注意到网站或企业内部网上的轮播图中的信息。不管是在 30 英寸还是 3 英寸的显示器上查看内容，人们通常都会直接滚动跳过这些图像，并错过其中所有内容，或者至少错过除第一帧以外的其他内容。
的确，有一些眼动研究和网络计量学表明某些轮播图获得了大量的眼光停留与点击量。
但是，使用轮播图时最需要注意的是，人们经常会忽略它们，以及其中部分或全部内容。

第二个最重要的注意事项是，设计师将轮播图视为一组图片的合辑，而用户通常只关注他所看到的那个图片。从整体上来说，轮播图中的一组图片可以令人对一个组织的作用产生准确的印象。但如果一个用户只看到其中的一张图片，他很可能会对一个组织产生误解。当一张图片描述的是一些反常的事情，或与业务、章程相关性较弱的事情时，这个问题就经常发生。

主页横幅可成为你的网站的视觉主角吗？考虑使用主页横幅代替轮播图

如今，多图片的轮播图已经取代了以前网络上随处可见的单个的「主页横幅」。但在某些情况下，成熟的 UI 替代品可能比比它年轻、充满活动的后代产物更适合。
原因之一在于，设计师的态度。一个轮播图中有可供选择的多帧图片，所以有机会达成共识或抓住用户的注意力，知道这一点会给设计师一种错误的安全感。他们认为人们会看到轮播图中所有的图片，所以他们会选择一些低质量的粗劣图片，以期弥补信息量的问题。但如果一个设计师只能选择一张图片表达一个观点，他们可能更倾向于选择一些强有力和示范性的东西。这样一来，用户就可真正专注于一个图片，而不是将注意力分散在几个图片中。
此外，一个静态的主页横幅比轮播的元素更不容易分散用户注意力，因此可提高人们用于发现站点中其他区域的全局导航的可见性。（附带一提的是，将主页横幅或轮播图中的任何重要信息也放在用户界面中的其他地方，是一个很好的方式，因为这样一来，与 IA 或页面进行交互的人们就有机会看到它。）

BestBuy 网站的主页使用了一个主页横幅来展示促销文案「Labor Day Savings Event」，以及销售日期与一个鲜明的黄色动作按钮「Shop Now」。

使 Best Buy 的主页横幅变得有效的原因有以下几点：

• 电视机、笔记本电脑和冰箱的图片易于辨认，清晰地展示了正在出售的产品。这个主题图片是引人注意的、信息丰富的。
• 字体、颜色与全局导航和主页眉中的字体、颜色相匹配，所以主页横幅看起来是网站内容的一部分，而不是一个强势的广告。
  此外，这些特征都有助于传达 Best Buy 品牌，加强宣传他们每天售卖的产品。
  
  

轮播图的设计准则

如果你决定使用轮播图作为你的主要视觉形式，可遵循以下准则来把它们做好。

1. 一个轮播图只包含 5 帧或 5 帧以下的图片，因为用户不太可能查看更多帧了。
在移动设备上滑动浏览多帧图片是很费力的，当帧数超过 5 帧时，用户将很难辨别他们已经浏览过的图片的主题。同时，限制帧数将有助于用户发现内容，并在轮播图中再次找到它。

2. 使用简洁清晰、与组织宗旨一致的文案和图片。
阅读字体太小的文本与辨认尺寸过小的图片是很困难的，尤其是在移动设备上。把一个大尺寸、高密度的图片塞进一个小区域中是不合适的。文案与图片越清晰，用户就越有可能注意到并理解其中表达的含义。

Corning Museum of Glass 使用引人注目的图片与高度相关的文案，这些都符合博物馆的工作性质。

Corning Museum of Glass 使用滑动手风琴来显示丰富的图片。

3. 提示用户轮播图中有多少帧图片，以及当前图片所在帧数位置，以提升用户的控制感。

Coldwell Banker 是我们内部网设计 2018 年年度竞赛的 10 个获胜者之一。他们内部网的轮播图设计清晰地展示了重要的信息：一共有 5 帧，每一帧的内容都是必需的，并且很容易识别出哪一帧是当前选中的。

Delta 使选中的点（在屏幕截图的底部）比其他两个点大，但是尺寸差别太细微了，所以不起作用。(给那些辨别不出来的朋友：中间那个是选中的，更大的。)

4. 使用易于理解和识别的图标与链接。
导航控件旨在帮助人们识别选项，并在看到主框架中的内容后重新调用它们。例如，用户无法猜测一个数字或一个点点击后会显示什么，但可能记住绿色背景与关于环境的文章相关。在移动设备上，点是特别糟糕的提示，因为人们通常不会注意到它们（而且它们在 Android 比在 iOS 中更不标准）。

5. 确保导航控件在轮播图内显示，而不是在轮播图下方或者通过折叠分开来。这个设计有助于避免大型或小型显示器上的问题。

IBM 提供了一个引人注目的轮播图，轮播中有可点击的图片按钮，但按钮很小，并且按钮上没有描述性的文案。

在 iPhone 上查看时，Shining Star Therapy 网站上的轮播控件被截断了。这种出血效果比完全不显示控件好，但如果能看到完整的控件更好。

6. 如果为每一帧提供一个导航按钮（而不是用于滚动的箭头），请确保每个按钮看起来是不一样的，并且代表所在的那帧。

John Deere 的主页提供了带有文字的图片作为按钮，并且显示在轮播图之内，这些都发挥了很大的作用。（同时，它还有可向前向后切换轮播图的箭头。）

然而，它的文本非常小，难以阅读，并且对于分配给它们的小空间而言，这些用作按钮的图片过于密集了。

7. 使用足够大的链接与按钮，以便于识别和点击。
尺寸小、紧挨着或显示在一个复杂背景上的按钮，将不容易被注意到或点击。

在 Roku 网站上，当所在帧背景为浅色时，轮播图左右侧的箭头很容易被注意到与点击，但是在背景比较复杂的帧中，它们就不够明显了。

滚动后的 Roku 网站。

自动轮播

在帧之间自动轮播可引导人们浏览信息。但有些情况下，不推荐使用自动轮播。

不要使用自动轮播：

• 你不确定能否把握好轮播时间，以便大多数人在指定的时间内阅读并吸收轮播图中的内容。有时候轮播得太快，用户将无法读取信息，这对他们来说是令人沮丧的，对于试图突出重点的组织来说也是不好的。有时候轮播得太慢，则当它们动起来时，用户会因此感到惊讶。
• 你的内容与广告类似。用户倾向于忽略一个看起来像广告的动画（如果他们并没有购物的心态）。我们的眼球追踪研究表明，27% 的情况下，动画广告会被注意到。

自动轮播的建议

• 不要在移动设备上使用自动轮播，因为：1. 它降低了页面的加载速度；2. 因为页面很短，用户通常会快速滚动，所以当轮播图切换时，用户可能正往下看，并忽略这个变化。
• 通过测试得出正确的轮播时间，或者至少估计用户阅读文本和处理图像需要的平均时间。我们以每秒 3 个单词为准则。
• 不要停在最后一帧。继续循环轮播（并显示所选的帧）。

静态（非自动轮播）的轮播图建议

确保对轮播图感兴趣的用户能意识到除了当前显示的图像、内容外还有其他内容。提供清晰的视觉元素，以代表更多内容，比如：

• 导航链接和图标（如上所述）
• 切断，或者使图片“出血”，并显示下一个图片的一部分。

Windows 8 上的 Skyscanner app 将（右侧的）页面内容截断，以表明还有更多内容。

总结

如果你正在使用轮播图，以期人们可以看到多种多样的内容，要记住大部分用户只会注意到第一帧，甚至全部都不会注意到。因此，请确保那些重要的内容也被谨慎地放置在 IA 中和你的网站上其他页面中。考虑使用静态的轮播图或者主页横幅，而不是自动轮播的图片。此外，在任何轮播图的导航中，都要确保按钮和链接是清晰的，足够大、易于理解和点击的，并且当前选中的那一帧的按钮应该显示为选中的状态。这样，你将创造出一种奇妙的愉悦感，而不是一个恐怖屋。

相关文章：
Best Practices for Hero Images
10 Requirements For Making Home Page Carousels Work For End Users (If Needed)

以上翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^
感谢原文作者及所有分享想法与经验的人 ^^