世界看臉，網(wǎng)站看Banner，門(mén)面當(dāng)然要漂亮，不過(guò)很多同窗以為做Banner是門(mén)技術(shù)活兒，本人學(xué)藝不精做不了。假如你看了今天聚企網(wǎng)絡(luò)網(wǎng)站建立這篇文章，就會(huì)明白，技術(shù)于Banner，就像刀法于人，雖有招式，但無(wú)內(nèi)功支撐，久戰(zhàn)必?cái)　６@篇好文，就是Banner的內(nèi)功修煉心法，按6個(gè)步驟來(lái)，速成可待。

 

Heidixie（阿里巴巴資深交互設(shè)計(jì)師）：團(tuán)隊(duì)小同伴問(wèn)到這個(gè)問(wèn)題，發(fā)了一封郵件分享本人的思緒，順便貼過(guò)來(lái)。

 

適用前提：

 

非專業(yè)視覺(jué)設(shè)計(jì)師沒(méi)太多閑暇時(shí)間去做。為什么要做Banner？Banner是用來(lái)傳達(dá)信息的。一切不以傳達(dá)有效信息、有效傳達(dá)信息的Banner都是yy.baner是用來(lái)促運(yùn)用戶行動(dòng)的，也即Call To Action。無(wú)法讓用戶產(chǎn)生你所希冀的Banner都是無(wú)效的。

 

所以，先擺脫一個(gè)錯(cuò)誤的認(rèn)識(shí)：Banner僅僅是用來(lái)裝飾用的，僅僅是為了吸收人留意啥的想法。

 

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

 

大方和美觀的banner一定需求深邃的視覺(jué)技巧，和繁瑣的PS功用，但是要統(tǒng)籌視覺(jué)的幾個(gè)準(zhǔn)繩，我稍后會(huì)列出。

 

第一步：定義要傳達(dá)什么信息

 

這一步，和視覺(jué)、審美什么的都沒(méi)關(guān)系。

 

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

 

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

 

以上就是我們要傳達(dá)的中心信息了。你也能夠以為這就是一個(gè)Banner，只是——看起來(lái)沒(méi)那么美觀而已。

 

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

 

我們的內(nèi)容大約是什么，從而讓用戶構(gòu)成等待既然是系列，我們希望用戶可以曉得這是第幾期，從而當(dāng)他們想要從某一期有興味時(shí)點(diǎn)擊到全部，也有中央去。

 

所以，我們把信息又放出來(lái)。如今我們有4類信息。

 

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

 

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

 

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

 

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

 

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

 

第四步：思索用戶視覺(jué)途徑

 

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

 

通常，用戶的閱讀從上到下，從左到右邊，所以普通重要的內(nèi)容會(huì)放到左上角。

 

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

 

確保用戶一開(kāi)端有視覺(jué)中心，假如用戶一眼不曉得先看什么，那么這個(gè)Banner就是失敗的。

 

有了視覺(jué)焦點(diǎn)后，你能夠從視覺(jué)焦點(diǎn)引申開(kāi)來(lái)，運(yùn)用視覺(jué)里的密切性準(zhǔn)繩（把內(nèi)容相近的天文位置靠近一些、比照準(zhǔn)繩等等），引導(dǎo)用戶從視覺(jué)焦點(diǎn)進(jìn)而關(guān)注到其他細(xì)節(jié)、或者促使行動(dòng)的東西。

 

第五步：做視覺(jué)的排版

 

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

 

排版上，信息曾經(jīng)完好，優(yōu)先級(jí)曾經(jīng)出來(lái)，無(wú)非就是把它變得美觀一些而已。

 

讓Banner美觀的幾個(gè)要訣：

 

1.對(duì)齊

 

很好辦吧，讓內(nèi)容縱向、橫向都有一條線，能夠?qū)R。要么居中，要么底部。盡量確保頁(yè)面上不要有一個(gè)元素，沒(méi)有任何元素和它可以構(gòu)成對(duì)齊的關(guān)系。

 

2.密切

 

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

 

3.簡(jiǎn)單質(zhì)感：

 

千萬(wàn)不要加任何PS的濾鏡、陰影、能不突變就不突變，由于曾經(jīng)不盛行了，不要自覺(jué)運(yùn)用各種款式。

 

4.假如要用圖標(biāo)，盡量選擇款式統(tǒng)一，且可以堅(jiān)持你的優(yōu)先級(jí)次序的圖表。比方我們引導(dǎo)用戶先看左邊，再看右邊，結(jié)果你在右邊的圖標(biāo)里選擇了一個(gè)血紅的，可能用戶的視野立馬被吸收過(guò)來(lái)了。

 

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

 

第六步：做更多的美化

 

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

 

想做的話，我們能夠：

 

比方花點(diǎn)時(shí)間去做一個(gè)盛行的扁平化背景裝飾——還是要強(qiáng)調(diào)一點(diǎn)，不要為了裝飾而裝飾，一切的裝飾都要有意義、讓背景愈加有質(zhì)感。比方加點(diǎn)磨砂覺(jué)得。比方，你還能夠恰當(dāng)變換下別的排版，比方：居中的排版，更容易引導(dǎo)用戶從上到下的閱讀視角，也是很多人偷懶比擬喜歡的排版作風(fēng)。

 

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