本篇文章不是教大家banner的設計手法，而是總結了界面設計中banner位的種類和樣式，強化我們對banner位樣式的認知，這樣在之後進行界面設計的時候，可以快速選擇適合自己產品的樣式。
目錄：
1. Banner位是什麼
2. Banner位的種類
Banner位是什麼？
Banner位，通常位於界面的頂部，是廣告、運營活動、專題、新產品推廣等重要信息的展示區域，通過運營同學來進行內容信息的維護，運用視覺表現的手法突出重點信息，來吸引用戶的關注。
特點：
1. Banner位主要存在於首頁、發現頁和資源列表頁等信息集合頁面中
2. Banner位多數情況是輪播圖，展示數量在2~8個，通常情況下3~5個為佳，數量太多的話不利於所有的banner的曝光，且用戶錯過一個就需要滑動多個才重新找見，體驗感也不是很好。
2. Banner位的種類
市場上常見的Banner類型。根據視覺表現形式主要分為兩大類，一種是普通banner；一種是通欄banner。
1. 普通Banner位
這是比較常見的Banner位樣式，屬於百搭款。應用場景非常廣泛，適合在各種類型的產品中展示。根據產品設計風格的不同，界面包含信息的不同以及信息層級的不同，這種Banner位又可以有多種樣式。
① 與內容齊寬，單獨存在
具體表現就是廣告位的寬度基本是與內容展示區域同寬，與屏幕兩側預留間距，保證了界面上方的透氣性；
整理了各種產品的Banner位後發現，目前這種類型的banner應用的最為廣泛。原因可能是最近流行的設計風格強調信息和留白，很多小眾App和新改版的App都是這種風格。
優點：
1. 在界面中的位置相對靠下，位於用戶的視覺交點處，且背景是純白色的，可以第一時間引起用戶的注意
2. 這種類型的Banner尺寸偏小，不會壓縮下方內容的展示區域；
3. 兩側預留間距，保證了界面的透氣性，讓產品看起來更輕盈，可以滿足界面對簡約的追求。
適用場景：
1. 上方內容比較多，比如同時包含搜索框和導航欄，或者同時包含導航欄和分類入口；
2. 方內容分類清晰，界面乾淨整潔。
② 與內容齊寬，單獨存在，有背景襯托
這種類型的banner位樣式是在前一個的基礎上，增加了背景襯托，讓界面頭部的視覺感受更加豐富，這裡的背景底色可以是品牌主色；也可以與banner同色調，隨著banner的切換進行顏色變化。
優點：
1. 背景顏色渲染，界面色彩更加豐富和飽滿；
2. 背景顏隨banner色調變化，頭部色調更統一；
3. 下方內容展示視覺樣式比較複雜，色彩比較豐富的時候，這樣的頭部可以壓得住。
缺點：
1. 同色系的背景會模糊banner的界限，視覺較難聚焦，可能會給用戶造成一定的不適感。
適用場景：
1. 適用於電商、娛樂類APP，比如天貓、淘寶內的餓了麼、網易雲音樂等。這種類型的App通常需要給用戶一種豐富，變化，有趣的視覺樣式，給用戶創造出一種熱鬧愉悅的氛圍。
③ 多個同時展示
這個是在單獨存在的基礎上，將左右的切換的banner展示出一部分讓用戶可以看見
優點：
1. 用戶可以直接看家左右兩邊存在banner，更好的促進用戶左右切換進行瀏覽；
2. banner展示區域更大，視覺上更霸氣，在沒有背景襯托的情況下，可以壓住下方更豐富的視覺樣式
特點：
1. 這種類型的Banner需要高色彩飽和度和低明度的Banner
使用場景：
1. 需要簡約透氣的頭部樣式，但又需要壓住下方內容
④ Banner與屏幕齊寬
優點：
1. 這樣的Banner讓界面看起來更加規矩，可以將上下內容進行很好的區分；
2. Banner位樣式比較簡單，所以可以在底邊做一些變形，讓下方的內容適當上移，這樣可以在寸金寸土的屏幕上預留更多的內容展示區域，比如淘寶，優酷；
適用場景：
1. 內容信息與界面同寬，比如優酷視頻；
2. 下方模塊信息通過色塊進行分割，比如豆瓣、mono；
3. Banner上下內容視覺樣式比較豐富，比如淘寶；
2. 通欄Banner位
Banner的位置直通接通向界面頂部，將導航欄和電池電量條都包括在內。
優點：
1. Banner將導航欄等信息都納入其中，所以界面頂部整體性強；
2. 不需要單獨為導航欄等信息單獨預留空間，所以可以為界面節省空間。
特點：
1. Banner的尺寸需要更大一些，這樣不會因為搜索框等信息的存在而對Banner內容進行遮擋；
2. 為了保證狀態欄的清晰呈現，這種類型的Banner頂部會覆蓋一層漸變蒙層，顏色通常與Banner一致；
缺點：
1. Banner層級在界面中的視覺層級比較低；
2. 可點擊性不強
總結
Banner樣式的選擇，不僅要考慮界面的視覺風格，還要考慮界面中展示的內容信息，內容信息的層級，以及內容信息的視覺豐富程度，通過綜合對比選擇合適的Banner樣式。
原文地址：https://mp.weixin.qq.com/s/uss2sM5ESjp9pH11cUzGDw
閱讀更多 UI小志 的文章
