提到轮播首先可能想到的是广告，我们经常在移动端首页或网站首页会看到各式各样的轮播banner，不管在移动端还是网页上通常点击数据都是非常差的，本篇文章带你深入了解banner轮播。

如果需要设计一个轮播，我们应该考虑哪些因素？如何让轮播更具有价值？如何让轮播的体验更好？如何避免轮播常见的问题。

本篇文章通过以下几点探索轮播的特性，预计阅读20分钟

目录

1、用户真的使用轮播吗

2、轮播的轮换形式

3、轮播的进度展示

4、轮播定位

5、轮播的切换

6、对轮播进行分类

7、使用缩略图进行预知

8、轮播异形化

9、轮播时间

10、总结

一、用户真的使用轮播吗

用户是否对轮播有感知，这个则需要根据不同的场景进行判断，包括每个产品中的每个轮播对用户用户的定位也不相同，常见的应用场景品牌曝光、活动营销、产品展示，每个场景下相关的数据也不相同。

促销轮播banner

品牌推广轮播banner

产品介绍轮播banner

同时还有个关键因素，轮播的占比，这里以pc端为例若是产品是以品牌效应吸引用户的，大多轮播是以大的屏幕占比为主通常会占首屏的50%，如果是以营销、内容为主的产品，轮播通常以16:9、7:4的常规比例进行展示。

轮播的页数

用户在使用产品时会默认忽略轮播区域，一般轮播都会有自动轮换机制，一定时间后自动轮放下一张banner，那么每当页面上进行轮播时便会吸引用户进行关注，效果上会有一定的提升，所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。

还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。

如果banner是作为内容传播希望用户通过banner了解内容，那么则要避免放在最后一位置，对于用户而言最后一张轮播路径过于长，并且用户很少会手动滑动banner。

国外一家公司在针对轮播中进行了相关的研究测试，随着页数的增加用户的点击逐步下降。

那么如果想让产品中的轮播更具有效果，则需要根据不同的场景设定策略达到目的。

二、轮播的轮换形式

不管在移动端还是手机端，轮播都有各种交互形式和尺寸，以pc为例在交互上会多样化一些，常见的几种则是通过滚轮滑动、通过点击切换两种。

如下图某艺术网站，它则是通过鼠标滚轮进行切换轮播banner，并且banner的占比也是铺满首屏，这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点，同时也符合用户目标。

在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换，并且占比也是铺满首屏，在医美领域用户更关注美感，而轮播形态也是符合用户的心理预期更加沉浸美观。

而在移动端轮播的形式就比较统一，大多都是自动播放+手指滑动进行切换。

三、轮播的进度展示

在网页中轮播都会有当前的定位点，许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标，不用一张一张切换，但是在有些产品中会忽略这一点，设计中会做的非常小导致用户在点击上可用性不太友好，如下图中的banenr进度点设计上过于小导致点击上有些阻碍。

如以下网站去除进度定位的方式，通过缩略图预览来告知用户下一个banner的内容，空白区域也可以添加缩略图引导介绍等关键信息，帮助用户提前预知在体验上相对较好。

以下国外某网站在进度定位的设计上采用了标签文案方式进行设计，能够帮助用户更加全局的了解banner内容

四、轮播的定位

定位主要是用来指示当前轮播的进度，像上图中讲的便于用户更加全局的观看banner的张数和当前进度。

以下网站的设计中则把定位与进度相结合，进度条展示该banner预计多久会切换下一张，对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。

以下是某个国外网站，不管是pc还是移动端都在轮播底部添加了水平条，告知用户当前位置

随着市场上产品同质化严重，产品的竞争力也更依赖体验，在下图中的数据可视化的网站上，在进度条上就利用了产品的特性以饼状图的形式进行展示。

五、轮播的切换

在刚才上面举的例子中很多优秀的网站在设计上都很有创新性，但是需要注意一个点，在轮播中不只有自动播放，还需要考虑用户手动切换，因为在实际用户浏览中可能会对产品的播放时间达不到预期，此时则会使用手动切换，除去可点击的进度点，还需要上一张和下一张的入口切换。

在此基础上需要注意，在处于最后一张banner时，下一张切换还能不能点击，第一张时上一张切换还能不能切换，这个取决于产品特性和轮播张数，如果轮播张数过小的话则需要进行循环播放，如果过多的页数则第一步和最后一步不可点击。

切换的距离和位置

上一张和下一张的距离远近取决于banner的大小，如果轮播banner占比较大时则需要考虑用户的操作时长，距离越短时间越快，为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出，便于用户寻找。

如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大，保持视觉平衡，因为小区域banner用户能够更加全局的观看，在使用上不会犹豫。

反观移动端在轮播中除了展示banner进度外很少展示切换按钮，移动端更加依赖手势交互。

六、对轮播进行分类

当轮播banner过多时利用标签进行分类，用户通过点击标签进行查看相关的轮播组合。

此方式更适合一些电商平台、新闻网站这种内容过多的产品

如下图国外社交媒体网站则使用了标签进行分类，此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。

七、使用缩略图进行预知

在banner首屏中，显示的内容越多，越能激发用户进行点击，像上面讲过的农业产品网站就使用下一张预览图的形式进行展示，当然不仅局限于这种形式，如下图中的餐饮网站把所有的轮播banner展示给用户观看。

相对于缩放图，图标展示效果上也较好，空间占用更少，使用这种方式需要谨慎，对图标的识别性要求较高，我印象中能够使用的这种方法的网站是苹果官网，让产品抽象化展示。

在移动端也存在这种设计手法，但是基于分辨率原因移动端的缩略图展示过少，最常见的如下图中的马蜂窝和企鹅电竞。

八、轮播个性化

轮播最大的缺陷则是像刚开始讲的用户会默认为广告，对此可以使用个性化设计突破用户心理障碍，使轮播banner更具备亲和力。

如下图中的数码科技网站，利用产品与背景的结合营造出一种功能性的展示。

再例如下图中苹果官网入口，结合百度的定制化功能在大搜中进行个性化处理，把常规的banner轮播以功能卡片形式进行展示，同时卡片承载产品动画引导用户进行点击。

苹果官网进入后随意点击产品介绍页后会发现，苹果把轮播结合鼠标滚轮营造沉浸式观看，每个屏效内都展示产品一个功能特点，打破传统banner的展现形式。

九、自动轮播时间

自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级，如我们平常使用产品时会忽略banner广告，我们会更加关注移动中的东西，特别是在移动端上通常是banner进行轮播时才会关注。

谷歌设计团队曾对banner轮播的时间进行测试，测试结果得出5s-7s的轮播时间最佳，在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。

如下图谷歌商店的轮播时间设定在6s。

同时还需要注意，在自动播放的过程中如果用户鼠标hover上去后，则需要判定播放暂定，避免用户错过感兴趣的内容。

十、总结

本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍，在实际产品中轮播有很多可用性上的问题存在，我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。

Powered by Froala Editor