@ChiNa_威海_山巖?：前面的教程中我曾經提到過，我們做的圖片基本就是由四個元素（背景、主體、文字、裝飾）構成的，而做好一張圖的關鍵也就是如何運用好這些元素，使它們合理并美觀地展現在同一張圖片內。那么排版我們需要注意哪些方面，又有哪些簡單的技巧和方法可以應用呢？

當兩張圖片中應用的構成元素都相同，畫布尺寸也相同的情況下，排版的好壞就決定你整張圖片的質量了，這就好比兩個廚師，同樣的食材做同一道菜，味道卻可能截然不同。

往期電商設計好文回顧：

1. 《高效流程！幫你快速做出優秀電商BANNER 的設計三部曲》
2. 《5個幫你快速進階的電商BANNER 設計技巧（案例多）》
3. 《設計基礎功！聊聊平面構成中的點線面（超多案例）》
4. 《電商好文！超多實戰案例幫你解鎖5種商品擺放姿勢》
5. 《實戰好文！幫你做出優秀電商BANNER的五個方面（超多案例）》
6. 《從這四個方面挑選圖片素材，可以提高電商設計的出圖質量》
7. 《用好這四個元素，幫你做出高大上的電商BANNER（附技巧及神器）》
8. 《用好這四個元素，幫你做出高大上的電商BANNER（附技巧及神器）-2》

一、版式

首先我們需要了解的版式。我們平時制作或看到的版式大部分都是由——中心型、中軸型、分割型、傾斜型、骨骼型、滿版型為主。

↑ 中心型排版，利用視覺中心，突出想要表達的實物——當制作的圖片沒有太多文字，并且展示主體很明確的情況下建議多使用中心型的排版。中心排版具有突出主體、聚焦視線等作用，體現大氣背景可用純色，體現高端背景可用漸變色。

上圖為Elysions的作品

↑ 中軸型排版、利用軸心對稱，使用畫面展示規整穩定、醒目大方——當制作的圖片滿足中心型排版但主體面積過大的情況下，可以使用中軸型排版。中軸型居中對稱的版面特點，在突出主體的同事又能給予畫面穩定感，并能使整體畫面具有一定的沖擊力。

在做電商活動海報的時候中軸型是很出效果的一種形式

↑ 分割型排版，利用分割線使畫面有明確的獨立性和引導性——當制作的圖片中有多個圖片和多段文字時可以使用分割排版。分割型排版能使畫面中每個部分都是極為明確和獨立的，在觀看時能有較好的視覺引導和方向；通過分割出來的體積大小也可以明確當前圖片中各部分的主次關系，有較好的對比性，并使整體畫面不單調和擁擠。

↑ 傾斜型排版，通過主體或整體畫面的傾斜編排，使畫面擁有極強的律動感，刺激視覺——當制作的圖片中要出現律動性、沖擊性、不穩定性、跳躍性等效果，可以使用傾斜型排版。傾斜排版可以讓呆板的畫面爆發活力和生機，當你發現自己的圖片過于死板或僵硬時，嘗試讓畫面中某個元素帶點傾斜，會有出奇的效果。

↑ 骨骼型排版，通過有序的圖文排列，使畫面嚴謹統一、具有秩序感——當制作的圖片中，文字較多時，通常都會應用骨骼型排版。骨骼型排版時較為常見的排版方式、清晰的調理和嚴謹性讓畫面平穩，是一種不會出現的錯誤，但是畢竟單一的排版方式。有些時候為了打破骨骼型的單一和平穩，我們也可以應用上圖第三張的形式，在規整的排列中加入一些律動強烈的素材。

↑ 網頁設計（包含電商）中大部分都是骨骼型排版形式

↑ 滿版型排版，通過大面積的元素來傳達最為直觀和強烈的視覺刺激，使畫面豐富且具有極強的帶入性——當制作的圖片中有極為明確的主體，且文案較少時可以采用滿版型排版。常見的滿版型排版有整體滿版、細節滿版和文字滿版。

如第一張：整體滿版會讓畫面有強烈的帶入性。
如第二張：細節滿版能快速明確和展示主體。
如第三種：而文字滿版通常是以裝飾的形式來表達某些文案。

二、方法

了解了基本的版式，我們再去了解排版中需要注意的幾個問題。

首先是對版式的選擇，你如果拿到一份客戶的要求而沒辦法想出來接下來可以用哪些方法去排版，顯然是作為設計師而言不太光彩和合格的事情。我在上邊的例子中也寫到了，不同的情況下可以應用不同的版式，而所謂的不同情況大多數時候有這么幾種，字少圖少、字少圖多、字多圖少、字多圖多，字圖一樣。其次就是如何應用，版式是一種縹緲的藝術，理論形式固定，但表現形式多樣。當你手法純熟了，怎么擺放都會很好看，而在剛開始練習的階段，我們還是最好注意好排版中需要嚴格遵守的一樣東西——留白。

留白很多大師都講過，分析過，大部分來說比較宏觀，都是跟意境掛鉤，我再去說重復的東西就沒有意義了，我要說的是幾個細碎的留白問題，首先我要否認很多人認為留白就是要做簡約風的印象，其實留白無處不在，簡約風只是留白更宏觀的定義而已......那么怎樣去理解和運用留白呢，首先我們要對留白有幾個新的認識：

第一，文字間距、行距都是留白，而這種距離如果太過統一和擁擠畫面就會死板，所以在文段較多的情況下，我們可以適當調節文段的距離來改善畫面的效果，也就是加大文字間的留白。

如下圖：

第二，比如某個元素內部又有其他元素，那么這個元素內部區域就需要合理的留白，內部元素不能太滿，也不能太偏。

如下圖：

第三，元素跟元素之間要有一個合理的留白，不然就會擁擠難受。

如下圖：

第四，除滿版型排版以為盡量讓畫面四周有足夠的留白。有些時候不必要放那么多的裝飾元素，在畫面中，那樣反而會搶了主體，比如這個下圖，其實竹葉也可以表達所需的意思，而且更靈動。

第五，裝飾元素在做飄散的時不要集中在一個區域，那樣會讓某個區域留白不夠顯得擁擠，還會顯得圖片的感覺小氣，飄散的元素我們盡量做的大氣一些，揮灑寫，彌補周邊空曠的同事又能讓畫面大氣。

如下圖：

第六，留白的同時也要去白，去白是一種平衡留白畫面的效果，一般來說常用的去白方式是對線去白，即下方有元素而上方很空的時候，給上方增加一個元素來平衡畫面；當主體過于渺小導致留白過多時，需要放大主體和調整其它元素來去白。

如下圖：

圖1：中心主體太小上下空洞 圖2：下方去白，上方空洞 圖3：上下去白，畫面平穩

舉例：

↑中心元素過小，周邊過于空曠

↑中心整體放大，主體上下留白過多被彌補，但主體與文案間的留白關系不是很舒服

↑拉開文案的行距，使主體與整體文案的空間感相近，彌補文案上下的留白過剩

結合留白，我再針對上面提到的不同情況應用不用版式舉個簡單的例子，當客戶給我的方案是字少圖少和字少圖多的情況下，中心型、中軸型、滿版型、骨骼型、分割型等多種方式都可以解決當前問題的。比如我們用一下文字和圖片做一張圖：

圖1：中心型 圖2：中軸型 圖3：滿版型

↑ 骨骼型

↑ 分割型

有時候我們也會遇到一張圖片中要放很多小圖片的情況，而且很多小圖片的素材尺寸都是不同的，這里也是很多人經常犯錯的地方，大部分人都是隨意擺放并配上文字，其實我們可以把每個圖片都做在同等大小的形狀中顯示，既規整又大方，如圖：

而當素材不太美觀和即便排列整齊，整體圖片也還是有些擁擠時，我們可以化繁為簡，去掉小圖展示：

綜上內容，版式沒有絕對的好壞，只有合適不合適；這期我們講的主要還是圍繞簡潔的版式，下期我們隊復雜的版式再做更深入的理解。

再次感謝大家的支持，So Thanks~

歡迎關注微信公眾號：《三根設計骨》

「電商設計系列好文」

1. 《新人手冊！聊聊關于電商設計的那些事兒》
2. 《前輩經驗！聊聊新人設計師最容易遇到的12個問題》
3. 《不怕沒靈感了！SALE 招牌的9種排版設計方法歸納（附案例）》
4. 《如何辨別一個BANNER的好壞？（附案例）》
5. 《電商干貨！BANNER圖設計之商品圖該怎么玩（上集）》
6. 《電商干貨！BANNER圖設計之商品圖該怎么玩（下集）》
7. 《感覺技不如人？聊聊設計師該如何正確認知自己的價值》
8. 《超長干貨！平臺電商設計師vs店鋪電商設計師哪個好？》
9. 《職場進階術！哪些性格特質有助于設計師的成長和提升？》
10. 《設計師項目做到一半總是想要放棄怎么辦？（附問答合集）》
11. 《超實用！從人性的角度揭露電商BANNER圖設計背后的秘密》

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

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