世界看(kàn)臉，網站看(kàn)Banner，門(mén)面當然要漂亮，不過很多同學以爲做Banner是門(mén)技術(shù)活兒，自(zì)己學藝不精做不了。如(rú)果你(nǐ)看(kàn)了今天這篇文，就(jiù)會明白(bái)，技術(shù)于Banner，就(jiù)像刀法于人(rén)，雖有招式，但(dàn)無内功支撐，久戰必敗。而這篇好文，就(jiù)是Banner的内功修煉心法，按6個步驟來(lái)，速成可(kě)待。
　　第一步：定義要傳達什麽信息
　　這一步，和視覺、審美什麽的都(dōu)沒關系。
　　比如(rú)，半月談，我們要傳達的信息有：
　　品牌LOGO，讓用戶一眼就(jiù)知道哪裡(lǐ)出品，下次形成條件(jiàn)反射，所謂的視覺認知是需要一定的重複的，隻有不斷重複才能加深用戶印象。子品牌LOGO，讓用戶知道我們出了什麽東西，并且有系列感。
　　以上就(jiù)是我們要傳達的核心信息了。你(nǐ)也可(kě)以認爲這就(jiù)是一個BANNER，隻是——看(kàn)起來(lái)沒那麽好看(kàn)而已。
　　但(dàn)是，我們發現信息還(hái)不夠，我們還(hái)想要傳達：
　　我們的内容大(dà)概是什麽，從而讓用戶形成期待 既然是系列，我們希望用戶能夠知道這是第幾期，從而當他(tā)們想要從某一期有興趣時點擊到全部，也有地方去(qù)。
　　所以，我們把信息又放(fàng)出來(lái)。現在我們有4類信息。
　　第二步：定義信息的優先級
　　雖然我們有4類信息，但(dàn)是優先級肯定不一樣的，所以對應到設計(jì)上，我們給它放(fàng)的版塊的大(dà)小、顔色的突出是不一樣的。
　　第三步：考慮用戶視覺路(lù)徑
　　也即你(nǐ)想引導用戶先看(kàn)哪裡(lǐ)，再看(kàn)哪裡(lǐ)，然後再做什麽。
　　通常，用戶的閱讀(dú)從上到下，從左到右邊，所以一般重要的内容會放(fàng)到左上角。
　　不過這個規則可(kě)以用醒目的圖片、刺眼的顔色輕易打破，但(dàn)是我建議(yì)你(nǐ)不要輕易這麽做，所有的圖片和顔色都(dōu)要有意義，爲什麽要用這個圖片爲什麽要用這個顔色。
　　确保用戶一開始有視覺中心，如(rú)果用戶一眼不知道先看(kàn)什麽，那麽這個banner就(jiù)是失敗的。
　　有了視覺焦點後，你(nǐ)可(kě)以從視覺焦點引申開來(lái)，使用視覺裡(lǐ)的親密性原則（把内容相(xiàng)近的地理(lǐ)位置靠近一些、對比原則等等），引導用戶從視覺焦點進而關注到其他(tā)細節、或者促使行動的東西。

　　第四步：考慮标準識别顔色
　　既然我們要傳達品牌形象，請(qǐng)确保用色從我們的标準VI色盤中選擇，而不要随便用。
　　我是配色弱怎麽辦？有這3個闆斧打遍天下，記住，品牌傳達，重複性很重要。就(jiù)像我們看(kàn)到紅(hóng)、黃(huáng)、白(bái)配色會想到麥當勞，看(kàn)到綠和黑(hēi)就(jiù)想到星巴克一樣。
　　第五步：做視覺的排版
　　（不要考慮太多設計(jì)技能，否則就(jiù)陷入到：我不是專業的，所以我不會做設計(jì)上）
　　排版上，信息已經完整，優先級已經出來(lái)，無非就(jiù)是把它變得(de)好看(kàn)一些而已。
　　讓banner好看(kàn)的幾個要訣：
　　1. 對齊
　　很好辦吧(ba)，讓内容縱向、橫向都(dōu)有一條線，可(kě)以對齊。要麽居中，要麽底部。盡量确保頁面上不要有一個元素，沒有任何元素和它能夠形成對齊的關系。
　　2. 親密
　　不要讓所有内容都(dōu)沒有聚集地堆在一起，讓那些關系比較親密的内容聚合成一個區域，不要讓一個banner上的區域超過4個。
　　3. 簡單質感：
　　千萬不要加任何PS的濾鏡、陰影(yǐng)、能不漸變就(jiù)不漸變，因爲已經不流行了，不要盲目使用各種樣式。
　　4. 如(rú)果要用圖标，盡量選擇樣式統一，且能夠保持你(nǐ)的優先級次序的圖表。比如(rú)我們引導用戶先看(kàn)左邊，再看(kàn)右邊，結果你(nǐ)在右邊的圖标裡(lǐ)選擇了一個血紅(hóng)的，可(kě)能用戶的視線立馬被吸引過來(lái)了。
　　5. 不要讓字體(tǐ)超過3種。盡量用宋體(tǐ)、黑(hēi)體(tǐ)、方正黑(hēi)體(tǐ)，不要用什麽魏碑體(tǐ)、行楷等，一看(kàn)就(jiù)比較山(shān)寨。
　　第六步：做更多的美化
　　如(rú)果你(nǐ)不想做，其實上面也可(kě)以了。
　　想做的話(huà)，我們可(kě)以：
　　比如(rú)花點時間去(qù)做一個流行的扁平化背景裝飾——還(hái)是要強調一點，不要爲了裝飾而裝飾，所有的裝飾都(dōu)要有意義、讓背景更加有質感。比如(rú)加點磨砂感覺。 比如(rú)，你(nǐ)還(hái)可(kě)以适當變換下别的排版，比如(rú)：居中的排版，更容易引導用戶從上到下的閱讀(dú)視角，也是很多人(rén)偷懶比較喜歡的排版風(fēng)格。
　　綜上所述，做banner有一大(dà)半的精力是梳理(lǐ)信息、設定優先級、設定用戶浏覽次序，和PS的技能沒有太多關系，所以，每個人(rén)都(dōu)可(kě)以去(qù)嘗試做好一張看(kàn)似很有設計(jì)感，但(dàn)是實際上又沒花什麽精力的banner。