- 這么設計能熱賣:融入運營思維的電商設計進階寶典(套裝上下冊)
- 吳婷
- 3245字
- 2019-08-08 18:31:44
第8章 點綴元素怎么玩
前面我們講到,一個最常規、最完整的Banner,一般有這六個組成部分:文案、模特商品、背景、點綴元素、LOGO。
文案、商品、模特的玩法前文都已經介紹了,今天我們來講一講點綴元素在Banner設計中的運用和玩法,點綴元素雖然只是起到點綴作用,但也是大家經常要用卻又經常被忽略或用不好的一個知識點。
為了便于大家理解,本章將從以下6個方面為大家講解。
8.1 點綴元素所起到的作用
我們先來看幾個案例,大家對比一下,如下圖所示。

看出差異了嗎?所以點綴元素主要有這些作用:
- ◆ 從視覺上豐富畫面,使畫面不再單調或看起來更加協調。
- ◆ 從營銷的角度來說,可以活躍畫面的熱鬧氛圍,給人愉悅或刺激感,增加消費者的購買欲望。
8.2 點綴元素的存在形式
一般來說,點綴元素的存在形式其實是多種多樣的,比如光束、光斑、水花等等各種客觀事物還有各種形式的圖案,世間所有的物體其實都可以想象成是點、線、面,簡而言之,所有點綴元素的運用都可以視作平面構成里的點或線或面的運用。
下面舉例說明一下點綴元素的存在形式。
1.商品本身既是主體也是點綴元素

韓國購物平臺www.wconcept.co.kr
2.手繪圖形作為點綴元素

韓國快時尚品牌8seconds
3.光斑或者光束作為點綴元素
假想下圖這支花就是產品:這種用光斑來作為點綴元素的手法在人像攝影和產品攝影里運用非常廣泛,巧妙利用光影可以給人神秘感。

光束常常在暗色背景里可以起到很好的氛圍渲染作用,提升畫面熱鬧度,如下圖所示。

2015年京東618手機活動頁頭圖
4.色塊作為點綴元素

5.各種液體作為點綴元素(比如噴濺的墨/奶/水/啤酒/溶液等等)

蘭蔻中國官網

雅詩蘭黛中國官網

milk life,milklife.com
6.煙霧作為點綴元素(煙霧通常會伴隨著光出現)

赤云社創始人灰晝作品
7.各種紋理圖案作為點綴元素

2015年華為暢想5京東平臺首發
8. 商品+其他形式配合作為點綴元素使用

9.人物作為點綴元素
我們看到很多影視作品或者涉及到場景構建的動畫、繪畫作品里都會用到這種手法,讓主角突出,其他的人則是作背景陪襯,也可以說是點綴元素,這可以使劇情畫面更飽滿,主角人物更立體,如下圖所示。

電影《泰坦尼克號》劇照
10.LOGO或文字作為點綴元素



淘寶2015年情人節手機引導頁,Goodzilla意類廣告出品
總之,Banner組成要素里的任何元素其實都可以作為點綴元素使用,就看你怎么去靈活運用了。
8.3 不同氣質Banner中的點綴元素
我一直堅持的理念就是,既然人與人之間是有差異的,那么跟人相關的各種營銷活動和設計形式也便同樣會存在差異,所以我將點綴元素的用法也按照不同的定位氣質來區分。
一般來說,點綴元素數量越多、形式越多樣、越動感、色彩越多、明度越高、純度越高、飽和度越高、越不規則,則畫面越活潑熱鬧,反之越高冷大牌。以下我們來看一些示例。
高冷到極點的時候,往往畫面多留白(留白是指畫面很空曠很干凈,不是指畫面就必須是白色的),你可以理解為點綴元素數量為0,如下圖所示。

Apple官網
我們再看一個簡潔的童裝Banner,飽和度低、高質感、多留白,如左下圖所示。
假如在上面稍微加入一些相關的點綴元素,比如相關的簡筆畫,然后就會發現畫面會變得稍微靈動一點了,但因為產品或模特服裝有質感以及色彩低調的緣故,這個Banner依然會感覺是有品質的,如右下圖所示。


小清新可愛類型的Banner,一般會選擇氣質相近的模特,點綴元素自然而然也會往這個氣質走,如下圖所示。

但像下圖這種就是帶一點派對性質的Banner,而派對就是要有慶祝的感覺,所以點綴元素可以從派對相關的物件去聯想,比如彩帶、金粉、萬花筒、氣球之類的等等。

2015年京東POP圣誕轟趴活動Banner
而走熱鬧低價促銷風格的Banner,畫面就要給人感覺非常鬧、非常刺激眼球的感覺,所以它的點綴元素往往是多彩的/動感的/不規則的,就像一群喋喋不休的推銷員一樣:“看一看瞧一瞧!買了不會吃虧買了不會上當!”,如下圖所示。

忍不住想借用我以前寫過的一段話:假想以上同樣是賣女裝的話,不同類型定位的Banner傳達給人的感受也是不一樣的,有的特別冷淡,有的特別熱情,而點綴元素就像是在一旁給畫面里的主體添油加醋用的,如果主體是花,那么點綴元素就是綠葉,至于畫面里有沒有“油鹽醬醋茶”以及“綠葉”都是可以的,主要看你的Banner設計的定位方向。
8.4 點綴元素的排版形式
看到這里,道理大家應該差不多都懂了吧,那么最頭疼的問題來了,點綴元素該以怎么樣一種姿態出現,又該怎么排版呢?別急,下面給大家總結出了一些方向,大家可以參考。

看完上圖是不是一目了然了?其實點綴元素的排列運用無非也是平面構成的運用,以上僅總結了一小部分,其他排版和形式在后面章節會看到一些。
8.5 點綴元素的獲取方法
以上講了這么多點綴元素的運用玩法,那么點綴元素是憑空捏造出來的嗎?當然不是,這里總結了兩個非常好用的獲取點綴元素的方法。
8.5.1 元素提取法
舉例1:模特頭戴的花環,與背景那些花是相互呼應的,和服的顏色跟背景那些花的顏色也相互呼應,如下圖所示。

日本婚紗攝影機構WATABE WEDDING,www.watabe-wedding.co.jp
舉例2:產品本身是編織棉麻制品,所以可以提取這些跟產品材質相關的元素作為點綴元素運用在畫面,如下圖所示。

韓服官方網站,ava.pmang.com
8.5.2 聯想發散法
從標題/意境/風格/產品等方面去聯想發揮
舉例1:從標題的字面含義或者深層含義去聯想,比如下面的彩色線條跟標題的“書寫色彩”文案還有多彩的產品和背景都是相呼應的,如下圖所示。

舉例2:從風格統一性去聯想,比如下面這個Banner,標題部分是鏤空剪紙風格的形式,所以背景那些點綴心形元素也是剪紙風的,而不是其他樣式的心型,如下圖所示。

舉例3:從意境方面去聯想,從產品身上找切入點,比如下面這款包包身上的花圖案就可以拿來做點綴元素,如左下圖所示。
再比如賣雨具的Banner,自然而然會聯想到跟產品相關的雨滴對不對?所以剛好可以把雨滴作為點綴元素,如右下圖所示。


韓國快時尚品牌8seconds
其他很多可愛類型的Banner也常常會運用到手繪簡筆畫等點綴元素,至于畫什么內容,就完全憑自己的想象力啦!
我們常看到一些果汁飲料、護膚品、化妝品、香水等這些跟人的嗅覺味覺相關的產品,需要依據產品的特點和功能去聯想發揮,比如把產品的原材料或者產品本身作為點綴元素來渲染氛圍,因為味覺嗅覺都是比較虛的東西,但是轉化到視覺層面就可以給消費者很直觀的感受,給人一種身臨其境的感覺。
比如左下圖這個護膚品Banner,雖然韓文我們看不懂,但是因為周圍的蜂蜜點綴,一看就明白了其組成成分里含有蜂蜜,于是你就會聯想到蜂蜜那種甜甜的、天然的、清香的感覺了對不對?這樣一來,瞬間會激發蜂蜜護膚愛好者的購買欲望。
再比如右下圖這款LANEIGE口紅,這么多色彩艷麗的口紅融化了擺在一起,愛美的妹子一看就感覺想涂在嘴唇上試一試對不對?

韓國美妝品牌芭妮蘭banilacowww.banilaco.com

韓國高檔化妝品品牌蘭芝LANEIGEwww.laneige.com
8.6 運用點綴元素的注意事項
既然是點綴元素,那當然只能做配角啦,既要襯托主體又不能搶了主體的風頭,那么我們這次就簡單從色彩/數量多少/大小比例3個角度來解析這個知識點。
為了方便大家理解,我簡單畫了幾個示意圖,主要有以下幾條重點。
1.點綴元素的數量要適中
圖1是一張沒有點綴元素或者點綴元素跟背景相似的Banner,圖2是加了跟主體相近或相關聯的適量的點綴元素,對比發現,圖1比較單調,圖2更加飽滿。
2.同量同色的點綴元素利用不同的處理手法帶來的視覺感受是不一樣的
圖2至圖4的點綴元素數量是一樣的,但是在對點綴元素運用了高斯模糊或者動感模糊等處理手法后,畫面開始變得有空間層次感,也更加靈動了。




3.某一點綴元素的占比很小但顏色不同,那么它也會非常搶鏡
圖5和圖6對比,看到那一點綠了嗎?是不是很耀眼?它很小但卻已經蓋過了主體的風頭。
4.點綴元素和主體之間要么相互陪襯要么形成對比關系
觀察圖7和圖8我們會發現,雖然點綴元素跟主體相差很大會對主體造成一定的視覺干擾,但當這種差異數量達到一定程度以后,主體又會變為完全的主角。因為圖7的點綴元素雖然會對主體信息造成一定的干擾,但是看起來還算和諧,至少不會那么單調了,但是如果變成圖8的話,點綴元素雖然跟主體有很大差異,但是卻使得主體更加突出了。




上面總結的這幾點知識,無論是對于專題頁設計/Banner設計還是海報設計都會給你很大的啟發,因為這些就是我們平時做的商業設計的基本原理。