聲明：部分圖片來自互聯網​

banner是我們設計師的家常便飯，不知道平日裡大家在設計banner的時候，有沒有很注重文案的設計？還是低着頭一味的去烘托整個畫面氛圍，完全不管字體？隻求畫面漂亮、有空間感？擡頭一看文案怎麼擺都别扭，最後急了，直接轉行居中就OK了？說到這裡可能有人會對号入座，的确! 這是很多新人都會走的彎路，我們都知道一副完整的banner作品，文案在裡面起着舉足輕重的地位，是非常重要的！那今天我們和大家一起盤點一下文字對banner設計的基本準則，文末附有一些基礎文案排版原型骨骼圖~

• Banner常見文字排版類型
• Banner設計中文字注意法則
• 文字排版原型參考
• 優秀banner鑒賞

文字橫豎排版

橫豎排版的方式，其實是很常見的文字排版方式，這都是大家比較容易使用的排版方式，給人一種簡單直接的感覺。基本上在排版，保證文字的對齊，效果就很比較好。

文字線框排版

其實很多時候，大家排版文字，直接利用線框來進行排版，比如說利用線框将文字框起來，在文字中加上線框的形狀，讓标題看上去更加的豐富好看一些。要注意線框不要随意的添加，注意它的粗細和長短。

文字錯位排版

文字的排版，其實也可以呈現出一種錯位的方式，因為文字錯位效果，也能夠呈現出一種動感和節奏感，在視覺上會具有很特殊的吸引力。而且文字的錯位也很有創意，保持文字的連貫性，相信會很有吸引力。

文字加圖形排版

文字加上圖形，如果能夠巧妙的組合，所形成的效果一定會很有創意。因為圖片文字結合，會産生圖文并茂的效果，讓畫面看上去更具有趣味。隻是要形成這樣的效果并不容易，能夠将文字和圖片結合起來，需要大家做好文字和圖片的設計，可能對設計的能力有較高的要求。

文字的排列要遵循規律

平時我們在閱讀文字的順序都是從上到下、自左而右的。所以文案的排版應盡量遵從這一規則，除特殊版式之外（如中國風他就是自上而下，從右到左的豎型排版），盡可能減少參差不齊或右對齊排列，大部分情況下，使用左對齊或居中對齊是最為合适的選擇。

左對齊、居中對齊、右對齊、參差不齊

不管是應用了文字的特效、文字的前後層次還是文字的傾斜，都是遵循左對齊原則。

而當沿着某一闆塊或素材的左側排列文字的時候，我們使用右對齊會比左對齊和居中對齊，要有更好的表達效果，但一定要記住這是特例

明确主、副标題及描述

文字排版應用的核心是對比，而對誰做對比，怎麼對比，為什麼要對比是很多設計師都做不好的點。

主标題大、粗、醒目。副标題與主标題用同一字體，略大，略粗，較為規整。描述——常伴有形搭配來劃出分隔。利于閱讀，較細、較小（有些文案沒有描述或副标題時，可彼此借鑒綜合使用）另外在字體的選擇上盡量不要使用識别度較低，特性異性的字體。

主标題的應用

一般情況下，我們都是以主題的長度為一個文字排版的左右寬幅，而如果主标題過長會導緻我們的視覺點被拉長，文字如果都以主标題為基準去排列會顯的臃腫，不按主标題去排列，主标題和其它文字之間會有很明顯的斷檔，所以一般情況下，檔主标題超過8個字的時候我們可以選擇性地分段。

很多朋友願意文字排版的開頭使用你整體文案中最大或最粗的文字，其實有時候這種版式會讓畫面頭重腳輕，有很強的壓迫感，文字排版的摸索階段，還是多以副标題或縮小的主标題作為開頭比較合理。

主标題字數略少時候可以單獨以主标題的每一個字作為一個圖層樣式，通過大小變化、粗細變化、旋轉、疊加、排列等方式靈活運用主标題，必要時可附帶特效。

行距與間距

行距與間距的把握是文字排版中最為點睛的一環，如果控制得好，整個文案都會很和諧，如果控制不好即便上邊提到的幾個技巧都做的完善也會感覺整體非常不舒服。距離的把空中我們一定要慎重考慮承重是否合理，直白的說你就是下方的文案能否撐得住上方的文案，而這個撐的含義就是通過行距與間距去展現的。

上圖為例，我們說說行距，上圖的文字整體行距是比較保守的同距型，這種方式比較随意的擺放合理一些，但是整個文案部分看起來較為死闆呆滞。

我們可以拉開文案間距的行距，較為合理的承重行距的上窄下寬，寬度可以幫助你去支持畫面，但是注意，這個時候我們要把同一範圍的文案看做一個整體，當做一個分塊，但不要讓這種整體在一個畫面裡出來太多，闆塊分的太多文案就會散亂，視覺也不易局集中，一般情況下兩塊即可。不過這個整體中的文案之間可以做一些小浮動性的行距的處理。

紅框部分為一個整體，注意上面提到過，就算是整體，其中的行距也可以租歐一些小的浮動變化，尤其是文案較多的時候不要讓你的文字看着死闆。然後整個文案和明确的分為兩部分，紅色一部分，點擊領取一部分，通過兩個部分的行距拉大來增加承重，但這種行距的拉大不要做的太過，盡量讓他們集中在一個視野的範圍。

間距一般來說使用默認距離是不會出現太大的問題的，足夠應付很多場合，但是有的時候我們需要通過間距拉伸來達到某些目的，比如下圖中“精品台釣竿”與整體文案相比較文字部分相對薄弱，我們就可以使用文字間距拉伸的方式讓它又更好的表現效果，不過我們要注意文字間距的人為拉伸盡量不要讓拉開的距離超過當前一個字體大小的一半，那樣文字就會散亂。

盡量不要超過單一文字體積的二分之一

如果你非要做大于一個體積的間距，就需要增加一些裝飾效果來彌補空白過大所帶來的視覺問題。

再延伸到一個問題，很多朋友都很喜歡用英文做些裝飾效果或者翻譯，這種情況我們經理使用大寫字母而不要使用小寫，小寫文字有高有低，一行下去很不規整，凹凸不平，很容易幹擾視覺，而大寫高度相同就會減少這種視覺上的沖突。

從幹擾的角度去出發，文字中的标點符号也是比較影響視覺的，可以選擇性去掉，我們可以使用空格或一些裝飾符号去代替生硬的标點

下面是為大家整理了一些Banner設計中的文案排版原型參考，當然說的意思便是我們在平時臨摹一些作品的時候可以借此方法，抛開表層文字，看下他是在什麼形狀裡面進行排版的，這種隻有看的多才能積累更多的想法，到了真正去用的時候才能遊刃有餘，胸有成竹，要知道羅馬非一日建成！

平日逛設計網站時看到的一些不錯的banner就收集起來了，今天放這裡給大家參考學習，當然看的時候不要看帥哥美女，請抛開這些表層的東西，看banner裡面的主副标穿插、文字布局排版、裝飾英文該怎麼放、次要信息樣式穿插等等這些，所以千萬别被帥哥美女帶跑題了。最後，希望大家看完有所收獲，每日可以進步一丢丢，如果喜歡此類型的banner形式話不妨文末留言反饋給我，讓我知道你喜歡，下次就知道分享更多的優秀作品。你要是喜歡你就說嘛，為什麼不說呢，你明明喜歡為什麼不早說呢？

往期優質Banner文章推薦

Banner 基礎排版形式

UI設計進階幹貨 - Banner

什麼樣的Banner才能帶來高流量？

Banner設計中對比都有哪些？

為什麼我做的banner那麼醜？

gzh關鍵詞回複：

VIP、OC、神器、可視化、進群商用字體、UI學習 、面試技巧、Banner、樣機下載、LOGO、C4D教程、轉手繪、插畫、名片、包裝、字體下載、2.5D、設計規範，創意合成，作品集模闆、商務合作、轉載、軟件下載請回複相對應縮寫（例如：PS）