轮播图（Carousels）这种互动在web时代似乎很常见。当一群人在会议室里争夺第一屏焦点图的优先级时，使用轮播图似乎可以毫不费力地解决争端。没有人是输家。然而，轮播图真的有效吗？如何设计给用户带来更好的体验？

轮播图（Carousels）这种互动在web时代似乎很常见。当一群人在会议室里争夺第一屏焦点图的优先级时，使用轮播图似乎可以毫不费力地解决争端。没有人是输家。然而，轮播图真的有效吗？如何设计给用户带来更好的体验？

事实上，“万能和事佬”轮播图的点击率通常很低，转换效果不好，但往往占据页面最引人注目的大面积位置。想象一下这样一个场景：当你走进图书馆寻找一本特定的书阅读时，一个推销员会站在你面前，让你先看一张大广告图，然后在你读完具体内容之前，他突然换了一张。这很烦人吗？大多数轮播图的设计也是如此。

确保你真的需要使用轮播图

首先，设计不当的旋转地图很容易被用户视为与他想要浏览的内容无关的广告图片。在各种网页上，经历过多次战斗的用户会选择最快的方式来找到和浏览他们想要看到的内容。关注没有预期的旋转地图显然是低效的，并自动进入用户的视觉盲点。以下热图显示了用户的浏览行为习惯：快速扫描找到他们想要阅读的区域，然后有序地沉浸式阅读，无一例外，他们忽略了看起来像广告的图片部分。

(以上热图来自Jamess Royal-Lawson）

(以上热力图来自Nielsensen Norman Group）

此外，2013年的研究结果表明，轮播图的交互效果并不理想： 只有 1% 用户点击轮播图上的切换按钮 84% 用户只在第一个屏幕上点击一次。

(以上图片来自Erikkk Runyon的研究结果)

一些学者对30多个B2B网站的网站进行了研究和分析，根据轮播图的内容分为三类：品牌宣传（Branding）、白皮书/在线研讨会（Thought Leadership）、服务推广（Service Promtion），发现无论什么样的内容，点击率都很低(0.16%~0.65%)：

(以上图片来自Harison Jones的研究结果)

不仅如此，很多使用轮播图的网站还存在以下SEO问题:

复杂的大图片导致网站性能低，加载速度慢。一般来说，旋转图片将携带大量的图片信息，特别是那些覆盖第一个屏幕的高分辨率旋转图片的网站。如此庞大的图片信息将对加载速度产生很大的影响。每次加载1秒，就会失去更多的用户。用户和搜索引擎都更喜欢加载更快的网站。

使用轮换标题。许多开发者倾向于在页面顶部播放轮播图片

标签，使4-5个不同的轮换出现在页面上

(图片来自行为·设计·转化率 ——通过设计引导用户行为提高转化率)

所以，当你的合作伙伴告诉你他想“加一个横幅，可以轮播”的时候，不要急着画画，不妨按照以下步骤和他讨论一下:

1、这样做的目的是什么？当用户打开页面时，他最想关注什么？这些内容能区分优先级吗？

2、通过现有的研究结论，合理理解轮播图的效果(不是万能的，如果设计不当，可能会产生负面影响)

3、思考是否有更好的方法来实现同样的目标

4、当无法选择时，做ABtest

读完这篇文章后，你也可能会有这些疑问：旋转图片真的是如此低效和难以使用，那么为什么有这么多的网站使用呢？为什么我的网站数据与上述数据不同？以上数据是基于web场景的。移动场景有什么区别吗？

诚然，有些场景非常适合使用旋转广播图片——当用户想要查看的信息以图片的形式携带效率最高，图片属于某一类别，用户有预期。谷歌图片的体验就是一个典型的例子， 搜索触摸图片的关键字后，用户首先看到小图表列表，点击其中一张小图片查看原始图片，然后通过左右箭头或相关图片推荐浏览更多相同类型的图片：

(以上图片来自谷歌图片)

此外，还有其他场景纯粹展示图片或出租广告空间。

此外，在移动终端场景中，由于屏幕的垂直高度较小，轮播图占比较大，交互操作比web终端鼠标点击触发区域更大，点击率通常更高。一些学者专门研究和分析了移动终端电子商务网站轮播图的交互效果，得出结论，23%的用户点击了轮播图上的内容，其中54.1%在第一张图上完成了转换，其中15.7%在第二张图上操作。虽然数据图表也线性下降，但轮播图本身的点击率（23%）和第一个屏幕后的点击率（总和占轮播图点击率的45.9%）都高于Erik之前在ND上的点击率.edu网站上获得的数据。

(以上图片来自Kylee Peatt的研究结果)

由于不同网站的历史背景、用户习惯、关注点和设计方案不同，数据可能会有所不同。我们需要知道的是，是否使用旋转地图本身并不是影响点击转换率的决定性因素。关键是是是否结合实际场景设计合适的方案。在合适的场景中，体验良好的旋转地图也会带来惊人的效果。

如何设计经验良好的轮播图？

若您确实需要使用轮播图并希望获得更高的点击率，以下是一些设计建议：

1、让轮播图看起来像站点的一部分

品牌元素贯穿设计，使用一致的字体和排版，使旋转地图成为网站的统一立面，而不是花哨无序的贴片广告，容易被直接忽视。提供清晰、区分标题、文本和转换入口的水平，以提高可读性，如下图所示：

(以上图片截图自Heroku)

2、小心自动切换

“固定静态banner图比自动切换bannner图带来更高的有效点击率。如果你对你的用户了解不够，几乎不可能放100%符合他们预期的内容。此时，它似乎为他们提供了更多的内容选择=更多的点击率=更多的销售额。这实际上是不可行的。” —— 电商专家 Depesh Mandalia

Jakobeb易用性大师 Nielsen还对会自动切换的轮播图进行了可用性研究，结论表明自动切换的轮播图会惹恼用户，更容易被他们忽视。

(以上图片截自淘宝网)

这种设计似乎很常见：在一个固定的区域，每5秒自动切换显示一张图片。这似乎很方便，增加了更多内容的曝光率。然而，没有多少用户会盯着图片耐心地等待未知内容5秒，这太低效了，他们的视线已经转移到其他地方。此外，当用户对当前的图片内容感兴趣时，突然的自动切换会打断用户的阅读过程，使用户失去控制、沮丧和愤怒。最重要的是，自动切换的图片看起来比默认的静态图片更像广告，而不是原始网站的一部分。

也有一些网站使用相对妥协的方式，当鼠标 hover 至 banner 停止自动切换或停止自动切换 banner 它提供了一个暂停按钮，比原始的自动切换更先进有些，但不能解决移动终端的一致性适应问题。因为在移动场景中，不存在 “ hover ” 在这种状态下，暂停小按钮的可用性也很差。同时，由于移动终端的一个屏幕内容有限，用户不会停留太多，会向下查看其他内容。“自动切换”等交互方式不仅不能曝光更多的内容，而且会影响体验。一个好的方法是通过进度指示点或隐藏部分内容，让您的页面保持稳定，并提示用户左右滑动以查看更多内容。

在以下豆瓣app的例子中，推荐的第二组部分没有显示，让用户明显感受到更多类似的推荐，可以左右滑动查看:

(以上图片截图豆瓣app)

Instagram在推荐用户时也使用了类似的方法。此外，它还提供了显示所有操作入口。它不仅对用户的干扰最小，而且具有更高的操作效率。

(上图截取自Instagram app）

因此，默认情况下，让您的图片静止在最新或最重要的内容上，给出可切换的操作预期，并在用户独立触发切换操作时切换，这是一个更好的选择。

3、给出明确的操作反馈和内容预期

显示信息的信息应面向大多数访问者，属于同一类别或相关（如酒店图片、旅游城市地标图、季节新图片等），引起访问者的兴趣，诱导进一步切换探索，而不是随机将一些无明显相关的图片放在同一位置。

让用户快速识别点击区域，减少出错的可能性。提供更大的点击区域和hover反馈，让用户清楚地感知哪些区域是值得称赞的。

同时，对于较小的点击区域(如定位指示点)，给出适当的容错范围。

提示用户的位置和操作后可见的内容。当用户预期切换后的内容时，他更容易找到自己感兴趣的内容，点击率也更高。下图的例子将步骤与定位指示点相结合，图片按顺序显示当前步骤的指示。

在下图中，不同视图下的缩略图和标题文本显示在baner区域下方，以便用户在不切换的情况下获得隐藏的信息内容，然后选择他们感兴趣的操作。

(上面的图片来自John Deere）

4、保证可用性，兼顾SEO

最后，考虑到网站的加载速度，优化内容，使用轻图片元素和转移动画，确保网站的可用性是非常重要的。