Banner 對(duì)于設(shè)計(jì)師來說并不陌生，更多的還是在于視覺表現(xiàn)的環(huán)節(jié)，作為視覺設(shè)計(jì)師來說是重點(diǎn)培養(yǎng)的能力之一。今天給大家探討的關(guān)于 UI 場(chǎng)景中的 Banner 布局樣式，并非是視覺層面的探索，而是關(guān)于產(chǎn)品設(shè)計(jì)中的布局樣式分析。

 

在產(chǎn)品中出現(xiàn) Banner 圖是比較常見的基礎(chǔ)功能，除了在其視覺創(chuàng)意層面不斷探索精進(jìn)以外，UI 層面的樣式布局也在不斷嘗試更多不同的表現(xiàn)，希望通過本文的梳理和大家一起做一次探索，解析優(yōu)秀案例的經(jīng)驗(yàn)。

 

 

 

分享目錄

 

一、Banner 視覺層表現(xiàn)類別

二、Banner 布局樣式分析

三、移動(dòng)端線上案例分析

四、總結(jié)

 

 

 

一、Banner 視覺層表現(xiàn)類別

 

Banner 在 UI 場(chǎng)景中通常伴隨著輪播的形式展示，所以也經(jīng)常稱之為輪播圖，這也是導(dǎo)航的一種形式之一，也有輪播導(dǎo)航的功能。在產(chǎn)品中出現(xiàn)可以帶給用戶平臺(tái)需要重點(diǎn)傳播的內(nèi)容，比如活動(dòng)信息和官宣咨詢等。

 

為了能引起用戶更高的關(guān)注度，Banner 在視覺層的表現(xiàn)上面也在不斷的創(chuàng)新。除了 Banner 設(shè)計(jì)創(chuàng)意、構(gòu)圖、配色等視覺層面發(fā)揮以外，在表現(xiàn)類別上面我分為靜態(tài)、動(dòng)態(tài)、視頻、分層視差等。

 

 

 

1.1 靜態(tài) Banner 展示

靜態(tài)的輪播圖是最常見的，無論是設(shè)計(jì)效率還是技術(shù)落地都是最為便利的。Banner 畫面為靜態(tài)的圖片格式，在產(chǎn)品中分為單圖和多圖，單圖是靜態(tài)的展示形式，多圖可以自動(dòng)輪播和手動(dòng)滑動(dòng)切換。

 

 

 

1.2 動(dòng)態(tài) Banner 展示

動(dòng)態(tài)表現(xiàn)的 Banner 相較于靜態(tài)而言更能引起用戶的關(guān)注度，強(qiáng)化信息重點(diǎn)，在一些重點(diǎn)元素和行動(dòng)按鈕等地方實(shí)行動(dòng)態(tài)表現(xiàn)。

 

如果采用動(dòng)態(tài)的形式表現(xiàn)，通常為單圖的居多。動(dòng)態(tài)表現(xiàn)可以引起高關(guān)注度，但是如果過多也會(huì)形成互相干擾，反而削弱了關(guān)注度。

 

在這個(gè)信息爆炸的互聯(lián)網(wǎng)環(huán)境中，產(chǎn)品設(shè)計(jì)師都在不斷的嘗試如何更快、更準(zhǔn)地獲得用戶的關(guān)注度。微動(dòng)效無疑是一個(gè)不錯(cuò)的選擇，無論是在功能交互還是視覺表現(xiàn)層面，都隨處可見。

 

 

 

1.3 視頻嵌入展示

視頻廣告由來已久，隨著短視頻的走熱，視頻嵌入到輪播廣告中逐漸增多。較多的表現(xiàn)形式為默認(rèn)出現(xiàn)在首個(gè) Banner 中，伴隨著倒計(jì)時(shí)出現(xiàn)，也可以關(guān)閉播放。此類廣告為了降低用戶在未知場(chǎng)景中的使用干擾，通常為靜音模式，帶給用戶更加友好的體驗(yàn)。

 

也有一些產(chǎn)品欄目采用多個(gè)視頻輪播的形式，這個(gè)應(yīng)用場(chǎng)景相對(duì)較少，一些影視產(chǎn)品偶爾運(yùn)用。

 

 

 

1.4 分層視差效果展示

為了帶給用戶不一樣的視覺呈現(xiàn)和互動(dòng)體驗(yàn)，也逐漸出現(xiàn)一些打破常規(guī)表現(xiàn)形式的輪播廣告。分層視差效果是其中變化較大的一種，有輪播疊加的視差、3D翻轉(zhuǎn)、元素和背景分離視差等。

 

元素或者背景之間的運(yùn)動(dòng)差異必將引起用戶高度的關(guān)注，帶來提高關(guān)注度的目的。產(chǎn)品設(shè)計(jì)師也在不斷嘗試更多分層視差的效果，帶給用戶不一樣的廣告體驗(yàn)。

 

 

 

小結(jié)

Banner 在視覺表現(xiàn)層的創(chuàng)新有助于提高用戶對(duì)內(nèi)容的關(guān)注度，作為產(chǎn)品設(shè)計(jì)師我們都在不斷的嘗試更多可能性，除了在創(chuàng)意布局和色彩構(gòu)成等方面發(fā)揮以外，表現(xiàn)形式的差異也是至關(guān)重要。

 

 

 

二、Banner 布局樣式分析

 

鎖定了 Banner 的視覺表現(xiàn)形式以后，我們來分析一下 Banner 在界面布局中的樣式。造成布局差異的因素較多，比如 Banner 比例、大小、通欄、分欄、孤立還是背景對(duì)比等。

 

首先我們來看看通欄和分欄的差別，這個(gè)因素會(huì)影響 Banner 所能呈現(xiàn)的大小。常規(guī)理解都覺得 Banner 越大越好，如果考慮到產(chǎn)品內(nèi)容布局和信息層級(jí)區(qū)分方面，也會(huì)注意到整個(gè)界面布局的舒適度。所以，界面整體的風(fēng)格和布局樣式也會(huì)影響 Banner 布局樣式，需要融合而非格格不入。

 

 

如果遇到一些界面布局頭部采用深色，在布局 Banner 的時(shí)候?yàn)榱俗尶臻g感更強(qiáng)，也會(huì)讓 Banner 布局于頭部背景上層。通常背景色為固定色值和變動(dòng)色值，變動(dòng)色值會(huì)根據(jù)輪播圖的色彩來定義背景色值，這樣的設(shè)計(jì)解決方案不僅融合度高且空間感強(qiáng)。

 

關(guān)于 Banner 的比例是很多產(chǎn)品設(shè)計(jì)師不斷探索的方向，比例影響高度值的控制。界面布局內(nèi)容量的不同影響高度值的不同，根據(jù)內(nèi)容自定義也是可行的方法之一。也有設(shè)計(jì)師會(huì)根據(jù)斐波那契數(shù)列計(jì)算，推薦出寬高比例有 8:5、8:3、8:2、8:1 等，在計(jì)算的過程中我們通常取能被 4 整除的數(shù)值。

 

我們將 Banner 的寬度值定義為：W，高度值定義為：H，比值關(guān)系用：Y（ Y 為 5/8、3/8、2/8、1/8 等）。得出計(jì)算公式：H=W*Y，得出來的值取能被 4 整數(shù)的數(shù)值即可。這只是其中一種計(jì)算形式，設(shè)計(jì)師也可以根據(jù)具體布局情況進(jìn)行自定義，設(shè)計(jì)不是一層不變的方法論，而是做適合具體情況的解決方案。

 

 

關(guān)于布局樣式的分析遠(yuǎn)不止此，拋磚引玉，經(jīng)驗(yàn)總結(jié)只是一個(gè)起步，探索與創(chuàng)新才能突破更多可能性。

 

 

 

三、移動(dòng)端線上案例分析

 

經(jīng)驗(yàn)總結(jié)很大程度上都會(huì)根據(jù)已有的優(yōu)秀案例進(jìn)行分析，立足于成功案例之上才能更切實(shí)際。通過大量的產(chǎn)品體驗(yàn)日記，梳理出同屬性的不同解決方案，下面便為大家推薦一些上線案例分析。

 

 

3.1 常規(guī)形式運(yùn)用最為普及

Banner 圖的運(yùn)用組合元素為圖片層和輪播點(diǎn)，通過不同的滑動(dòng)交互形式來形成不一樣的變化。常見的都是單純的 Banner 圖、輪播點(diǎn)、滑動(dòng)切換組合，圖片本身以直角或者圓角、通欄或者分欄來呈現(xiàn)，這個(gè)需要結(jié)合整體的風(fēng)格來定；輪播點(diǎn)的形式比較多樣，也有不顯示輪播點(diǎn)的形式，以顯示待輪播圖片來替代。

 

 

比如騰訊視頻、愛奇藝、優(yōu)酷、芒果TV等常用的影視類 App 中，就各自以不同的形式顯示輪播 Banner。騰訊視頻分欄顯示待輪播圖和直角風(fēng)格，愛奇藝通欄顯示和輪播點(diǎn)配合，優(yōu)酷圓角風(fēng)格配合輪播點(diǎn)，芒果TV通欄呈現(xiàn)融合背景且營造前后空間感。

 

 

 

3.2 自然而流暢的縮放切換

除了在圖片層和輪播點(diǎn)進(jìn)行設(shè)計(jì)發(fā)揮以外，Banner 圖的切換交互也是一種探索的方向，自然而流暢的交互形式能帶給用戶舒適的體驗(yàn)。比如 MOO 音樂采用縮放過度的形式來進(jìn)行 Banner 輪播，這種自然而流暢的形式，給人一種非常舒適的操作體驗(yàn)。

 

 

 

3.3 背景色隨著 Banner 輪播而變化

界面頭部視覺表現(xiàn)為了提高用戶關(guān)注度，利用深色表現(xiàn)更能體現(xiàn)空間感和襯托 Banner 效果。通常為品牌色進(jìn)行襯托，也有很多產(chǎn)品會(huì)利用 Banner 進(jìn)行取色，作為背景色的選擇范圍，這樣更具融合性和視覺表現(xiàn)差異。背景色隨著 Banner 輪播而變化，是比較普遍的一種設(shè)計(jì)方案，視覺體驗(yàn)感很好。

 

 

 

3.4 以進(jìn)度條的形式表達(dá)輪播控制

Banner 圖的輪播控制常規(guī)的做法是以點(diǎn)的形式呈現(xiàn)或者左右兩側(cè)露出待輪播 Banner，最近在淘票票 App 中發(fā)現(xiàn)了一種新的表達(dá)，以進(jìn)度條的形式呈現(xiàn)，非常直觀的讓用戶可以判斷出還有多少 Banner 處于待輪播狀態(tài)。這樣的表現(xiàn)形式也和觀影時(shí)視頻的進(jìn)度一致，不僅匹配了產(chǎn)品屬性，也能更加直觀的呈現(xiàn)輪播效果，帶給用戶全新的體驗(yàn)。

 

 

 

3.5 模擬舞臺(tái)背景呈現(xiàn)輪播 Banner

在界面布局中空間感的營造可以讓信息對(duì)比更加明顯，考拉海購就將 Banner 作為背景來搭建一個(gè)具有空間感的舞臺(tái)，使得整個(gè)界面延伸出更強(qiáng)的深度空間感。Banner 輪播默認(rèn)以淡入淡出的形式，也可以手動(dòng)滑動(dòng)輪播，區(qū)別電商產(chǎn)品同質(zhì)化表現(xiàn)，帶給用戶不一樣的視覺感官體驗(yàn)。

 

 

 

3.6 異形廣告，打破常規(guī)視覺呈現(xiàn)

有時(shí)候方方正正的布局讓人感覺受到了一定的束縛，也有一些產(chǎn)品在 Banner 呈現(xiàn)的形式上面不斷打破邊界的束縛，異形廣告的運(yùn)用逐漸變得頻繁。最簡(jiǎn)單的異形廣告是在畫面本身突破束縛，整體的結(jié)構(gòu)布局還是在固定的造型里面，比如騰訊動(dòng)漫 App 推薦板塊的輪播 Banner。

 

 

除了在 Banner 設(shè)計(jì)本身進(jìn)行突破束縛以外，也有在造型上面進(jìn)行變化的，比如膠囊形狀，也稱之為膠囊廣告；在邊界分割上面除了直線以外，也有采用弧形分割或者特殊形狀分割等。

 

 

 

3.7 微動(dòng)效增強(qiáng)用戶關(guān)注度

動(dòng)效在產(chǎn)品設(shè)計(jì)中已經(jīng)運(yùn)用非常頻繁，在 Banner 圖的設(shè)計(jì)中也會(huì)有所涉及，相較于靜態(tài)的呈現(xiàn)方式來說更能引起用戶的關(guān)注度。為了不帶給用戶過多的信息干擾，通常都是單圖呈現(xiàn)，這樣也能將焦點(diǎn)強(qiáng)化。

 

 

通常都是個(gè)別元素進(jìn)行微動(dòng)效，來體現(xiàn)動(dòng)感效果，在主 Banner 中相對(duì)少見，次級(jí)和異形廣告中運(yùn)用廣泛。

 

 

 

3.8 視頻廣告嵌入，不破壞只融合

視頻廣告的運(yùn)用是比較常見的，在保持原有 Banner 布局不變的情況下嵌入到結(jié)構(gòu)中，引起用戶的關(guān)注度。通常為自動(dòng)播放的形式，為了降低用戶在未知場(chǎng)景中的使用干擾，默認(rèn)靜音模式。有倒計(jì)時(shí)的伴隨著關(guān)閉操作，也有一些提供重播的操作，播放結(jié)束自動(dòng)翻頁。

 

 

除了單個(gè)視頻嵌入以外，也有 Banner 全部采用短視頻的方式，不過相對(duì)較少。

 

 

 

3.9 卡片疊加滑動(dòng)提升輪播空間感

在探索手勢(shì)操作上面，便捷度、流暢度、體驗(yàn)感都是至關(guān)重要的?；瑒?dòng) Banner 過程中的體驗(yàn)感能帶給用戶對(duì)于當(dāng)前內(nèi)容的關(guān)注程度，便于操作的同時(shí)能引起用戶的好奇心更是重中之重。

 

蝦米音樂的樂庫便是結(jié)合了眾多設(shè)計(jì)思考，卡片疊加帶來視覺呈現(xiàn)的空間感，手勢(shì)滑動(dòng)流暢自然，主題文案隨著滑動(dòng)而變化顯示或者隱藏，帶給用戶更加友好的選擇體驗(yàn)。

 

 

 

3.10 主題元素分層視差帶來輪播新玩法

為了提高用戶對(duì)輪播廣告的關(guān)注度，突破已有的表現(xiàn)形式是設(shè)計(jì)師不斷思考的方向。

 

自如 App 端的做法引起了我的關(guān)注，將主題元素和背景層進(jìn)行分離，主題元素進(jìn)行輪播的同時(shí)背景層漸隱呈現(xiàn)。不一樣的視覺表現(xiàn)和輪播形式，帶來了 Banner 輪播形式的新玩法。

 

 

 

 

四、總結(jié)

 

Banner 在很多產(chǎn)品中是較為常見的元素存在，UI 場(chǎng)景中的 Banner 布局樣式探索是為了在進(jìn)行結(jié)構(gòu)布局的時(shí)候，我們可以嘗試出更多不一樣的解決方案。一個(gè)好的體驗(yàn)也許只是一個(gè)細(xì)節(jié)的探索，如果能在每一個(gè)功能設(shè)計(jì)的時(shí)候都能把控每一個(gè)細(xì)節(jié)，必能帶給用戶更好的使用體驗(yàn)。

 

本文雖然不是講解如何設(shè)計(jì) Banner 圖本身，但是關(guān)于 Banner 的布局形式、造型特征、內(nèi)容表達(dá)形式等在產(chǎn)品設(shè)計(jì)中的運(yùn)用，也是起到非常關(guān)鍵的因素。希望通過這種形式的梳理，可以帶給你更多的幫助。

 

文中案例來源于日常的產(chǎn)品體驗(yàn)日記整理，將具備同屬性的內(nèi)容進(jìn)行歸類梳理，形成可指導(dǎo)的設(shè)計(jì)建議是一種探索思考的過程。希望這個(gè)思路可以拋磚引玉，和大家一起探索產(chǎn)品設(shè)計(jì)中更多用戶體驗(yàn)和感官體驗(yàn)的設(shè)計(jì)解決方案。