Banner也需要交互设计？
最近在设计某频道的移动端首页，产品经理说要在顶部放一个轮播的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.
(https://www.uisdc.com/best-slider-design-suggehttps://www.uisdc.com/best-slider-design-suggestion
——
欢迎点击原文链接去赞赏作者