針對(duì)APP端的banner展示，怎樣做到前后端的有機(jī)組合，方便運(yùn)營(yíng)人員自行操作（隨時(shí)更改）廣告位呢？本文簡(jiǎn)單的將可視化banner后臺(tái)的邏輯做以說(shuō)明。

百度百科上我們可以看到對(duì)banner的定義即“橫幅廣告（Banner Ad.）是網(wǎng)絡(luò)廣告最早采用的形式，也是目前最常見(jiàn)的形式。橫幅廣告又稱旗幟廣告，它是橫跨于網(wǎng)頁(yè)上的矩形公告牌，當(dāng)用戶點(diǎn)擊這些橫幅的時(shí)候，通常可以鏈接到廣告主的網(wǎng)頁(yè)。”

在APP端或者PC端，我們經(jīng)常看到各種各樣大小的廣告，有動(dòng)態(tài)和靜態(tài)區(qū)分，一般均為可點(diǎn)擊的，或者為了宣告而增加的靜態(tài)通知圖片。

那么針對(duì)APP端的banner展示，怎樣做到前后端的有機(jī)組合，方便運(yùn)營(yíng)人員自行操作（隨時(shí)更改）廣告位呢，接下來(lái)，我就簡(jiǎn)單的將可視化banner后臺(tái)的邏輯做以說(shuō)明。

前端banner展示

我們經(jīng)?？吹剑琤anner存在一個(gè)APP的首頁(yè)，位置可以在頂部，中部或者底部。通常以輪播圖的形式展示，3秒/5秒進(jìn)行輪播。

例如下圖這種在首頁(yè)中部的輪播展示banner圖：

展示形式分兩種：一種是靜態(tài)的廣告圖，另一種是動(dòng)態(tài)的廣告圖；

前端交互分兩種：一種是不可點(diǎn)擊的，僅僅是展示一張圖片，另一種是可點(diǎn)擊的，點(diǎn)擊進(jìn)入對(duì)應(yīng)的網(wǎng)頁(yè)或者端內(nèi)頁(yè)面。

通常情況下，banner都會(huì)有一個(gè)默認(rèn)的一直存在的頁(yè)面，但處特殊情況下的頁(yè)面，當(dāng)需要的時(shí)候，廣告位展示出來(lái)，當(dāng)不需要的時(shí)候，廣告位隱藏。

舉例，比如說(shuō)通常像首頁(yè)的banner，就算沒(méi)有輪播的banner圖，通常也都會(huì)有一個(gè)默認(rèn)的圖片。但像一些特殊頁(yè)面的廣告位，用股票APP來(lái)說(shuō)，新股申購(gòu)頁(yè)面的特殊廣告位，當(dāng)有國(guó)際配售的新股的時(shí)候，廣告位會(huì)展示出來(lái)，方便用戶申購(gòu)，當(dāng)沒(méi)有新股的時(shí)候，廣告位就會(huì)隱藏。

例如下圖展示的這種，特殊頁(yè)面的banner是可以設(shè)置成隱藏的，無(wú)國(guó)際配售的時(shí)候banner隱藏不展示。

那到底前端的banner展示，怎么做一個(gè)可視化的后臺(tái)頁(yè)面呢，下面進(jìn)行介紹

后臺(tái)頁(yè)面

1. banner管理列表頁(yè)

一般這個(gè)列表展示的字段，通常都來(lái)源于添加banner時(shí)候的定義字段。

具體的字段還是要依據(jù)你們業(yè)務(wù)的復(fù)雜程度而定，但通常情況下，以下這些字段是必須存在的：

• 產(chǎn)品：這個(gè)可以定義為擴(kuò)展字段，開(kāi)始做這個(gè)功能的時(shí)候，可能僅僅是針對(duì)一個(gè)產(chǎn)品，但為了你這個(gè)后臺(tái)的適配性，一般會(huì)告訴技術(shù)把這個(gè)字段預(yù)留出來(lái)；
• banner名稱：運(yùn)營(yíng)人員自行定義區(qū)分的字段，有時(shí)候該字段也可用來(lái)作為banner展示名稱內(nèi)容的獲取字段；
• banner位置：該字段也可定義為是一個(gè)擴(kuò)展字段，不可能僅僅一個(gè)頁(yè)面上存在廣告位；
• 權(quán)重：該字段一般是設(shè)置banner在卡前端的展示位置，比如說(shuō)有同一頁(yè)面上設(shè)置了6個(gè)banner，那這6個(gè)banner的排列順序由該字段設(shè)置；
• 圖片：一般是做預(yù)覽用的；
• 上架狀態(tài)：這個(gè)字段一般是根據(jù)你設(shè)置的banner上架時(shí)間和下架時(shí)間根據(jù)當(dāng)前時(shí)間來(lái)判斷該banner的狀態(tài)，一般分為待上架，上架中，已下架。分的更細(xì)一點(diǎn)，已下架可以在分為下架和已過(guò)期；
• 開(kāi)始時(shí)間和結(jié)束時(shí)間用來(lái)控制banner在前端展示的時(shí)間；
• 操作般就是編輯：用來(lái)修改此條banner的設(shè)置內(nèi)容。

2. 新增頁(yè)面

banner管理列表頁(yè)的列表數(shù)據(jù)來(lái)源于什么呢，就來(lái)源新增頁(yè)面，新增頁(yè)面是位添加一個(gè)banner而設(shè)置的。

新增頁(yè)面中特殊說(shuō)明下一下兩個(gè)字段，其余字段在列表頁(yè)中已做說(shuō)明。

我們都知道，APP中的banner展現(xiàn)分為三種：

• 第一種就一張宣告的圖片，無(wú)任何跳轉(zhuǎn)；
• 第二種是點(diǎn)擊之后，跳轉(zhuǎn)到一個(gè)網(wǎng)頁(yè)，稱之為外部鏈接；
• 第三種是也可點(diǎn)擊跳轉(zhuǎn)，跳轉(zhuǎn)的是APP內(nèi)的原生頁(yè)面。

那這兩個(gè)字段TAG和URL地址，就是為了區(qū)分這個(gè)而建立的用于前后端進(jìn)行交互的字段。

通常是事先定義好TAG，用它來(lái)特指是banner展示的哪一種。

TAG技術(shù)會(huì)分兩種，當(dāng)是跳轉(zhuǎn)到APP原生頁(yè)面，無(wú)需輸入外部鏈接地址。當(dāng)為外部鏈接頁(yè)面的時(shí)候，則需輸入外部鏈接地址。

3. 編輯頁(yè)面

該頁(yè)面同新增頁(yè)面，除了向產(chǎn)品，banner位置這種用來(lái)唯一區(qū)分的字段不可更改外，其余的均可編輯修改

4. 刪除banner

一般情況下，在可視化的后臺(tái)中，不做刪除操作。例如我們前邊說(shuō)到的banner狀態(tài)【下架】來(lái)表示已過(guò)期的banner或者中途操作下架的banner，保存記錄在列表頁(yè)中，可供選擇查看。

像這種情況的刪除非要做的話可以在數(shù)據(jù)庫(kù)中操作。或者在可視化中操作一欄增加刪除操作，但需做好日志處理。

5. 搜索

搜索可以視你設(shè)置的具體字段進(jìn)行分類，本文中，從上述的可視化后臺(tái)界面可以看出。針對(duì)搜索，可根據(jù)產(chǎn)品名稱/banner的位置/banner的狀態(tài)進(jìn)行搜索。也可增加輸入查詢項(xiàng)：banner的名稱進(jìn)行模糊搜索查詢到對(duì)應(yīng)的banner

以上就是我僅針對(duì)APP內(nèi)的廣告位（banner）的可視化后臺(tái)做簡(jiǎn)單說(shuō)明。僅僅是簡(jiǎn)單試用的初級(jí)層面，期待您的批評(píng)指正，我們一同進(jìn)步，也歡迎小伙伴給出更完美的方案供學(xué)習(xí)。

本文由 @酸辣土豆絲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議