不沉的骨頭：在做活動頁面的時候你是不是也會跟我一樣糾結商品要怎么樣擺放呢？商品的擺放跟頁面的板式布局緊密相關。這次為大家帶來的是活動頁面設計之商品的5種擺放姿勢，下面我們一起來看看。

往期電商設計好文回顧：

1. 《高效流程！幫你快速做出優秀電商BANNER 的設計三部曲》
2. 《超實用！5個幫你快速進階的電商BANNER 設計技巧（案例多）》
3. 《設計基礎功！聊聊平面構成中的點線面（超多案例）》

部分圖片案列來自網絡，多多包涵。

一、商品的擺放姿勢

1. 運動軌跡
2. 三角擺放
3. 漂浮上空
4. 平視角度
5. 放置容器

僅供大家參考，做一個拋磚引玉。也希望給大家帶來一些收獲。

明確商品的作用性

1、明確頁面主題，賣什么或者什么有優惠

2、豐富頁面，增強促銷氣氛

3、增強用戶的購買欲望

在很多時候我們做活動頁面是沒有模特的，大多數是商品，尤其是平臺的活動。

在促銷活動頁面或banner中商品的擺放方式也是挺重要的部分，一個頁面好看不好看、有沒有購買欲望、氣氛強不強都和商品息息相關。

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

開始咯

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

先看一看：

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

01、運動軌跡

運動軌跡通過字面解釋我們清晰的明白，商品有一個軌跡，列如正方形、圓形等。運動本身就是一種節奏，所以讓你的商品也一起變得有節奏起來。它會存在有形的軌跡和無形的軌跡。

我們看有形的運動軌跡案列：

通過上面我們可以看出運動軌跡是非常的明顯的、這種方式目前還是比較少。那么我們該注意些什么呢

1、商品大小、虛實。離我們越近的物體越大、越清晰，反之越小，越虛化。

2、有形的運動軌跡不可喧賓奪主，適當就行。

我們看無形的運動軌跡案列：

通過上面我們可以看出運動軌跡是通過 小人、實物、足球一起組合起來，使畫面有了一個視覺的運動軌跡。

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

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

2、物體元素不能喧賓奪主、搶了標題的地位

案列欣賞

02、三角擺放

在商品擺放中，我們會發現很多頁面中的產品擺放會近似三角形。因為三角是最穩定的形狀、三角也有一個引導指向性。三角擺放是最常見也是最穩的一種方式、它不局限于商品的角度，是否立體。平的立體的它都通吃。

我們看三角擺放案列：

是不是看著很眼熟，因為我們經常會看到這種擺放方式。

那么我們需要注意什么：

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

2、三角擺放后你會發現三角的頂部會出現空的地方，需要用飄起來的商品補充

最后是虛化的，因為擺放的商品都是實的，所以其它弱化。

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

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

案列欣賞

03、漂浮上空

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

通過上圖案列中我們可以發現：

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

2、商品直接的大小小關系明確，層次明顯。

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

案列演示

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

畫面布局：標題居中，商品兩邊漂浮布局

尋找商品：在找相關商品的過程中切勿著急哈，下一個會更好

ps：

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

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

的產品，不然會在頁面中顯得比較臟。

設計過程:

我們首先確定標題排版。

開始配色

選用藍、紫三種顏色搭配，藍色與紫色為近似色。

添加商品

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

開始細化標題區域 ?

過程我就不在這里細說了，大致說下

1、主標題增加立體，增強主題感。

2、結合字形稍作變形

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

4、副標題增加色塊來增加色設計感和與背景拉開層次。

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

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

副標題選用白色就好了。

最后效果如下：

調整商品的深淺關系

1、離我們越遠的商品我們需要通過混合模式正片疊底、透明度來使商品融入背景中。

2、離我們越近的商品我們需要保證它的清晰度，不能模糊。可以通過銳化來提升清晰度。

調整商品的環境光色

根據商品所在的頁面地方顏色增加環境色，同時也可以通過增強商品的明暗來提升商品的品質

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

2、給2-3個商品來一層動態模糊，增加畫面動感。

添加相關點綴元素豐富畫面

因為是618的相關頁面所以這里需延續主會場的頁面元素貫穿整個活動，保持統一性。

點綴元素也需要有深淺關系、大小層次。

現在感覺背景亮部還是有些不夠，增加亮部。

最終效果如下：

做到這里就完結了，我們需要有耐心去不斷調整顏色、深淺。

04、平視角度

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

通過上圖案列中我們可以發現：

從字面上面的理解，平視角度就是當我們人的視線與物體水平看到的視角。這種視角的商品擺放方式在日常的頁面中都是比較常見的。

那它們的共同點：

1、都是通過前后疊加商品產生遠近關系

2、高低層次明顯

需要注意的地方:

案列欣賞

案列演示

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

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

尋找商品：在找相關商品的過程中切勿著急哈，下一個會更好

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

影響了一個作品的質量。

設計過程：

我們首先確定標題排版。

開始配色

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

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

添加商品

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

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

3、如有有條件可以添加個相關人物也能好好的增加氣氛。

豐富營銷感

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

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

05、放置容器

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

通過上圖案列中我們可以發現：

容器它可以是一個形狀也可以是真實的東西，其實設計是源于生活的。

案列演示

擺放要求：放置一個容器中

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

尋找商品：在找相關商品的過程中切勿著急哈，下一個會更好

設計過程：

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

確定排版

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

經常在活動頁面中字體都是傾斜的，傾斜的好處是與生俱來的動感。

開始配色、添加圖案背景

1、炎炎夏日嘛，當然選了清涼的藍色到綠色的漸變（這里隨心就好了，又不用給老板看）兩個顏色的跨度不要太大，不然就會不自然了。

2、添加圖案，五角星，抽獎我會想到星星。星星似乎挺娛樂、玩樂的感覺。

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

制作容器

參照老虎機的一些原型，勾勒輪廓。制作過程不細說了。在這里提醒2點

1、有的地方可以自己稍作調整，不需要一模一樣，因為我總會碰到別人問我這個素材你有沒有一樣的，做設計師千萬不要死板哦。

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

細化標題

因為背景屬于亮色，所以我們要用暗色區分出來。

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

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

3、文字顏色選黃色，黃色有時候真是白搭的一個顏色特別作為標題。

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

添加商品

容器里面的商品有擺立的，有散出來的，各有優點。這里我希望它能夠跟活波一些。

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

2、需要有一個商品顏色和標題的顏色產生呼應、在頁面上產生聯系。

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

商品之的明暗對比關系，這樣可以增加商品的品質。

裝飾元素

用五角星來裝飾，與背景圖案呼應

1、五角星顏色盡量不要出現頁面上面沒有的顏色

2、增加投影

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

全文總結回顧

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

2. 商品的顏色至少有一個是與頁面顏色有聯系的

3. 商品擺放也是畫面中重要的一環，得認真處理

更多的姿勢，一起去發現吧。

歡迎關注我的個人公眾號“三根設計骨”

「超實用的UI設計自學指南」

UI配色：《幫你從零開始全面掌握UI設計的配色方法》

UI版式：《一份詳盡全面的UI設計字體與排版指南》

自學姿勢：《別著急學軟件！先掌握科學有效的UI設計自學姿勢（超全面）》

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com