本篇總結(jié)了界面設計中banner位的種類和樣式，強化我們對banner位樣式的認知，這樣在之后進行界面設計的時候，可以快速選擇適合自己產(chǎn)品的樣式。

Banner位是什么？

Banner位，通常位于界面的頂部，是廣告、運營活動、專題、新產(chǎn)品推廣等重要信息的展示區(qū)域，通過運營同學來進行內(nèi)容信息的維護，運用視覺表現(xiàn)的手法突出重點信息，來吸引用戶的關注。

特點：

1. Banner位主要存在于首頁、發(fā)現(xiàn)頁和資源列表頁等信息集合頁面中

2. Banner位多數(shù)情況是輪播圖，展示數(shù)量在2~8個，通常情況下3~5個為佳，數(shù)量太多的話不利于所有的banner的曝光，且用戶錯過一個就需要滑動多個才重新找見，體驗感也不是很好。

Banner位的種類

市場上常見的Banner類型。根據(jù)視覺表現(xiàn)形式主要分為兩大類，一種是普通banner；一種是通欄banner。

1. 普通Banner位

這是比較常見的Banner位樣式，屬于百搭款。應用場景非常廣泛，適合在各種類型的產(chǎn)品中展示。根據(jù)產(chǎn)品設計風格的不同，界面包含信息的不同以及信息層級的不同，這種Banner位又可以有多種樣式。

① 與內(nèi)容齊寬，單獨存在

具體表現(xiàn)就是廣告位的寬度基本是與內(nèi)容展示區(qū)域同寬，與屏幕兩側(cè)預留間距，保證了界面上方的透氣性；

整理了各種產(chǎn)品的Banner位后發(fā)現(xiàn)，目前這種類型的banner應用的最為廣泛。原因可能是最近流行的設計風格強調(diào)信息和留白，很多小眾App和新改版的App都是這種風格。

優(yōu)點：

1. 在界面中的位置相對靠下，位于用戶的視覺交點處，且背景是純白色的，可以第一時間引起用戶的注意

2. 這種類型的Banner尺寸偏小，不會壓縮下方內(nèi)容的展示區(qū)域；

3. 兩側(cè)預留間距，保證了界面的透氣性，讓產(chǎn)品看起來更輕盈，可以滿足界面對簡約的追求。

適用場景：

1. 上方內(nèi)容比較多，比如同時包含搜索框和導航欄，或者同時包含導航欄和分類入口；

2. 方內(nèi)容分類清晰，界面干凈整潔。

② 與內(nèi)容齊寬，單獨存在，有背景襯托

這種類型的banner位樣式是在前一個的基礎上，增加了背景襯托，讓界面頭部的視覺感受更加豐富，這里的背景底色可以是品牌主色；也可以與banner同色調(diào)，隨著banner的切換進行顏色變化。

優(yōu)點：

1. 背景顏色渲染，界面色彩更加豐富和飽滿；

2. 背景顏隨banner色調(diào)變化，頭部色調(diào)更統(tǒng)一；

3. 下方內(nèi)容展示視覺樣式比較復雜，色彩比較豐富的時候，這樣的頭部可以壓得住。

缺點：

1. 同色系的背景會模糊banner的界限，視覺較難聚焦，可能會給用戶造成一定的不適感。

適用場景：

1. 適用于電商、娛樂類APP，比如天貓、淘寶內(nèi)的餓了么、網(wǎng)易云音樂等。這種類型的App通常需要給用戶一種豐富，變化，有趣的視覺樣式，給用戶創(chuàng)造出一種熱鬧愉悅的氛圍。

③ 多個同時展示

這個是在單獨存在的基礎上，將左右的切換的banner展示出一部分讓用戶可以看見

優(yōu)點：

1. 用戶可以直接看家左右兩邊存在banner，更好的促進用戶左右切換進行瀏覽；

2. banner展示區(qū)域更大，視覺上更霸氣，在沒有背景襯托的情況下，可以壓住下方更豐富的視覺樣式

特點：

1. 這種類型的Banner需要高色彩飽和度和低明度的Banner

使用場景：

1. 需要簡約透氣的頭部樣式，但又需要壓住下方內(nèi)容

④ Banner與屏幕齊寬

優(yōu)點：

1. 這樣的Banner讓界面看起來更加規(guī)矩，可以將上下內(nèi)容進行很好的區(qū)分；

2. Banner位樣式比較簡單，所以可以在底邊做一些變形，讓下方的內(nèi)容適當上移，這樣可以在寸金寸土的屏幕上預留更多的內(nèi)容展示區(qū)域，比如淘寶，優(yōu)酷；

適用場景：

1. 內(nèi)容信息與界面同寬，比如優(yōu)酷視頻；

2. 下方模塊信息通過色塊進行分割，比如豆瓣、mono；

3. Banner上下內(nèi)容視覺樣式比較豐富，比如淘寶；

2. 通欄Banner位

Banner的位置直通接通向界面頂部，將導航欄和電池電量條都包括在內(nèi)。

優(yōu)點：

1. Banner將導航欄等信息都納入其中，所以界面頂部整體性強；

2. 不需要單獨為導航欄等信息單獨預留空間，所以可以為界面節(jié)省空間。

特點：

1. Banner的尺寸需要更大一些，這樣不會因為搜索框等信息的存在而對Banner內(nèi)容進行遮擋；

2. 為了保證狀態(tài)欄的清晰呈現(xiàn)，這種類型的Banner頂部會覆蓋一層漸變蒙層，顏色通常與Banner一致；

缺點：

1. Banner層級在界面中的視覺層級比較低；

2. 可點擊性不強

總結(jié)

Banner樣式的選擇，不僅要考慮界面的視覺風格，還要考慮界面中展示的內(nèi)容信息，內(nèi)容信息的層級，以及內(nèi)容信息的視覺豐富程度，通過綜合對比選擇合適的Banner樣式。

原創(chuàng)： 小火焰? (海鹽社)