​banner是什么意思(Banner轮播图有哪些设计要点?)

banner是什么意思(Banner轮播图有哪些设计要点?)

本文从产品设计角度列举了以及相应注意事项。

banner是什么意思(Banner轮播图有哪些设计要点?)

作为日常交通工具,地铁站内每天人来人往,人们总是被站内各种各样的广告给吸引,绚丽的色彩,突出的文案,无论行路多么匆忙,总是会注意到。

这类广告常称为“横幅广告”,即“ Banner 图”。

banner是什么意思(Banner轮播图有哪些设计要点?)

什么是 Banner 轮播图?

Banner:横幅,展示广告,由一张或多张图片拼接;开头提到的广告就是单张 Banner 图;多张图片循环轮播即是我们所讲到的 Banner 轮播图。

互联网历史发展时间不长,因此很多应用思想来源于传统商业社会,并加以适配、改良、优化。

例如将Banner 图应用到互联网后,一般不再是单张 Banner 图,而通常是多张图片轮播,因此习惯称作Banner 轮播图或广告轮播图。

现实中多是单张 Banner 图,而互联网中多是多张 Banner 图的原因是:

1)成本角度:

在街上或地铁站内可利用面积较大,将每张广告全部展示出来是可以做到的。

而使用多张轮播对承载广告页的硬件成本较高,而在移动端或 PC 端,可展示的区域大小有限,多张图片可提高空间的利用率。

2)行为角度:

现实中我们路过广告位的时间只有 1-2 秒,几乎没人会站在原地等下一个广告,而在移动端或PC端,用户只要没有退出应用,就存在看到其他 Banner 图的可能性 ,广告得到曝光的几率更大。

3)目的角度:

一张固定广告页不能立即获得显著收益,而是为了吸引用户,加深用户的印象,在“将来”产生消费行为。

而轮播图的目的不仅仅是吸引用户注意,还希望用户立刻产生探索欲望,去点击查看详情或者查看下一张,产生收益时间更短。

功能概述

Banner 轮播图常见于电商类或资讯类应用或功能首页或功能模块主页面,电商类 APP,例如淘宝、京东;资讯类App,例如 36 氪、人人都是产品经理;还有其他比如网易云音乐 App 的发现模块主页等。

Banner 轮播图通常位于首页顶部,有时也会在页面中间位置。以动态的形式为用户呈现多张图片,自动轮播的效果可以让每张图片得到较好的曝光。

位于首页顶部的作用可提高广告商品、优质内容的曝光度,提高浏览到购买的转化率和衡量内容价值。

中间部位 Banner 轮播图的作用是在可利用固定且较小的广告位展示更多的广告数量和内容。

每张图片都支持点击跳转到新落地页,可以是外部网站、应用程序内页或富文本。

前端展示

在移动端应用的 Banner 图片上一般展示的轮播图控件,通常以多个小圆点或其他样式显示,作用是告诉用户一共有多少张图片,让用户有探索的欲望,并且提示用户当前展示的是第几张。

在 PC 端还会有左右点击按钮,点击切换到上一张或下一张。

但是如果图片色彩过于丰富,控件不易看到,所以较好的方法是放在轮播图下方。并且可以选择其他的样式,提升用户体验。

banner是什么意思(Banner轮播图有哪些设计要点?)

banner是什么意思(Banner轮播图有哪些设计要点?)

轮播规则

Banner 轮播图为动态呈现,每张图片停留时间,轮播方向均是在前端代码中设置的定时任务。

而需要注意的是,图片停留时间尽量不要少于 3 秒,避免用户还没有阅读到图片上全部信息,页面就已经切换了,造成不好的用户体验。

如果图片上的内容过多,那么停留时间可延长,但不要超过 5 秒,因为用户看到第一张图片后,就很快会被其他内容吸引而离开,以至于后面的图片得不到曝光。

具体每张图片应该停留多长时间,应该根据图片内容而定,还可通过内部测试,或其他实验方式多次测试确定最佳停留时间。

Banner 轮播图通常自动向左滑动,并且在移动端可以手动向左或向右划动查看后一张或前一张图片。

更新规则

Banner 轮播图内容具有跟踪实时热点和热度推荐的作用,因此需要更新的频率较高。

更换轮播图内容有两种方式,一种是在前端代码中设置轮播图和跳转链接,更换时需要同时修改代码。

另一种方法是在运营后台管理系统中进行配置,轮播图的名称、定向投放、定时投放、顺序、图片、跳转链接等,这样的方式比较灵活,方便运营人员操作。

权重排序

我们知道,通常动态内容比静态内容更吸引用户,图片比文字更吸引用户。因此在一个页面上,注意力权重比较,视频>轮播图>图片>文字。

尽管轮播图更吸引用户注意,增加广告的曝光度,但是其实用户并没有耐心等所有图片自动轮播完,就已经去到其他页面或者手指已经划走了。

所以应该把最重要,最想呈现给用户的页面放在第一张,保证得到最大可能的点击率。越往后的图片得到曝光机会越小,因此图片应该根据重要程度排序。

注意事项

视觉疲劳:长时间显示固定 Banner 图会加重用户对该区域的麻木,并且用户可能已经不感兴趣了。所以需要有频率地对图片进行更新,并且每次更新都应能吸引眼球。

跳转参数:每个 Banner 图都需要支持可点击访问,跳转到新的落地页面,因此需判断落地页地址是否参数化。如果没有的话,需要单独进行开发。

容错机制:Banner 图的访问,加载,缓存的异常都需要考虑周全,产品需定义当访问异常或内容未加载出来异常页面的呈现。

根据产品体量和 Banner 更新频率决定是否缓存,如果是个大流量应用并且 Banner 图不常更新,那么最好在首次访问时调用缓存。

总结

以上,均是从产品角度设计一个 Banner 轮播图的注意要点,但是能够吸引用户的还是图片的内容,比如图片的版面设计,包含信息,色彩组合等等,需要产品与运营和设计师共同完成。

相关推荐

​宋朝女子相扑是什么样的?女子相扑为何被禁止?

​宋朝女子相扑是什么样的?女子相扑为何被禁止?

103

宋朝女子相扑是什么样的?女子相扑为何被禁止? 要说日本现如今非常流行的相扑活动,最初其实是起源于中国的,这一点应该有不少人都是知道的,但是如果要说宋朝时期,不仅有男子...

​金陵十三钗影评浅析(金陵十三钗专业分析评论)

200

金陵十三钗影评浅析(金陵十三钗专业分析评论) 引子:“战争在车轮底下,每条生命的挣扎都会被噪音所掩埋住。那位来邀请学生们赴宴的日本军官说:‘战争中总有失控的时候’,但...

​王昌龄是哪个朝代的(杜甫是哪个朝代的)

​王昌龄是哪个朝代的(杜甫是哪个朝代的)

156

王昌龄是哪个朝代的(杜甫是哪个朝代的) 王昌龄是杨哪个朝代的 谈起唐朝边塞诗,王昌龄的名字就不能绕过。他有“诗家夫子”、“七绝圣手”之称,其诗歌意境杨万里雄浑苍茫,又能...

​sp广告(亚马逊自动广告高效打法)

​sp广告(亚马逊自动广告高效打法)

142

sp广告(亚马逊自动广告高效打法) 五一过后,假期综合征还没过去,提不起工作的热情。 坐在办公桌前,远不如坐在池塘边更舒服。。。 今天来给大家写点自动广告的干货内容,搬好小...

​青蛙的资料简介(简单的介绍一下青蛙)

​青蛙的资料简介(简单的介绍一下青蛙)

142

青蛙的资料简介(简单的介绍一下青蛙) 青蛙属于脊索动物门、两栖纲、无尾目、蛙科的两栖类动物,成体无尾,卵产于水中,体外受精,孵化成蝌蚪,用鳃呼吸,经过变异,成体主要用...

​70周年阅兵口号是什么_阅兵全过程

​70周年阅兵口号是什么_阅兵全过程

126

70周年阅兵口号是什么_阅兵全过程 这是中国特色社会主义进入新时代的首次国庆阅兵,也是人民军队全面改革重塑后的首次整体亮相。铿锵步伐震动大地,嘹亮口号响彻云霄,国之重器...

​十大最经典广告(全球最受瞩目的十佳广告)

​十大最经典广告(全球最受瞩目的十佳广告)

147

十大最经典广告(全球最受瞩目的十佳广告) NO1.可口可乐——所有人篇 广告名称:可口可乐——所有人篇 情节描述:本片巧妙地利用可口可乐的产品造型,比喻了很多不同外型和个性...