网页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 轮播图为动态呈现，每张图片停留时间，轮播方向均是在前端代码中设置的定时任务。

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

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

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

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

更新规则

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

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

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

权重排序

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

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

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

注意事项视觉疲劳：长时间显示固定 Banner 图会加重用户对该区域的麻木，并且用户可能已经不感兴趣了。所以需要有频率地对图片进行更新，并且每次更新都应能吸引眼球。跳转参数：每个 Banner 图都需要支持可点击访问，跳转到新的落地页面，因此需判断落地页地址是否参数化。如果没有的话，需要单独进行开发。容错机制：Banner 图的访问，加载，缓存的异常都需要考虑周全，产品需定义当访问异常或内容未加载出来异常页面的呈现。

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

总结

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

作者：晴天；微信公众号：impm6666

本文由 @晴天 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议