Banner的不同樣式類型分析

最近我在設計App中Banner排版樣式的時候總是在糾結怎麼用來用去就那幾個樣式，到底還有沒有其它樣式呢？那麼問題又來了不同場景類型對應哪種樣式更好呢？

下面我就以上這些疑問找了一些比較有代表性的Banner樣式進行了匯總歸類，分為以下6種類別：單張切換樣式／多張切換樣式／功能類樣式／特殊排版一致類布局／特殊背景處理／複合拓展類。

接下來我們就不同類型進行舉例並說明其運用場景。

一、單張切換樣式

單張切換樣式一般分為全部撐滿、屏寬撐滿和未撐滿3種樣式。

其中熊貓金庫採用的是全部撐滿的樣式，淘寶採用的是屏寬撐滿的弧形樣式，轉轉採用的是未撐滿的樣式。總的來說，單張切換樣式主要用於首頁Banner的展示。

1. 全部撐滿類樣式

全部撐滿類樣式在越來越多的App中被棄用，主要原因是此樣式對運營圖的要求比較高，需要做到風格和顏色儘量一致，才不會影響App整個的風格展示效果。

當然這裡以熊貓金庫舉例是因為它並沒有採用相同顏色切換，而是都採用了左側文字，右側吉祥物的設計，而且採用的不同顏色飽和度明度也趨向一致，所以這樣對APP的視覺呈現效果並沒有起到反效果，反而有加分。

2. 屏寬撐滿樣式

然而屏寬撐滿樣式並不受此局限，是因為頂部採用了品牌主色調壓軸，不管Banner風格樣式和色彩怎樣多變，都不會對視覺呈現有多大影響。

所以全部撐滿類樣式如果不能確保Banner的一致性，還是要慎用。屏寬撐滿的樣式適合有主色調壓軸的情況下使用，適用於風格多樣的購物類平臺。

3. 未撐滿樣式

轉轉的未撐滿的樣式較為特殊，我們會在下文特殊背景樣式類別裡解析。

二、多張切換樣式

多張切換樣式分為：走馬燈式輪播／右側滑動類樣式／堆疊類樣式

1. 走馬燈式輪播

我們首先來了解下什麼是走馬燈，上圖為中國古代的走馬燈。因多在燈各個面上繪製古代武將騎馬的圖畫的連貫動態造型，而燈轉動時看起來好像幾個人你追我趕一樣，故名走馬燈。

那麼App裡常見的輪播Banner樣式，可以追溯為走馬燈式輪播，只不過由於這裡是為功能信息服務的，所以我們這裡無需展示圖像的動態連貫信息。

那麼我們先來看幾個實例：

上圖的樂刻App首頁採用的為大小一致平行輪播、第二個為景深類輪播、第三個為景深類異形輪播、最後一個為一致類弧形輪播。一般拓展應用的話會採用文字等特殊排版來進行一致性統一。

關於文字等特殊排版我們在下文會進行舉例，且往下看。

大小一致平行類輪播：其中大小一致平行類輪播多用於Ios11或者主色調較為弱化的App風格中。一般圖片的高度較窄，因為據不完全統計，越來越多的App運營活動效果並不是太好，所以圖片的高度也相對調低了。

景深類輪播：景深類輪播一般在覺得頁面想要豐富層次感的時候採用。

弧形輪播樣式：弧形輪播較為特殊，實際上比較常見的是安卓手機系統屏幕上可自定義的弧形輪播交互形式，這種形式因為是弧形的，容易給用戶造成眩暈感，所以需要根據具體場景謹慎使用。

2. 右側滑動類樣式

右側滑動類樣式分為：信息展示類側滑、側滑景深類。

（1）信息展示類側滑

信息展示類側滑分為常規圖文類、圖片嵌套卡片式信息的形式和視頻展示類。例如：淘寶的海淘筆記頁面為圖片嵌套卡片式信息的形式，淘寶的生活研究所為視頻展示類側滑，也就是滑動到哪個哪個Banner可以自動播放視頻。一般信息展示類側滑多用於產品的二級頁面。

（2）側滑景深類樣式

側滑景深類這裡的實例使用在了首頁，但此類樣式較為特殊，通常還是二級頁面使用的較多，因為首頁側面的使用對頁面的一致性有一定的破壞。

3. 堆疊類樣式

堆疊類樣式一般分為：縱向層疊樣式、橫向層疊樣式。
（1）縱向層疊樣式

縱向層疊樣式一般適用於首頁，且與產品背景圖相結合的形式出現，例如：上圖左一，每個Card顯示不同的航班信息。

（2）橫向層疊樣式

橫向層疊樣式一般適用於頁面裡的中間位置，區別與其它常見的Banner樣式，主要用於圖片展示較多的場景內使用，豐富頁面形式的多樣化。

三、功能類樣式

功能類樣式一般分點擊展開播放類、信息歸納切換類、功能附加類。

1. 點擊展開播放類

點擊展開播放類通常適用於視頻、音頻等App，比如：蝦米的Ai電臺頁面，點擊較窄的一塊色塊Banner即展開播放相應的播放類別。

2. 信息歸納切換類

信息歸納切換類以上2個淘寶案例都屬於這個類別，只是中間那個把信息歸納為不同促銷價格分類，右邊把信息歸納為不同時間點進行切換，這種類別通常適用於電商商品促銷類頁面。

2. 功能附加類

功能附加類通常在當前Banner需要附加什麼功能的時候採用，比如：需要添加收藏、添加購物車等功能，通常也是商品展示類頁面使用較多。

四、特殊排版一致類布局

特殊排版一致類布局一般分圖文錯開類樣式、圖文關聯類、文本一致類。

1. 圖文錯開類

圖文錯開類樣式一般適用於想要有個性化頁面展示的App，相對於其它中規中矩的App有更多的創意類元素可供發揮，例如：上圖圖一的賣比較個性類別的服裝。

2. 圖文關聯類

圖文關聯類一般適用於每個Banner都有一致性的文案和標籤信息展示的時候使用，例如：電商類的Enjoy。

3. 文本一致類

文本一致類多用於採用不同的圖片作為背景，且圖片上都有蒙層作為遮罩，每個不同的banner上的文字大小，排版都相同。例如：上圖的京東股票和最後一張Enjoy的頁面，這裡的Enjoy的文本都添加了主色調作為文字底襯，更加強調了文字的一致性。

四、特殊背景處理

特殊背景處理一般分為：異形背景形狀類樣式、圖片元素背景切換類樣式、圖片背景模糊處理類樣式、

1. 異形狀背景形狀類樣式

異形狀背景形狀類樣式一般也適用於想要個性化展示，區別與同類App的展示形式，通常採用品牌色為主。

2. 圖片元素背景切換類樣式

圖片色彩元素背景切換類樣式一般提取了當前展示banner的圖片元素做為背景展示，可以豐富當前活動在頁面中的氛圍，一般電商類App使用較多。

3. 圖片背景模糊處理類樣式

通常採用固定的圖片背景並進行了高斯模糊的處理方式，再疊加一層蒙層進行展示，一般背景可以隨圖片切換也可不切換，例如：淘寶的生活研究所採用的是不切換的圖片模糊類型。

五、複合拓展類

複合拓展類一般分為：縱向層疊列表樣式、沉浸式Banner+功能類樣式、Banner視頻與圖片疊加類樣式

1. 縱向層疊列表樣式

縱向層疊列表樣式是屬於比較特殊的展示類別，此處最美有物App的定位為精品高端類原創商品，所以這裡採用了卡片式縱向層疊的樣式進行展示，用戶不光能看到當前產品的信息還能看到其它產品的文字信息，一般用於特殊品質類產品展示。

2. 沉浸式Banner+功能類樣式

淘寶的聚名品背景採用了較為商務男性化的背景風格展示，給用戶傳遞的感覺較為硬朗、品質，非常符合男性優品的特質。頂層左側放置了一個男士模特，右側放置了三個卡片。其中最上面的一排卡片可以側滑，下面是對應的優惠信息。

這種複合類型常用於電商，需要推薦的商品需要沉浸式展示的情況。

3. Banner視頻與圖片疊加類樣式

這裡淘寶的生活家頁面背景採用的是視頻展示，頂層採用了多個圖片進行展示，並配合了相應的文案。並且引入了期刊雜誌的概念，進行專題展示。

主要用於期刊類專題頁面展示。

總結

以上介紹了6種不同Banner的展示類型，分為單張切換樣式、多張切換樣式、功能類樣式、特殊排版一致類布局樣式、特殊背景處理類樣式、複合拓展類樣式。

希望在我們設計banner樣式的時候能夠選擇更為合適的樣式，以適用當前的場景。

 

作者：角馬X，口袋理財UED設計經理。公眾號：海鹽社

本文由 @角馬X 原創發布於人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基於 CC0 協議