分享關於Banner佈局樣式的研究【UI設計師】

Banner佈局樣式的深入研究

Banner其實對於UI設計師來說並不陌生，更多的還是在於視覺表現層，但是它的本質是關於產品設計中的佈局樣式分析。那麼透過本文大家來一起梳理和探索！

一、視覺層表現類別

Banner 在

UI 場景

中通常伴隨著輪播的形式展示，所以也經常稱之為

輪播圖

，這也是導航的一種形式之一，也有輪播導航的功能。在產品中出現可以帶給使用者平臺需要重點傳播的內容，比如產品活動資訊和官宣諮詢、年度佳節等。

為了能引起使用者更高的關注度，Banner 在視覺層的表現上面也在不斷的創新。除了 Banner 設計創意、構圖、配色等視覺層面發揮以外，在表現類別上面我分為靜態、動態、影片、分層視差等。

1.1 靜態Banner 展示

此型別的輪播圖是最常見的，無論是設計效率還是對於IT技術落地都是最為便利的。此型別的畫面可分為單圖或多圖的圖片格式，單圖是靜態的展現形式，多圖可以設定自動輪播或手動左右滑動切換。

1.2 動態 Banner 展示

動態表現的Banner 相較於靜態而言更能引起使用者的關注度，因為動態的東西可以打破靜態的視覺平衡，引起的視覺權重更高，更能強化資訊重點，在一些重點元素和互動按鈕等地方實行動態表現。

在這個萬物互聯的時代，產品設計師都在不斷的嘗試如何更快、更準地獲得使用者的關注度。微動效是其最有效的一種表現方式，無論是在功能互動還是視覺表現層面，都隨處可見。

1.3 影片嵌入banenr展示

隨著當前短影片的走熱，影片形式作為資訊流越來越得到重視，影片嵌入到輪播廣告中逐漸增多。較多的表現形式為默認出現在首個Banner 中，伴隨著倒計時出現，也可以關閉播放。此類形式為了降低使用者在未知場景中的使用干擾，通常預設為靜音模式，帶給使用者更加友好的體驗。

1.4 分層視差效果展示

分層視差效果能打破常規表現形式的廣告，可以帶給使用者不一樣的視覺呈現和互動體驗，具體有輪播疊加的視差、3D翻轉、元素和背景分離視差等方式。

二、Banner 佈局樣式分析

在鎖定了Banner 的視覺表現形式以後，我們來分析一下 Banner 在介面佈局中的樣式。造成佈局差異的因素較多，比如 Banner 比例、大小、通欄、分欄、孤立還是背景對比等。

首先我們來看看通欄和分欄的差別，這個因素會影響Banner 所能呈現的大小。常規理解都覺得 Banner 越大越好，如果考慮到產品內容佈局和資訊層級區分方面，也會注意到整個介面佈局的舒適度。所以，介面整體的風格和佈局樣式也會影響 Banner 佈局樣式，需要融合而非格格不入。

如果遇到一些介面佈局頭部採用深色，在佈局Banner 的時候為了讓空間感更強，也會讓 Banner 佈局於頭部背景上層。通常背景色為固定色值和變動色值，變動色值會根據輪播圖的色彩來定義背景色值，這樣的設計解決方案不僅融合度高且空間感強。

關於Banner 的比例是很多產品設計師不斷探索的方向，比例影響高度值的控制。介面佈局內容量的不同影響高度值的不同，根據內容自定義也是可行的方法之一。也有設計師會根據斐波那契數列計算，推薦出寬高比例有 8：5、8：3、8：2、8：1 等，在計算的過程中我們通常取能被 4 整除的數值。

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

三、案例分析

3.1 常規形式運用最為普及

常規形式Banner透過不同的滑動互動形式來顯示不一樣的變化。圖片本身以直角或者圓角、通欄或者分欄來呈現，這個需要結合頁面整體的風格來定；輪播點的形式比較多樣，也有不顯示輪播點的形式，以顯示待輪播圖片來替代。

如：騰訊影片是分欄顯示待輪播圖+直角風格，愛奇藝是通欄顯示+輪播點配合，優酷是圓角風格配合輪播點，芒果TV是通欄呈現融合背景且營造前後空間感。

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

介面頭部視覺表現為了提高使用者關注度，利用深色表現更能體現空間感和襯托Banner 效果。通常用品牌色進行襯托，也有很多產品會利用 Banner 進行取色，作為背景色的選擇範圍，這樣更具融合性和視覺表現差異。

3.3 以分層資訊模擬滑動banner的形式

最近在淘票票 App 中發現了一種新的表達，以分層資訊的形式呈現突顯優質觀影觀影評價並吸引點選下單，帶給使用者全新的體驗。

3.4 模擬舞臺背景呈現輪播Banner

在介面佈局中營造空間感可以讓資訊對比更加明顯，考拉APP就將Banner作為背景來搭建一個具有空間感的舞臺，使得整個介面延伸出更強的深度空間感，帶給使用者不一樣的視覺感官體驗。

3.5 異形廣告效果

有一些產品在Banner 呈現的形式上面不斷打破邊界的束縛，異形廣告的運用逐漸變得頻繁。最簡單的異形廣告是在畫面本身突破束縛，整體的結構佈局還是在固定的造型裡面，比如騰訊動漫 App 推薦板塊的輪播 Banner。這種異形表現形式非常適合動漫、二次元、特殊教育及旅遊活動的產品中，帶給人活力四射的體驗。