恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

Banner也需要交互设计?

原创文章 分类: 经验/观点 版权: 举报
2222 34 27 1
更新于:2019-10-23
0.0

我们好像已经见惯了位于各App首页顶端的轮播Banner;各业务方也常常为了更多的曝光争夺这块“宝地”。其实,Banner也需要交互设计。

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

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


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


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


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



真的需要Banner吗?



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

Image title

1. Banner的内容是什么?

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


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


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

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


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

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


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


Image title


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

Image title


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

Image title


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

Image title



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


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


Image title

1、静态/动态轮播


「静态」 

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

Image title

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


「动态轮播」 

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

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


2、尺寸


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

Image title

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


Image title


3、文案和插图


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


Image title

4、视觉


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


Image title


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


Image title


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

沁园Qinyuan

交互设计师/摄影重度爱好者。

11粉丝/8关注

小有见解收藏家lv.3
「评论设计」的8个思考维度

沁园Qinyuan

沁园Qinyuan

交互设计师/摄影重度爱好者。

小有见解收藏家lv.3

你确定要举报Banner也需要交互设计?

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2018年08月20日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录
//

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN