來(lái)源：TODO（ID：midea_ecd）
作者：余閑
數(shù)英網(wǎng)已獲授權(quán)并重新編輯，轉(zhuǎn)載請(qǐng)聯(lián)系原作者
韓國(guó)是繼中國(guó)、日本之后的亞太地區(qū)第三大電商市場(chǎng)，它擁有全球最快的互聯(lián)網(wǎng)速度，電商覆蓋率極高。今天我們從設(shè)計(jì)的角度談?wù)勊麄兊碾娚虖V告設(shè)計(jì)。本文以韓國(guó)大型生活超市 emart 網(wǎng)站的廣告設(shè)計(jì)為例進(jìn)行分析，文章主要分為四大塊：
一、構(gòu)圖分析（總結(jié)出四大類型）
二、配色分析（從配色基礎(chǔ)原理出發(fā)分析）
三、輔助元素應(yīng)用（分析其大規(guī)則）
四、實(shí)際應(yīng)用（以美的電商為例）
一、構(gòu)圖
構(gòu)圖1：中心集中式
畫(huà)面由一個(gè)主要元素?fù)螡M，主標(biāo)題作為次要元素配合畫(huà)面平衡，根據(jù)畫(huà)面需求添加小標(biāo)簽裝飾。整體視覺(jué)沖擊力強(qiáng)、張力足，適用于單個(gè)產(chǎn)品以及細(xì)節(jié)較為豐富的產(chǎn)品。多個(gè)物體集中式構(gòu)圖和此方法同理，不再做單獨(dú)分析。
構(gòu)圖2：杠桿式構(gòu)圖
畫(huà)面由主體物和次主體斜面對(duì)稱而形成的杠桿關(guān)系，與主標(biāo)題之間形成穩(wěn)固的三角構(gòu)造關(guān)系，此構(gòu)圖方式畫(huà)面很飽滿、穩(wěn)固。適合兩種產(chǎn)品或一個(gè)產(chǎn)品兩面展示時(shí)使用。
*此構(gòu)圖名詞參考張子建《氣韻設(shè)計(jì)理論研究》，具體可參見(jiàn)其詳細(xì)。
構(gòu)圖3：頂視角分散式構(gòu)圖
頂視角度，以一個(gè)中心點(diǎn)向外發(fā)散，適用于產(chǎn)品展示比較多的情況。對(duì)于發(fā)散過(guò)程中的節(jié)奏以及氣韻走向的把握很重要，畫(huà)面出彩但比較難掌控，因此在廣告的應(yīng)用中不常用。
構(gòu)圖4：折線跳躍式
產(chǎn)品懸浮在畫(huà)面中，上下可跨出畫(huà)面，加以恰當(dāng)?shù)奈淖峙虐婧洼o助裝飾，整體畫(huà)面效果很活躍，延展性很強(qiáng)，是一種能快速達(dá)到視覺(jué)表現(xiàn)的展現(xiàn)方式。此構(gòu)圖方式應(yīng)用廣泛。
二、配色
1、色彩理論基礎(chǔ)
色環(huán)其實(shí)就是將彩色光譜中的長(zhǎng)條色彩序列首尾連在一起，通常會(huì)看到不同版本的色環(huán)（光學(xué)色環(huán)、物理色環(huán)之分），色相之間略有偏差，但掌握好公式原理就不會(huì)出現(xiàn)偏差了。上圖為參考示意色環(huán)。
我們常見(jiàn)的配色方式有同色系、相似色、互補(bǔ)色、對(duì)比色搭配，這里在互補(bǔ)色里面劃分出了補(bǔ)色分割（與互補(bǔ)色相鄰的兩邊的顏色）以及單邊補(bǔ)色分割，此配色方式的目的是為了讓配色在形成鮮明對(duì)比的情況下又能有較高的融入度，較互補(bǔ)色而言柔和很多，補(bǔ)色分割在 emart 廣告里面用的很多。而矩形分割、廣場(chǎng)分割則是在多色搭配情況下出現(xiàn)的配色方式，下面我們單獨(dú)舉例說(shuō)明每個(gè)配色方式。
2、單色/同色系
同色系搭配比較適合產(chǎn)品本身顏色比較統(tǒng)一的情況下，通過(guò)吸取產(chǎn)品較近的周邊顏色而成，再通過(guò)添加合適的輔助元素使畫(huà)面變得統(tǒng)一而豐富。
3、類似色
類似色相對(duì)于單色系可變化的范疇會(huì)大很多，但也是在主色調(diào)明確的情況下輔助添加類似色，這類配色方式在 banner 應(yīng)用中還比較常見(jiàn)。是一種比較好掌控的配色方式。
4、補(bǔ)色系列
這里把互補(bǔ)色、單邊補(bǔ)色分割、補(bǔ)色分割三種情況一同來(lái)說(shuō)，因?yàn)槿咴诖蠓懂爟?nèi)上下浮動(dòng)，效果也頗為相似，并無(wú)特別明顯的區(qū)分。emart 在補(bǔ)色上的應(yīng)用比較廣泛和嫻熟。主要還是因?yàn)檎麄€(gè)網(wǎng)站調(diào)性很活潑，加之產(chǎn)品都屬于色彩明快的快消品類，色彩上的愉悅感更容易激起點(diǎn)擊欲望。
我們發(fā)現(xiàn) emart 直接用互補(bǔ)色設(shè)計(jì)的案例并不多見(jiàn)，主要還是在補(bǔ)色分割范圍內(nèi)的應(yīng)用變化，這樣既能達(dá)到很好的視覺(jué)對(duì)比效果又能使畫(huà)面融合度較高。這里挑選了幾個(gè)補(bǔ)色系里面比較有代表性的搭配方式，整個(gè)畫(huà)面視覺(jué)配色上相當(dāng)活躍，主產(chǎn)品很突出，是一種很贊的傳達(dá)方式。
5、多色搭配系列
這里把對(duì)比色、矩形分割、廣場(chǎng)分隔多顏色的搭配歸為一類來(lái)說(shuō)。這三種跨度較大的配色方式，相對(duì)來(lái)說(shuō)應(yīng)用的比較少，不是很容易掌控，一般比較適合小面積的應(yīng)用起到裝飾平衡作用。
6、純度與明度的把握
純度和明度的把握主要還看我們希望傳達(dá)出的整體視覺(jué)效果是怎樣的，根據(jù)產(chǎn)品調(diào)性、畫(huà)面效果來(lái)實(shí)際匹配才好。
三、輔助元素
emart 網(wǎng)站 banner 在輔助圖形的應(yīng)用上特別廣泛，一來(lái)增加畫(huà)面豐富性一來(lái)強(qiáng)化產(chǎn)品特性。主要是提取產(chǎn)品相關(guān)的元素進(jìn)行圖形化，有小面積的純屬?gòu)?qiáng)化功能或增加趣味性的添加、也有大范圍的對(duì)產(chǎn)品紋樣或特性的延展。主要還是在產(chǎn)品特點(diǎn)基礎(chǔ)上進(jìn)行提取。
在 banner 標(biāo)簽應(yīng)用的樣式上也很豐富，在類似樣式下所衍生出的演變很多，根據(jù) banner 特點(diǎn)進(jìn)行不同配色、時(shí)而實(shí)底、時(shí)而鏤空、或黑白搭配，演繹出很多可能性。
從上面三大塊的分析來(lái)看，emart 在廣告設(shè)計(jì)上主要特點(diǎn)為：
（1）構(gòu)圖大膽、主體突出、畫(huà)面延展性很強(qiáng)
（2）配色活潑且有理有據(jù)
（3）輔助元素點(diǎn)綴很到位、豐富而強(qiáng)化特點(diǎn)
關(guān)鍵點(diǎn)：開(kāi)放、多元化、有自己的性格
四、實(shí)際應(yīng)用
這是 emart 上出現(xiàn)的大部分家電 banner 圖，我們發(fā)現(xiàn)他們的顏色變化并不大，在藍(lán)和暖灰兩種之間用的比較多，一是由于產(chǎn)品本身以黑白色系為主，所能衍生出的顏色并不多，再者網(wǎng)站本身多顏色的產(chǎn)品和 banner 已經(jīng)很多，穿插更為樸素的電器配色更容易被識(shí)別出來(lái)，符合產(chǎn)品性格。那我們?cè)趯ｉT(mén)的自有商城網(wǎng)站上該如何把握配色呢？我認(rèn)為是可以有所突破的。
以美的電商為例：
大件冰箱、長(zhǎng)方形造型，很難完整展示，為了突出質(zhì)感選擇了放大上下兩個(gè)面同時(shí)展示，并且配上新鮮蔬果來(lái)強(qiáng)化產(chǎn)品特點(diǎn)且增加畫(huà)面活力。
空氣炸鍋，因?yàn)樽陨硇∏桑姨匦悦黠@，決定用折線跳躍式的構(gòu)圖方式來(lái)增加畫(huà)面活躍度，而雞翅炸物作為產(chǎn)品功能的強(qiáng)化進(jìn)行點(diǎn)綴，背景配色和標(biāo)簽配色分別和產(chǎn)品及食物的顏色對(duì)應(yīng)。
除螨儀 banner 配色上用到了藍(lán)色的單邊互補(bǔ)色黃色形成強(qiáng)對(duì)比，而標(biāo)簽則選擇了藍(lán)色的互補(bǔ)色，螨蟲(chóng)的實(shí)物圖并不好看所以這里選擇了把它圖形化來(lái)表示增加場(chǎng)景化代入感。
圖一為常規(guī)擺放構(gòu)圖，兩款產(chǎn)品，主要把重心集中在好看的那款產(chǎn)品上，加相應(yīng)顏色感比較強(qiáng)的食物輔助。
圖二則是較為活潑的折線跳躍式構(gòu)圖，這類構(gòu)圖形式比較容易出效果，但是對(duì)于元素的提取和擺放需要多多斟酌下。
圖三則是完整展示+局部放大的方式，執(zhí)行步驟其實(shí)很簡(jiǎn)單，主要看我們?cè)趺慈プト∷麄兊谋憩F(xiàn)點(diǎn)，選到最適合產(chǎn)品性格的表現(xiàn)方式。
總結(jié)
很難說(shuō)有一個(gè)絕對(duì)的應(yīng)用規(guī)范或原則，所有的設(shè)計(jì)都應(yīng)該是開(kāi)放的，但設(shè)計(jì)分析讓我們有了更明確的思路和方法論來(lái)完善設(shè)計(jì)執(zhí)行，這里分享出來(lái)和大家一起學(xué)習(xí)。
PS：文中所針對(duì)的廣告圖主要是作為日常宣傳的以產(chǎn)品為主體的表現(xiàn)方式，大促及大型活動(dòng)時(shí)候的設(shè)計(jì)不做過(guò)多參考，但在配色上的應(yīng)用也是可以通用的。
- END -
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（3條）