畫(huà)面由一個(gè)主要元素撐滿(mǎn),
主標題作為次要元素配合畫(huà)面平衡
韓國是繼*、日本之后的亞太地區第三大電商市場(chǎng),它擁有全球*快的互聯(lián)網(wǎng)速度,電商覆蓋率極高。
本文以韓國大型生活超市emart網(wǎng)站的電商設計為例進(jìn)行分析,文章主要分為四大塊:
. 構圖分析(總結出四大類(lèi)型)
. 配色分析(從配色基礎原理出發(fā)分析)
. 輔助元素應用(分析其大規則)
. 實(shí)際應用(我們該怎么做?)
構圖一:中心集中式
畫(huà)面由一個(gè)主要元素撐滿(mǎn),主標題作為次要元素配合畫(huà)面平衡,根據畫(huà)面需求添加小標簽裝飾。整體視覺(jué)沖擊力強、張力足,適用于單個(gè)產(chǎn)品以及細節較為豐富的產(chǎn)品。多個(gè)物體集中式構圖和此方法同理,不再做單獨分析。
構圖二:杠桿式構圖
畫(huà)面由主體物和次主體斜面對稱(chēng)而形成的杠桿關(guān)系,與主標題之間形成穩固的三角構造關(guān)系,此構圖方式畫(huà)面很飽滿(mǎn)、穩固。適合兩種產(chǎn)品或一個(gè)產(chǎn)品兩面展示時(shí)使用。
注:此構圖名詞參考張子建《氣韻設計理論研究》,具體可參見(jiàn)其詳細。
構圖三:頂視角分散式構圖
頂視角度,以一個(gè)中心點(diǎn)向外發(fā)散,適用于產(chǎn)品展示比較多的情況。對于發(fā)散過(guò)程中的節奏以及氣韻走向的把握很重要,畫(huà)面出彩但比較難掌控,因此在廣告的應用中不常用。
構圖四:折線(xiàn)跳躍式
產(chǎn)品懸浮在畫(huà)面中,上下可跨出畫(huà)面,加以恰當的文字排版和輔助裝飾,整體畫(huà)面效果很活躍,延展性很強,是一種能快速達到視覺(jué)表現的展現方式。此構圖方式應用廣泛。
配色
色彩理論基礎
上圖為參考示意色環(huán)。
我們常見(jiàn)的配色方式有同色系、相似色、互補色、對比色搭配,這里在互補色里面劃分出了補色分割(與互補色相鄰的兩邊的顏色)以及
單邊補色分割,此配色方式的目的是為了讓配色在形成鮮明對比的情況下又能有較高的融入度,較互補色而言柔和很多,補色分割在emart廣告里面用的很多。
而矩形分割、廣場(chǎng)分割則是在多色搭配情況下出現的配色方式,下面我們單獨舉例說(shuō)明每個(gè)配色方式。
單色/同色系
同色系搭配比較適合產(chǎn)品本身顏色比較統一的情況下,通過(guò)吸取產(chǎn)品較近的周邊顏色而成,再通過(guò)添加合適的輔助元素使畫(huà)面變得統一而豐富。
類(lèi)似色
類(lèi)似色相對于單色系可變化的范疇會(huì )大很多,但也是在主色調明確的情況下輔助添加類(lèi)似色,這類(lèi)配色方式在banner應用中還比較常見(jiàn)。是一種比較好掌控的配色方式。
補色系列
這里把互補色、單邊補色分割、補色分割三種情況一同來(lái)說(shuō),因為三者在大范疇內上下浮動(dòng),效果也頗為相似,并無(wú)特別明顯的區分。
emart 在補色上的應用比較廣泛和嫻熟。主要還是因為整個(gè)網(wǎng)站調性很活潑,加之產(chǎn)品都屬于色彩明快的快消品類(lèi),色彩上的愉悅感更容易激起點(diǎn)擊欲望。
我們發(fā)現emart直接用互補色設計的案例并不多見(jiàn),主要還是在補色分割范圍內的應用變化,這樣既能達到很好的視覺(jué)對比效果又能使畫(huà)面融合度較高。
這里挑選了幾個(gè)補色系里面比較有代表性的搭配方式,整個(gè)畫(huà)面視覺(jué)配色上相當活躍,主產(chǎn)品很突出,是一種很贊的傳達方式。
多色搭配系列
這里把對比色、矩形分割、廣場(chǎng)分隔多顏色的搭配歸為一類(lèi)來(lái)說(shuō)。這三種跨度較大的配色方式,相對來(lái)說(shuō)應用的比較少,不是很容易掌控,一般比較適合小面積的應用起到裝飾平衡作用。
純度與明度的把握
純度和明度的把握主要還看我們希望傳達出的整體視覺(jué)效果是怎樣的,根據產(chǎn)品調性、畫(huà)面效果來(lái)實(shí)際匹配才好。
輔助元素
emart網(wǎng)站banner在輔助圖形的應用上特別廣泛,一來(lái)增加畫(huà)面豐富性一來(lái)強化產(chǎn)品特性。主要是提取產(chǎn)品相關(guān)的元素進(jìn)行圖形化,有小面積的純屬強化功能或增加趣味性的添加、也有大范圍的對產(chǎn)品紋樣或特性的延展。主要還是在產(chǎn)品特點(diǎn)基礎上進(jìn)行提取。
在banner標簽應用的樣式上也很豐富,在類(lèi)似樣式下所衍生出的演變很多,根據banner特點(diǎn)進(jìn)行不同配色、時(shí)而實(shí)底、時(shí)而鏤空、或黑白搭配,演繹出很多可能性。
從上面三大塊的分析來(lái)看,emart在廣告設計上主要特點(diǎn)為
. 構圖大膽、主體突出、畫(huà)面延展性很強
. 配色活潑且有理有據
. 輔助元素點(diǎn)綴很到位、豐富而強化特點(diǎn)
關(guān)鍵點(diǎn):開(kāi)放、多元化、有自己的性格
我們該怎么做?
這是emart上出現的大部分家電banner圖,我們發(fā)現他們的顏色變化并不大,在藍和暖灰兩種之間用的比較多,一是由于產(chǎn)品本身以黑白色系為主,所能衍生出的顏色并不多,再者網(wǎng)站本身多顏色的產(chǎn)品和banner已經(jīng)很多,穿插更為樸素的電器配色更容易被識別出來(lái),符合產(chǎn)品性格。
那我們在專(zhuān)門(mén)的自有商城網(wǎng)站上該如何把握配色呢?我認為是可以有所突破的。
我們的實(shí)際應用
大件冰箱、長(cháng)方形造型,很難完整展示,為了突出質(zhì)感選擇了放大上下兩個(gè)面同時(shí)展示,并且配上新鮮蔬果來(lái)強化產(chǎn)品特點(diǎn)且增加畫(huà)面活力。
空氣炸鍋,因為自身小巧,且特性明顯,決定用折線(xiàn)跳躍式的構圖方式來(lái)增加畫(huà)面活躍度,而雞翅炸物作為產(chǎn)品功能的強化進(jìn)行點(diǎn)綴,背景配色和標簽配色分別和產(chǎn)品及食物的顏色對應。
除螨儀banner配色上用到了藍色的單邊互補色黃色形成強對比,而標簽則選擇了藍色的互補色,螨蟲(chóng)的實(shí)物圖并不好看所以這里選擇了把它圖形化來(lái)表示增加場(chǎng)景化代入感。
此圖為常規擺放構圖,兩款產(chǎn)品,主要把重心集中在好看的那款產(chǎn)品上,加相應顏色感比較強的食物輔助。
圖二則是較為活潑的折線(xiàn)跳躍式構圖,這類(lèi)構圖形式比較容易出效果,但是對于元素的提取和擺放需要多多斟酌下。
圖三則是完整展示+局部放大的方式,執行步驟其實(shí)很簡(jiǎn)單,主要看我們怎么去抓取他們的表現點(diǎn),選到*適合產(chǎn)品性格的表現方式。
總結
設計很難說(shuō)有一個(gè)*的應用規范或原則,所有的設計都應該是開(kāi)放的,但設計分析讓我們有了更明確的思路和方法論來(lái)完善設計執行,這里分享出來(lái)和大家一起學(xué)習。
PS:文中所針對的廣告圖主要是作為日常宣傳的以產(chǎn)品為主體的表現方式,大促及大型活動(dòng)時(shí)候的設計不做過(guò)多參考,但在配色上的應用也是可以通用的。
(圖片來(lái)自網(wǎng)絡(luò ),非抄襲)
