不沉的骨頭：在做活動(dòng)頁面的時(shí)候你是不是也會(huì)跟我一樣糾結(jié)商品要怎么樣擺放呢？商品的擺放跟頁面的板式布局緊密相關(guān)。這次為大家?guī)淼氖腔顒?dòng)頁面設(shè)計(jì)之商品的5種擺放姿勢(shì)，下面我們一起來看看。

往期電商設(shè)計(jì)好文回顧：

1. 《高效流程！幫你快速做出優(yōu)秀電商BANNER 的設(shè)計(jì)三部曲》
2. 《超實(shí)用！5個(gè)幫你快速進(jìn)階的電商BANNER 設(shè)計(jì)技巧（案例多）》
3. 《設(shè)計(jì)基礎(chǔ)功！聊聊平面構(gòu)成中的點(diǎn)線面（超多案例）》

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

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

1. 運(yùn)動(dòng)軌跡
2. 三角擺放
3. 漂浮上空
4. 平視角度
5. 放置容器

僅供大家參考，做一個(gè)拋磚引玉。也希望給大家?guī)硪恍┦斋@。

明確商品的作用性

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

2、豐富頁面，增強(qiáng)促銷氣氛

3、增強(qiáng)用戶的購買欲望

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

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

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

開始咯

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

先看一看：

PS：下面案列演示不足之處，望大家見諒。

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

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

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

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

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

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

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

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

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

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

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

案列欣賞

02、三角擺放

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

我們看三角擺放案列：

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

那么我們需要注意什么：

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

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

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

3、商品不可過多、多則亂。也不可過少、少則松

4、商品顏色盡量少，避免過多把畫面變花了

案列欣賞

03、漂浮上空

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

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

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

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

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

案列演示

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

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

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

ps：

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

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

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

設(shè)計(jì)過程:

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

開始配色

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

添加商品

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

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

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

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

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

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

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

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

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

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

最后效果如下：

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

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

2、離我們?cè)浇纳唐肺覀冃枰ＷC它的清晰度，不能模糊。可以通過銳化來提升清晰度。

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

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

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

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

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

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

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

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

最終效果如下：

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

04、平視角度

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

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

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

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

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

2、高低層次明顯

需要注意的地方:

案列欣賞

案列演示

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

畫面布局：布局為左右布局，文左品右

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

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

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

設(shè)計(jì)過程：

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

開始配色

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

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

添加商品

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

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

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

豐富營銷感

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

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

05、放置容器

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

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

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

案列演示

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

畫面布局：布局為左右布局，文左品右

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

設(shè)計(jì)過程：

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

確定排版

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

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

開始配色、添加圖案背景

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

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

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

制作容器

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

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

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

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

因?yàn)楸尘皩儆诹辽晕覀円冒瞪珔^(qū)分出來。

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

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

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

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

添加商品

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

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

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

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

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

裝飾元素

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

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

2、增加投影

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

全文總結(jié)回顧

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

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

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

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

歡迎關(guān)注我的個(gè)人公眾號(hào)“三根設(shè)計(jì)骨”

「超實(shí)用的UI設(shè)計(jì)自學(xué)指南」

UI配色：《幫你從零開始全面掌握UI設(shè)計(jì)的配色方法》

UI版式：《一份詳盡全面的UI設(shè)計(jì)字體與排版指南》

自學(xué)姿勢(shì)：《別著急學(xué)軟件！先掌握科學(xué)有效的UI設(shè)計(jì)自學(xué)姿勢(shì)（超全面）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com