最近在设计某频道的移动端首页，产品经理说要在顶部放一个轮播的Banner位。 

Banner？好说！画一个占位图，写上“Banner”，等等！事情好像没有那么简单…… 

其实，Banner也需要交互设计。 

我们好像已经见惯了位于各App首页顶端的轮播Banner；各业务方也常常为了更多的曝光争夺这块“宝地”。然而，轮播Banner真的很有效吗？ 

轮播Banner(carousel)可以在不占用其他空间的情况下容纳更多的内容，可能可以满足不同类型的目标用户，动态的轮播形式也会让页面看起来更有活力。但是，轮播Banner也有很多缺陷。频繁地轮播其实会扰乱用户的注意力。而且很少有用户会眼巴巴地等待并浏览一张张轮播的Banner，想要点击轮播Banner中的一帧时也可能会误点击。事实上，轮播banner图的点击率并不高，平均只有不到1%。如何设计才能让Banner起到效果的同时，给用户更好的体验呢？

真的需要Banner吗？

当我们交互设计师在面对放Banner的需求时，需要先弄清楚4个问题：

1. Banner的内容是什么？

是外部的广告？还是运营活动宣传？还是频道入口？或者是公告？ 

2. 内容的数量有多少？会同时存在几个内容？

3. 内容的更新频率是怎样？

是只有1个固定内容一直不变？还是少数2-3个内容低频更新？又或是多个7、8条内容经常更换？ 

4. Banner和页面中其他内容比起来，重要性是怎样的？

重要性会影响到Banner的尺寸、位置和样式设计。 

其实，轮播Banner其实只是运营位的一种形式而已。运营位还有很多其他形式，比如浮标、腰封、或者融入信息流。考虑了上面的几个问题，我们才可以决定是用轮播Banner的形式还是选择其他形式。

例如，需求是偶尔需要吸引用户来参与的运营活动，我们就可以用小浮标的形式，不仅可以吸引用户的注意力，也不会对页面布局产生影响。

例如，大多数情况下只有两个内容需要展示，我们可以采用两块运营位并排的形式，让两个内容都能得到曝光。

如果内容基本上都是合作的广告，我们可以考虑将其插入信息流，提高浏览量。

Banner交互设计的思考维度（移动端）

经过了以上，如果最后还是决定用Banner，那么Banner的交互设计大概有以下维度：

1、静态/动态轮播

「静态」 

如果内容中有一个非常重量级的，其他的都是差不多的不怎么重要的，可以考虑只将重量级内容放在显眼位置的Banner上，且静态不轮播，其余内容放在别的运营位里，例如饿了么的首页。

也可以针对新用户使用静态Banner，展示品牌或者产品介绍；当新用户转化成老用户时，再切换成别的内容。

「动态轮播」 

如果要轮播的话，要注意帧数不要太多，最好不要超过5帧。 

别忘了加上轮播指示器，提示用户Banner的个数以及Banner是可以左右滑的，并保证用户可以流畅地左右滑切换Banner。 

2、尺寸

大尺寸的Banner有更强的营销感和氛围感，一般放在首屏偏上方的位置，电商App常常设计大尺寸的Banner。自动轮播的精美Banner图也会给页面带来活力，甚至背景色也可以随着Banner的色调发生变化，例如天猫首页的Banner。

小尺寸的Banner则会更低调一些，对用户的注意力吸引较小。金融类App常常使用小尺寸Banner，例如百度理财，京东金融更是将Banner的尺寸缩小到了极致。

3、文案和插图

保证文案是精简易读的，能让用户迅速理解重点。交互设计师可以在和需求方沟通好的前提下，制定Banner内容文案的行数和字数规范，以及是否允许在Banner中使用插图。比如，规定文案不能超过2行，2行的情况下一行是正标题字号较大另一行字号较小等，插图只能放一个元素。

4、视觉

好的Banner视觉设计可以和整个产品融合得很和谐，且符合产品调性。饿了么首页Banner就和顶部搜索模块做了很有创意的融合，让人无法忽视。百度理财的Banner使用的是产品的品牌色，红色和金色；支付宝的Banner全部是简洁的白色；网易严选的Banner，色彩风格十分统一，都是渐变、低纯度、马卡龙色，更难能可贵的是，每个Banner点击进去对应的详情页主色调也是对应的。

因为Banner有的时候是由其他部门的设计人员来负责，为了保证Banner设计的高质量和与产品的融合度，交互设计师需要和UI设计师一起，制定Banner的视觉规范，规定好颜色和元素的位置。

5、“广告感”

轮播Banner在一些用户的认知里是“广告”，对于一些明显的大色块，用户会认为其是广告而不自觉地忽略掉。我们有的时候可以故意将Banner设计得非常“像”广告，帮助用户去快速甄别广告，而不会因为不小心看了广告有了不好的体验。 

有时为了提高用户浏览Banner的体验，我们要降低广告感。文案可以更偏向理性或者情感化，视觉设计上可以避免热烈的促销风，可以偏清淡一些。 

总之，设计师需要谨慎地去把控Banner的“广告感”。

以上就是我对轮播图的设计思考，谢谢阅读！ 

沁园 

参考文章： 

XD Essentials: Carousels https://medium.com/thinking-design/xd-essentials-carousels-6b8fed5aaffa

Do Homepage Carousels Work? https://medium.com/@bratling/do-homepage-carousels-work-84028e582adc

用好这4个设计建议，让你的轮播图点击率更高！ https://www.uisdc.com/best-slider-design-suggestion

作者：沁园

更多文章请关注公众号「园野设计圈」

Powered by Froala Editor