編輯導語：在電商產品中，產品圖不止是摳圖，還需要結合產品所處的場景，運用不同的排版。本文作者將場景分為瓷片區(qū)和banner區(qū)，結合部分案例，對產品圖版式進行了講解，一起來看一下吧。

想當年，我一度天真得以為產品圖只需要扣個小圖就大功告成了，直到我經歷了與運營同學之間的愛恨情仇，我終于發(fā)現(xiàn)，這個看似簡單的步驟其實深遠影響著信息的傳達、甚至轉化。

最近在做線上展會時研究了一下，結合了部分案例（edm banner需求及之前所接手的線上展會項目）來講解產品圖版式，hope u like it～

一般說到產品圖，就涉及到產品所處的場景，我按照使用場景將其分為兩種——瓷片區(qū)和banner區(qū)。

一、瓷片區(qū)場景

瓷片區(qū)是電商平臺中常見的引流模塊，通常由產品+文字的形式組合，表現(xiàn)形式猶如一塊塊瓷片，因此才有了“瓷片區(qū)”這個形象的稱呼。

對于單個產品往往不需要考慮產品的擺放問題，但是當一個卡片中存在多個產品時（比如展會的主推商品模塊），如果用堆砌和平鋪的方法進行擺放，往往會導致一些視覺災難。畢竟給定的區(qū)域是方方正正的瓷片區(qū)，而不是banner。

更適合瓷片區(qū)場景的排版方式，就是像貼瓷磚一樣將產品一張張的貼上去。在大卡片中，用大小一致的小卡片容納產品，不僅視覺上更加規(guī)整統(tǒng)一，也可以實現(xiàn)更精準的點擊區(qū)域，最重要的是，白底產品不用摳圖。

而且，視覺樣式也可以更多樣化——

在樣式的選擇上，阿里巴巴和Aliexpress的瓷片區(qū)給了我很多啟發(fā)。
阿里是暗色背景+白色模塊+灰色大卡片+以留白分隔的產品。

Aliexpress則直接以大卡片作為模塊，灰色背景+白色大卡片+以色塊分隔的產品。

二、banner場景

不可點展示圖、霸屏、頂通等等這類引流性質的橫幅廣告，都可以稱之為banner。而banner最核心的目的就是：快速傳達信息并吸引用戶向下瀏覽或點擊。
因此，banner中的產品如果像瓷片區(qū)一樣規(guī)整得擺放，就會讓banner顯得過于死板，無法迅速吸引用戶眼球，從而也增加了失去轉化的風險。不過，完全可以將這種擺法進行優(yōu)化調整。

1. 斜向瓷片

這種是由瓷片區(qū)場景的擺放方法演化而來，將瓷片傾斜45度，既擁有瓷片法規(guī)整一致的特點，斜向的擺放也讓banner擁有了動感和活力，避免正向擺放所帶來的死板枯燥。

適用范圍：運營所給的產品數(shù)量較多（一般不少于3個時）。

2. 斜向平鋪

相比斜向瓷片，平鋪的產品不用固定在單個的容器中，全部斜向鋪開，視覺上相比瓷片更加富有活力，也帶來更多的視覺沖擊。唯一的缺點是，對于產品圖及排版能力的要求較高，產品輪廓越接近矩形視覺效果越好，并且在排版時盡量保持產品之間一致的間距來增加一致性。否則就會讓整個banner變得混亂不堪。
比如下面第二個edm banner，由于產品形狀的多樣，便不如第一個banner更加規(guī)整一致，而且產品過大的間距讓產品圖過于松散了，和文案分不開。

適用范圍：數(shù)量較多、形狀對稱的產品。產品形狀越接近矩形，或者產品品類越一致，效果越好！另外，這種擺法適用于更多類型的版式，不論是左右版式還是環(huán)繞版式。

小技巧：可以在產品背景上加上一些不影響主體的輔助手段（線、面），用背景的一致性來提升產品版式的一致性。

如阿里的banner，就用了分層漸變、色塊和輔助線來輔助提升版式的內在邏輯性。

3. 堆砌

相對來說適用范圍較小的一種版式。
這種堆砌的擺法其實是對現(xiàn)實擺法的模擬，相比前兩種更具有立體感和真實感。
BUT，這種擺法非常受制于產品的體積大小，一旦產品間比例有所失衡，就會帶來“很假”的感覺；二來很容易造成產品的互相遮擋，尤其是一些顏色接近的產品會糊成一團，降低產品本身的辨識度；最后，產品互相遮擋帶來的投影也會顯著加大視覺的工作量。

適用范圍：一些適合產品堆砌的特定場景（比如圣誕節(jié)的banner）。

4. 場景展示

堆砌擺法的優(yōu)化版本，用一個個立方體、柱體等模型模擬現(xiàn)實世界的商品展示臺，再將產品放置到展臺上方。這個擺法不僅避免了產品間的互相遮擋，3D渲染出的場景也極大提升了真實感以及視覺觀賞性。

雖然多一步c4d建模渲染的步驟，不過只要完成一個場景，后期只需要更換材質、調整模型就可以連續(xù)復用。

適用范圍：無限制，一個或多個皆可。尤其適用于專題頁、活動頁等重要頁面的主視覺。
以上，就是我有關產品擺法的所有分享。其實產品擺法可能不止這么幾類，這里只是舉出一些常見的例子，到底是什么樣的擺法當然是具體問題具體分析了。希望這篇分享對你有所幫助~

#專欄作家#

Andrewchen；微信公眾號：轉行人的設計筆記，人人都是產品經理專欄作家。中科院碩士自學轉行，擅長通過文字幫助年輕設計師成長和提效。延遲滿足、長期主義。

本文原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協(xié)議。