手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

如何快速設(shè)計(jì)一款好BANNER?6個(gè)步驟幫你速成!

2015-6-16    博博

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:優(yōu)設(shè)網(wǎng)

如何快速設(shè)計(jì)一款好Banner?6個(gè)步驟幫你速成!

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

資深交互設(shè)計(jì)師 :團(tuán)隊(duì)小伙伴問(wèn)到這個(gè)問(wèn)題,發(fā)了一封郵件分享自己的思路,順便貼過(guò)來(lái)。

適用前提:

  1. 非專業(yè)視覺(jué)設(shè)計(jì)師
  2. 沒(méi)太多空閑時(shí)間去做。

為什么要做banner?

  1. banner是用來(lái)傳達(dá)信息的。一切不以傳達(dá)有效信息、有效傳達(dá)信息的banner都是yy.
  2. baner是用來(lái)促使用戶行動(dòng)的,也即Call To Action。無(wú)法讓用戶產(chǎn)生你所期望的banner都是無(wú)效的。

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

所以,我們既然是非專業(yè)設(shè)計(jì)師,就要回歸到做banner的本源,為了達(dá)到以上效果,同時(shí)兼顧美觀、大方、好看。

大方和好看的banner未必需要高深的視覺(jué)技巧,和繁瑣的PS功能,但是要兼顧視覺(jué)的幾個(gè)原則,我稍后會(huì)列出。

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

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

比如,半月談,我們要傳達(dá)的信息有:

  1. 品牌LOGO,讓用戶一眼就知道哪里出品,下次形成條件反射,所謂的視覺(jué)認(rèn)知是需要一定的重復(fù)的,只有不斷重復(fù)才能加深用戶印象。
  2. 子品牌LOGO,讓用戶知道我們出了什么東西,并且有系列感。

以上就是我們要傳達(dá)的核心信息了。你也可以認(rèn)為這就是一個(gè)BANNER,只是——看起來(lái)沒(méi)那么好看而已。

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

  1. 我們的內(nèi)容大概是什么,從而讓用戶形成期待
  2. 既然是系列,我們希望用戶能夠知道這是第幾期,從而當(dāng)他們想要從某一期有興趣時(shí)點(diǎn)擊到全部,也有地方去。

所以,我們把信息又放出來(lái)?,F(xiàn)在我們有4類信息。

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

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

第三步:考慮用戶視覺(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),使用視覺(jué)里的親密性原則(把內(nèi)容相近的地理位置靠近一些、對(duì)比原則等等),引導(dǎo)用戶從視覺(jué)焦點(diǎn)進(jìn)而關(guān)注到其他細(xì)節(jié)、或者促使行動(dòng)的東西。

第四步:考慮標(biāo)準(zhǔn)識(shí)別顏色

既然我們要傳達(dá)品牌形象,請(qǐng)確保用色從我們的標(biāo)準(zhǔn)VI色盤中選擇,而不要隨便用。

  • 我是配色弱怎么辦?有這3個(gè)板斧打遍天下:《秒變配色高手!怎么都不會(huì)錯(cuò)的6條網(wǎng)頁(yè)設(shè)計(jì)配色原則》

記住,品牌傳達(dá),重復(fù)性很重要。就像我們看到紅、黃、白配色會(huì)想到麥當(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)容縱向、橫向都有一條線,可以對(duì)齊。要么居中,要么底部。盡量確保頁(yè)面上不要有一個(gè)元素,沒(méi)有任何元素和它能夠形成對(duì)齊的關(guān)系。

2. 親密

不要讓所有內(nèi)容都沒(méi)有聚集地堆在一起,讓那些關(guān)系比較親密的內(nèi)容聚合成一個(gè)區(qū)域,不要讓一個(gè)banner上的區(qū)域超過(guò)4個(gè)。

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

千萬(wàn)不要加任何PS的濾鏡、陰影、能不漸變就不漸變,因?yàn)橐呀?jīng)不流行了,不要盲目使用各種樣式。

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

5. 不要讓字體超過(guò)3種。盡量用宋體、黑體、方正黑體,不要用什么魏碑體、行楷等,一看就比較山寨。

第六步:做更多的美化

如果你不想做,其實(shí)上面也可以了。

想做的話,我們可以:

  1. 比如花點(diǎn)時(shí)間去做一個(gè)流行的扁平化背景裝飾——還是要強(qiáng)調(diào)一點(diǎn),不要為了裝飾而裝飾,所有的裝飾都要有意義~
  2. 讓背景更加有質(zhì)感。比如加點(diǎn)磨砂感覺(jué)。
  3. 比如,你還可以適當(dāng)變換下別的排版,比如:居中的排版,更容易引導(dǎo)用戶從上到下的閱讀視角,也是很多人偷懶比較喜歡的排版風(fēng)格。

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

Banner設(shè)計(jì)武功秘笈:

5

 

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔