第10章　電商設計中排版的奧秘

我們知道三大構成（色彩構成、平面構成、立體構成）是所有設計從業者都必須掌握的知識，是一切設計的基礎，那么專門針對電商設計的平面構成知識有哪些呢？鑒于市面上相關知識介紹的書籍較少，筆者用自己多年的經驗、觀察、思考、心得，匯總成了本部分內容。

前半部分是基礎知識，后半部分運用這些基礎知識結合實例講解，所以建議讀者按順序閱讀學習，并需要些時間消化，接下來我們一個一個問題來解剖。

10.1　平面構成的含義是什么？

百度百科的解釋是：平面構成是視覺元素在二次元的平面上，按照美的視覺效果，力學的原理，進行編排和組合，它是以理性和邏輯推理來創造形象、研究形象與形象之間的排列的方法，是理性與感性相結合的產物。

而我的理解是：平面構成主要是在二維空間運用點、線、面結合一定的規律所形成的一種視覺語言，它可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時它也不是獨立存在的，而是伴隨著色彩、肌理、光影等而存在的。基本上世間萬物，所有我們接觸到的或無法接觸到的、看得見的或看不見的事物里都有平面構成的運用和身影。

10.2　電商Banner圖是由什么組成的？

一個完整的Banner圖的組成要素一般包含6個方面：文案、商品、模特、背景、點綴物、LOGO。

但讀者也要明白，以上所有元素其實并不是都必須存在，只需存在其中至少一項就夠了。

另外，Banner圖的作用是：宣傳、展示、廣而告之、準確傳達信息。

10.3　如何在Banner設計中運用平面構成

在前面我們提到，平面構成主要是在二維空間運用點、線、面結合一定的規律所形成的一種視覺語言，而Banner圖中的所有元素（文案、商品或模特、背景、點綴物）其實都可以看作是平面構成中的點、線、面這些構成元素。

那么，接下來我們就需要了解3個有關平面構成的概念了。

10.3.1　元素與元素之間的排列關系

元素與元素之間的排列有如下幾種：分離、相切、結合、透疊、重疊、差疊、減缺、重合。

• ◆　分離：形與形之間不接觸，有一定距離。
• ◆　相切：形與形之間的邊緣正好相切。
• ◆　結合：形與形相互結合成較大的新形狀。
• ◆　透疊：形與形有透明性的相互交疊，但不產生上下前后的空間關系。
• ◆　重疊：形與形之間覆疊關系，由此產生上下前后的空間關系。
• ◆　差疊：形與形相互交疊，交疊的部分產生一個新的形。
• ◆　減缺：形與形相互覆疊，覆疊的形狀被剪掉。
• ◆　重合：形與形相互重合，變為一體。

而以上的圓形其實可以替換成任何我們能想到的形狀元素，我們做的一切設計的排版構圖，其實都是這些基本形的變形和延伸，后面我們再舉例詳述。

10.3.2　所有元素在一起所體現的構成形式

從所有元素（點、線、面）整體看，其構成形式主要有重復、近似、漸變、對比、密集、發射、特異、空間、分割、肌理及錯視等。

下面我們分別來舉例說明。

1．重復

指在同一設計中，相同的形象出現過兩次以上，重復是設計中比較常用的手法，以加強給人的印象，造成有規律的節奏感，使畫面統一。所謂相同，在重復的構成中主要是指形狀、顏色、大小等方面的相同。比如形狀的重復、骨骼的重復、大小的重復、色彩的重復、肌理的重復、方向的重復。

Banner舉例：模特重復排列疊加到背景中，這既是一種紋理也是一種模特展示的方式。

2．近似

近似指的是在形狀、大小、色彩、肌理等方面有著共同特征，它表現了在統一中呈現生動變化的效果。近似的程度可大可小，如果近似的程度大就產生了重復感。近似程度小就會破壞統一，比如形狀的近似／骨骼的近似。

近似舉例：雙胞胎整體看基本長得一模一樣，但是他們又是有細微差別的，所以只是近似。（這里模特其實為同一人，并非雙胞胎，只是舉例說明）

Banner舉例：不同包裝顏色的相同酒瓶，大小不一的波點。

攝影舉例：如下圖所示的碗、餐盤、水壺、水果等其實都可以看作是不同大小和材質的近似圓形。

3．漸變

漸變也是我們平時非常常見的一種效果，在自然界中能親身體驗到，比如在行駛的道路上我們會感到樹木由近到遠、由大到小的漸變。但是漸變其實是有很多種形式和分類的，比如形狀的漸變、方向的漸變、位置的漸變、大小的漸變、色彩的漸變、骨骼的漸變、光影的漸變。

大小的漸變舉例：

廣告Banner舉例：

模特的排列方式：

商品的排列方式：

背景的紋理形狀:

4．對比

對比有時是形態上的對比，有時是色彩和質感的對比。對比可產生明朗、肯定、強烈的視覺效果，給人深刻的印象。比如形狀的對比、大小的對比、色彩的對比、肌理的對比、位置的對比、重心的對比、空間的對比、虛實的對比。

Banner舉例：其實很多買家秀vs賣家秀、PS前vs PS后等何嘗不是一種對比呢？只不過這是現實與理想中的對比。

大小對比舉例：iPhone 8 Plus vs iPhone 8。

密集舉例：日本“波點女王”草間彌生的作品。

Banner舉例：背景花朵的排列，有大有小，有疏有密。

5．密集

密集在設計中是一種常用的組織圖面的手法，基本形在整個構圖中可自由散布，有疏有密。最疏或最密的地方常常成為整個設計的視覺焦點，密集其實也是對比的一種情況，越密集的地方給人感覺距離越遠，反之越近。比如點的密集、線的密集、面的密集。

Banner舉例：標題文字的排列，有大有小，有疏有密。

6．發射

發射是一種常見的自然現象，比如太陽四射的光芒就是發射的。發射具有方向的規律性，發射中心則成為視覺焦點，所有的視線聚集在一起或由中心散開，有時可造成光學動感，會產生爆炸的感覺，有強烈的視覺效果。比如中心點的發射、螺旋式的發射、同心式的發射。

發射舉例：星軌／水波／觀世音菩薩背后自帶的光環、太陽光發射出的射線等等。

Banner舉例：放射線，使得畫面聚焦到中間部分內容。

7．特異

特異是指構成要素在有次序的關系中有意違反次序，使少數個別的要素顯得突出，以打破規律性，特異主要分為以下幾種類型：形狀的特異、大小的特異、色彩的特異、方向的特異、肌理的特異。

特異舉例：其實各種類似于連連看的游戲就是運用了特異手法。

Banner舉例：所有的鞋子都是正面放置，但將其中一個側著放置，整個畫面立馬就不呆板了，在構圖方面，攝影和設計其實是相通的。

另外，之前筆者還看到過一個Banner的畫面是一家人站成一排，手里拿著花盤將臉遮起來，唯獨個頭比較小的那一個小女孩將花盆故意不擋著臉露出燦爛的微笑，整個畫面給人一種非常溫馨俏皮的感覺，畫面就不那么單調了，同時也使得小女孩被突出了，這里也是運用到了特異的手法。

所以，如果你想要突出某一樣東西，或者想要畫面不那么單調，不妨玩一玩特異吧！

8．空間

空間也就是三維的，而非平面二維的，給人的感覺更立體，所以在設計中打造空間感也有很多種手法，比如：

• ◆　利用大小：比如近大遠小。
• ◆　利用重疊：前后／上下等關系。
• ◆　利用陰影：使物體具有立體感／空間感。
• ◆　利用疏密：比如間隔越小，越密集，感覺就越遠。
• ◆　利用透視：平行線由寬到窄。
• ◆　利用色彩：冷色遠離，暖色靠近。
• ◆　利用肌理：越粗糙越近，越細膩越遠。
• ◆　矛盾空間：真實不存在的空間，假想的。
• ◆　虛實關系：遠景／中景／近景。

矛盾空間舉例：一款非常火的游戲《紀念碑谷2》。

空間感Banner舉例：畫面中的元素可以假想為一些有大有小的點，然后按一定透視空間規律擺放（近大遠小）。

由陰影營造的空間感：這里的前后空間層級關系其實是通過陰影的處理打造的。

9．分割

將整體按一定的規律分割成很多小的塊。比如等形分割、自由分割、比例與數量。

分割舉例：來自大自然的梯田。

分割Banner舉例：不同比例大小的色塊組成Banner的背景。

商品的排列也可以起到分割畫面的作用，如下圖所示。

10．肌理

肌理又稱質感，由于物體的材料不同，表面的排列、組織、構造等不同，因而產生粗糙感、光滑、軟硬感，幾乎我們看到的任何東西都是有紋理的，但是有的比較明顯，看得見觸摸得到；有的比較淺，所以肉眼很難分辨。肌理一般有以下幾種：筆觸的變化、凹凸不平的肌理、噴繪／染、自帶的紋理效果。

肌理Banner舉例：任何照片或圖形其實都可以用來當紋理看待，不同的紋理會體現不同的氣質，比如下圖的水彩，就感覺比較時尚。

11．錯視

因空間距離或周圍環境所造成的視覺差。

錯視主要有下面幾種。

①　繆勒—萊依爾錯視

圖中兩條線是等長的，由于上下線段兩端的箭頭方向相反，上線段的箭頭占據的空間大，所以上面的線段顯得較長。

②　垂直線與水平線的錯視

大多數人往往把垂直線看得比水平線要長，這是高估的錯覺。在水平線長度為8~10mm時，這種錯覺最大。

③　透視錯視

圖中的兩條線是相等的。看起來下面的要短，這是因為透視的錯覺。

④　正方形的錯視

標準的正方形左右兩條邊看上去大于上下兩條邊。

⑤　黑白錯視

圖中黑白線段，由于白線段明度大，具有膨脹的現象，所以看起來比黑線段長。

⑥　由于圖形結構的影響而產生的錯視

圖中組成三角形、四邊形、五邊形的邊長都相等，但由于周長和面積的不同，產生邊長不同的錯覺。

⑦　對比錯視

高個子和矮個子在一起，高的會顯得更高，矮的會顯得更矮。

錯視舉例：廣告設計以及包裝設計常用的一種手法。

2015年樂事薯片正逢20周年慶，在泰國推出了全新包裝，每一個包裝上都會有一個微笑的圖案，只要跟產品合照上傳Facebook就可以參加活動，因為樂事是在泰國賣得最好的薯片品牌，所以馬上就造成了一股泰國樂事炫笑照（Lay's Smile）的風潮

這種錯視手法在攝影中同樣也被廣泛運用，趣味感立馬提升，如下圖所示我無意間用手機自娛自樂拍的照片。

這里要說明的是，錯視在一些視差動畫的網頁頁面中運用得會比較多一些，還有一些APP的引導頁，比如下圖所示的這個畫面中的黃色圓點，同樣的黃色圓點，在暗色背景上是很突出的，但在同樣是黃色的背景上就幾乎看不見了，但其實原點是沒變的，只是背景的顏色變了，就導致我們看到了不一樣的結果。

10.3.3　常用的平面術語

這些術語在點評設計作品或者在闡述作品的時候可能會用到，比如和諧統一／對比突出、對稱、畫面平衡、視覺重心、節奏韻律。

1．和諧統一

元素與元素之間，或所有元素構成的整體是一種協調的關系，比如大小／顏色風格等的協調。

Banner舉例：這里有兩方面與文案相呼應，一個是整體明亮歡快的色彩，一個是背景的波點圖形與文案相呼應，再加上居中的排版方式使得整體看起來協調統一。

2．對比突出

即把兩個質或者量反差很大的元素放在一起，使人感覺主體鮮明突出，整體又活躍而統一，比如大小、數量、色彩、形狀的對比。

Banner舉例：大背景是黃色，而標題部分則用紫色和玫紅色漸變，這樣一來標題部分就通過對比色和互補色突出了，周圍再點綴少量彩色塊，既不干擾主體視線，也增強了畫面促銷氛圍。

3．對稱

假設在一個圖形中間畫一條垂直或水平線后，畫面的左右或上下兩邊是可以完全重合的，則我們則稱之為對稱。

Banner舉例：典型的對稱構圖，比如女性的Bra其實就是一個對稱的形狀。

4．畫面平衡

即元素與元素之間，元素與整體之間的大小／形狀／數量／色彩／材質等的分布與視覺平衡。

Banner舉例：左右兩邊色彩面積上是平衡的，但是色相以及元素的數量和形狀上的則略微有些差異，使得平衡的同時又不那么單調。

5．視覺重心

通過對畫面中元素的數量、顏色、位置、大小、材質等進行處理，畫面中所出現的視覺焦點。

Banner舉例：這張Banner的視覺重心就在紅色圓這里，一個是因為圓形本來就處在畫面中間，另一方面是因為紅色在這里是最顯眼的顏色。

6．節奏韻律

畫面中的一種或多種元素按一定的規律排列，會產生音樂一般的旋律感。

Banner舉例：鞋子擺放姿勢不一樣，產生了一種動律感，使畫面不單調、不呆板。

海報舉例：下圖所示的彩筆并不是水平規規矩矩地放一行，而是錯落有致的，畫面立馬就感覺動起來了，不會顯得呆板。

結合以上講的知識點，筆者總結繪制了一些比較實用的Banner排版樣式，如下圖所示。

Banner是由文案、模特或商品、背景、點綴物組成的，而所有這些元素就相當于我們平面構成中的點線面，當我們改變這些元素的角度、距離、大小、數量、樣式、顏色等時，新的版式也就產生了，所以，大家不妨也試試看吧。

10.4　平面構成之于電商Banner的意義

Banner中的所有元素其實都相當于平面構成中的點、線、面，而所有元素所組成的Banner畫面其實又是一種情緒和信息的表達，所以我們可以從下面4個方面去理解這個問題。

1．從活動主題的角度

當我們拿到一個設計需求的時候，就需要確定設計風格，而這個風格怎么確定呢？首先要明白定位以及服務的人群是誰，了解他們的興趣愛好，同時我們腦袋中會出現這樣幾個關鍵詞：熱鬧促銷／年輕活力／高冷大牌／時尚個性／規矩保守等。

下面我們先看幾個Banner實例。

低價熱鬧促銷：畫面中會有比較多的點綴物，也喜歡用大面積的暖色，其目的就是為了營造熱鬧的氛圍，給人熱情有親和力的感覺，版式以上下或者居中排版的方式居多，這種方式的視覺也更聚焦一些。

所以熱鬧促銷的頁面可以考慮下面這些排版樣式：

年輕活力：這種主題的Banner設計其實與熱鬧促銷的方法類似，只是說，這種畫面中的點綴元素或者模特樣式需要表現得更加俏皮活力一些，色彩上也會比較艷麗或明亮，營造一種青春活力的感覺，排版方式沒有什么特別的限制，發揮空間非常大。

所以年輕活力的頁面可以考慮下面這些排版樣式：

高冷大牌：這種主題的Banner設計重在體現一種一般人買不起，買了之后會顯得自己特別有優越感的印象，那么畫面中就需要多留白，善用一些簡潔的或有棱角的圖形設計，切忌用一些比較可愛或太柔美復雜的線條，同時，商品或模特的品質要高，整體排版也是比較簡潔而不浮夸，總而言之就是給人一種很貴很高端的感覺，這與低價熱鬧促銷是相反的。

所以高冷大牌的頁面可以考慮下面這些排版樣式：

2．從信息層級的角度

如果在做一個Banner的時候，沒有特別的要求，那么我們就有很多方向可選擇了，首先問下自己最想要突出什么信息呢？是突出商品呢？還是突出文字呢？或者是突出整體的氛圍呢？還是強調整體的協調感呢？還是說強調品牌呢？

一般來說，一個好的Banner首先要保證信息傳達準確，然后需要保證畫面的協調感和氛圍。

下面來看幾個案例。

強調品牌，突出LOGO（模特也屬于品牌的一部分）：

強調商品以及SALE:

強調整體的氛圍（商品融入在氛圍當中了）：

強調利益點信息：

版式方面，基本上文案信息都是比較突出的，其次商品突出或者強調整體氛圍：

3．從品牌調性的角度

關于品牌這塊，可能是很多小商家目前不太重視，也覺得自己用不上的，但是各大電商平臺還有一些比較大的電商品牌都已經開始有這種品牌意識了，所以不管你是在哪種團隊里，不防也都了解一下。

我們可以從以下幾個方面去看待品牌：品牌統一／風格延續／風格突破。

品牌統一：比如天貓的貓頭形象，當它被運用于各個品類和品牌的廣告中時，這一創意既統一了品牌形象，又非常巧妙，我們可以看幾個品牌2017年推出的天貓雙十一海報：

再比如女裝品牌初語：

一直以來，初語的所有模特，在眼睛那里都有一條白線，給人印象特別深刻，形成一個統一的品牌視覺形象，最后大家也看到了初語的新LOGO，就是提取了眼睛那里的形象，新LOGO如左下圖所示，而它原來的LOGO是右下圖這樣的。

對比發現，品牌形象更加統一了，也更有特色了（雖然會讓一些沒聽過這個品牌的人以為它是賣面膜的，不過對于接觸過這個服裝品牌的人來說還是很好理解的，原版LOGO雖然簡潔明了但是特色不突出，改版后的LOGO則氣質和特色都有了）。

風格延續：這個在平臺的比較大型的活動中運用較多，比如各個分會場的風格延續（排版樣式保持一致，只是改變了顏色和品類商品及文案等）。

風格突破：關于品牌的風格突破，可能是因為涉及品牌升級或者品牌定位的改變，所以需要在設計上配合這一策略，比如說原先面對的可能是青少年群體，但隨著時代的發展，是繼續服務這些青少年群體跟著他們一起成長轉型為服務于大齡青年呢？還是繼續服務新一代的青少年群體呢？這時候用戶群體改變了，當然也就意味著風格可能需要作出改變。

比如QQ的LOGO形象的升級：

4．從視覺美感的角度

當一個Banner在滿足了前面幾個要求的情況下，如果有能力的話，當然還是要達到視覺美感的要求的，那么從這個角度看，平面構成之于Banner設計的意義是什么呢？我們可以從下面幾個關鍵詞入手：平衡畫面／視覺沖擊力／畫面不單調／富有創意等。

平衡畫面：左中右排版。

視覺沖擊力：放射線，中心聚焦。

畫面不單調：將產品的方向或顏色做一些不規則的排列，避免乏味。

富有創意：虛實相結合的場景打造，既給人一種身臨其境的場景感又富有趣味。

到此，平面構成之于Banner設計的奧秘就講完了，內容非常多，估計大家一周也消化不了，而我也沒有分為兩章來寫，因為這些知識點不管從哪里切斷我都會感覺不舒服，就像你吃東西吃得正爽，卻被別人告知說：“另一半要留著下次再吃哦”，你喜歡這種感覺嗎？我想還是不要了吧，哈！