(武漢理工大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院視覺傳達(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é)原理,通過色彩原理、節(jié)奏與韻律、對(duì)稱和均衡等美學(xué)的原理去更好的體現(xiàn)設(shè)計(jì)作品。設(shè)計(jì)師必須學(xué)會(huì)應(yīng)用美學(xué)原來(lái)來(lái)分析、鑒賞banner作品,并不斷提高設(shè)計(jì)創(chuàng)造力。
從字面上來(lái)說(shuō),banner直接翻譯過來(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é)。顏色是視覺溝通語(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),提高視覺注意力、加強(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)視覺上非常整齊,會(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)形式容易讓視覺表現(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)系,即把兩種極不相同的東西相并列,在差異中給人一種鮮明、醒目、活躍的感覺,在差異中傾向?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ì)。
人們對(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ì)盡可能的希望通過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ì)上保持奢侈品的高端大氣,視覺上追求簡(jiǎn)潔。和普通定位的平臺(tái)存在很大的差異,奢侈品電商更喜歡用到對(duì)稱均衡的表現(xiàn)方法,讓視覺表現(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ì)
從唯品會(huì)和魅力惠兩個(gè)電商平臺(tái)來(lái)看,除了兩者之間的差異之外,它們之間也存在共同點(diǎn), 視覺上的全站統(tǒng)一,以及通過好的banner設(shè)計(jì),獲得盡量多的瀏覽量,這也是banner設(shè)計(jì)的最終目的。同時(shí),在banner設(shè)計(jì)過程中,我們所需要遵循美學(xué)的意義也是在最終的瀏覽量數(shù)據(jù)中,會(huì)有最終的體現(xiàn)。
在奢侈品電商的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)造力。