1、Banner設(shè)計V4.0很高興能有這個機(jī)會跟大家在這里分享一些我的心得。首先要感謝優(yōu)秀網(wǎng)頁設(shè)計創(chuàng)造了這個平臺首先簡單的介紹下自己，目前我主要有3個身份。我叫劉昊，從小喜歡畫畫，泥塑，電腦游戲。畢業(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è)計師認(rèn)證（ACCD）19歲但后來還是考上了自己夢寐以求的學(xué)校99年成立了個人網(wǎng)站SixDogsHome00年注冊了國際域名

2、SixDogs.Net后來以SixDogs這個網(wǎng)名混跡至今。期間的作品，網(wǎng)站被漫友、大眾軟件、HOPE、電腦報、計算機(jī)應(yīng)用文摘等雜志發(fā)表和推薦收錄?？赡芾弦慌W(wǎng)蟲對我的這個名字有點印象。05年后因為全職工作就消聲覓跡了。多附一張圖，以前很想做一個自己的品牌（狗牌哈哈哈哈）所以早期做過很多嘗試2005年-悲劇至今全身心專注于GUI、Web等視覺、交互設(shè)計。先后服務(wù)于：新浪UC、貓撲、中國雅虎、淘寶網(wǎng)。所以在7年全職設(shè)計師生涯中，積淀了一些小體會。下面跟大家分享下之前本PPT（Banner設(shè)計-從入門到精通）放出來后，很多大神跟我說，缺少設(shè)計思路，設(shè)計方法等介紹。其實我是覺得設(shè)計本身主要貫穿了3個

3、環(huán)節(jié)：溝通；創(chuàng)意；實現(xiàn)。我個人更熱衷分享實現(xiàn)環(huán)節(jié)的技術(shù)。不是因為另外2個不重要（如果大家有想跟我討論另外2個環(huán)節(jié)的問題隨時歡迎）而是我覺得實現(xiàn)的技術(shù)更通用些，大家獲益的比較直接，也更容易拿到結(jié)果（設(shè)計質(zhì)量提升）那接下來我們就正式開始嘍華麗的分割線-Banner設(shè)計其實是我們接觸互聯(lián)網(wǎng)工作后，最常見最普及的一種工作。它就像主食一樣，支撐著一個項目，一個公司，一個網(wǎng)站的運轉(zhuǎn)。也是多數(shù)新產(chǎn)品，新事物，各種優(yōu)惠活動呈現(xiàn)給用戶和消費者的主要第一途徑。其實這個PPT最初的目的是幫助我項目線中的運營同學(xué)能夠自己完成一些簡單的Banner任務(wù)，來緩解我的壓力（）后來隨著UED的壯大，這套東西就匯總成了PPT形

4、式，用以新員工培訓(xùn)。大家在優(yōu)秀網(wǎng)頁設(shè)計上下載到的是第四版。什么是Banner？Banner的核心使命其實是吸引用戶關(guān)注，然后被點擊。所以它會是主題性明確，突出關(guān)鍵內(nèi)容并有效抓住用戶眼球的一種廣告。通常穿插在頁面中。當(dāng)然在有效吸引用戶的前提下，能跟不同頁面融為一體是最好的境界。大家可以看到上圖中首焦Banner。粗略一看我知道是賣服裝的，39塊包郵的T恤。仔細(xì)看下，他們專注做T恤17年，但我看到左邊的T恤時，我真不覺得他們這17年有在用心做（笑）另外似乎是新品上市的樣子還是國貨（信息量好大）其實用戶并不太需要一次性了解這么多信息，過多的信息反而無法讓用戶集中于一個重點信息上。這也是需求方經(jīng)常范的

5、通病-填鴨式Banner舉一個正面例子這個banner其實很暴力，百張影票，明星道具1元拍。這個文案很給力，也很直接。另外注釋是構(gòu)想私藏張學(xué)友演唱會等。目標(biāo)群很明確。簡單直接明了，這種banner在輪播中更容易被用戶關(guān)注和點擊。結(jié)論：其實Banner設(shè)計的初衷還是被點擊。那么所有的設(shè)計和創(chuàng)意都是圍繞著吸引用戶來進(jìn)行的。簡潔有效的文案，有時候是需要設(shè)計師自己去理解需求并提煉的。但是最后我們呈現(xiàn)出來的結(jié)果，一定要有重點，一個核心內(nèi)容，幾個圍繞說明會變成一種成功率很高的套路。那么在淘寶網(wǎng)的Banner需求中，我們的流程大致是這樣的。其實從圖片上的流程可以看出來，溝通的過程會消耗掉一部分時間，然后就是

6、初稿后的跟進(jìn)。后面的反復(fù)修改我并沒有寫出來。因為隨著設(shè)計師經(jīng)驗的積累，偏離核心目標(biāo)和反復(fù)修改的次數(shù)會越來越少字體方面在淘寶，我們是禁止使用一些未授權(quán)字體的（因為字體公司會來討伐）所以在不能使用微軟雅黑的前提下，我們通常使用“方正蘭亭黑簡”來達(dá)到相似效果。在一個Banner中，盡量避免使用2種以上字體。字體清晰好辨認(rèn)為佳。變形申拉什么的在保證品質(zhì)的前提下可以有，但要符合需求本身的風(fēng)格。圖片素材圖片的質(zhì)量會影響到一個Banner的好壞及品相。那么其實大致需要注意的有3點：1. 圖片的清晰度辨識性（模糊的圖片會給人以不精致的感覺）2. 卡通素材的使用（謹(jǐn)慎）通?？ㄍㄋ夭氖怯邪鏅?quán)的，另外就是跟Bann

7、er內(nèi)容的風(fēng)格是否一致。例如我曾經(jīng)接手的保險類推廣專題，我就嚴(yán)厲禁止使用卡通人物做推廣。同樣金融線的Banner也不適合，因為涉及到錢，保障的時候?？ㄍㄐ蜗笕菀捉o人不嚴(yán)謹(jǐn)?shù)母杏X3. 再有就是圖片內(nèi)容的比例一定要保持1:1 伸縮。細(xì)微的比例失調(diào)都容易給用戶一種山寨出品的感覺。傳承方面通常Banner背后會有一個推廣活動，企業(yè)站點，或熱銷產(chǎn)品去支撐。那么我們需要切記Banner需要和推廣主題或點擊進(jìn)去的內(nèi)容有繼承性。也就是點之前看到的是個美女，點進(jìn)去是賣鞋的。這樣就不好了。Banner與主題的不一致性會給用戶帶來欺騙感。這是淘寶內(nèi)部的Banner規(guī)范產(chǎn)出物標(biāo)注的會很細(xì)，這樣的好處是類似流水線。用同

8、一種規(guī)范產(chǎn)出的Banner風(fēng)格樣式會非常統(tǒng)一。在頁面長期更新時，可以有效的保證Banner質(zhì)量。當(dāng)我們在一個業(yè)務(wù)或者項目做了半年左右后，統(tǒng)計日常需要的Banner數(shù)量，就可以抽時間完成一個Banner的小規(guī)范。把自己的理解和自己總結(jié)的東西都寫進(jìn)去。這樣在工作交接或者來新幫手傳承時，可以給自己節(jié)省很多時間。一些錯誤的實例，和正確的實例進(jìn)行對比。會讓別人更容易理解。淘寶TMS這個是淘寶內(nèi)部的Banner上傳系統(tǒng)。大概就是統(tǒng)一管理這部分的數(shù)據(jù)，然后會嚴(yán)格限制各種尺寸下的KB數(shù)。然后以這種方法節(jié)省服務(wù)器空間。不過通常設(shè)計師有個常識就可以，例如多大的banner最好不要超過100kb舉一個實例但這好像不

9、是正規(guī)banner的，但我感覺也挺合適這是一個450x300的推廣圖片需求。先介紹下背景：淘寶聚劃算聯(lián)合我負(fù)責(zé)的項目要搞一次魔獸世界點卡的促銷活動。我的產(chǎn)品經(jīng)理找到我要求我來完成，因為他知道我是一個資深魔獸玩家他對我的要求是：讓玩游戲的一看就有情景感。然后再配合活動需要放上要推送的文案及合作廠商。首先我的想法是，希望在這個推廣上有 游戲點卡實物的感覺。那么我在聚劃算的設(shè)計規(guī)范上看到他們的圖片是長方形的。我嘗試加入黑色底色，然后把點卡圖片區(qū)域用帶有圓角的圖形圈出，這樣在實際圖片放上去的時候，會有點卡實物圓角邊的感覺。然后我選了一張WOW現(xiàn)在版本“大災(zāi)變”比較有代表意義的圖片素材。這里有一個Pho

10、toshop的小技巧（亂入）通常我們把素材拖入banner尺寸后，要進(jìn)行等比縮放。但是那樣圖片的精致感會下降。然后banner會有些不清楚的感覺，那樣效果并不會很讓人滿意。一般我們對圖片的優(yōu)化就是使用濾鏡里的銳化功能但是使用一次銳化感覺勁兒不夠。第二次銳化感覺又過于銳利，有一種刺眼的感覺?；蛘呤窍炏窀?。所以后來我找到了一種方法。就是分成2個層。底層是銳化一次的。頂層是銳化兩次的。然后對頂層的圖片建立一個蒙版。使用徑向漸變。人工控制兩次銳化-一次銳化效果的過度。這樣的好處是我可以人為意識地控制我想突出的內(nèi)容.例如實例中我覺得龍頭還需要加強(qiáng).周圍可以弱化些。那么最后通過這種方法優(yōu)化過的圖片。質(zhì)量會

11、比原圖好了很多。俗話說圖片清楚了，banner怎么做都好看：）這樣的好處是我可以人為意識地控制我想突出的內(nèi)容。例如實例中我覺得龍頭還需要加強(qiáng)，周圍可以弱化些。以達(dá)到更好的景深效果。這與攝影方面非常昂貴的鏡頭可以在同焦段營造更好的景深同理。并且兩次銳化+蒙版的技法適用于所有的小尺寸圖片優(yōu)化工作。當(dāng)然還有一種攝影修片的終極大法可以用.這個咱們改日再談：）我們繼續(xù)然后我們得到了一張比較不錯的圖片素材做背景?？紤]到實際Banner放置位置的周圍環(huán)境。我決定把文字信息放在下面以減少附近內(nèi)容帶來的干擾。安排文案過程中其實跟運營同事商討過幾次文案的主要信息。最后經(jīng)過幾次優(yōu)化，最終放上來的內(nèi)容如圖。并且強(qiáng)烈要

12、求附帶合作伙伴支付寶的logo（其實我不想加，加了不好看呢）結(jié)合上述工作，最后完成了這個Banner的設(shè)計。效果如圖其實Banner需要注意的技巧在PPT里是有總結(jié)的。并且每一條都是親身經(jīng)歷過。圖片格式作為設(shè)計師來說，如果更好的選用圖片格式產(chǎn)出我們的作品是一個必經(jīng)的環(huán)節(jié)。那么在輸出作品時更適合的格式會為我們的作品提供更好的展示效果和更小的占用KB數(shù)。JPG是我們最常用的格式。它的好處是在真人，風(fēng)景素材的壓縮比會比較好。缺點是因為算法的問題，會出現(xiàn)特有的JPG噪點。隨著壓損比提高。這種噪點會越來越嚴(yán)重。 但是正因為有噪點的存在。這也是我們最簡單的判斷網(wǎng)絡(luò)上移花接木照片的方法。去看噪點是否平滑規(guī)律

13、。JPG的硬傷是 K數(shù)小噪點就多，噪點少就只能放寬KB數(shù)。另外就是GIF。網(wǎng)絡(luò)暴力煽動廣告的代表格式。 這種格式的優(yōu)點在于素材如果是像素類，或顏色數(shù)量比較少時。它的KB會很少。并且不受到圖片尺寸的影響。 例如GIF是 2000x2000的。 但是只有白色。那么他也許只有十幾K 。這個是JPG做不到的有人夸我配圖選的非常好。哈哈 ：D隨著IE6的沒落PNG的廣告形式也漸漸多了。PNG的好處主要是可以做透明和通道。因為GIF只支持像素邊緣，所以半透明效果PNG格式是可以解決的。這也是PNG格式的優(yōu)勢。但在IE6下兼容PNG的成本會非常高。Flash這也是現(xiàn)在媒體廣告的主力軍。早期的設(shè)計師都被那些并不懂技術(shù)但要裝高端的總監(jiān)們折磨過。因為他們把SWF格式的算法想的跟JPG和GIF差不多。所以在他們的理解里，小尺寸的SWF的最大K數(shù)應(yīng)該小于5KB囧吧？F