在我們公司有人覺得做個 Banner 放2張圖，排幾個字的事，一點技術含量都沒有，像其他門戶 Banner 基本上都是編輯們自己做的。我覺得這麼說是不對的，其實一個 Banner 可以研究的東西還是很多的，而且做一個 Banner 是不難，難的是在短時間內做一個出彩的 Banner。如何在排除技術的前提下，如何通過一些經驗的思考，讓 Banner 達到想要的效果，下面是最近做 Banner 練習的小經驗之談，僅供參考。
Banner 由以下四部分組成：版式，字體，配色，點綴，我就針對這幾點做些具體分析。
關於版式
在明確主題以及內容之後，我們就要根據主題和內容來設計版式，版式就是畫面的整體佈局，好的版式能夠清楚的表達核心思路，正確的展示想要給用戶看的東西；大體上排版一般分為兩種：圖文左右排版和文字居中排版。
1、圖文左右排版
我們一般設計 Banner 的時候都會使用圖文左右排版，那麼為什麼會大部分都是使用左右排版呢，這是運用到一個方法論，即尼爾森F視覺模型。
因為我們的視覺瀏覽習慣都是從左往右還有從上到下的，所以我們在做 Banner 的時候會經常性的選擇使用左右排版，那麼使用左圖右文還是左文右圖也是需要根據主題和內容來決定的。
當配圖示意比較模糊的時候，我們使用左文字右圖的形式，強調文字的吸引力，有一定指導作用。
圖片來自花瓣
這裡文字能夠精準地將信息帶給用戶，文字所佔比例比圖片多些，這也解釋了為何大部分左文右圖排版的 Banner 都是文字佔比大於圖片。
當配圖示意比較明確，同時圖片能夠強調吸引的時候，我們採用左圖右文字，如下圖：
圖片來自花瓣
使用左圖右文字，也是因為圖片的內容更吸引用戶多一些，所以對圖像的品質要求更高，精緻感品質感也有要求，這種類型大多使用在家居，護膚等產品上。
小結：圖文左右排版，以分割排版的方式構圖，畫面有明確的獨立性和引導性，這種方式留白更多，較好的視覺引導和方向使信息更明確，更顯品質感。
2、文字居中
文字居中的排版多用於電商促銷、公眾號的文章封面等，大多是突出文字的內容，比如促銷的折扣，文章的主題等，其餘的產品或者圖片都是為了搭配文字做出的氣氛烘托，吸引用戶點擊。
圖片來自花瓣
使用這種方式讓畫面展示規整穩定、醒目大方，視覺更聚焦，信息更集中，在突出主體的同時能使整體畫面具有一定的衝擊力。
小結：文字居中佈局對於實物（人，商品，創造形象）要求並不高，文字信息本身的處理要求就會高一點。在確認好主題和內容後，我們根據產品所要突出的重點來決定我們的版式，是要突出文字還是突出產品，突出產品即使用左圖右文字，這種版式對產品的圖片要求比較高；想要突出文字，則可以選擇左文字右圖或者文字居中排版，但都對文字的設計要求比較高。 不確定用什麼版式，我們可以在設計的時候不妨多做幾個版本，大膽嘗試。
關於文字
文案內容要高效的傳遞信息，吸引用戶注意力，讓人一下子看到主題，文案中文字的排版要區分主次，把控好信息層級；使用合適的字體，明確字體適用的場合，同一畫面中字體的使用盡量不要超過三種，過多會顯得雜亂，要使用識別度高的字體。
而 Banner 中常用的字體有三種：襯線體、非襯線體和書法體。
1、襯線體
襯線體筆畫有粗細之分，它模仿的是中國古代字體和古代碑文上的字體，簡單且易變形，襯線體能給人古典，經典，文藝的感覺，適合用於文藝氣息的家居用品或文娛類的相關宣傳設計上。
圖片來自花瓣
以上圖為例：文案內容中的“全面淪陷”，讓人一目瞭然；下面一行的內容，更加詳細解釋了上面的主標題。畫面顏色凸顯主題，所以字體變形，使用白色，反而在畫面中更加突出。襯線字體一般推薦使用方正經黑簡體、方正俊黑、方正蘭亭顯黑簡體、華文細黑等，使用的時候注意版權問題。
2、非襯線體
非襯線體較簡潔，筆畫較粗，很容易產生視覺重點，非襯線字體體現現代、簡約的特性，適合用於蒼勁有力、促銷類的相關設計，吸引用戶注意力，提高Banner點擊率。
圖片來自花瓣
以上圖為例：主副標題區分清楚，在字體筆畫變形上，結合科技感的氣氛，增加了光的流動感，讓標題不會過於死板。非襯線字體常用的有：漢儀潤圓、方正綜藝簡體、造字工房勁黑、造字工坊版黑、方正蘭亭粗黑、冬青黑體、思源黑體等。
3、書法體
書法體源自中國古代，能體現中國文化和揮灑墨水的豪氣，適用於傳統、中國風、意境的文藝主題和金戈鐵馬般的豪邁主題。
圖片來自花瓣
上圖為例：中秋節是中國的傳統文化，使用書法體能夠將整體畫面營造的中國古典風更好的融合起來，書法體推薦李旭科書法、漢儀尚巍手書、葉根友行書繁體等字體 。
小結：不管是使用哪種類型的字體，在製作 Banner 時，我們都需要清楚的知道整張 Banner 所要表達的情緒，從而在字體的設計上也能夠表現出情緒，這樣才能夠更好地融合進 Banner ，進而更好的表達出你想要的主題。
關於配色
在整個風格中色彩設定出主色調、輔色調。主色調不難理解是在整個畫面中色彩佔用最多的顏色，作為輔色調也是在整個畫面所點綴對比的一個顏色，就好比一個電影劇中一定是有主角和配角。主角的戲份就多一些。配角只是作為整個劇中的點綴輔助而已。
在設計色彩設定中也要根據行業屬性配比相關顏色，比如:
黃色代表比較有食慾的顏色、活潑、青春，一般用在食物或者用戶較年輕一點的產品上。
圖片來自花瓣
黑色代表高端、科技，一般用在汽車、智能科技產品和作品及消息發佈上。
圖片來自花瓣
白：代表簡約，清新，素雅，一般是用在飾品、家居、化妝品等，在做整個主視覺畫面的時候第一時間與顏色關聯。
圖片來自網易嚴選
小結：每一種顏色代表的含義都不同，我們要根據設定的主題和文案的內容，包括品牌色來決定使用哪種顏色最為合適，烘托出想要表達的情緒和氛圍，使整體顏色及風格和諧統一，抓住用戶注意力，吸引用戶點擊，提高轉化率。
關於點綴
點綴元素的存在主要是為了豐富畫面，使畫面看起來不單調並且更加協調，從運營的角度上來說，也是為了增加畫面的熱鬧活躍氛圍，給用戶愉悅或刺激感，增加消費者的購買慾望。點綴元素存在的形式是多種多樣的，我們可以基本分為三種：基礎形狀點綴、抽象形狀點綴、賣點提煉點綴。
1、基礎形狀點綴
這種類型的點綴操作起來難度不大，多使用矢量形狀利用漸變色來豐富畫面，建議初次嘗試設計師多嘗試，多注意細節和練習，就能夠比較好的使用起來，這種類型的點綴多用戶電商促銷設計，目的是為了飽滿視覺，豐滿畫面，擁有較強的視覺衝擊力，能夠吸引用戶注意力，提高 Banner 點擊率。
圖片來自花瓣
2、抽象形狀點綴
這種點綴的注意細節是一般點綴都會比背景深一點，同時整體採用微漸變，適當的隱去一些邊角，能夠更好的融合進背景裡，運用水波紋和小三角等，能夠使 Banner 更年輕，活潑，大多使用在產品定位較年輕的產品或話題上，不適合使用在大品牌上。
圖片來自花瓣
3、賣點提煉點綴：標籤
這種點綴比較簡單，就是把產品的賣點提煉出來，使用背景的對比色或者鄰近色將賣點整個突顯出來，此類點綴多使用在年輕女性為主導用戶的產品 Banner 中，比如衣服，首飾、護膚品等，難度係數不大，難點在於對色彩及賣點提煉的把控。
圖片來自花瓣
小結：點綴存在的意義就是在於豐富畫面，使 Banner 整體不單調，更具有趣味性，也能顧更好地烘托主題營造氛圍，有規律的點綴也能讓 Banner 更具有節奏感，視覺衝擊力更強。
總結
我們從版式、文字、配色及點綴等四個方面來說明如何製作出優秀的 Banner。
1、版式分為圖文左右排版和文字居中排版，根據要凸顯的主題來決定用哪種排版；
2、文字有襯線體、非襯線體和書法體三種，每種都有不同的風格，襯線體偏古典和文藝，適用於宣傳，非襯線體蒼勁有力適用於促銷，書法體傳統豪邁，適用於中國風；
3、配色需要根據產品選擇配色，每種顏色都有自己的情緒，抓住想要表達的情緒，選好配色；
4、點綴分為基礎形狀、抽象形狀和賣點提煉，每種點綴都是豐富畫面，讓整體看起來更加和諧，不同的點綴達到的效果也不同，但始終圍繞主旨就是所有的設計和創意都是圍繞著吸引用戶來進行的，最後我們呈現出來的結果，一定要和諧統一、對比突出、畫面和諧、節奏韻律，才能讓我們的banner看起來更富有品質感。
閱讀更多 PSUI設計教程 的文章
