雙11的黑眼圈還在，雙12的banner設計任務已經來了……

本文轉載自優秀網頁設計 ID：youshege

雙11剛剛過去，雙12馬上又來了。電商品牌的設計師們剛剛長出的新頭髮又快掉光了：Banner設計沒靈感，不知道如何進行文字排版和配色，才能讓店鋪和產品更有吸引力……

以下這9種文本布局方法和9個實用的配色技巧，可以讓Banner中的文本標題快速具有形式感和亮點，讓你的Banner設計脫穎而出。

1、分欄式布局+剪切蒙板

分欄式的布局本身就可以創造疏密對比，色彩對比，如果文本置於中央橫跨兩邊，可以部分藉助剪切蒙板，來達到構造對比，強化形式感的目的。

作者：Nastya Morneva

作者：Maxim Nilov

作者：Stephen Perez

2、沿著圖片背景元素走向排布

如果背景使用的是類似風景一類的圖片，文本可以沿著其中特定的元素走勢來排布，強化融入度和形式感。注意整體視覺保持協調優雅。

作者：Outcrowd

3、用不同色彩穿插搭配

這是最簡單的處理方法之一，標題中不同的辭彙使用不同的色彩，用來凸顯一部分，強化視覺。注意要和整體配色協調一致，注意不要用太多種色彩。

作者：Outcrowd

4、用類似風格的字體搭配組合

相似但是不同的字體可以搭配在一起，但是要注意，這種穿插搭配要結合本身的內容語義，強調突出關鍵詞，營造和而不同的美感。

作者：Vladimir Kudinov

5、使用裝飾性輔助元素

下劃線、引號甚至一些數學符號擁有更強的幾何特徵，和文本本身有差異，構成對比，還能強化視覺感和形式感，如果搭配不同的色彩就更妙了。

作者：Miro / DrawingArt

作者：Robert Berki

作者：Lapa

6、把圖片元素作為文本一部分

讓人物角色或者物品成為標題文本中的一個部分，借用類似的形體來替代文字，以達到信息傳達的目的。

作者：Viacheslav Olianishyn

7、用純鏤空效果融入背景

純粹的鏤空文本更容易融入背景，讓背景中的圖片元素能夠更多地透出來，而文本本身的融入感和形式感也得到了加強。

作者：Viacheslav Olianishyn

來源：One Page Love

8、同一字體虛實結合營造對比

實底的文本和鏤空的文本相互搭配，讓標題內的字體相互之間構成對比，相映成趣，構建出虛實結合的美感。

作者：Gil

來源：Behance

9、字體和圖片元素穿插使用

文本中的字體和背景中的視覺主體相互之間穿插，在縱深上創造前後關係，讓文本彷彿是實體，而不僅僅是信息載體。

作者：Daniel Snows

來源：Dribbble

10、注意冷暖色系

在整體的配色設計中，使用暖色系色相，會給人帶來溫暖的感覺；用統一冷色系的話，會感覺寒冷。

來源：Behance

來源：QQ音樂

來源：Dribbble

11、不同純度高低的色彩搭配

暖色系加上純度高的色彩，會給人以刺激；冷色系色彩加上純度低的色彩，會讓人感到平靜。

12、不同明度高低的色彩搭配

以明度高的色彩為主，會顯得輕快；以明度低的色彩為主，會顯得莊重。

來源：Pinterest

來源：Dribbble

13、注意對比和統一

使用對比的色相和明度會顯得活潑；使用統一類似的色彩則感到穩健。

來源：Dribbble

14、確定色相數量

色相的數目多會顯得熱鬧；色相數目少會顯得冷清。

來源：Behance

來源：Pinterest

15、注意畫面明暗位置

在畫面中使用明色和暗色，若明色在上、暗色在下，會顯得安定；反之，若暗色在上、明色在下，則會顯得動感。

來源：Dribbble

16、色調強弱對比突出重點

使用比其他色調更強烈的色彩能夠突出重點。

來源：Pinterest

17、色彩面積對比突出重點

將色彩用於極小的面積上時，會更加突出重點。

作者：Haeun Pyo

18、色彩的變化和重複產生節奏感

將色相、明暗、強弱等變化進行反覆設置，可以產生節奏感。

來源：Behance

- END -

向原作者表示敬意

圖片版權歸屬原作者，謝絕商用

看完後別忘記分享哦，分享是一種美德，懂得分享的人，生活會越來越美好......

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！