2015-6-16 博博
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
世界看臉,網(wǎng)站看Banner,門面當(dāng)然要漂亮,不過很多同學(xué)以為做Banner是門技術(shù)活兒,自己學(xué)藝不精做不了。如果你看了今天這篇文,就會明白,技術(shù)于Banner,就像刀法于人,雖有招式,但無內(nèi)功支撐,久戰(zhàn)必敗。而這篇好文,就是Banner的內(nèi)功修煉心法,按6個步驟來,速成可待。
資深交互設(shè)計師 :團(tuán)隊小伙伴問到這個問題,發(fā)了一封郵件分享自己的思路,順便貼過來。
適用前提:
所以,先擺脫一個錯誤的認(rèn)識:banner僅僅是用來裝飾用的,僅僅是為了吸引人注意啥的想法。
所以,我們既然是非專業(yè)設(shè)計師,就要回歸到做banner的本源,為了達(dá)到以上效果,同時兼顧美觀、大方、好看。
大方和好看的banner未必需要高深的視覺技巧,和繁瑣的PS功能,但是要兼顧視覺的幾個原則,我稍后會列出。
這一步,和視覺、審美什么的都沒關(guān)系。
比如,半月談,我們要傳達(dá)的信息有:
以上就是我們要傳達(dá)的核心信息了。你也可以認(rèn)為這就是一個BANNER,只是——看起來沒那么好看而已。
但是,我們發(fā)現(xiàn)信息還不夠,我們還想要傳達(dá):
所以,我們把信息又放出來?,F(xiàn)在我們有4類信息。
雖然我們有4類信息,但是優(yōu)先級肯定不一樣的,所以對應(yīng)到設(shè)計上,我們給它放的版塊的大小、顏色的突出是不一樣的。
也即你想引導(dǎo)用戶先看哪里,再看哪里,然后再做什么。
通常,用戶的閱讀從上到下,從左到右邊,所以一般重要的內(nèi)容會放到左上角。
不過這個規(guī)則可以用醒目的圖片、刺眼的顏色輕易打破,但是我建議你不要輕易這么做,所有的圖片和顏色都要有意義,為什么要用這個圖片為什么要用這個顏色。
確保用戶一開始有視覺中心,如果用戶一眼不知道先看什么,那么這個banner就是失敗的。
有了視覺焦點后,你可以從視覺焦點引申開來,使用視覺里的親密性原則(把內(nèi)容相近的地理位置靠近一些、對比原則等等),引導(dǎo)用戶從視覺焦點進(jìn)而關(guān)注到其他細(xì)節(jié)、或者促使行動的東西。
既然我們要傳達(dá)品牌形象,請確保用色從我們的標(biāo)準(zhǔn)VI色盤中選擇,而不要隨便用。
記住,品牌傳達(dá),重復(fù)性很重要。就像我們看到紅、黃、白配色會想到麥當(dāng)勞,看到綠和黑就想到星巴克一樣。
(不要考慮太多設(shè)計技能,否則就陷入到:我不是專業(yè)的,所以我不會做設(shè)計上)
排版上,信息已經(jīng)完整,優(yōu)先級已經(jīng)出來,無非就是把它變得好看一些而已。
讓banner好看的幾個要訣:
1. 對齊
很好辦吧,讓內(nèi)容縱向、橫向都有一條線,可以對齊。要么居中,要么底部。盡量確保頁面上不要有一個元素,沒有任何元素和它能夠形成對齊的關(guān)系。
2. 親密
不要讓所有內(nèi)容都沒有聚集地堆在一起,讓那些關(guān)系比較親密的內(nèi)容聚合成一個區(qū)域,不要讓一個banner上的區(qū)域超過4個。
3. 簡單質(zhì)感:
千萬不要加任何PS的濾鏡、陰影、能不漸變就不漸變,因為已經(jīng)不流行了,不要盲目使用各種樣式。
4. 如果要用圖標(biāo),盡量選擇樣式統(tǒng)一,且能夠保持你的優(yōu)先級次序的圖表。比如我們引導(dǎo)用戶先看左邊,再看右邊,結(jié)果你在右邊的圖標(biāo)里選擇了一個血紅的,可能用戶的視線立馬被吸引過來了。
5. 不要讓字體超過3種。盡量用宋體、黑體、方正黑體,不要用什么魏碑體、行楷等,一看就比較山寨。
如果你不想做,其實上面也可以了。
想做的話,我們可以:
綜上所述,做banner有一大半的精力是梳理信息、設(shè)定優(yōu)先級、設(shè)定用戶瀏覽次序,和PS的技能沒有太多關(guān)系,所以,每個人都可以去嘗試做好一張看似很有設(shè)計感,但是實際上又沒花什么精力的banner。
Banner設(shè)計武功秘笈:
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com