最近我在設(shè)計(jì)App中Banner排版樣式的時(shí)候總是在糾結(jié)怎么用來用去就那幾個(gè)樣式，到底還有沒有其它樣式呢？那么問題又來了不同場景類型對應(yīng)哪種樣式更好呢？

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

接下來我們就不同類型進(jìn)行舉例并說明其運(yùn)用場景。

一、單張切換樣式

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

其中熊貓金庫采用的是全部撐滿的樣式，淘寶采用的是屏寬撐滿的弧形樣式，轉(zhuǎn)轉(zhuǎn)采用的是未撐滿的樣式?？偟膩碚f，單張切換樣式主要用于首頁Banner的展示。

1. 全部撐滿類樣式

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

當(dāng)然這里以熊貓金庫舉例是因?yàn)樗]有采用相同顏色切換，而是都采用了左側(cè)文字，右側(cè)吉祥物的設(shè)計(jì)，而且采用的不同顏色飽和度明度也趨向一致，所以這樣對APP的視覺呈現(xiàn)效果并沒有起到反效果，反而有加分。

2. 屏寬撐滿樣式

然而屏寬撐滿樣式并不受此局限，是因?yàn)轫敳坎捎昧似放浦魃{(diào)壓軸，不管Banner風(fēng)格樣式和色彩怎樣多變，都不會對視覺呈現(xiàn)有多大影響。

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

3. 未撐滿樣式

轉(zhuǎn)轉(zhuǎn)的未撐滿的樣式較為特殊，我們會在下文特殊背景樣式類別里解析。

二、多張切換樣式

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

1. 走馬燈式輪播

那么我們先來看幾個(gè)實(shí)例：

上圖的樂刻App首頁采用的為大小一致平行輪播、第二個(gè)為景深類輪播、第三個(gè)為景深類異形輪播、最后一個(gè)為一致類弧形輪播。一般拓展應(yīng)用的話會采用文字等特殊排版來進(jìn)行一致性統(tǒng)一。

關(guān)于文字等特殊排版我們在下文會進(jìn)行舉例，且往下看。

大小一致平行類輪播：其中大小一致平行類輪播多用于Ios11或者主色調(diào)較為弱化的App風(fēng)格中。一般圖片的高度較窄，因?yàn)閾?jù)不完全統(tǒng)計(jì)，越來越多的App運(yùn)營活動效果并不是太好，所以圖片的高度也相對調(diào)低了。

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

弧形輪播樣式：弧形輪播較為特殊，實(shí)際上比較常見的是安卓手機(jī)系統(tǒng)屏幕上可自定義的弧形輪播交互形式，這種形式因?yàn)槭腔⌒蔚?，容易給用戶造成眩暈感，所以需要根據(jù)具體場景謹(jǐn)慎使用。

2. 右側(cè)滑動類樣式

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

（1）信息展示類側(cè)滑

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

（2）側(cè)滑景深類樣式

側(cè)滑景深類這里的實(shí)例使用在了首頁，但此類樣式較為特殊，通常還是二級頁面使用的較多，因?yàn)槭醉搨?cè)面的使用對頁面的一致性有一定的破壞。

3. 堆疊類樣式

堆疊類樣式一般分為：縱向?qū)盈B樣式、橫向?qū)盈B樣式。
（1）縱向?qū)盈B樣式

縱向?qū)盈B樣式一般適用于首頁，且與產(chǎn)品背景圖相結(jié)合的形式出現(xiàn)，例如：上圖左一，每個(gè)Card顯示不同的航班信息。

（2）橫向?qū)盈B樣式

橫向?qū)盈B樣式一般適用于頁面里的中間位置，區(qū)別與其它常見的Banner樣式，主要用于圖片展示較多的場景內(nèi)使用，豐富頁面形式的多樣化。

三、功能類樣式

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

1. 點(diǎn)擊展開播放類

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

2. 信息歸納切換類

信息歸納切換類以上2個(gè)淘寶案例都屬于這個(gè)類別，只是中間那個(gè)把信息歸納為不同促銷價(jià)格分類，右邊把信息歸納為不同時(shí)間點(diǎn)進(jìn)行切換，這種類別通常適用于電商商品促銷類頁面。

2. 功能附加類

功能附加類通常在當(dāng)前Banner需要附加什么功能的時(shí)候采用，比如：需要添加收藏、添加購物車等功能，通常也是商品展示類頁面使用較多。

四、特殊排版一致類布局

特殊排版一致類布局一般分圖文錯(cuò)開類樣式、圖文關(guān)聯(lián)類、文本一致類。

1. 圖文錯(cuò)開類

圖文錯(cuò)開類樣式一般適用于想要有個(gè)性化頁面展示的App，相對于其它中規(guī)中矩的App有更多的創(chuàng)意類元素可供發(fā)揮，例如：上圖圖一的賣比較個(gè)性類別的服裝。

2. 圖文關(guān)聯(lián)類

圖文關(guān)聯(lián)類一般適用于每個(gè)Banner都有一致性的文案和標(biāo)簽信息展示的時(shí)候使用，例如：電商類的Enjoy。

3. 文本一致類

文本一致類多用于采用不同的圖片作為背景，且圖片上都有蒙層作為遮罩，每個(gè)不同的banner上的文字大小，排版都相同。例如：上圖的京東股票和最后一張Enjoy的頁面，這里的Enjoy的文本都添加了主色調(diào)作為文字底襯，更加強(qiáng)調(diào)了文字的一致性。

四、特殊背景處理

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

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

異形狀背景形狀類樣式一般也適用于想要個(gè)性化展示，區(qū)別與同類App的展示形式，通常采用品牌色為主。

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

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

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

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

五、復(fù)合拓展類

復(fù)合拓展類一般分為：縱向?qū)盈B列表樣式、沉浸式Banner+功能類樣式、Banner視頻與圖片疊加類樣式

1. 縱向?qū)盈B列表樣式

縱向?qū)盈B列表樣式是屬于比較特殊的展示類別，此處最美有物App的定位為精品高端類原創(chuàng)商品，所以這里采用了卡片式縱向?qū)盈B的樣式進(jìn)行展示，用戶不光能看到當(dāng)前產(chǎn)品的信息還能看到其它產(chǎn)品的文字信息，一般用于特殊品質(zhì)類產(chǎn)品展示。

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

淘寶的聚名品背景采用了較為商務(wù)男性化的背景風(fēng)格展示，給用戶傳遞的感覺較為硬朗、品質(zhì)，非常符合男性優(yōu)品的特質(zhì)。頂層左側(cè)放置了一個(gè)男士模特，右側(cè)放置了三個(gè)卡片。其中最上面的一排卡片可以側(cè)滑，下面是對應(yīng)的優(yōu)惠信息。

這種復(fù)合類型常用于電商，需要推薦的商品需要沉浸式展示的情況。

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

這里淘寶的生活家頁面背景采用的是視頻展示，頂層采用了多個(gè)圖片進(jìn)行展示，并配合了相應(yīng)的文案。并且引入了期刊雜志的概念，進(jìn)行專題展示。

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

總結(jié)

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

希望在我們設(shè)計(jì)banner樣式的時(shí)候能夠選擇更為合適的樣式，以適用當(dāng)前的場景。

作者：角馬X，口袋理財(cái)U(kuò)ED設(shè)計(jì)經(jīng)理。公眾號：海鹽社

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

題圖來自 Pexels，基于 CC0 協(xié)議