閃購電商平臺banner設計與美學原理

（武漢理工大學藝術與設計學院視覺傳達設計系 430000）

網購已經不是什么新鮮的事了，打開手機，每個人都會安裝幾個購物APP。購物APP也是五花八門，各種產品都能找到。買日用品我會想到一號店、天貓超市；買生鮮我會想到盒馬；做品牌特賣閃購的，我會想到唯品會；買奢侈品，會想到魅力惠、寺庫等。當我們去瀏覽一個購物網站的時候，第一眼關注的一定是首頁最上方位置的廣告，banner位廣告。

電商平臺banner設計必須要遵循美學原理，通過色彩原理、節奏與韻律、對稱和均衡等美學的原理去更好的體現設計作品。設計師必須學會應用美學原來來分析、鑒賞banner作品，并不斷提高設計創造力。

一、 banner設計的內涵及其banner對于購物網站的意義

從字面上來說，banner直接翻譯過來是橫幅廣告。那么在一個電商購物網站，banner就是整個網站首頁最大或者最顯眼的廣告位置，我們往往會在banner位置設計一些大型促銷活動的預告海報，或者重要的、主推品牌的預售廣告等，以吸引用戶對廣告信息的關注，從而獲得點擊率。

Banner的位置經常會設計成可以翻頁的形式，我們也會稱為首焦輪播位，翻頁形式的第一頁稱為首焦第一幀，第二頁是首焦第二幀，以此類推。對于魅力惠這種特殊定位的奢侈品電商網站，首焦位置一般以一至二幀，特殊情況或者說偶爾大型促銷才會使用三幀。為了集中流量，一般情況下會專注與一檔活動。

以唯品會的banner為例，第一幀是今日特惠大牌，第二幀是美妝單品TOP榜。

對于一個購物網站來說，banner就像是主食一樣，支撐著一個網站的運轉，是獲得大流量的重要途徑之一。因此，banner位的品牌或者活動的選擇都會有嚴格的要求，對banner的設計也會有特別的要求。

二、 banner設計遵循的美學原理

Banner設計中的色彩美學。顏色是視覺溝通語言中非常重要的元素，在banner設計中，如何用色才能吸引消費者點擊，起到廣而告之，吸引眼球的作用。不同品類的商品會根據產品的特點來選用相吻合的色彩去表現，譬如美妝、母嬰、生活方式、服飾箱包等根據商品品類、季節、風格、定位等區別，在用色上有很大的差異。根據同一種商品，我們也可以根據品牌的風格、商品的特色再做細分。如童裝，我們可以選擇溫和的、干凈的顏色去表現，去提高兒童服裝的特點，提高視覺注意力、加強對該服裝童裝品牌的印象、從而引起關注，給人留下深刻的印象。去傳遞信息的同時，給人以美的享受。

這是魅力惠PC端嬰童類目童裝banner設計，整個banner的設計用色很高級，灰調背景，使得紅色的裙子尤其突出。

Banner設計中的形式美學。形式美主要是指banner設計中需要遵循的一些基本規律，它可以又多種的表現形式。概括來說，有以下六種表現形式。

1.同一形狀的重復表現。這種形式表現視覺上非常整齊，會使banner的設計更有秩序、更有節奏感。但是這種表現形式在設計的時候需要注意，避免畫面單調乏味。

2.在差異中保持一致。也可以說這是對稱均衡的表現方法。具體來說，可分為對稱和均衡，對稱就是在外形上以假定的中軸線為基準兩側均等，有左右對稱、上下對稱、放射對稱。這種表現形式容易讓視覺表現出安靜感、穩定感，比較能突出中心。但是也有需要注意的地方，在創作中需避免單調乏味。那么，均衡是指在假定的中軸線兩側的形體之間等量不等形、對等不對稱的組合關系，有重力均衡和吸引力均衡之分。這樣的美學形式法則更容易表現出變化，但是需避免處理不當容易松散、失衡。

3.以差異為出發點的調和對比。調和是指相近要素的組合關系，即把兩種相接近的東西并列，在細微變化中給人以協調感，在差異中趨向一致。這種表現形式可以在變化中保持一致，容易突出主題。 但是需要注意在應用中避免主題不明確，給人散亂的印象。對比是指相異要素的組合關系，即把兩種極不相同的東西相并列，在差異中給人一種鮮明、醒目、活躍的感覺，在差異中傾向對立。這種表現形式運用得當更易突出效果，表現熱烈氣氛。如果處理不當會雜亂無章。

4.層次比例的表現形式。層次是指形式美要素之間構成關系的秩序性，有橫的層次、縱的層次、空間的層次、時間的層次、廣度的層次、深度的層次等。層次的表現可以讓作品顯得多而不亂、繁而不雜。但是，如果處理不當會顯得雜亂無章、呆板單調。比例是指整體和局部、局部與局部之間的構成關系要合乎比例。比例處理得當使畫面更有美感，如果比例失調會造成畸形，或者形象失真。

5.節奏韻律的表現形式。節奏是設計要素之間和整體構成在運動中的強弱變化的有規律、有秩序地連續性反復。構成節奏的要素有時間關系、力度關系。韻律是指在形象的排列組合中賦予一定情感色彩的節奏。節奏韻律的合理安排會使作品繁雜歸于秩序、更富有層次感。需要注意的是，處理不當會使設計繁雜散亂。

6.多樣統一的和諧美。讓多種設計元素在變化中求和諧，在參差中求整齊，局部從屬于整體、對比手法的運用。這種表現形式處理得當，會使設計豐富而不雜亂，統一而不單調。處理不當會使主題雜亂，各自為政。

上圖是一個洗護類產品的預售活動banner設計，在這個banner設計中用到了上面提到的多種形式美法則，如在差異中表現一致，產品差異，手的動作差異等。也應用到了多樣統一的和諧美表現形式，讓多種元素在變化中表現出和諧的美。所以，這是一個成功的banner設計。

三、 奢侈品電商banner設計與其他電商平臺banner設計的區別（以奢侈品閃購電商魅力惠、品牌閃購電商唯品會的對比為例）

人們對美的追求是不斷深入的，閃購電商平臺的banner設計同樣如此。Banner把品牌的信息以快捷、便利的方式傳遞給瀏覽者，在banner設計中，并不是把各種內容信息放上去，能看就行，我們需要考慮如何讓設計更美觀，又能使瀏覽者能夠更愿意點擊、更有效的提高點擊率。

普通的電商banner設計，會把盡量多的信息放在banner上，如品牌名稱、活動主題、活動時間、優惠信息等，會盡可能的希望通過banner把各種可能吸引瀏覽者點擊的信息都設計在banner里。這種類型的banner設計會因為素材多，會經常用到層次比例的表現、多樣統一的和諧、以及節奏韻律的表現這幾種美學表現形式。

下面是唯品會（vip.com）首頁banner和美妝類目banner的設計，設計的形式上是一致的，這樣的方式，便于唯品會對banner設計的管理，以及全站的統一。在B2C閃購平臺中，唯品會是一個非常成功的案例。

唯品會首頁“時尚出游記“banner設計

唯品會美妝the face shop品牌banner

奢侈品平臺banner設計，整體更簡潔、高冷色調、較少出現活動信息、凸顯品牌及商品風格。讓整個banner設計上保持奢侈品的高端大氣，視覺上追求簡潔。和普通定位的平臺存在很大的差異，奢侈品電商更喜歡用到對稱均衡的表現方法，讓視覺表現出安靜感、穩定感，更能突出中心，這也就是在差異中保持一致的美學形式。除此之外，也經常會用到同一形狀的重復出現、節奏韻律的表現形式等。

下面是奢侈品電商魅力惠（mei.com）首頁banner設計和美妝類目banner設計。從上面唯品會的banner圖片對比來看，兩個平臺對banner設計是有非常大的區別的，整體風格不同，設計基礎要素不同、表現形式上奢侈品電商會很少用到多元素統一的方式。

魅力惠首頁“Aubade品牌banner設計

魅力惠美妝類目“KERASTASE”品牌banner設計

四、 banner設計優劣對比

從唯品會和魅力惠兩個電商平臺來看，除了兩者之間的差異之外，它們之間也存在共同點， 視覺上的全站統一，以及通過好的banner設計，獲得盡量多的瀏覽量，這也是banner設計的最終目的。同時，在banner設計過程中，我們所需要遵循美學的意義也是在最終的瀏覽量數據中，會有最終的體現。

五、總結

在奢侈品電商的banner設計中，遵循美學原理是一個比較廣泛的話題，了解并掌握這些美學原理，對于banner設計來說是至關重要的，可以幫助設計師更好的把握設計中的理論基礎和規范。因此，設計師要學會應用美學原理來分析、鑒賞banner設計作品，并不斷提高設計創造力。