電商的banner設(shè)計(jì)現(xiàn)在越來(lái)越高大上，各位設(shè)計(jì)師是不是也在設(shè)計(jì)初期的排版布局上煞費(fèi)苦心？別著急，新鮮的經(jīng)驗(yàn)教程出爐，一個(gè)資深電商banner設(shè)計(jì)總結(jié)了一些海報(bào)的設(shè)計(jì)規(guī)則和經(jīng)驗(yàn)，希望能給你的工作帶來(lái)幫助。不沉的骨頭：在做活動(dòng)頁(yè)面的時(shí)候你是不是也會(huì)跟我一樣糾結(jié)商品要怎么樣擺放呢？商品的擺放跟頁(yè)面的板式布局緊密相關(guān)。這次為大家?guī)?lái)的是活動(dòng)頁(yè)面設(shè)計(jì)之商品的5種擺放姿勢(shì)，下面我們一起來(lái)看看。

部分圖片案列來(lái)自網(wǎng)絡(luò)，多多包涵。

一、商品的擺放姿勢(shì)

運(yùn)動(dòng)軌跡

三角擺放

漂浮上空

平視角度

放置容器

僅供大家參考，做一個(gè)拋磚引玉。也希望給大家?guī)?lái)一些收獲。

1、明確頁(yè)面主題，賣(mài)什么或者什么有優(yōu)惠

2、豐富頁(yè)面，增強(qiáng)促銷(xiāo)氣氛

3、增強(qiáng)用戶(hù)的購(gòu)買(mǎi)欲望

在很多時(shí)候我們做活動(dòng)頁(yè)面是沒(méi)有模特的，大多數(shù)是商品，尤其是平臺(tái)的活動(dòng)。

在促銷(xiāo)活動(dòng)頁(yè)面或banner中商品的擺放方式也是挺重要的部分，一個(gè)頁(yè)面好看不好看、有沒(méi)有購(gòu)買(mǎi)欲望、氣氛強(qiáng)不強(qiáng)都和商品息息相關(guān)。

我們不僅要做到版面形式好看，也要處理好商品。

商品在頁(yè)面中擺放的方式有很多，在這里我舉例在活動(dòng)頁(yè)面中比較常用的擺放方式演示。

先看一看：

PS：下面案列演示不足之處，望大家見(jiàn)諒。

運(yùn)動(dòng)軌跡通過(guò)字面解釋我們清晰的明白，商品有一個(gè)軌跡，列如正方形、圓形等。運(yùn)動(dòng)本身就是一種節(jié)奏，所以讓你的商品也一起變得有節(jié)奏起來(lái)。它會(huì)存在有形的軌跡和無(wú)形的軌跡。

我們看有形的運(yùn)動(dòng)軌跡案列：

通過(guò)上面我們可以看出運(yùn)動(dòng)軌跡是非常的明顯的、這種方式目前還是比較少。那么我們?cè)撟⒁庑┦裁茨?/p>

1、商品大小、虛實(shí)。離我們?cè)浇奈矬w越大、越清晰，反之越小，越虛化。

2、有形的運(yùn)動(dòng)軌跡不可喧賓奪主，適當(dāng)就行。

我們看無(wú)形的運(yùn)動(dòng)軌跡案列：

通過(guò)上面我們可以看出運(yùn)動(dòng)軌跡是通過(guò) 小人、實(shí)物、足球一起組合起來(lái)，使畫(huà)面有了一個(gè)視覺(jué)的運(yùn)動(dòng)軌跡。

那么我們要注意些什么呢？

1、還是一樣大小、該弱化的則弱化

2、物體元素不能喧賓奪主、搶了標(biāo)題的地位

在商品擺放中，我們會(huì)發(fā)現(xiàn)很多頁(yè)面中的產(chǎn)品擺放會(huì)近似三角形。因?yàn)槿鞘亲罘€(wěn)定的形狀、三角也有一個(gè)引導(dǎo)指向性。三角擺放是最常見(jiàn)也是最穩(wěn)的一種方式、它不局限于商品的角度，是否立體。平的立體的它都通吃。

我們看三角擺放案列：

是不是看著很眼熟，因?yàn)槲覀兘?jīng)常會(huì)看到這種擺放方式。

那么我們需要注意什么：

1、千萬(wàn)不要擺成很正的三角形，隨意一些更好

2、三角擺放后你會(huì)發(fā)現(xiàn)三角的頂部會(huì)出現(xiàn)空的地方，需要用飄起來(lái)的商品補(bǔ)充

最后是虛化的，因?yàn)閿[放的商品都是實(shí)的，所以其它弱化。

3、商品不可過(guò)多、多則亂。也不可過(guò)少、少則松

4、商品顏色盡量少，避免過(guò)多把畫(huà)面變花了

我們先看下商品漂浮空中的案列，感受下它們之間的共同點(diǎn)。

通過(guò)上圖案列中我們可以發(fā)現(xiàn)：

1、商品的都是比較立體的，透視感強(qiáng)（ps：由于某些商品特性會(huì)存在只能平視角度的這個(gè)可以忽略）

2、商品直接的大小關(guān)系明確，層次明顯。

3、商品顏色與頁(yè)面顏色融合，不相沖。

擺放要求：需以商品漂浮上空的頁(yè)面

畫(huà)面布局：標(biāo)題居中，商品兩邊漂浮布局

尋找商品：在找相關(guān)商品的過(guò)程中切勿著急哈，下一個(gè)會(huì)更好

ps：

1、如需求方有要求放置的商品 ，提前找他提供。

2、根據(jù)頁(yè)面的顏色盡量找比較符合頁(yè)面的商品，盡量不要選著顏色過(guò)黑

的產(chǎn)品，不然會(huì)在頁(yè)面中顯得比較臟。

我們首先確定標(biāo)題排版。

開(kāi)始配色

選用藍(lán)、紫三種顏色搭配，藍(lán)色與紫色為近似色。

添加商品

調(diào)整好角度。和商品排放的位置，這個(gè)一定要多嘗試，或許放到右邊更合適，又或許是左邊。

開(kāi)始細(xì)化標(biāo)題區(qū)域  

過(guò)程我就不在這里細(xì)說(shuō)了，大致說(shuō)下

1、主標(biāo)題增加立體，增強(qiáng)主題感。

2、結(jié)合字形稍作變形

3、給整體文案背后增加一個(gè)載體，讓其從背景中突出出來(lái)。

4、副標(biāo)題增加色塊來(lái)增加色設(shè)計(jì)感和與背景拉開(kāi)層次。

5、背后的載體也要有深淺、暗部和亮部層次。

標(biāo)題顏色根據(jù)我之前說(shuō)的深色配亮色，所以這里背景為深色，選擇黃色來(lái)搭配。

副標(biāo)題選用白色就好了。

最后效果如下：

調(diào)整商品的深淺關(guān)系

1、離我們?cè)竭h(yuǎn)的商品我們需要通過(guò)混合模式正片疊底、透明度來(lái)使商品融入背景中。

2、離我們?cè)浇纳唐肺覀冃枰ＷC它的清晰度，不能模糊?？梢酝ㄟ^(guò)銳化來(lái)提升清晰度。

調(diào)整商品的環(huán)境光色

根據(jù)商品所在的頁(yè)面地方顏色增加環(huán)境色，同時(shí)也可以通過(guò)增強(qiáng)商品的明暗來(lái)提升商品的品質(zhì)

1、可以通過(guò)混合模式疊加、正片疊底、高光這些模式來(lái)處理商品上面的環(huán)境光色。

2、給2-3個(gè)商品來(lái)一層動(dòng)態(tài)模糊，增加畫(huà)面動(dòng)感。

添加相關(guān)點(diǎn)綴元素豐富畫(huà)面

因?yàn)槭?18的相關(guān)頁(yè)面所以這里需延續(xù)主會(huì)場(chǎng)的頁(yè)面元素貫穿整個(gè)活動(dòng)，保持統(tǒng)一性。

點(diǎn)綴元素也需要有深淺關(guān)系、大小層次。

現(xiàn)在感覺(jué)背景亮部還是有些不夠，增加亮部。

最終效果如下：

做到這里就完結(jié)了，我們需要有耐心去不斷調(diào)整顏色、深淺。

我們先看下商品平視角度的案列，感受下它們之間的共同點(diǎn)。

通過(guò)上圖案列中我們可以發(fā)現(xiàn)：

從字面上面的理解，平視角度就是當(dāng)我們?nèi)说囊暰€與物體水平看到的視角。這種視角的商品擺放方式在日常的頁(yè)面中都是比較常見(jiàn)的。

那它們的共同點(diǎn)：

1、都是通過(guò)前后疊加商品產(chǎn)生遠(yuǎn)近關(guān)系

2、高低層次明顯

需要注意的地方:

擺放要求：需以為商品平視堆積擺放方式

畫(huà)面布局：布局為左右布局，文左品右

尋找商品：在找相關(guān)商品的過(guò)程中切勿著急哈，下一個(gè)會(huì)更好

ps：一些設(shè)計(jì)做的頁(yè)面不知道為什么它的商品總是模模糊糊的非常不清晰，這叫我是無(wú)法忍受的，不知道他是怎么看的過(guò)去。所以商品的質(zhì)量也同時(shí)

影響了一個(gè)作品的質(zhì)量。

我們首先確定標(biāo)題排版。

開(kāi)始配色

1、促銷(xiāo)所以選擇了紅色作為背景，黃色作為輔助色分割版面。

2、我們通過(guò)添加文字的投影來(lái)拉開(kāi)層次，利益點(diǎn)做有成弧度的排版迎合數(shù)字3。

添加商品

1、把商品放置頁(yè)面上，通過(guò)分割版面。頁(yè)面的層次則多了一層。 雖然方法老套，但很實(shí)用。

2、商品之間的高低一定要明顯、商品與商品之間不可太過(guò)疏遠(yuǎn)。

3、如有有條件可以添加個(gè)相關(guān)人物也能好好的增加氣氛。

豐富營(yíng)銷(xiāo)感

促銷(xiāo)活動(dòng)頁(yè)面自然是少不了熱鬧，通過(guò)添加飛絮、碎碎的這些小東西。促銷(xiāo)感立馬出來(lái)了。

到這里這個(gè)案列就完了，比較簡(jiǎn)單的一個(gè)案列，不是很好望大家見(jiàn)諒。

放置容器中現(xiàn)在也是挺常見(jiàn)得了，也挺好玩的。你可以把一切東西想成容器把商品放在里面。

通過(guò)上圖案列中我們可以發(fā)現(xiàn)：

容器它可以是一個(gè)形狀也可以是真實(shí)的東西，其實(shí)設(shè)計(jì)是源于生活的。

擺放要求：放置一個(gè)容器中

畫(huà)面布局：布局為左右布局，文左品右

尋找商品：在找相關(guān)商品的過(guò)程中切勿著急哈，下一個(gè)會(huì)更好。

我們首先確定容器，突然想到老虎機(jī)所以就覺(jué)得用它做容器。

首先我們確定文案的排版，重要信息和次要信息的處理。

經(jīng)常在活動(dòng)頁(yè)面中字體都是傾斜的，傾斜的好處是與生俱來(lái)的動(dòng)感。

開(kāi)始配色、添加圖案背景

1、炎炎夏日嘛，當(dāng)然選了清涼的藍(lán)色到綠色的漸變（這里隨心就好了，又不用給老板看）兩個(gè)顏色的跨度不要太大，不然就會(huì)不自然了。

2、添加圖案，五角星，抽獎(jiǎng)我會(huì)想到星星。星星似乎挺娛樂(lè)、玩樂(lè)的感覺(jué)。

3、添加紋理素材-這里馬賽克了一張素材，效果還可以。

制作容器

參照老虎機(jī)的一些原型，勾勒輪廓。制作過(guò)程不細(xì)說(shuō)了。在這里提醒2點(diǎn)

1、有的地方可以自己稍作調(diào)整，不需要一模一樣，因?yàn)槲铱倳?huì)碰到別人問(wèn)我這個(gè)素材你有沒(méi)有一樣的，做設(shè)計(jì)師千萬(wàn)不要死板哦。

2、千萬(wàn)別直接扣其它頁(yè)面的圖，而且質(zhì)量還是超級(jí)差的那種，我見(jiàn)過(guò)好多次了。

細(xì)化標(biāo)題

因?yàn)楸尘皩儆诹辽?，所以我們要用暗色區(qū)分出來(lái)。

1、增加文字立體面，增加描邊黑色這樣就很好的與背景分離出來(lái)。

2、細(xì)化標(biāo)題，增加類(lèi)似漫畫(huà)文字的效果。不要問(wèn)有沒(méi)有快捷方式 、素材之類(lèi)的，別這么懶。自己畫(huà)上去復(fù)制復(fù)制就好了。

3、文字顏色選黃色，黃色有時(shí)候真是白搭的一個(gè)顏色特別作為標(biāo)題。

4、給文字增加投影，讓其更完整。投影顏色選文字下面背景顏色稍深的，比黑色投影更有質(zhì)感。

添加商品

容器里面的商品有擺立的，有散出來(lái)的，各有優(yōu)點(diǎn)。這里我希望它能夠跟活波一些。

1、商品由中心散開(kāi)，所以中間的商品無(wú)疑是最大的，其次的相對(duì)比較小一些。

2、需要有一個(gè)商品顏色和標(biāo)題的顏色產(chǎn)生呼應(yīng)、在頁(yè)面上產(chǎn)生聯(lián)系。

3、商品的投影別忘記、商品蓋住其它商品的地方要變暗。別忽視了。最后給它們來(lái)一個(gè)中性灰修圖增加

商品之的明暗對(duì)比關(guān)系，這樣可以增加商品的品質(zhì)。

裝飾元素

用五角星來(lái)裝飾，與背景圖案呼應(yīng)

1、五角星顏色盡量不要出現(xiàn)頁(yè)面上面沒(méi)有的顏色

2、增加投影

到這里這個(gè)案列就完了，比較簡(jiǎn)單的一個(gè)案列，不是很好，望大家見(jiàn)諒。

1. 不管是什么擺放姿勢(shì)，商品都要有大有小之分

2. 商品的顏色至少有一個(gè)是與頁(yè)面顏色有聯(lián)系的

3. 商品擺放也是畫(huà)面中重要的一環(huán)，得認(rèn)真處理

更多的姿勢(shì)，一起去發(fā)現(xiàn)吧。