前段時間一直在做運營類設計，banner 在其中佔了較大比重，為此就想寫一篇階段性總結。其中部分觀點參考了相關視頻教程和文章，設計新手一枚，如有不足還請大家海涵。
banner 由以下五部分組成：版式，字體，顏色，背景，點綴。我就針對這幾點做些具體分析。
一、關於版式
大家發現沒有，大體上 banner 版式可分為兩種：圖文左右排版、文字居中。
1. 圖文左右排版
當 banner 中需要包含具體的素材，如某位大咖，某件產品時，一般會選擇左右排版。並且圖文比例約為6：4（接近0.618的黃金比例）。
關於為何文字部分要大於圖片部分，我做了如下分析：如果 banner 中只有某位大咖、某件產品，而沒有文字襯托，用戶就不會知道 banner 想表達的什麼。
如下圖，banner 中只有一位拉大提琴的中年外國男子，人們會猜測這男子的個人專輯發佈了？他是誰？所以，通過圖片用戶只能對信息有個大致瞭解。
相反，如果把 banner 中圖片部分遮去，而只保留文字部分。人們能夠獲取的關鍵詞有：5首電影歌曲、回憶過往的。因此即使沒有配圖，文字也能將信息精準地帶給用戶，文字所佔比例應當比圖片多些。這也就解釋了為何大部分左右排版的 banner 都是文字佔比大於圖片。
banner 中有些文字放左邊，有些放右邊，這有什麼區別呢？
下圖中第一個 banner 是關於歐美電影歌曲的，右側可佈局拉琴的男子，也可配電影片段，還可放正在播音的留聲機。第二張 banner 同樣如此。
下面兩圖均是圖左字右的 banner，第一張《首席醫官》，特指這本書。
第二章奧運冠軍陳一冰求婚——除了他沒別人了。
說了這麼多，總結出圖右字左和圖左字右的區別了嗎？圖片在右，配圖內容比較模糊；圖片在左，配圖內容比較清晰。由於人們習慣的閱讀順序是從左到右，左邊放什麼意味著用戶會先看到什麼。當圖片信息清晰時圖片放左，先用特定配圖吸引用戶目光，再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放在左邊，用戶得看到右邊的文字部分才能獲得 banner 想傳遞的內容，這會導致用戶接收信息時間增加。
2. 文字居中
在工作中我沒怎麼接觸過文字居中的排版方式，因此很抱歉沒法做太多的剖析。印象中電商比較喜歡此類排版，也許是文字放在正中的位子，底下可以放許多產品？
版式中大小標題的比例：
發現沒？大小標題比例約為2：1。其實這和一級標題，二級標題是同個道理，我們在設計 banner 時總希望用戶能把 banner 上的文字看全，但又不希望大小標題混在一起主次不清，因此在排版合理，用戶能看清字的綜合考慮下，大小標題比例約為2：1。（其實小標題太小運營們也會懟的）
二、關於字體
banner 中常用的字體有三種：襯線體（serif）、非襯線體（sans-serif）、書法體（cursive）。
都說字體有各自的性格，襯線體筆畫有粗細之分，它模仿的是中國古代字體和古代碑文上的字體，因此襯線體能給人古典，文藝的感覺，適合用於文藝氣息或與女子的相關設計。
非襯線體筆畫簡潔，筆畫較粗，體現現代，簡約的特性，適合用於蒼勁有力，與男子相關的設計。
書法體源自中國古代，能體現中國文化和揮灑墨水的豪氣，適用於文藝主題和金戈鐵馬般的豪邁主題。
注意：商用字體需要注意版權，這點很重要。
三、關於顏色
在生活中，色彩心理學讓人們對顏色的認知有很大的影響。
黑色：黑色是一種代表品質、權威、穩重、時尚的色彩，同時也含有冷漠、悲傷、防禦的消極情感。
白色：傳遞一種簡單、純真、高雅、精緻、信任、開放、乾淨、暢快、樸素的情感。
灰色：代表睿智、老實、執著、嚴肅、壓抑的色彩。
紅色：傳遞喜慶、自信、鬥志、權威、性感的情感。
綠色：是自然界中最常見的顏色，代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。
藍色：是三原色中的一種，代表永恆、靈性、清新、自由、放鬆、舒適、寧靜、商務。
紫色：是一種代表優雅、浪漫、高貴、時尚、神秘、夢幻、靈性、創造性的顏色。
黃色：代表陽光、青春、活力、時尚、尊貴、年輕輕快、輝煌、希望的顏色。
因此在設計中選擇主色調也要遵從如上。
例如活潑年輕的內容可選擇純度較高的藍綠色、綠色等作為主色調。
文藝類內容則適合飽和度不高，偏向白色這類能讓人平靜的色彩。
關於顏色的搭配，我一般會在花瓣上找些主題相近的 banner 作參考。
此外推薦幾個配色網站：
- https://coolors.co/browser/latest/1
- https://color.adobe.com
- https://uigradients.com
四、關於點綴
大約有3種。橢圓點綴，圓角矩形點綴，實物點綴。圓形圓角矩形點綴可適當加些漸變和陰影。
為了不讓實物點綴太過搶眼，可以適當做些弱化，比如降低透明度或是做些模糊處理。
五、關於背景
大約有3種，純色背景，實物背景，材質背景。根據畫面的需要可以選擇合適的底圖。
看了這麼多手癢癢了嗎？此時此刻，打開 ps 做個 banner 練練手唄。
閱讀更多 路漫UED 的文章
