世界看臉，網站看Banner，門面當然要漂亮，不過很多同窗以為做Banner是門技術活兒，本人學藝不精做不了。假如你看了今天聚企網絡網站建立這篇文章，就會明白，技術于Banner，就像刀法于人，雖有招式，但無內功支撐，久戰(zhàn)必敗。而這篇好文，就是Banner的內功修煉心法，按6個步驟來，速成可待。

 

Heidixie（阿里巴巴資深交互設計師）：團隊小同伴問到這個問題，發(fā)了一封郵件分享本人的思緒，順便貼過來。

 

適用前提：

 

非專業(yè)視覺設計師沒太多閑暇時間去做。為什么要做Banner？Banner是用來傳達信息的。一切不以傳達有效信息、有效傳達信息的Banner都是yy.baner是用來促運用戶行動的，也即Call To Action。無法讓用戶產生你所希冀的Banner都是無效的。

 

所以，先擺脫一個錯誤的認識：Banner僅僅是用來裝飾用的，僅僅是為了吸收人留意啥的想法。

 

所以，我們既然是非專業(yè)設計師，就要回歸到做Banner的根源，為了到達以上效果，同時統籌美觀、大方、美觀。

 

大方和美觀的banner一定需求深邃的視覺技巧，和繁瑣的PS功用，但是要統籌視覺的幾個準繩，我稍后會列出。

 

第一步：定義要傳達什么信息

 

這一步，和視覺、審美什么的都沒關系。

 

比方，半月談，我們要傳達的信息有：

 

品牌LOGO，讓用戶一眼就曉得哪里出品，下次構成條件反射，所謂的視覺認知是需求一定的反復的，只要不時反復才干加深用戶印象。子品牌LOGO，讓用戶曉得我們出了什么東西，并且有系列感。

 

以上就是我們要傳達的中心信息了。你也能夠以為這就是一個Banner，只是——看起來沒那么美觀而已。

 

但是，我們發(fā)現信息還不夠，我們還想要傳達：

 

我們的內容大約是什么，從而讓用戶構成等待既然是系列，我們希望用戶可以曉得這是第幾期，從而當他們想要從某一期有興味時點擊到全部，也有中央去。

 

所以，我們把信息又放出來。如今我們有4類信息。

 

第二步：定義信息的優(yōu)先級

 

固然我們有4類信息，但是優(yōu)先級肯定不一樣的，所以對應到設計上，我們給它放的版塊的大小、顏色的突出是不一樣的。

 

第三步：思索規(guī)范辨認顏色

 

既然我們要傳達品牌形象，請確保用色從我們的規(guī)范VI色盤當選擇，而不要隨意用。

 

我是配色弱怎樣辦？有這3個板斧打遍天下，記住，品牌傳達，反復性很重要。就像我們看到紅、黃、白配色會想到麥當勞，看到綠和黑就想到星巴克一樣。

 

第四步：思索用戶視覺途徑

 

也即你想引導用戶先看哪里，再看哪里，然后再做什么。

 

通常，用戶的閱讀從上到下，從左到右邊，所以普通重要的內容會放到左上角。

 

不過這個規(guī)則能夠用醒目的圖片、扎眼的顏色隨便突破，但是我倡議你不要隨便這么做，一切的圖片和顏色都要有意義，為什么要用這個圖片為什么要用這個顏色。

 

確保用戶一開端有視覺中心，假如用戶一眼不曉得先看什么，那么這個Banner就是失敗的。

 

有了視覺焦點后，你能夠從視覺焦點引申開來，運用視覺里的密切性準繩（把內容相近的天文位置靠近一些、比照準繩等等），引導用戶從視覺焦點進而關注到其他細節(jié)、或者促使行動的東西。

 

第五步：做視覺的排版

 

（不要思索太多設計技藝，否則就墮入到：我不是專業(yè)的，所以我不會做設計上）

 

排版上，信息曾經完好，優(yōu)先級曾經出來，無非就是把它變得美觀一些而已。

 

讓Banner美觀的幾個要訣：

 

1.對齊

 

很好辦吧，讓內容縱向、橫向都有一條線，能夠對齊。要么居中，要么底部。盡量確保頁面上不要有一個元素，沒有任何元素和它可以構成對齊的關系。

 

2.密切

 

不要讓一切內容都沒有匯集地堆在一同，讓那些關系比擬密切的內容聚合成一個區(qū)域，不要讓一個Banner上的區(qū)域超越4個。

 

3.簡單質感：

 

千萬不要加任何PS的濾鏡、陰影、能不突變就不突變，由于曾經不盛行了，不要自覺運用各種款式。

 

4.假如要用圖標，盡量選擇款式統一，且可以堅持你的優(yōu)先級次序的圖表。比方我們引導用戶先看左邊，再看右邊，結果你在右邊的圖標里選擇了一個血紅的，可能用戶的視野立馬被吸收過來了。

 

5.不要讓字體超越3種。盡量用宋體、黑體、方正黑體，不要用什么魏碑體、行楷等，一看就比擬山寨。

 

第六步：做更多的美化

 

假如你不想做，其實上面也能夠了。

 

想做的話，我們能夠：

 

比方花點時間去做一個盛行的扁平化背景裝飾——還是要強調一點，不要為了裝飾而裝飾，一切的裝飾都要有意義、讓背景愈加有質感。比方加點磨砂覺得。比方，你還能夠恰當變換下別的排版，比方：居中的排版，更容易引導用戶從上到下的閱讀視角，也是很多人偷懶比擬喜歡的排版作風。

 

綜上所述，做Banner有一大半的精神是梳理信息、設定優(yōu)先級、設定用戶閱讀次序，和PS的技藝沒有太多關系，所以，每個人都能夠去嘗試做好一張看似很有設計感，但是實踐上又沒花什么精神的Banner。