Banner 也需要交互设计?

作者:沁园

原文地址:zhuanlan.zhihu.com/p/42265225

未经允许请勿转载,感谢您对作者版权的尊重。


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

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


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


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

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


真的需要Banner吗?

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

IMG_0183_polarr.jpeg

1. Banner的内容是什么?

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

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

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

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

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

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


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

IMG_0181_polarr.jpeg

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

IMG_0182_polarr.jpeg

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

IMG_0180_polarr.jpeg

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

IMG_0176_polarr.jpeg



Banner交互设计的思考维度(移动端)

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

1、静态/动态轮播

「静态」 

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

IMG_0177_polarr.jpeg

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


「动态轮播」 

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

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


2、尺寸

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

IMG_0173_polarr.jpeg

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

IMG_0174_polarr.jpeg


3、文案和插图

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

IMG_0175_polarr.jpeg


4、视觉

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

IMG_0172.jpeg

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

IMG_0178_polarr.jpeg


5、“广告感”

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

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

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


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


参考文章


更多文章,欢迎访问 uicircle.club

微信公众号:uicircle

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入所在城市的微信群
  • 免费参与各种线上活动、线下聚会
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们