针对APP端的banner展示，怎样做到前后端的有机组合，方便运营人员自行操作(随时更改)广告位呢？本文简单的将可视化banner后台的逻辑做以说明。

百度百科上我们可以看到对banner的定义即“横幅广告(Banner Ad.)是网络广告最早采用的形式，也是目前最常见的形式。横幅广告又称旗帜广告，它是横跨于网页上的矩形公告牌，当用户点击这些横幅的时候，通常可以链接到广告主的网页。”

在APP端或者PC端，我们经常看到各种各样大小的广告，有动态和静态区分，一般均为可点击的，或者为了宣告而增加的静态通知图片。

那么针对APP端的banner展示，怎样做到前后端的有机组合，方便运营人员自行操作(随时更改)广告位呢，接下来，我就简单的将可视化banner后台的逻辑做以说明。

前端banner展示

我们经常看到，banner存在一个APP的首页，位置可以在顶部，中部或者底部。通常以轮播图的形式展示，3秒/5秒进行轮播。

例如下图这种在首页中部的轮播展示banner图：

展示形式分两种：一种是静态的广告图，另一种是动态的广告图；

前端交互分两种：一种是不可点击的，仅仅是展示一张图片，另一种是可点击的，点击进入对应的网页或者端内页面。

通常情况下，banner都会有一个默认的一直存在的页面，但处特殊情况下的页面，当需要的时候，广告位展示出来，当不需要的时候，广告位隐藏。

举例，比如说通常像首页的banner，就算没有轮播的banner图，通常也都会有一个默认的图片。但像一些特殊页面的广告位，用股票APP来说，新股申购页面的特殊广告位，当有国际配售的新股的时候，广告位会展示出来，方便用户申购，当没有新股的时候，广告位就会隐藏。

例如下图展示的这种，特殊页面的banner是可以设置成隐藏的，无国际配售的时候banner隐藏不展示。

那到底前端的banner展示，怎么做一个可视化的后台页面呢，下面进行介绍

后台页面

1. banner管理列表页

一般这个列表展示的字段，通常都来源于添加banner时候的定义字段。

具体的字段还是要依据你们业务的复杂程度而定，但通常情况下，以下这些字段是必须存在的：

产品：这个可以定义为扩展字段，开始做这个功能的时候，可能仅仅是针对一个产品，但为了你这个后台的适配性，一般会告诉技术把这个字段预留出来；

banner名称：运营人员自行定义区分的字段，有时候该字段也可用来作为banner展示名称内容的获取字段；

banner位置：该字段也可定义为是一个扩展字段，不可能仅仅一个页面上存在广告位；

权重：该字段一般是设置banner在卡前端的展示位置，比如说有同一页面上设置了6个banner，那这6个banner的排列顺序由该字段设置；

图片：一般是做预览用的；

上架状态：这个字段一般是根据你设置的banner上架时间和下架时间根据当前时间来判断该banner的状态，一般分为待上架，上架中，已下架。分的更细一点，已下架可以在分为下架和已过期；

开始时间和结束时间用来控制banner在前端展示的时间；

操作般就是编辑：用来修改此条banner的设置内容。

2. 新增页面

banner管理列表页的列表数据来源于什么呢，就来源新增页面，新增页面是位添加一个banner而设置的。

新增页面中特殊说明下一下两个字段，其余字段在列表页中已做说明。

我们都知道，APP中的banner展现分为三种：

第一种就一张宣告的图片，无任何跳转；

第二种是点击之后，跳转到一个网页，称之为外部链接；

第三种是也可点击跳转，跳转的是APP内的原生页面。

那这两个字段TAG和URL地址，就是为了区分这个而建立的用于前后端进行交互的字段。

通常是事先定义好TAG，用它来特指是banner展示的哪一种。

TAG技术会分两种，当是跳转到APP原生页面，无需输入外部链接地址。当为外部链接页面的时候，则需输入外部链接地址。

3. 编辑页面

该页面同新增页面，除了向产品，banner位置这种用来唯一区分的字段不可更改外，其余的均可编辑修改

4. 删除banner

一般情况下，在可视化的后台中，不做删除操作。例如我们前边说到的banner状态【下架】来表示已过期的banner或者中途操作下架的banner，保存记录在列表页中，可供选择查看。

像这种情况的删除非要做的话可以在数据库中操作。或者在可视化中操作一栏增加删除操作，但需做好日志处理。

5. 搜索

搜索可以视你设置的具体字段进行分类，本文中，从上述的可视化后台界面可以看出。针对搜索，可根据产品名称/banner的位置/banner的状态进行搜索。也可增加输入查询项：banner的名称进行模糊搜索查询到对应的banner

以上就是我仅针对APP内的广告位(banner)的可视化后台做简单说明。仅仅是简单试用的初级层面，期待您的批评指正，我们一同进步，也欢迎小伙伴给出更完美的方案供学习。

本文由 @酸辣土豆丝 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

给作者打赏，鼓励TA抓紧创作！赞赏