編者按：初入職場的設計師，可能每天都要做大量banner，工作多了，創意跟不上怎么辦？其實創作banner也有規律可循，網易的同學就用大量案例 + 多個角度分享了他的經驗，是一篇不可多得的經典文章，趕緊來學習一下。

寫在前面的話

有人覺得做個banner放2張圖，排幾個字的事，一點技術含量都沒有，像其他門戶banner基本上都是編輯們自己做的。我覺得這么說是不對的，其實一個banner可以研究的東西還是很多的，而且做一個banner是不難，難得是在短時間內做一個出彩的banner。門戶的專題一般是編輯套模板拼成的，比較重要的專題，banner部分是由設計師來完成，一個banner的品質上去了，整個專題的質量感就上來了，所以這部分交給設計師來做也是重視品質的表現，這個毋庸置疑。但banner畢竟不比大型項目，從設計成本上說不可能給太多的時間給設計師，于是乎，設計師有時候是靠經驗積累，有時候妙手偶得，質量也是時好時壞，更害怕的是當沒有經驗沒頭緒沒有心情時，胸中無物，不知道如何下手，于是越急越亂，越亂越急，最后匆匆了事，這種狀態下估計也出不了好的東西。在排除技術手段的前提下，如何通過一些經驗的思考，讓banner達到通情達意效果，也是我下面要說的，個人經驗之談，供大家參考。

一 ：思考專題定位

顧及需求方的頻道定位

因為包含內容不同，門戶網站各個頻道有著不同的風格，所以設計師們做設計的時候也要考慮到如體育頻道的運動感，財經頻道的國際和高端等。

圖1/女人頻道的定位是知性 ，所以這個banner設計風格也是很貼切的。/banner 贊助? 夏小萌

圖2/歷史頻道的專題，做出厚重滄桑的歷史感還是很切題的。/banner 贊助? 10

顧及此專題的定位

專題的定位有時候和頻道的定位偶爾是有沖突的，如女人頻道一貫的知性理性的大風格下，有時候會來一些可愛小女人，有時候有做溫馨浪漫，在這種有風格沖突的情況下，我們還是以貼合專題的定位為主，當然也盡量做到不能背離頻道風格太遠。

圖3/女人頻道下的一個懷舊感的專題，所以畫面做出了一些懷舊的感覺。/banner 贊助? 璇

圖4/數碼頻道的一個和某手機贊助商的活動，所以banner也表露出一定的商業感。

二：明白文字在Banner中占主導地位

從構成上講，一個banner分為2個部分，一為文字，二為輔助圖。輔助圖雖然占據大多數的面積，但是不加以文字的說明，很難讓用戶知道這個banner要說明什么。要讀一個人的喜怒哀樂，只要讀其五官即可。在一個banner里面，標題文字起著五官一樣的作用，所以個人覺得文字才是整個banner的主角。所以對于文字的處理，顯得尤為重要，在文字處理時有幾個小技巧，與大家分享。

圖5/banner文字闡述專題主題，是絕對的主角。/banner 贊助? 淑華

分清主標和副標，從主次上來說，主標為主，字體要大顏色要醒目。副標起到從內容上和形式上都輔助主標的作用。一個好的banner標題文字處理都比較飽滿，比較集中。

圖6/對主標題的斷詞比較巧妙，文字集中，主次明顯，且文字與輔助圖案相互呼應，統一感很好。/banner 贊助? 淑華

如果主標太長，需求方不舍得刪文字的情況下，對主標中重要關鍵字進行權重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X屆’這種信息量不大的詞。

圖7/長標題的時候，如果把‘征集各種端午風俗’排成一行，就會顯得沒有主次，也很有吸引力。我這里把‘端午’這個最重要的信息提出來，讓用戶很容易進入環境，然后讓他們繼續了解更多的信息。這里還要說一個小技巧，我這里‘征集各種’、‘端午’、‘風俗’這三個詞雖然分別用了3種字體，但還是能讀出‘征集各種端午風俗’這是一斷話，因為同一個紅色起到了很大的作用。

如果需求方整體文字太短，畫面太空，可以用一些加入一些輔助信息豐富畫面。如加點英文，域名，頻道名等。

圖8/這個banner附加了一些英文來豐富畫面，讓畫面充滿豐富的同時，充滿生氣。/banner 贊助? LV

三：構建輔助視覺

一個banner最主要的是標題，但輔助視覺起著烘托標題文字的作用，然而這也是最有難度的一個活，設計師的個人風格和變現力在這里能夠淋漓表現。文字和輔助視覺的關系，我這里列舉了3個常見搭配方式，這幾種方式搭配分別有不同的效果，從而產生不同感覺。

3種文字和輔助視覺常見的搭配方式：

1，文字+背景陪襯兩段式。特點突出文字，視覺集中文字，報道感強。

圖9/banner 贊助 胡子

圖10

2，?? 文字+主體物的兩段式，文字圖案相輔相成，起到文字言事圖案幫助理解的效果。這樣的banner適合做介紹類或者產品類。

圖11/banner 贊助 淑華

圖12

3，主體物+背景+文字的三段式，特點虛實結合，主次關系明顯，也是效果最好，用的最廣泛的一種形式。

圖13

圖14

圖15/banner 贊助 淑華

四：創造力對主題的藝術化表現

1，嚴肅話題也能做出新感覺

做新聞報道的時候，遇到嚴肅話題，一般的設計師，都會比較拘謹，不敢也不愿去做視覺上的創新。所以配到這種話題，畫面效果一般都會比較模式化，信息量弱，感染力不足。這時候，設計師如果敢解放思想，去動腦子做一些創新，其實嚴肅話題做上新感覺，能夠達到意想不到的效果。

圖16

/主題文字埋沒在洪流之中，讓其有一種融入感。洪流、閃電、陰暗的天空、淹沒的城市，畫面災難感很強，角落處的武警官兵抗洪，讓整體災難中透出希望，哀而不傷。設計師有時候不僅僅應擁有對畫面掌控力，對專題主題的把握，也是作為一個設計師應該具備的素質。

圖17/因為是做夏季高溫的專題，所以在處理畫面的色彩時候我對比度做的比較弱，就如同烈日下看東西的感覺。

圖18

這是春運的專題，我在處理畫面用了很多斜的構成，因為斜的東西學構成的時候表達那種不安感是比較貼切的。擁擠的人群、陰霾的天空，不安中帶著希望，當一張小小的火車票就能映出當回家的曙光時候，我想，或許這就是很多人對于春運的感覺吧。回頭看看其他門戶的專題，光艷無比，一股社會主義的優越感油然而生的感覺，不知孰對孰錯，再想時，我已迷失。

2，輕松話題可以做出幽默感

有時候也會做到一些輕松感娛樂感的專題，在做這些專題的時候，設計師們就能更加放開了。

圖19/這個專題banner，做的很輕松很幽默。編輯說他的頻道群里發，整個頻道的人都笑翻了。

圖20

3，作品也能帶點小情調

有時候來一些小的創意也會讓banner增色不少。

圖21/搖滾的不是樂器，還是文字/banner 贊助 竆

圖22/冰雪也的不僅僅是車，還是文字

后面的話

有時候我覺得做一個banner，如做一篇文字，文字可以是小說，可以是詩歌，也可以是散文，形式多樣；可以用比喻、也可以擬人，也可以排比，手法也是多樣。做一個banner，有時候需要字斟句酌，有時候則要點到即止；有時候該放，有時候該收；有時候可以如蘇東坡般登高望遠、舉首長歌，有時候又可如柳永般娓娓道來、觸動心靈。你可以用不同形式和手法來表現，但相同處，通情達意，揭露主旨。本文主要從定位、文字、輔助圖和藝術性上表達了我對于做一個通情達意banner的一些見解，讓大家能從我的理解中對做banner有新的看法，當然，水平有限，不足處，歡迎指正。

附Banner教程系列：

《BANNER設計的六大原則》
《讓文字講好BANNER的故事》
《教你簡單快速的設計BANNER》

原文地址：uedc.163
作者：wei

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量72萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：