最近我在設計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 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部