1、banner图的由来

生活中，在川流不息的地铁里，绚丽的色彩加以醒目的图片文字，让匆忙而过的人们都会下意识的看上几眼。这类广告我们通常称为横幅广告，也就是所谓的Banner图。

2、什么叫banner轮播图呢？

banner图指一张或多张拼接而成的横幅、广告。地铁上的一般都是一张展示一张广告，就是单张banner图，而由多张图片循环播放的是banner轮播图。

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

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

那为什么现实中我们使用的是单张而在互联网上使用多张轮播呢？

1）、成本角度

在街上或者地铁的广告需要篇幅较大，多张显然成本太高，而在app或web

端上页面篇幅较小，多张轮播能减少空间

2）、行为角度

街上、地铁的广告，大部分人群只会匆匆的撇上一眼，大概一到两秒，一张刚好，多张轮播显然看不到，而在app或web端上只要用户没有点击下一页，就有机会看到，这样曝光率更大

3）、目的角度

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

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

3、功能概述

Banner 轮播图常见于电商类或资讯类应用APP的功能首页或功能模块主页面，电商类 APP，例如京东、淘宝；资讯类App，例如 36 氪、钛媒体；还有其他比如网易云音乐 App 的发现模块主页等。

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

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

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

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

4、前端展示

一般在轮播图上展示的小圆点是轮播图的控件，可以清楚的告诉人们轮播图的个数，让人有一种想要探索的欲望。

还有就是banner图在页面中心的占比较少一般在外卖app中显示一些优惠和打折商品。

5、轮播的规则

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

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

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

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

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

6、更新规则

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

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

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

7、权重排序

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

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

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

8、注意事项

1）文案需清晰可见，需具有很强的可读性；阅读不费力，这样才能在有效传递广告主需要传递的核心信息。

2）主题鲜明，无需过多的辅助干扰因素，少即是多；简易的文案和突出的产品更容易抓住用户的眼球。但不是用过于刺眼的颜色，不然可能会引起反感，适得其反。

3）符合阅读习惯，尽量是从做往右，或者是从上到下，否则短暂的阅读时间无法抓住用户的注意力，留给这个banner的宿命就是被划走或者是忽略。

4）重点文字需做突出，用最短时间抓住用户点击欲望；是打折还是上新，折扣力度是多大，有效期是几天等等，摘取重要信息作重点突出和吸引即可。千万别满屏幕都是重点，在有限的空间内做好信息的平衡和协调。

5）注意画面节奏，信息平衡，主次对比鲜明，突出产品特征，必要的重点文案可以突出，画面适度留白，增加透气感形成内容聚焦，利于阅读。

6）最好不要直接拿pc端的图直接放进移动端，因为文字的可读性无法保证，需要同风格但要对文字进行调整。

通常首屏轮播banner不常使用动图进行展示，如果首屏的多张图都是动图，用户就会眼花缭乱，找不到重点。通常会在次屏的单张banner展示区域，例如胶囊banner，既不占用过多空间，也能很好的传递宣传的板块信息，并且有的会结合动图或是破格图来吸引用户进行点击等操作，很好的平衡了画面的焦点，以及整个页面的节奏感。

9、总结

这是从产品的角度来分析banner轮播图的要点，但是轮播图的重点在于图片和文字的选择，所有要和运营和UI一起讨论设计。

優(yōu)網(wǎng)科技秉承"專(zhuān)業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門(mén)戶型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶型、DIY體驗(yàn)、720全景展廳及3D虛擬仿真）、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）、微信小程序定制開(kāi)發(fā)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。