如何科學而又快速設計banner

如何科學而又快速設計banner

banner的設計并不是簡簡單單就能做好的,這個需要講究一定的方法和技巧,所以為了幫助大家能夠更科學、更快速的設計出理想中的優質banner,和大家一起分享關于banner設計的科學方法步驟,希望大家都能夠設計出自己理想中的banner圖 。
第一步:定義要傳達什么信息
這一步,和視覺、審美什么的都沒關系 。
比如,半月談,我們要傳達的信息有:
品牌LOGO , 讓用戶一眼就知道哪里出品 , 下次形成條件反射 , 所謂的視覺認知是需要一定的重復的 , 只有不斷重復才能加深用戶印象 。
子品牌LOGO,讓用戶知道我們出了什么東西 , 并且有系列感 。
以上就是我們要傳達的核心信息了 。你也可以認為這就是一個BANNER , 只是——看起來沒那么好看而已 。
但是,我們發現信息還不夠,我們還想要傳達:

我們的內容大概是什么,從而讓用戶形成期待
既然是系列,我們希望用戶能夠知道這是第幾期,從而當他們想要從某一期有興趣時點擊到全部,也有地方去 。
所以,我們把信息又放出來 ?,F在我們有4類信息 。
第二步:定義信息的優先級
雖然我們有4類信息,但是優先級肯定不一樣的,所以對應到設計上,我們給它放的版塊的大小、顏色的突出是不一樣的 。
第三步:考慮用戶視覺路徑
也即你想引導用戶先看哪里 , 再看哪里,然后再做什么 。
通常,用戶的閱讀從上到下,從左到右邊,所以一般重要的內容會放到左上角 。
不過這個規則可以用醒目的圖片、刺眼的顏色輕易打破,但是我建議你不要輕易這么做,所有的圖片和顏色都要有意義,為什么要用這個圖片為什么要用這個顏色 。

確保用戶一開始有視覺中心,如果用戶一眼不知道先看什么,那么這個banner就是失敗的 。
有了視覺焦點后,你可以從視覺焦點引申開來,使用視覺里的親密性原則(把內容相近的地理位置靠近一些、對比原則等等),引導用戶從視覺焦點進而關注到其他細節、或者促使行動的東西 。
第四步:考慮標準識別顏色
既然我們要傳達品牌形象,請確保用色從我們的標準VI色盤中選擇,而不要隨便用 。
我是配色弱怎么辦?有這3個板斧打遍天下:《秒變配色高手!怎么都不會錯的6條網頁設計配色原則》
記??,品牌传? ,重復性很重要 。就像我們看到紅、黃、白配色會想到麥當勞,看到綠和黑就想到星巴克一樣 。

第五步:做視覺的排版
(不要考慮太多設計技能,否則就陷入到:我不是專業的,所以我不會做設計上)
排版上 , 信息已經完整,優先級已經出來,無非就是把它變得好看一些而已 。
讓banner好看的幾個要訣:
1. 對齊
很好辦吧,讓內容縱向、橫向都有一條線 , 可以對齊 。要么居中,要么底部 。盡量確保頁面上不要有一個元素,沒有任何元素和它能夠形成對齊的關系 。
2. 親密
不要讓所有內容都沒有聚集地堆在一起,讓那些關系比較親密的內容聚合成一個區域,不要讓一個banner上的區域超過4個 。
3. 簡單質感:
千萬不要加任何PS的濾鏡、陰影、能不漸變就不漸變,因為已經不流行了,不要盲目使用各種樣式 。
4. 如果要用圖標,盡量選擇樣式統一,且能夠保持你的優先級次序的圖表 。比如我們引導用戶先看左邊,再看右邊 , 結果你在右邊的圖標里選擇了一個血紅的 , 可能用戶的視線立馬被吸引過來了 。
5. 不要讓字體超過3種 。盡量用宋體、黑體、方正黑體,不要用什么魏碑體、行楷等,一看就比較山寨 。
第六步:做更多的美化
如果你不想做,其實上面也可以了 。
想做的話,我們可以:
比如花點時間去做一個流行的扁平化背景裝飾——還是要強調一點,不要為了裝飾而裝飾,所有的裝飾都要有意義~
讓背景更加有質感 。比如加點磨砂感覺 。
比如,你還可以適當變換下別的排版,比如:居中的排版 , 更容易引導用戶從上到下的閱讀視角,也是很多人偷懶比較喜歡的排版風格 。
【如何科學而又快速設計banner】banner設計有一大半的精力是梳理信息、設定優先級、設定用戶瀏覽次序,和PS的技能沒有太多關系,所以 , 每個人都可以去嘗試做好一張看似很有設計感,但是實際上又沒花什么精力的banner 。

經驗總結擴展閱讀