網(wǎng)站設(shè)計之頂部banner的設(shè)計類型分析
網(wǎng)站設(shè)計中Banner排版樣式的時候總是在糾結(jié)怎么用來用去就那幾個樣式，到底還有沒有其它樣式呢？那么問題又來了不同場景類型對應(yīng)哪種樣式更好呢？
下面我就以上這些疑問找了一些比較有代表性的Banner樣式進行了匯總歸類，分為以下6種類別：單張切換樣式／多張切換樣式／功能類樣式／特殊排版一致類布局／特殊背景處理／復(fù)合拓展類。
接下來我們就不同類型進行舉例并說明其運用場景。
一、單張切換樣式
單張切換樣式一般分為全部撐滿、屏寬撐滿和未撐滿3種樣式。
其中熊貓金庫采用的是全部撐滿的樣式，淘寶采用的是屏寬撐滿的弧形樣式，轉(zhuǎn)轉(zhuǎn)采用的是未撐滿的樣式。總的來說，單張切換樣式主要用于首頁Banner的展示。
1.全部撐滿類樣式全部撐滿類樣式在越來越多的網(wǎng)站和App中被棄用，主要原因是此樣式對運營圖的要求比較高，需要做到風(fēng)格和顏色盡量一致，才不會影響網(wǎng)站整個的風(fēng)格展示效果。當(dāng)然這里以熊貓金庫舉例是因為它并沒有采用相同顏色切換，而是都采用了左側(cè)文字，右側(cè)吉祥物的設(shè)計，而且采用的不同顏色飽和度明度也趨向一致，所以這樣對網(wǎng)站和APP的視覺呈現(xiàn)效果并沒有起到反效果，反而有加分。
2.屏寬撐滿樣式然而屏寬撐滿樣式并不受此局限，是因為頂部采用了品牌主色調(diào)壓軸，不管Banner風(fēng)格樣式和色彩怎樣多變，都不會對視覺呈現(xiàn)有多大影響。所以全部撐滿類樣式如果不能確保Banner的一致性，還是要慎用。屏寬撐滿的樣式適合有主色調(diào)壓軸的情況下使用，適用于風(fēng)格多樣的購物類平臺。
3.未撐滿樣式轉(zhuǎn)轉(zhuǎn)的未撐滿的樣式較為特殊，我們會在下文特殊背景樣式類別里解析。
二、多張切換樣式
多張切換樣式分為：走馬燈式輪播／右側(cè)滑動類樣式／堆疊類樣式
1.走馬燈式輪播我們首先來了解下什么是走馬燈，上圖為中國古代的走馬燈。因多在燈各個面上繪制古代武將騎馬的圖畫的連貫動態(tài)造型，而燈轉(zhuǎn)動時看起來好像幾個人你追我趕一樣，故名走馬燈。
那么在網(wǎng)站和App里常見的輪播Banner樣式，可以追溯為走馬燈式輪播，只不過由于這里是為功能信息服務(wù)的，所以我們這里無需展示圖像的動態(tài)連貫信息。
那么我們先來看幾個實例：
上圖的樂刻App首頁采用的為大小一致平行輪播、第二個為景深類輪播、第三個為景深類異形輪播、最后一個為一致類弧形輪播。一般拓展應(yīng)用的話會采用文字等特殊排版來進行一致性統(tǒng)一。
關(guān)于文字等特殊排版我們在下文會進行舉例，且往下看。
大小一致平行類輪播：其中大小一致平行類輪播多用于Ios11或者主色調(diào)較為弱化的App風(fēng)格中。一般圖片的高度較窄，因為據(jù)不完全統(tǒng)計，越來越多的App運營活動效果并不是太好，所以圖片的高度也相對調(diào)低了。
景深類輪播：景深類輪播一般在覺得頁面想要豐富層次感的時候采用。
弧形輪播樣式：弧形輪播較為特殊，實際上比較常見的是安卓手機系統(tǒng)屏幕上可自定義的弧形輪播交互形式，這種形式因為是弧形的，容易給用戶造成眩暈感，所以需要根據(jù)具體場景謹慎使用。
2.右側(cè)滑動類樣式右側(cè)滑動類樣式分為：信息展示類側(cè)滑、側(cè)滑景深類。
（1）信息展示類側(cè)滑信息展示類側(cè)滑分為常規(guī)圖文類、圖片嵌套卡片式信息的形式和視頻展示類。例如：淘寶的海淘筆記頁面為圖片嵌套卡片式信息的形式，淘寶的生活研究所為視頻展示類側(cè)滑，也就是滑動到哪個哪個Banner可以自動播放視頻。一般信息展示類側(cè)滑多用于產(chǎn)品的二級頁面。
?。?）側(cè)滑景深類樣式側(cè)滑景深類這里的實例使用在了首頁，但此類樣式較為特殊，通常還是二級頁面使用的較多，因為首頁側(cè)面的使用對頁面的一致性有一定的破壞。
3.堆疊類樣式堆疊類樣式一般分為：縱向?qū)盈B樣式、橫向?qū)盈B樣式。
?。?）縱向?qū)盈B樣式縱向?qū)盈B樣式一般適用于首頁，且與產(chǎn)品背景圖相結(jié)合的形式出現(xiàn)，例如：上圖左一，每個Card顯示不同的航班信息。
?。?）橫向?qū)盈B樣式橫向?qū)盈B樣式一般適用于頁面里的中間位置，區(qū)別與其它常見的Banner樣式，主要用于圖片展示較多的場景內(nèi)使用，豐富頁面形式的多樣化。
三、功能類樣式
功能類樣式一般分點擊展開播放類、信息歸納切換類、功能附加類。
1.點擊展開播放類
點擊展開播放類通常適用于視頻、音頻等App，比如：蝦米的Ai電臺頁面，點擊較窄的一塊色塊Banner即展開播放相應(yīng)的播放類別。
2.信息歸納切換類
信息歸納切換類以上2個淘寶案例都屬于這個類別，只是中間那個把信息歸納為不同促銷價格分類，右邊把信息歸納為不同時間點進行切換，這種類別通常適用于電商商品促銷類頁面。
3.功能附加類
功能附加類通常在當(dāng)前Banner需要附加什么功能的時候采用，比如：需要添加收藏、添加購物車等功能，通常也是商品展示類頁面使用較多。
四、特殊排版一致類布局
特殊排版一致類布局一般分圖文錯開類樣式、圖文關(guān)聯(lián)類、文本一致類。
1.圖文錯開類
圖文錯開類樣式一般適用于想要有個性化頁面展示的App，相對于其它中規(guī)中矩的App有更多的創(chuàng)意類元素可供發(fā)揮，例如：上圖圖一的賣比較個性類別的服裝。
2.圖文關(guān)聯(lián)類
圖文關(guān)聯(lián)類一般適用于每個Banner都有一致性的文案和標(biāo)簽信息展示的時候使用，例如：電商類的Enjoy。
3.文本一致類
文本一致類多用于采用不同的圖片作為背景，且圖片上都有蒙層作為遮罩，每個不同的banner上的文字大小，排版都相同。例如：上圖的京東股票和最后一張Enjoy的頁面，這里的Enjoy的文本都添加了主色調(diào)作為文字底襯，更加強調(diào)了文字的一致性。
五、特殊背景處理
特殊背景處理一般分為：異形背景形狀類樣式、圖片元素背景切換類樣式、圖片背景模糊處理類樣式。
1.異形狀背景形狀類樣式
異形狀背景形狀類樣式一般也適用于想要個性化展示，區(qū)別與同類App的展示形式，通常采用品牌色為主。
2.圖片元素背景切換類樣式
圖片色彩元素背景切換類樣式一般提取了當(dāng)前展示banner的圖片元素做為背景展示，可以豐富當(dāng)前活動在頁面中的氛圍，一般電商類App使用較多。
3.圖片背景模糊處理類樣式
通常采用固定的圖片背景并進行了高斯模糊的處理方式，再疊加一層蒙層進行展示，一般背景可以隨圖片切換也可不切換，例如：淘寶的生活研究所采用的是不切換的圖片模糊類型。
六、復(fù)合拓展類
復(fù)合拓展類一般分為：縱向?qū)盈B列表樣式、沉浸式Banner+功能類樣式、Banner視頻與圖片疊加類樣式。
1.縱向?qū)盈B列表樣式
縱向?qū)盈B列表樣式是屬于比較特殊的展示類別，此處最美有物App的定位為精品高端類原創(chuàng)商品，所以這里采用了卡片式縱向?qū)盈B的樣式進行展示，用戶不光能看到當(dāng)前產(chǎn)品的信息還能看到其它產(chǎn)品的文字信息，一般用于特殊品質(zhì)類產(chǎn)品展示。
2.沉浸式Banner+功能類樣式
淘寶的聚名品背景采用了較為商務(wù)男性化的背景風(fēng)格展示，給用戶傳遞的感覺較為硬朗、品質(zhì)，非常符合男性優(yōu)品的特質(zhì)。頂層左側(cè)放置了一個男士模特，右側(cè)放置了三個卡片。其中最上面的一排卡片可以側(cè)滑，下面是對應(yīng)的優(yōu)惠信息。這種復(fù)合類型常用于電商，需要推薦的商品需要沉浸式展示的情況。
3.Banner視頻與圖片疊加類樣式
這里淘寶的生活家頁面背景采用的是視頻展示，頂層采用了多個圖片進行展示，并配合了相應(yīng)的文案。并且引入了期刊雜志的概念，進行專題展示。主要用于期刊類專題頁面展示。
總結(jié)
以上介紹了6種不同Banner的展示類型，分為單張切換樣式、多張切換樣式、功能類樣式、特殊排版一致類布局樣式、特殊背景處理類樣式、復(fù)合拓展類樣式。希望在我們設(shè)計網(wǎng)站banner樣式的時候能夠選擇更為合適的樣式，以適用當(dāng)前的場景。
本文標(biāo)簽： 網(wǎng)站設(shè)計
站應(yīng)該怎么做.jpg)
備類網(wǎng)站推廣方案.jpg)
站建設(shè)費用明細表.jpg)
站內(nèi)容運營方案.jpg)
體材料類網(wǎng)站內(nèi)容運營方案.jpg)
站應(yīng)該怎么做.jpg)
站應(yīng)該怎么做.jpg)
浴設(shè)施類網(wǎng)站建設(shè)費用明細表.jpg)
類網(wǎng)站建設(shè)方案書.jpg)
施類網(wǎng)站內(nèi)容運營方案.jpg)
站SEO選哪家公司好.jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢.jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢.jpg)
站SEO一年需要多少錢.jpg)
站SEO一年需要多少錢.jpg)
站SEO選哪家公司好.jpg)
站SEO需要注意什么.jpg)
站SEO選哪家公司好.jpg)
貨.jpg)
意怎么改.jpg)
