韓(han)(han)國的(de)電商(shang)設(she)計(ji)(ji)久負(fu)盛名(ming)，今(jin)天我們(men)從設(she)計(ji)(ji)的(de)角度(du)談(tan)談(tan)他(ta)們(men)的(de)電商(shang)廣(guang)告廣(guang)告設(she)計(ji)(ji)。本(ben)文以韓(han)(han)國大(da)型生(sheng)活超市emart 網站(zhan)的(de)廣(guang)告設(she)計(ji)(ji)為例(li)進(jin)行分(fen)(fen)析，文章主要分(fen)(fen)為構圖/配色(se)/輔助元素/實際應(ying)用四大(da)塊。

一. 構圖分析(總結出四大類型)

構圖一：中心集中式

畫面由一個主(zhu)(zhu)要元(yuan)素撐滿，主(zhu)(zhu)標題(ti)作為次要元(yuan)素配合(he)畫面平衡，根(gen)據畫面需求(qiu)添(tian)加小標簽(qian)裝(zhuang)飾。整體(ti)視覺沖擊力強、張力足，適(shi)用于單(dan)個產(chan)品以(yi)及細節較為豐富的產(chan)品。多個物體(ti)集中(zhong)式(shi)構圖和(he)此方(fang)法同理，不再做單(dan)獨分(fen)析(xi)。

構圖二：杠桿式構圖

畫面由主(zhu)體物和(he)次主(zhu)體斜面對稱而形成的杠(gang)桿關(guan)系，與主(zhu)標題(ti)之間(jian)形成穩(wen)固的三角構造關(guan)系，此構圖(tu)方(fang)式畫面很(hen)飽滿、穩(wen)固。適合兩(liang)種產品或一個(ge)產品兩(liang)面展(zhan)示時使用。

注(zhu)：此(ci)構圖名(ming)詞參考張子建《氣韻設(she)計理論研(yan)究》，具體可參見其(qi)詳細。

構圖三：頂視角分散式構圖

頂視(shi)角度(du)，以一個中(zhong)心點向(xiang)外(wai)發(fa)散，適用(yong)于(yu)產(chan)品展示比(bi)(bi)較多的(de)情況。對于(yu)發(fa)散過(guo)程中(zhong)的(de)節奏以及氣韻走(zou)向(xiang)的(de)把握(wo)很重要(yao)，畫(hua)面出彩但(dan)比(bi)(bi)較難掌控，因此在廣(guang)告的(de)應用(yong)中(zhong)不(bu)常(chang)用(yong)。

構圖四：折線跳躍式

產品懸浮在畫面中，上下可跨出畫面，加以恰當(dang)的文字排版和輔助(zhu)裝飾，整體畫面效果(guo)很活躍(yue)，延展(zhan)性(xing)很強，是(shi)一種能快速(su)達(da)到視覺表(biao)現的展(zhan)現方(fang)式。此構圖方(fang)式應用(yong)廣(guang)泛(fan)。

二. 配色分析(從配色基礎原理出發分析)

色彩理論基礎

色(se)(se)(se)(se)(se)環其實就(jiu)是將彩(cai)(cai)色(se)(se)(se)(se)(se)光(guang)譜中的長條色(se)(se)(se)(se)(se)彩(cai)(cai)序列首尾連(lian)在(zai)一起，通常(chang)會看到不同版本的色(se)(se)(se)(se)(se)環(光(guang)學色(se)(se)(se)(se)(se)環、物(wu)理色(se)(se)(se)(se)(se)環之分(fen))，色(se)(se)(se)(se)(se)相之間(jian)略有(you)偏差，但掌握好公式原理就(jiu)不會出現偏差了。上圖為參(can)考示意色(se)(se)(se)(se)(se)環。

我(wo)們(men)常見的(de)配(pei)(pei)(pei)色(se)(se)(se)(se)(se)(se)(se)方(fang)式有(you)同(tong)色(se)(se)(se)(se)(se)(se)(se)系、相似(si)色(se)(se)(se)(se)(se)(se)(se)、互(hu)(hu)(hu)補(bu)(bu)色(se)(se)(se)(se)(se)(se)(se)、對比色(se)(se)(se)(se)(se)(se)(se)搭配(pei)(pei)(pei)，這(zhe)里(li)在(zai)互(hu)(hu)(hu)補(bu)(bu)色(se)(se)(se)(se)(se)(se)(se)里(li)面劃分(fen)(fen)出(chu)(chu)了(le)補(bu)(bu)色(se)(se)(se)(se)(se)(se)(se)分(fen)(fen)割(與互(hu)(hu)(hu)補(bu)(bu)色(se)(se)(se)(se)(se)(se)(se)相鄰的(de)兩(liang)邊的(de)顏色(se)(se)(se)(se)(se)(se)(se))以及單邊補(bu)(bu)色(se)(se)(se)(se)(se)(se)(se)分(fen)(fen)割，此配(pei)(pei)(pei)色(se)(se)(se)(se)(se)(se)(se)方(fang)式的(de)目的(de)是(shi)為(wei)了(le)讓配(pei)(pei)(pei)色(se)(se)(se)(se)(se)(se)(se)在(zai)形成鮮明(ming)對比的(de)情況下(xia)又能有(you)較(jiao)高的(de)融入度，較(jiao)互(hu)(hu)(hu)補(bu)(bu)色(se)(se)(se)(se)(se)(se)(se)而言柔和很多(duo)，補(bu)(bu)色(se)(se)(se)(se)(se)(se)(se)分(fen)(fen)割在(zai)emart廣(guang)告(gao)里(li)面用的(de)很多(duo)。而矩(ju)形分(fen)(fen)割、廣(guang)場分(fen)(fen)割則是(shi)在(zai)多(duo)色(se)(se)(se)(se)(se)(se)(se)搭配(pei)(pei)(pei)情況下(xia)出(chu)(chu)現的(de)配(pei)(pei)(pei)色(se)(se)(se)(se)(se)(se)(se)方(fang)式，下(xia)面我(wo)們(men)單獨舉例說明(ming)每個(ge)配(pei)(pei)(pei)色(se)(se)(se)(se)(se)(se)(se)方(fang)式。

單色/同色系

同(tong)色系搭配比較(jiao)適合(he)(he)產品(pin)本(ben)身顏色比較(jiao)統一的情(qing)況(kuang)下，通過吸取產品(pin)較(jiao)近(jin)的周邊顏色而成(cheng)，再通過添加合(he)(he)適的輔助元素使畫面變得統一而豐富。

類似色

類(lei)似色相(xiang)對(dui)于單色系可變化的范疇(chou)會大很多，但也是在(zai)主色調明確的情況下輔助添(tian)加類(lei)似色，這類(lei)配(pei)色方式(shi)在(zai)banner應(ying)用中還(huan)比較(jiao)常(chang)見。是一(yi)種比較(jiao)好掌控的配(pei)色方式(shi)。

補色系列

這里把互補(bu)色、單邊補(bu)色分(fen)(fen)割(ge)、補(bu)色分(fen)(fen)割(ge)三種情(qing)況一同來說，因(yin)為(wei)三者(zhe)在大(da)范疇內上(shang)下浮動，效果也頗為(wei)相似，并無特別明(ming)顯的區分(fen)(fen)。emart 在補(bu)色上(shang)的應(ying)用比(bi)較(jiao)廣泛和嫻熟(shu)。主要還(huan)是因(yin)為(wei)整個網站調性很(hen)活潑(po)，加之產品都屬于色彩明(ming)快(kuai)的快(kuai)消品類，色彩上(shang)的愉悅感更容易激起點擊欲望(wang)。

我們發(fa)現emart直接用互補(bu)色(se)設計的案例并(bing)不(bu)多(duo)見，主要還是在補(bu)色(se)分(fen)割范(fan)圍內的應用變(bian)化，這樣既能達到很好的視(shi)覺(jue)對比效果又能使畫面(mian)(mian)融合度較高。這里(li)挑(tiao)選(xuan)了(le)幾個補(bu)色(se)系(xi)里(li)面(mian)(mian)比較有代(dai)表性的搭(da)配方(fang)式，整個畫面(mian)(mian)視(shi)覺(jue)配色(se)上相當(dang)活躍(yue)，主產品很突(tu)出(chu)，是一種(zhong)很贊(zan)的傳達方(fang)式。

多色搭配系列

這(zhe)里(li)把(ba)對(dui)(dui)比色(se)、矩形分割、廣場(chang)分隔多顏色(se)的(de)搭配歸為一類(lei)來說。這(zhe)三種跨度(du)較(jiao)大的(de)配色(se)方式，相(xiang)對(dui)(dui)來說應用的(de)比較(jiao)少，不是(shi)很容易掌控，一般比較(jiao)適合小面積(ji)的(de)應用起到(dao)裝飾平衡作用。

純度與明度的把握

純度和明度的(de)把握主要還(huan)看我們希望傳達出(chu)的(de)整體視覺效果是怎(zen)樣的(de)，根據產品調性、畫面效果來(lai)實(shi)際匹配才好。

三. 輔助元素應用(分析其大規則)

emart網站banner在(zai)(zai)輔助(zhu)圖形的應用上特(te)別廣(guang)泛(fan)，一來增加畫面豐富性(xing)一來強(qiang)化產(chan)品特(te)性(xing)。主要(yao)是提(ti)取產(chan)品相關的元素進行圖形化，有(you)小面積的純屬(shu)強(qiang)化功能(neng)或增加趣味性(xing)的添(tian)加、也有(you)大范圍的對產(chan)品紋樣或特(te)性(xing)的延展。主要(yao)還是在(zai)(zai)產(chan)品特(te)點基礎上進行提(ti)取。

在banner標簽應(ying)用(yong)的樣(yang)(yang)式上也(ye)很豐富，在類似樣(yang)(yang)式下所(suo)衍生出(chu)(chu)的演變很多，根據banner特(te)點(dian)進(jin)行不同配色、時而(er)實底、時而(er)鏤空、或黑白(bai)搭(da)配，演繹出(chu)(chu)很多可能性。

從上(shang)(shang)面(mian)三大塊的分(fen)析來看(kan)，emart在廣告設計上(shang)(shang)主要(yao)特點為(wei)：

• 構(gou)圖大膽(dan)、主體突出、畫(hua)面延展性很強

• 配(pei)色活潑且有(you)(you)理有(you)(you)據

• 輔助元素點綴很到位(wei)、豐富而(er)強(qiang)化特點

• 關鍵點：開放、多元化、有自(zi)己的性(xing)格

我們該怎么做?

這是emart上出現的大部分家電(dian)banner圖(tu)，我們(men)發現他們(men)的顏色(se)(se)變化并不大，在藍和暖灰兩種之間用的比較(jiao)多(duo)，一是由(you)于產品本(ben)身以黑白色(se)(se)系(xi)為主(zhu)，所(suo)能衍生出的顏色(se)(se)并不多(duo)，再者(zhe)網站(zhan)本(ben)身多(duo)顏色(se)(se)的產品和banner已(yi)經很多(duo)，穿插更為樸素(su)的電(dian)器配色(se)(se)更容易被識別出來，符合(he)產品性格。那我們(men)在專門的自有商城(cheng)網站(zhan)上該如何把(ba)握配色(se)(se)呢(ni)?我認(ren)為是可以有所(suo)突破的。

四. 實際應用(我們該怎么做?)

大件冰箱(xiang)、長方形造型，很難完整展示(shi)，為(wei)了突出質感選擇了放大上下兩個面(mian)同(tong)時(shi)展示(shi)，并(bing)且配上新(xin)鮮蔬果(guo)來強化(hua)產品特點且增(zeng)加畫(hua)面(mian)活力。

空(kong)氣炸(zha)鍋，因為自身小巧，且特性明顯，決定用(yong)折線跳(tiao)躍(yue)式(shi)(shi)的構圖方(fang)式(shi)(shi)來增加畫面活(huo)躍(yue)度，而雞(ji)翅炸(zha)物作為產(chan)品(pin)功能的強化進行(xing)點綴，背景(jing)配色(se)和標簽配色(se)分別和產(chan)品(pin)及食物的顏(yan)色(se)對應。

除螨(man)儀banner配色(se)上用到了藍(lan)色(se)的(de)(de)單邊(bian)互(hu)補(bu)色(se)黃色(se)形成強對(dui)比，而標簽則(ze)選擇(ze)了藍(lan)色(se)的(de)(de)互(hu)補(bu)色(se)，螨(man)蟲的(de)(de)實(shi)物圖(tu)并不(bu)好看所以(yi)這里選擇(ze)了把它圖(tu)形化(hua)來表示增加場景(jing)化(hua)代(dai)入(ru)感。

圖(tu)(tu)一為(wei)常規擺放(fang)構(gou)圖(tu)(tu)，兩(liang)款(kuan)產(chan)品(pin)，主(zhu)要把重心集中(zhong)在好看的(de)那款(kuan)產(chan)品(pin)上，加相(xiang)應顏色感比(bi)較強的(de)食物輔助。圖(tu)(tu)二則(ze)是(shi)(shi)較為(wei)活潑的(de)折線跳(tiao)躍式構(gou)圖(tu)(tu)，這類(lei)構(gou)圖(tu)(tu)形式比(bi)較容易出(chu)效果，但是(shi)(shi)對于元素的(de)提取和擺放(fang)需要多多斟酌(zhuo)下。圖(tu)(tu)三則(ze)是(shi)(shi)完整展示+局部放(fang)大的(de)方式，執行(xing)步驟其實很簡單，主(zhu)要看我們怎么去(qu)抓取他們的(de)表現點(dian)，選到最適合產(chan)品(pin)性格的(de)表現方式。