@謝思靖?：什么是真正好的排版，我覺得起碼要做到清晰易讀、信息突出并且觀感上舒服好看，在這個基礎(chǔ)上有突出的設(shè)計(jì)感、形式感，就是正真好的排版。怎么做？3個部分決定排版的步驟和方法，咱們分步來說。

文章開始之前，針對一些板式設(shè)計(jì)新手，我們也推薦你可以補(bǔ)充一下基礎(chǔ)知識，
看看膾炙人口的《版式設(shè)計(jì)原理與應(yīng)用》，有PDF下載喲。

空間是文字之間、圖文之間的排列關(guān)系，是排版的第一步和基礎(chǔ)，一張圖的空間關(guān)系即構(gòu)圖自一開始就影響到整體的走向和最終的成型，所以在設(shè)計(jì)之初，一定得經(jīng)過深思慮，深入了解文字的多少、圖形的類型和設(shè)計(jì)要求和感覺選擇對應(yīng)的構(gòu)圖和圖文結(jié)構(gòu)關(guān)系。大致包括但不限于以下幾類：

垂直水平構(gòu)圖

排版左中右對齊方式都有，比較隨意直觀，可靈活操作。

斜線構(gòu)圖

常用于促銷類、居中排布、大多數(shù)會有圖形輔助以和底部斜線構(gòu)圖明確區(qū)分并突出文本，或者部分也有跟隨式斜著排版。

三角構(gòu)圖

一般居中排版，文字排布大小分明，結(jié)構(gòu)感強(qiáng)，常以圖形線條輔助排版。

對角線構(gòu)圖

常用于服裝食品等類型、一般左或右對齊，文字選擇簡單直觀粗細(xì)分明，常有線條或小圖形輔助。

輻射式構(gòu)圖

和斜線構(gòu)圖很像，促銷類、居中排布、大多會有圖形輔助以和底部斜線構(gòu)圖明確區(qū)分并突出文本。

框架式構(gòu)圖

框架構(gòu)圖包括圖形被框，文本被框或者圖文都被框，文本被框是圖形輔助排版的一種方式，之后詳解。

我們可以通過變化對齊方式、大小、粗細(xì)、角度、字體、顏色、錯落方式等來說明各種排版變化方式帶來的不同結(jié)果和感覺

對齊、大小、粗細(xì)對比是排版最基本的三大要素，是之后所有排版方式的基礎(chǔ)

①起碼有一邊對齊，才會使版式整潔易讀，層次清晰

②大小和粗細(xì)的對比做到了主次分明。banner設(shè)計(jì)的目的，其實(shí)就是最大化的呈現(xiàn)給用戶活動的信息，要讓最重要的，最有利的信息一瞬間就傳遞給們，通過對比即可使信息的傳遞層次清晰。

這是倆反例：

角度

角度不限于示例這種。對排版進(jìn)行角度變化，會增加失衡和速度感。是促銷類的banner常用的方式往往對應(yīng)斜構(gòu)圖的背景，增加整體氣氛。也有增加透視類的角度變化。

字體

第一個：清秀的方正書意宋，第二了：霸氣的蒙納超剛黑（只為示意請勿轉(zhuǎn)載用于商用），稍微變換板式，出來了兩種不同的感覺，雖然都是買買買，但是第一個明顯是清新委婉的，第二種擺明了就是要放折扣大招的樣子。字體對排版的重要性不言而喻。

顏色

還是上面的示意，顏色的變化一是根據(jù)整個設(shè)計(jì)選擇顏色，二是類似上圖對需要突出的信息進(jìn)行顏色的突出，是最常用易用的方式。

錯落

一般萌系、食品類和扁平化等等的banner上，都需要這類隨意輕快、錯落有序的排版。設(shè)計(jì)過程中，適當(dāng)對字進(jìn)行大小變化和旋轉(zhuǎn)，并且選擇一些卡通化、手寫體的字體，會有不錯的效果。還有另一類錯落的板式也比較常見，如下圖所示，宋體字、毛筆字排版非常易用。

形式簡單可理解為對排版的輔助，他們不搶眼，但是加入后又能使版式不單板，善用可以使整個排版高大上，也能使邏輯結(jié)構(gòu)更加清晰。

?圖形輔助

圖形輔助一般用基礎(chǔ)的方圓 三角等或者有特殊含義的圖形（天貓、阿里旺旺剪影）為依托進(jìn)行文字排版，可起到突出文本、增強(qiáng)對比、增加結(jié)構(gòu)感設(shè)計(jì)感的作用。

線條輔助

以線條分割進(jìn)行區(qū)塊劃分增加對比，也可用線條和圖形進(jìn)行串聯(lián)，亦或聚焦視線，簡潔有力，近期大量用于時尚簡潔類的設(shè)計(jì)中。

圖文結(jié)合

用圖形結(jié)合文字和視覺，達(dá)到整體統(tǒng)一。

排版的重要性不言而喻，通過上面的3大步介紹，應(yīng)該能對電商banner的排版有個初步直觀的認(rèn)識，相信通過學(xué)習(xí)和大量練習(xí)，每個人都能掌握其中的妙。方法遠(yuǎn)不止此，而創(chuàng)意應(yīng)更遠(yuǎn)。寫的不好，有問題或者建議請留言說明，咱們多多討論。

文章最后，你以為優(yōu)設(shè)的干貨就這么結(jié)束了么？
萬萬木有，看完這篇后，相信你言猶未盡，所以我們也推薦你另外幾篇進(jìn)階文章，一定讓你受益匪淺。
《揭秘雙十一！那些上億人都在看的BANNER都是怎么設(shè)計(jì)出來的？》
《提高審美的前提！如何辨別一個BANNER的好壞？（附案例）》
《設(shè)計(jì)師版式寶典！從零開始教你掌握網(wǎng)格系統(tǒng)》

另外，歡迎關(guān)注作者的微信號：

【優(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í)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量130萬的人氣微博@優(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