閃購(gòu)電商平臺(tái)banner設(shè)計(jì)與美學(xué)原理

（武漢理工大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院視覺(jué)傳達(dá)設(shè)計(jì)系 430000）

網(wǎng)購(gòu)已經(jīng)不是什么新鮮的事了，打開手機(jī)，每個(gè)人都會(huì)安裝幾個(gè)購(gòu)物APP。購(gòu)物APP也是五花八門，各種產(chǎn)品都能找到。買日用品我會(huì)想到一號(hào)店、天貓超市；買生鮮我會(huì)想到盒馬；做品牌特賣閃購(gòu)的，我會(huì)想到唯品會(huì)；買奢侈品，會(huì)想到魅力惠、寺庫(kù)等。當(dāng)我們?nèi)g覽一個(gè)購(gòu)物網(wǎng)站的時(shí)候，第一眼關(guān)注的一定是首頁(yè)最上方位置的廣告，banner位廣告。

電商平臺(tái)banner設(shè)計(jì)必須要遵循美學(xué)原理，通過(guò)色彩原理、節(jié)奏與韻律、對(duì)稱和均衡等美學(xué)的原理去更好的體現(xiàn)設(shè)計(jì)作品。設(shè)計(jì)師必須學(xué)會(huì)應(yīng)用美學(xué)原來(lái)來(lái)分析、鑒賞banner作品，并不斷提高設(shè)計(jì)創(chuàng)造力。

一、 banner設(shè)計(jì)的內(nèi)涵及其banner對(duì)于購(gòu)物網(wǎng)站的意義

從字面上來(lái)說(shuō)，banner直接翻譯過(guò)來(lái)是橫幅廣告。那么在一個(gè)電商購(gòu)物網(wǎng)站，banner就是整個(gè)網(wǎng)站首頁(yè)最大或者最顯眼的廣告位置，我們往往會(huì)在banner位置設(shè)計(jì)一些大型促銷活動(dòng)的預(yù)告海報(bào)，或者重要的、主推品牌的預(yù)售廣告等，以吸引用戶對(duì)廣告信息的關(guān)注，從而獲得點(diǎn)擊率。

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

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

對(duì)于一個(gè)購(gòu)物網(wǎng)站來(lái)說(shuō)，banner就像是主食一樣，支撐著一個(gè)網(wǎng)站的運(yùn)轉(zhuǎn)，是獲得大流量的重要途徑之一。因此，banner位的品牌或者活動(dòng)的選擇都會(huì)有嚴(yán)格的要求，對(duì)banner的設(shè)計(jì)也會(huì)有特別的要求。

二、 banner設(shè)計(jì)遵循的美學(xué)原理

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

這是魅力惠PC端嬰童類目童裝banner設(shè)計(jì)，整個(gè)banner的設(shè)計(jì)用色很高級(jí)，灰調(diào)背景，使得紅色的裙子尤其突出。

Banner設(shè)計(jì)中的形式美學(xué)。形式美主要是指banner設(shè)計(jì)中需要遵循的一些基本規(guī)律，它可以又多種的表現(xiàn)形式。概括來(lái)說(shuō)，有以下六種表現(xiàn)形式。

1.同一形狀的重復(fù)表現(xiàn)。這種形式表現(xiàn)視覺(jué)上非常整齊，會(huì)使banner的設(shè)計(jì)更有秩序、更有節(jié)奏感。但是這種表現(xiàn)形式在設(shè)計(jì)的時(shí)候需要注意，避免畫面單調(diào)乏味。

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

3.以差異為出發(fā)點(diǎn)的調(diào)和對(duì)比。調(diào)和是指相近要素的組合關(guān)系，即把兩種相接近的東西并列，在細(xì)微變化中給人以協(xié)調(diào)感，在差異中趨向一致。這種表現(xiàn)形式可以在變化中保持一致，容易突出主題。 但是需要注意在應(yīng)用中避免主題不明確，給人散亂的印象。對(duì)比是指相異要素的組合關(guān)系，即把兩種極不相同的東西相并列，在差異中給人一種鮮明、醒目、活躍的感覺(jué)，在差異中傾向?qū)αⅰ＿@種表現(xiàn)形式運(yùn)用得當(dāng)更易突出效果，表現(xiàn)熱烈氣氛。如果處理不當(dāng)會(huì)雜亂無(wú)章。

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

5.節(jié)奏韻律的表現(xiàn)形式。節(jié)奏是設(shè)計(jì)要素之間和整體構(gòu)成在運(yùn)動(dòng)中的強(qiáng)弱變化的有規(guī)律、有秩序地連續(xù)性反復(fù)。構(gòu)成節(jié)奏的要素有時(shí)間關(guān)系、力度關(guān)系。韻律是指在形象的排列組合中賦予一定情感色彩的節(jié)奏。節(jié)奏韻律的合理安排會(huì)使作品繁雜歸于秩序、更富有層次感。需要注意的是，處理不當(dāng)會(huì)使設(shè)計(jì)繁雜散亂。

6.多樣統(tǒng)一的和諧美。讓多種設(shè)計(jì)元素在變化中求和諧，在參差中求整齊，局部從屬于整體、對(duì)比手法的運(yùn)用。這種表現(xiàn)形式處理得當(dāng)，會(huì)使設(shè)計(jì)豐富而不雜亂，統(tǒng)一而不單調(diào)。處理不當(dāng)會(huì)使主題雜亂，各自為政。

上圖是一個(gè)洗護(hù)類產(chǎn)品的預(yù)售活動(dòng)banner設(shè)計(jì)，在這個(gè)banner設(shè)計(jì)中用到了上面提到的多種形式美法則，如在差異中表現(xiàn)一致，產(chǎn)品差異，手的動(dòng)作差異等。也應(yīng)用到了多樣統(tǒng)一的和諧美表現(xiàn)形式，讓多種元素在變化中表現(xiàn)出和諧的美。所以，這是一個(gè)成功的banner設(shè)計(jì)。

三、 奢侈品電商banner設(shè)計(jì)與其他電商平臺(tái)banner設(shè)計(jì)的區(qū)別（以奢侈品閃購(gòu)電商魅力惠、品牌閃購(gòu)電商唯品會(huì)的對(duì)比為例）

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

普通的電商banner設(shè)計(jì)，會(huì)把盡量多的信息放在banner上，如品牌名稱、活動(dòng)主題、活動(dòng)時(shí)間、優(yōu)惠信息等，會(huì)盡可能的希望通過(guò)banner把各種可能吸引瀏覽者點(diǎn)擊的信息都設(shè)計(jì)在banner里。這種類型的banner設(shè)計(jì)會(huì)因?yàn)樗夭亩啵瑫?huì)經(jīng)常用到層次比例的表現(xiàn)、多樣統(tǒng)一的和諧、以及節(jié)奏韻律的表現(xiàn)這幾種美學(xué)表現(xiàn)形式。

下面是唯品會(huì)（vip.com）首頁(yè)banner和美妝類目banner的設(shè)計(jì)，設(shè)計(jì)的形式上是一致的，這樣的方式，便于唯品會(huì)對(duì)banner設(shè)計(jì)的管理，以及全站的統(tǒng)一。在B2C閃購(gòu)平臺(tái)中，唯品會(huì)是一個(gè)非常成功的案例。

唯品會(huì)首頁(yè)“時(shí)尚出游記“banner設(shè)計(jì)

唯品會(huì)美妝the face shop品牌banner

奢侈品平臺(tái)banner設(shè)計(jì)，整體更簡(jiǎn)潔、高冷色調(diào)、較少出現(xiàn)活動(dòng)信息、凸顯品牌及商品風(fēng)格。讓整個(gè)banner設(shè)計(jì)上保持奢侈品的高端大氣，視覺(jué)上追求簡(jiǎn)潔。和普通定位的平臺(tái)存在很大的差異，奢侈品電商更喜歡用到對(duì)稱均衡的表現(xiàn)方法，讓視覺(jué)表現(xiàn)出安靜感、穩(wěn)定感，更能突出中心，這也就是在差異中保持一致的美學(xué)形式。除此之外，也經(jīng)常會(huì)用到同一形狀的重復(fù)出現(xiàn)、節(jié)奏韻律的表現(xiàn)形式等。

下面是奢侈品電商魅力惠（mei.com）首頁(yè)banner設(shè)計(jì)和美妝類目banner設(shè)計(jì)。從上面唯品會(huì)的banner圖片對(duì)比來(lái)看，兩個(gè)平臺(tái)對(duì)banner設(shè)計(jì)是有非常大的區(qū)別的，整體風(fēng)格不同，設(shè)計(jì)基礎(chǔ)要素不同、表現(xiàn)形式上奢侈品電商會(huì)很少用到多元素統(tǒng)一的方式。

魅力惠首頁(yè)“Aubade品牌banner設(shè)計(jì)

魅力惠美妝類目“KERASTASE”品牌banner設(shè)計(jì)

四、 banner設(shè)計(jì)優(yōu)劣對(duì)比

從唯品會(huì)和魅力惠兩個(gè)電商平臺(tái)來(lái)看，除了兩者之間的差異之外，它們之間也存在共同點(diǎn)， 視覺(jué)上的全站統(tǒng)一，以及通過(guò)好的banner設(shè)計(jì)，獲得盡量多的瀏覽量，這也是banner設(shè)計(jì)的最終目的。同時(shí)，在banner設(shè)計(jì)過(guò)程中，我們所需要遵循美學(xué)的意義也是在最終的瀏覽量數(shù)據(jù)中，會(huì)有最終的體現(xiàn)。

五、總結(jié)

在奢侈品電商的banner設(shè)計(jì)中，遵循美學(xué)原理是一個(gè)比較廣泛的話題，了解并掌握這些美學(xué)原理，對(duì)于banner設(shè)計(jì)來(lái)說(shuō)是至關(guān)重要的，可以幫助設(shè)計(jì)師更好的把握設(shè)計(jì)中的理論基礎(chǔ)和規(guī)范。因此，設(shè)計(jì)師要學(xué)會(huì)應(yīng)用美學(xué)原理來(lái)分析、鑒賞banner設(shè)計(jì)作品，并不斷提高設(shè)計(jì)創(chuàng)造力。