國際看臉，網站看Banner，門面當然要美麗，不過許多同學以為做Banner是門技術活兒，自個學藝不精做不了。假如你看了今日這篇文，就會理解，技術于Banner，就像刀法于人，雖有招式，但無內功支持，久戰必敗。而這篇好文，即是Banner的內功修煉心法，按6個步驟來，速成可待。
@Heidixie(阿里巴巴資深交互規劃師) ：團隊小伙伴問到這個疑問，發了一封郵件共享自個的思路，趁便貼過來。
適用條件：
非專業視覺規劃師 沒太多閑暇時刻去做。 為何要做banner?banner是用來傳達信息的。悉數不以傳達有用信息、有用傳達信息的banner都是yy. baner是用來促進用戶舉動的，也即Call To Action。無法讓用戶發生你所期望的banner都是無效的。
所以，先脫節一個過錯的曉得：banner僅僅是用來裝修用的，僅僅是為了招引人留意啥的主意。
所以，咱們已然是非專業規劃師，就要回歸到做banner的根源，為了到達以上作用，同時統籌漂亮、大方、美觀。
大方和美觀的banner未必需要深邃的視覺技巧，和繁瑣的PS功用，可是要統籌視覺的幾個準則，我稍后會列出。
第一步：界說要傳達啥信息
這一步，和視覺、審美啥的都沒聯系。
比方，半月談，咱們要傳達的信息有：
品牌LOGO，讓用戶一眼就曉得哪里出品，下次構成條件反射，所謂的視覺認知是需要必定的重復的，只要不斷重復才干加深用戶形象。 子品牌LOGO，讓用戶曉得咱們出了啥東西，并且有系列感。
以上即是咱們要傳達的中間信息了。你也能夠認為這即是一個BANNER，僅僅——看起來沒那么美觀罷了。
可是，咱們發現信息還不行，咱們還想要傳達：
咱們的內容大概是啥，然后讓用戶構成等待 已然是系列，咱們期望用戶能夠曉得這是第幾期，然后當他們想要從某一期有愛好時點擊到悉數，也有當地去。
所以，咱們把信息又放出來。如今咱們有4類信息。
第二步：界說信息的優先級
盡管咱們有4類信息，可是優先級必定不一樣的，所以對應到規劃上，咱們給它放的版塊的巨細、色彩的杰出是不一樣的。
第三步：思考用戶視覺途徑
也即你想引導用戶先看哪里，再看哪里，然后再做啥。
一般，用戶的閱覽從上到下，從左到右邊，所以一般重要的內容會放到左上角。
不過這個規則能夠用奪目的圖像、扎眼的色彩簡單打破，可是我主張你不要簡單這么做，一切的圖像和色彩都要有意義，為何要用這個圖像為何要用這個色彩。
保證用戶一開始有視覺中間，假如用戶一眼不曉得先看啥，那么這個banner即是失利的。
有了視覺焦點后，你能夠從視覺焦點引申開來，運用視覺里的親密性準則(把內容附近的地理位置接近一些、比照準則等等)，引導用戶從視覺焦點進而關注到其他細節、或許促進舉動的東西。
第四步：思考標準辨認色彩
已然咱們要傳達品牌形象，請保證用色從咱們的標準VI色盤中挑選，而不要隨意用。
我是配色弱怎么辦?有這3個板斧打遍天下：《秒變配色高手!怎么都不會錯的6條網頁規劃配色準則》
記住，品牌傳達，重復性很重要。就像咱們看到紅、黃、白配色會想到麥當勞，看到綠和黑就想到星巴克一樣。
第五步：做視覺的排版
(不要思考太多規劃技術，不然就墮入到：我不是專業的，所以我不會做規劃上)
排版上，信息現已完好，優先級現已出來，無非即是把它變得美觀一些罷了。
讓banner美觀的幾個要訣：
1. 對齊
很好辦吧，讓內容縱向、橫向都有一條線，能夠對齊。要么居中，要么底部。盡量保證頁面上不要有一個元素，沒有任何元素和它能夠構成對齊的聯系。
2. 親密
不要讓一切內容都沒有聚集地堆在一起，讓那些聯系對比親密的內容聚組成一個區域，不要讓一個banner上的區域超越4個。
3. 簡略質感：
千萬不要加任何PS的濾鏡、暗影、能不突變就不突變，由于現已不流行了，不要盲目運用各種款式。
4. 假如要用圖標，盡量挑選款式一致，且能夠保持你的優先級次第的圖表。比方咱們引導用戶先看左面，再看右邊，成果你在右邊的圖標里挑選了一個血紅的，可能用戶的視野立馬被招引過來了。
5. 不要讓字體超越3種。盡量用宋體、黑體、方正黑體，不要用啥魏碑體、行楷等，一看就對比山寨。
第六步：做更多的美化
假如你不想做，本來上面也能夠了。
想做的話，咱們能夠：
比方花點時刻去做一個流行的扁平化背景裝修——還是要強調一點，不要為了裝修而裝修，一切的裝修都要有意義、讓背景愈加有質感。比方加點磨砂感受。 比方，你還能夠恰當變換下另外排版，比方：居中的排版，更簡單引導用戶從上到下的閱覽視角，也是許多人偷閑對比喜愛的排版風格。
綜上所述，做banner有一大半的精力是梳理信息、設定優先級、設定用戶瀏覽次第，和PS的技術沒有太多聯系，所以，每個人都能夠去測驗做好一張看似很有規劃感，可是實際上又沒花啥精力的banner。
長沙網站建設推薦一下閱讀內容韶山旅游
