經(jīng)典干貨!讓大神傳授你BANNER設(shè)計(jì)中的“辟邪劍譜”

4 評論 10501 瀏覽 7 收藏 14 分鐘

劉昊
淘寶北京UED資深視覺設(shè)計(jì)師。從小喜歡畫畫,泥塑,電腦游戲。畢業(yè)于北京電影學(xué)院(動畫學(xué)院)15歲組裝了自己的第一臺電腦(后成為硬件發(fā)燒友,精通軟硬件)16歲開始學(xué)習(xí)傳統(tǒng)動畫,CG繪畫等。17歲接觸互聯(lián)網(wǎng),并成立個人網(wǎng)站SixDogsNet(99年互聯(lián)網(wǎng)春天一片大好,做過GUI外包也做過資訊頻道編輯)18歲本來想出去工作,考了個Adobe平面設(shè)計(jì)師認(rèn)證(ACCD)19歲但后來還是考上了自己夢寐以求的學(xué)?!?9年成立了個人網(wǎng)站SixDogs’Home,00年注冊了國際域名SixDogs.Net后來以SixDogs這個網(wǎng)名混跡至今。
期間的作品,網(wǎng)站被《漫友》、《大眾軟件》、《HOPE》、《電腦報(bào)》、《計(jì)算機(jī)應(yīng)用文摘》等雜志發(fā)表和推薦收錄??赡芾弦慌W(wǎng)蟲對我的這個名字有點(diǎn)印象。
05年后因?yàn)槿毠ぷ骶拖曇捽E了。
2005年—悲劇至今(你們都懂的) 全身心專注于GUI、Web等視覺、交互設(shè)計(jì)。
先后服務(wù)于:新浪UC、貓撲、中國雅虎、淘寶網(wǎng)。

接下來,進(jìn)入主題。

圖片
Banner設(shè)計(jì)其實(shí)是我們接觸互聯(lián)網(wǎng)工作后,最常見最普及的一種工作。
它就像主食一樣,支撐著一個項(xiàng)目,一個公司,一個網(wǎng)站的運(yùn)轉(zhuǎn)。
也是多數(shù)新產(chǎn)品,新事物,各種優(yōu)惠活動呈現(xiàn)給用戶和消費(fèi)者的主要第一途徑。圖片

什么是Banner?

Banner的核心使命其實(shí)是吸引用戶關(guān)注,然后被點(diǎn)擊。
所以它會是主題性明確,突出關(guān)鍵內(nèi)容并有效抓住用戶眼球的一種廣告。
通常穿插在頁面中。當(dāng)然在有效吸引用戶的前提下,能跟不同頁面融為一體是最好的境界。

圖片
大家可以看到上圖中首焦Banner。
粗略一看我知道是賣服裝的,39塊包郵的T恤。
仔細(xì)看下,他們專注做T恤17年,但我看到左邊的T恤時,我真不覺得他們這17年有在用心做(笑)另外似乎是新品上市的樣子……還是國貨(信息量好大)其實(shí)用戶并不太需要一次性了解這么多信息,過多的信息反而無法讓用戶集中于一個重點(diǎn)信息上。
這也是需求方經(jīng)常范的通病—填鴨式Banner

圖片

舉一個正面例子。

這個banner其實(shí)很暴力,百張影票,明星道具1元拍。
這個文案很給力,也很直接。另外注釋是構(gòu)想私藏張學(xué)友演唱會等。
目標(biāo)群很明確。簡單直接明了,這種banner在輪播中更容易被用戶關(guān)注和點(diǎn)擊。
結(jié)論:其實(shí)Banner設(shè)計(jì)的初衷還是被點(diǎn)擊。
那么所有的設(shè)計(jì)和創(chuàng)意都是圍繞著吸引用戶來進(jìn)行的。
簡潔有效的文案,有時候是需要設(shè)計(jì)師自己去理解需求并提煉的。
但是最后我們呈現(xiàn)出來的結(jié)果,一定要有重點(diǎn),一個核心內(nèi)容,幾個圍繞說明會變成一種成功率很高的套路。其實(shí)很多時候。設(shè)計(jì)師是可以控制文案質(zhì)量的。但是通常我們拿到的文案不是很理想(甚至很糟糕)

圖片
那么在淘寶網(wǎng)的Banner需求中,我們的流程大致是這樣的。
其實(shí)從圖片上的流程可以看出來,溝通的過程會消耗掉一部分時間,然后就是初稿后的跟進(jìn)。
后面的反復(fù)修改我并沒有寫出來。因?yàn)殡S著設(shè)計(jì)師經(jīng)驗(yàn)的積累,偏離核心目標(biāo)和反復(fù)修改的次數(shù)會越來越少
淘寶的流程不一定適用于全部企業(yè)或者公司。但是當(dāng)量級達(dá)到一定程度后。這種項(xiàng)目流程的元素會越來越多。也是為了縱向管理。

圖片

字體方面

在淘寶,我們是禁止使用一些未授權(quán)字體的(因?yàn)樽煮w公司會來討伐)
所以在不能使用微軟雅黑的前提下,我們通常使用“方正蘭亭黑簡”來達(dá)到相似效果。
在一個Banner中,盡量避免使用2種以上字體。
字體清晰好辨認(rèn)為佳。
變形申拉什么的在保證品質(zhì)的前提下可以有,但要符合需求本身的風(fēng)格。
字體方面的風(fēng)險? 方正》微軟》各種倒閉了的字體公司》無版權(quán)字體圖片

圖片素材

圖片的質(zhì)量會影響到一個Banner的好壞及品相。
那么其實(shí)大致需要注意的有3點(diǎn):
1.? 圖片的清晰度辨識性(模糊的圖片會給人以不精致的感覺)
2.? 卡通素材的使用(謹(jǐn)慎)通常卡通素材是有版權(quán)的,另外就是跟Banner內(nèi)容的風(fēng)格是否一致。例如我曾經(jīng)接手的保險類推廣專題,我就嚴(yán)厲禁止使用卡通人物做推廣。同樣金融線的Banner也不適合,因?yàn)樯婕暗藉X,保障的時候??ㄍㄐ蜗笕菀捉o人不嚴(yán)謹(jǐn)?shù)母杏X
3.? 再有就是圖片內(nèi)容的比例一定要保持1:1伸縮。細(xì)微的比例失調(diào)都容易給用戶一種山寨出品的感覺。

圖片

傳承方面

通常Banner背后會有一個推廣活動,企業(yè)站點(diǎn),或熱銷產(chǎn)品去支撐。
那么我們需要切記Banner需要和推廣主題或點(diǎn)擊進(jìn)去的內(nèi)容有繼承性。
也就是點(diǎn)之前看到的是個美女,點(diǎn)進(jìn)去是賣鞋的。這樣就不好了。
Banner與主題的不一致性會給用戶帶來欺騙感。

圖片
這是淘寶內(nèi)部的Banner規(guī)范產(chǎn)出物
標(biāo)注的會很細(xì),這樣的好處是類似流水線。
用同一種規(guī)范產(chǎn)出的Banner風(fēng)格樣式會非常統(tǒng)一。
在頁面長期更新時,可以有效的保證Banner質(zhì)量。
當(dāng)我們在一個業(yè)務(wù)或者項(xiàng)目做了半年左右后,統(tǒng)計(jì)日常需要的Banner數(shù)量,就可以抽時間完成一個Banner的小規(guī)范。把自己的理解和自己總結(jié)的東西都寫進(jìn)去。這樣在工作交接或者來新幫手傳承時,可以給自己節(jié)省很多時間。

圖片
一些錯誤的實(shí)例,和正確的實(shí)例進(jìn)行對比。會讓別人更容易理解。

圖片
淘寶TMS這個是淘寶內(nèi)部的Banner上傳系統(tǒng)。
大概就是統(tǒng)一管理這部分的數(shù)據(jù),然后會嚴(yán)格限制各種尺寸下的KB數(shù)。然后以這種方法節(jié)省服務(wù)器空間。不過通常設(shè)計(jì)師有個常識就可以,例如多大的banner最好不要超過100kb

圖片

舉一個實(shí)例

但這好像不是正規(guī)banner的,但我感覺也挺合適

圖片
首先我的想法是,希望在這個推廣上有游戲點(diǎn)卡實(shí)物的感覺。
那么我在聚劃算的設(shè)計(jì)規(guī)范上看到他們的圖片是長方形的。我嘗試加入黑色底色,然后把點(diǎn)卡圖片區(qū)域用帶有圓角的圖形圈出,這樣在實(shí)際圖片放上去的時候,會有點(diǎn)卡實(shí)物圓角邊的感覺。

圖片
然后我選了一張WOW現(xiàn)在版本“大災(zāi)變”比較有代表意義的圖片素材。

圖片
考慮到實(shí)際Banner放置位置的周圍環(huán)境。
我決定把文字信息放在下面以減少附近內(nèi)容帶來的干擾。

圖片
安排文案過程中其實(shí)跟運(yùn)營同事商討過幾次文案的主要信息。
最后經(jīng)過幾次優(yōu)化,最終放上來的內(nèi)容如圖。
并且強(qiáng)烈要求附帶合作伙伴支付寶的logo(其實(shí)我不想加,加了不好看呢)

圖片
結(jié)合上述工作,最后完成了這個Banner的設(shè)計(jì)。效果如圖
另外就是跟banner有關(guān)的圖片格式的一些知識普及

圖片
JPG是我們最常用的格式,它的好處是在真人,風(fēng)景素材的壓縮比會比較好,但是缺點(diǎn)是因?yàn)樗惴ǖ膯栴},會出現(xiàn)特有的JPG噪點(diǎn)。隨著壓損比提高。這種噪點(diǎn)會越來越嚴(yán)重。但是正因?yàn)橛性朦c(diǎn)的存在。這也是我們最簡單的判斷網(wǎng)絡(luò)上移花接木照片的方法。去看噪點(diǎn)是否平滑規(guī)律。JPG的硬傷是 K數(shù)小 噪點(diǎn)就多。 噪點(diǎn)少,就只能放寬KB數(shù)。

圖片
另外就是GIF。
網(wǎng)絡(luò)暴力煽動廣告的代表格式。這種格式的優(yōu)點(diǎn)在于素材如果是像素類,或顏色數(shù)量比較少時。它的KB會很少。并且不受到圖片尺寸的影響。

圖片
另外就是PNG了,隨著IE6的沒落,現(xiàn)在PNG的廣告形式也漸漸多了。
PNG的好處主要是可以做透明和A通道。

圖片
最后就是Flash格式了。
這也是現(xiàn)在媒體廣告的主力軍。

圖片
這是最后的總結(jié)。一個好的Banner需要以上9點(diǎn)來支撐~

圖片

轉(zhuǎn)自:http://mysman.blog.163.com/blog/static/144363089201231411102239/

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 年輕的時候略猛,鑒定完畢

    來自北京 回復(fù)
  2. 作者圖片很養(yǎng)眼

    來自廣東 回復(fù)
  3. 干貨沒多少。。。作者的簡介占了半篇。還是老文章。。。

    來自菲律賓 回復(fù)
  4. 干貨,學(xué)習(xí)了:)

    來自上海 回復(fù)