近年來(lái)，廣告已成為很多網(wǎng)站的主要收入來(lái)源。不久前，在線廣告往往遭到訪客的拒絕，廣告客戶也不確定它的價(jià)值和效力。今天，大多數(shù)訪客期望在商業(yè)網(wǎng)站上看到廣告，廣告客戶已經(jīng)認(rèn)識(shí)到各種在線廣告的潛在機(jī)會(huì)。長(zhǎng)期以來(lái)廣告一直是印刷出版物的一部分，如雜志和報(bào)紙，現(xiàn)在它們已經(jīng)在網(wǎng)上期刊和出版物扮演同樣的角色。

網(wǎng)站所有者或者發(fā)布的產(chǎn)品和服務(wù)總是會(huì)擔(dān)心廣告存在的影響，同時(shí)它也影響著網(wǎng)頁(yè)設(shè)計(jì)師，因?yàn)樗麄儽仨氃O(shè)計(jì)出能帶來(lái)廣告收益同時(shí)又滿足訪客需求的網(wǎng)站。依靠廣告收入的網(wǎng)站需要一個(gè)有合適位置和排版的設(shè)計(jì)以更好的賣出廣告，廣告客戶需要一個(gè)能讓他們的廣告達(dá)到一定曝光度的位置。

當(dāng)設(shè)計(jì)師沒(méi)有把廣告作為首要關(guān)注點(diǎn)，那么設(shè)計(jì)出一種尷尬的布局就很好解釋了，這種布局要么有損網(wǎng)站流量廣告，要么把廣告放置在無(wú)法吸引訪客注意的位置。為了讓客戶的廣告效益達(dá)到最大化，同時(shí)對(duì)網(wǎng)站的界面和可用性影響最小，設(shè)計(jì)師必須在設(shè)計(jì)的整個(gè)過(guò)程中把廣告需求考慮在內(nèi)。

The Raw Story看上去處處都有可能有廣告擠進(jìn)來(lái)，損害了內(nèi)容的易閱讀性。

從最基礎(chǔ)開始

當(dāng)然，并非所有網(wǎng)站出售廣告位，但這樣做的網(wǎng)站越來(lái)越多了。隨著博客普及率的上升，以及設(shè)計(jì)師收到更多自定義博客主題的需求，這個(gè)問(wèn)題將越來(lái)越普遍。對(duì)這個(gè)話題進(jìn)行充分的討論需要我們從最基本的問(wèn)題開始。

廣告客戶為什么要對(duì)廣告位付費(fèi)？

顯然，廣告客戶購(gòu)買廣告獲得曝光推廣并改善他們的財(cái)政。每個(gè)系列的廣告目標(biāo)不斷改變著，有一些主要關(guān)注品牌識(shí)別度和總體的推廣，而有一些只關(guān)心產(chǎn)品的銷售。廣告客戶可能希望從他們的廣告中得到訪客的點(diǎn)擊，但是他們最終的目標(biāo)都是為了加強(qiáng)公司的業(yè)務(wù)。

設(shè)計(jì)師可以通過(guò)廣告的位置設(shè)計(jì)來(lái)影響這個(gè)議題，當(dāng)然，設(shè)計(jì)師不能決定產(chǎn)品和服務(wù)的銷售，但廣告位置是點(diǎn)擊率的關(guān)鍵，因此對(duì)廣告是否成功具有相當(dāng)大的影響。

廣告客戶為了什么而付費(fèi)？

訪客的點(diǎn)擊，銷售的轉(zhuǎn)化，或者是簡(jiǎn)單的屏幕位置？所有這些都有可能，并視情況而定。例如 點(diǎn)擊廣告，以點(diǎn)擊作為支付標(biāo)準(zhǔn)；聯(lián)盟廣告以訂單或用戶行為為支付標(biāo)準(zhǔn)；直接廣告，一般都是給屏幕上的位置設(shè)定好價(jià)格并出售

如果網(wǎng)站要把廣告賣給其他公司，那么在整個(gè)設(shè)計(jì)過(guò)程中把廣告客戶的需求考慮在內(nèi)是很重要的，點(diǎn)擊和聯(lián)盟廣告也許還能被放在網(wǎng)站的任何地方，當(dāng)然結(jié)果也會(huì)有所不同，但是直接廣告收入依賴于廣告客戶對(duì)所付費(fèi)用得到的結(jié)果的評(píng)估， （If they are paying for prime on-screen real estate, that’s what they’ll expect.這句不知如何理解好，請(qǐng)高人指點(diǎn)）

網(wǎng)站或企業(yè)為什么要發(fā)布廣告？

廣告可以給網(wǎng)站帶來(lái)很多賺錢的機(jī)會(huì)以及大量的流量，盡管有其他方式為網(wǎng)站帶來(lái)收入，但是廣告是為數(shù)不多的方式，可以讓網(wǎng)站擁有者充分利用現(xiàn)有的流量而不用額外的工作，比如生產(chǎn)產(chǎn)品或提供服務(wù)

博客作者發(fā)布廣告，是因?yàn)檫@些所得可以讓他們賺得額外的收入，而且最基本的能抵消自己寫文章花費(fèi)的時(shí)間并維持博客。新聞網(wǎng)站銷售廣告是因?yàn)樗麄兺ǔ碛写罅康淖x者，同時(shí)他們的線下商業(yè)模式如印刷的報(bào)紙，已經(jīng)不能像前幾年那樣帶來(lái)可觀的廣告收入。隨著越來(lái)越多的消費(fèi)者轉(zhuǎn)向在線出版物，而不是報(bào)紙新聞，廣告收入也將從印刷出版物轉(zhuǎn)向在線的。

在大多數(shù)情況下，廣告收入是業(yè)務(wù)成功的關(guān)鍵，出于這個(gè)原因，在設(shè)計(jì)過(guò)程中它應(yīng)該是優(yōu)先考慮的事項(xiàng)。對(duì)于那些通過(guò)網(wǎng)站向訪問(wèn)者出售服務(wù)的服務(wù)型企業(yè)，設(shè)計(jì)師的工作包括建立一個(gè)有效的向房客推銷服務(wù)的網(wǎng)站，這同樣也適用于依靠廣告收入的網(wǎng)站和企業(yè)。

為什么廣告是網(wǎng)頁(yè)設(shè)計(jì)的重要部分？

對(duì)于依靠廣告收入的網(wǎng)站所有者和企業(yè)，這是顯而易見(jiàn)的。沒(méi)有足夠或者正確的空間給廣告，將給業(yè)務(wù)帶來(lái)很大負(fù)面影響，一旦出現(xiàn)這種情況，為了銷售業(yè)績(jī)就會(huì)企圖移動(dòng)或開辟新廣告位，從而導(dǎo)致網(wǎng)站看上去很尷尬而且無(wú)組織，因?yàn)檫@些位置沒(méi)有在起初的設(shè)計(jì)過(guò)程中被考慮進(jìn)來(lái)

廣告收入作為其主要收入來(lái)源的網(wǎng)站，可以和依靠銷售產(chǎn)品的電子商務(wù)網(wǎng)站進(jìn)行對(duì)比，沒(méi)有設(shè)計(jì)師會(huì)建立一個(gè)不把產(chǎn)品、描述和圖片位置作為重點(diǎn)的電子商務(wù)網(wǎng)站。同樣，需要廣告收入的企業(yè)網(wǎng)站不能在廣告位上有所妥協(xié)。

廣告是網(wǎng)頁(yè)設(shè)計(jì)的重要部分的另一原因是對(duì)訪客的影響，雖然網(wǎng)站可能依賴于廣告收入，但是訪客是關(guān)鍵點(diǎn)，沒(méi)有他們，廣告收入就消失了。網(wǎng)站所有者和設(shè)計(jì)師需要把廣告融入進(jìn)來(lái)同時(shí)始終保持積極的用戶體驗(yàn)。

在線廣告的難題

當(dāng)銷售廣告的網(wǎng)站想要這些廣告能被訪客注意并欣賞，一種微妙的平衡是很有必要的。除了沖點(diǎn)擊和專門為聯(lián)盟廣告設(shè)立子公司的網(wǎng)站，為廣告設(shè)立的網(wǎng)站需要割舍一部分用戶以保證維持廣告收入，同時(shí)它也需要留住大部分訪客以保證自身的成長(zhǎng)。想要抓住所有游客，將導(dǎo)致沒(méi)有廣告收入，為了廣告客戶而犧牲所有訪客將導(dǎo)致自身發(fā)展的停滯。

在網(wǎng)絡(luò)世界，一個(gè)廣告的點(diǎn)擊可能使訪客離開，雖然廣告可以設(shè)定為在新窗口中打開來(lái)預(yù)防這一點(diǎn)，但仍然不能保證訪客點(diǎn)擊廣告后會(huì)再回來(lái)。

廣告如何影響網(wǎng)站的設(shè)計(jì)？

在網(wǎng)站布局上不管設(shè)計(jì)師多關(guān)注廣告，它在某種程度上影響著設(shè)計(jì)。最理想的是，在設(shè)計(jì)中設(shè)計(jì)師已經(jīng)把具體的廣告位考慮在內(nèi)，從而得出網(wǎng)站的布局；在這種情況下廣告能在網(wǎng)站上其效果的同時(shí)又不會(huì)擾亂內(nèi)容或信息流的順暢，并給廣告一個(gè)明確的重要的位置。

在另一方面，如果廣告沒(méi)有被充分考慮在內(nèi)，它們看起來(lái)將非常不協(xié)調(diào)，會(huì)擾亂網(wǎng)站的其他部分。

布局和間距

廣告很可能占據(jù)網(wǎng)站布局的一大塊空間，不管是一個(gè)大廣告條，還是數(shù)個(gè)綁在一起的小尺寸，布局都會(huì)受到影響。一些網(wǎng)站會(huì)在整站分散不同的廣告，一些會(huì)限制它們出現(xiàn)在具體范圍內(nèi)，并讓其他位置為免費(fèi)廣告。

廣告的策略取決于多方面因素，但是在特定行業(yè)和領(lǐng)域的網(wǎng)站傾向于采取類似的方法。例如，新聞網(wǎng)站通常在整個(gè)網(wǎng)站布局中都散布著廣告，它們可能不會(huì)在某個(gè)特殊領(lǐng)域存在，卻總是會(huì)有少量存在于許多位置。

CNN.com 在整站都包含了一些廣告。

和新聞網(wǎng)站想必，許多博客會(huì)讓橫幅廣告固定在一些指定的區(qū)域，通常是在邊欄，其它位置則不會(huì)有廣告出現(xiàn)。這一做法使得設(shè)計(jì)師需要為廣告謀一個(gè)比較大的區(qū)域，而其它區(qū)域則基本不考慮廣告位。

Blogging Tips 在右邊欄有6個(gè)125*125px大小的橫幅，而其它的廣告僅存于個(gè)別文章的評(píng)論之前。

無(wú)論是博客還是新聞網(wǎng)站，由于廣告常常被放在邊欄，所以在設(shè)計(jì)布局時(shí)主要要考慮容納廣告的邊欄所需的寬度。例如，許多新聞網(wǎng)站在邊欄有300*250的橫幅，所以邊欄必須足夠?qū)捯匀菁{該尺寸。如果這個(gè)沒(méi)有考慮在內(nèi)，那么盈利機(jī)會(huì)和潛在收入將受到不利影響，或者布局不得不更改。

當(dāng)然，邊欄不是唯一的常見(jiàn)廣告位，很多網(wǎng)站出售它們的頁(yè)頭位置，因?yàn)檫@里常常能帶來(lái)最高的廣告價(jià)格。在這種情況下，廣告在設(shè)計(jì)中一定要作為重要元素，否則這里可能就不會(huì)留出位置。特別是對(duì)于頁(yè)頭有標(biāo)志、品牌區(qū)以及主導(dǎo)航的網(wǎng)站，為了在頁(yè)頭包含廣告位，所有這些元素必須被合適的布局，或者主導(dǎo)航可能被移到別處。

CSS Tricks是在頁(yè)頭有橫幅的博客網(wǎng)站之一，在這種情況下，468*60px的橫幅很恰當(dāng)?shù)谋辉O(shè)計(jì)在頁(yè)頭中。

顏色

網(wǎng)站設(shè)計(jì)師無(wú)法控制在網(wǎng)站上出現(xiàn)的橫幅的顏色或設(shè)計(jì)，將來(lái)也肯定不能，但是他們能制定配色方案時(shí)考慮一些可能性。橫幅廣告為了吸引訪客的注意，往往比較豐富多彩、明亮，如果網(wǎng)站設(shè)計(jì)的充滿許多不同色彩和陰影，和同樣色彩豐富的廣告搭配在一起就會(huì)顯得很尷尬、很擁擠，特別是當(dāng)這些顏色還很不協(xié)調(diào)的時(shí)候。

一些展示很多廣告的網(wǎng)站會(huì)需要一個(gè)柔和的配色方案，以避免用戶承載太多顏色。在某些情況下，網(wǎng)站需要廣告脫穎而出，以吸引更多用戶注意網(wǎng)站本身，只是顏色將是非常有效的方法。

流動(dòng)

任何類型的網(wǎng)站設(shè)計(jì)師面臨的挑戰(zhàn)是展示內(nèi)容以讓用戶關(guān)注重要信息，眼睛在屏幕上獨(dú)特的移動(dòng)方式和網(wǎng)站的內(nèi)容流動(dòng)，會(huì)受到廣告的影響，網(wǎng)站所有者尋求廣告收入最大化時(shí)，常常會(huì)把廣告位放在眼睛關(guān)注的位置，原因是這些位置往往產(chǎn)生最佳結(jié)果和最多廣告收入。

那些想要廣告收入，但是希望對(duì)訪客的影響最小化，就會(huì)讓廣告遠(yuǎn)離主要的內(nèi)容，這種做法的例子有博客將廣告位置放在發(fā)布內(nèi)容之中或者在邊欄。直接在發(fā)布文章的上面或下面放廣告，往往比放在邊欄更容易引起注意并引起點(diǎn)擊，所以它們一般都以更高的價(jià)格出售。網(wǎng)站所有者需要在這方面做決定，設(shè)計(jì)師也需要了解這些決定并在設(shè)計(jì)中合理安排廣告位置。

紐約時(shí)報(bào)在它的頁(yè)頭和主題內(nèi)容區(qū)域都沒(méi)有廣告，但在右側(cè)留了大塊面積給廣告：

設(shè)計(jì)師對(duì)廣告的責(zé)任是什么？

1、了解廣告收入的優(yōu)先級(jí)

很多網(wǎng)站根本沒(méi)有廣告，而其他的會(huì)依靠廣告維持業(yè)務(wù)，還有一些包括部分廣告但不是主要收入來(lái)源。設(shè)計(jì)師需要了解廣告在設(shè)計(jì)中要占多高的優(yōu)先級(jí)，如果廣告收入是業(yè)務(wù)的主要來(lái)源，那么廣告位在布局中將會(huì)是最重要的元素之一；如果銷售產(chǎn)品或服務(wù)更為重要，那么產(chǎn)品和服務(wù)在設(shè)計(jì)中要優(yōu)先于任何可能包含的廣告。

設(shè)計(jì)師的工作不是決定廣告在網(wǎng)站設(shè)計(jì)和布局中應(yīng)該發(fā)揮多大作用，但是需要努力趨充分理解需求方在這一塊的需求和愿望。帶著正確的觀點(diǎn)并和需求放站在同一面來(lái)開始設(shè)計(jì)，是至關(guān)重要的。

2、設(shè)計(jì)一個(gè)滿足客戶的網(wǎng)站

大多數(shù)web設(shè)計(jì)師可能會(huì)喜歡從來(lái)都沒(méi)有廣告，并能夠用其他方式利用這些空間。然而，客戶需要一個(gè)能帶來(lái)廣告收入的網(wǎng)站，這時(shí)這些廣告空間必須成為設(shè)計(jì)的一部分。

3、設(shè)計(jì)一個(gè)有吸引力又易用的網(wǎng)站，同時(shí)包含廣告空間

不管廣告的優(yōu)先級(jí)是高是低，設(shè)計(jì)師需要?jiǎng)?chuàng)建一個(gè)有吸引力的網(wǎng)站，廣告可能是一個(gè)麻煩的元素因?yàn)榭臻g的占有和對(duì)內(nèi)容流的打斷，但是設(shè)計(jì)師還是必須做到這一點(diǎn)。如果有大量的廣告，就需要更加注意網(wǎng)站的可用性，讓訪客受到最小的干擾。

廣告和設(shè)計(jì)的趨勢(shì)

看那些出售廣告的網(wǎng)站，特別是依靠廣告為主要收入來(lái)源的，我們能看到一些趨勢(shì)：

頭部廣告

很多網(wǎng)站出售頁(yè)頭廣告位，通常是在logo的一邊，或?qū)Ш降纳厦婊蛳旅妫芏嗖煌愋途W(wǎng)站都有這種趨勢(shì)，而且只要這些廣告能給廣告客戶帶來(lái)實(shí)效，它就會(huì)繼續(xù)下去。

Washington Post 在文章頁(yè)用了兩個(gè)頁(yè)頭廣告，第一個(gè)尺寸為300×45，位于logo的右側(cè)，在此之下還有一個(gè)728×90的，位于logo和導(dǎo)航之間。

Lifehacker ，有一個(gè)大頁(yè)頭來(lái)容納300×250的廣告，注意該網(wǎng)站顯然是考慮到完美適應(yīng)這種大小的光告而設(shè)計(jì)并布局的。

所有內(nèi)容之上的廣告

一些網(wǎng)站將廣告放在所有內(nèi)容包括頁(yè)頭之上，這使廣告處于網(wǎng)頁(yè)最上端，但是能離開內(nèi)容流；這減少了廣告的潛在干擾，但是讓其他任何內(nèi)容都往下移了，在第一屏可看得內(nèi)容減少。這種趨勢(shì)在一些新聞網(wǎng)站特別明顯。

TechCrunch 在頁(yè)頭紙上用了720×90的廣告，在它之上僅有一條綠色的線條。

L.A. Times也在所有內(nèi)容之上包含了一個(gè)廣告，但它不顯示在主頁(yè)。

Monster 在它的工作搜索頁(yè)面最頂端放了728×90的廣告。

內(nèi)頁(yè)比首頁(yè)有更多的廣告

一些網(wǎng)站如剛才提到的 L.A. Times，保持首頁(yè)更受歡迎，更方便使用除了廣告位之外的空間，當(dāng)然這些網(wǎng)站會(huì)在其他頁(yè)面包含廣告，這是新聞網(wǎng)站的另一個(gè)普遍趨勢(shì)。

Reader’s Digest的首頁(yè)避免任何廣告出現(xiàn)在頁(yè)面上方。

但是，單獨(dú)的文章頁(yè)面在頁(yè)頭之上有728×90的廣告，一個(gè)300×250廣告位于右欄最上方，以及一個(gè)135×600的摩天長(zhǎng)條廣告位于左邊欄，加上一些額外的廣告在頁(yè)面的底部。

類似Reader’s Digest, Time在首頁(yè)也避免廣告。

文章內(nèi)頁(yè)有一個(gè)728×90的頭部廣告和一個(gè)位于邊欄最上方的300×250廣告。

常見(jiàn)的廣告尺寸

你瀏覽一些網(wǎng)站，會(huì)發(fā)現(xiàn)廣告在網(wǎng)頁(yè)中占不同的比例，但其中大部分都有標(biāo)準(zhǔn)尺寸?；?dòng)廣告局制定了標(biāo)準(zhǔn)尺寸以用于在線廣告，雖然網(wǎng)站所有者可以出售所有尺寸的廣告，但建議還是遵循標(biāo)準(zhǔn)，因?yàn)闈撛诘膹V告客戶可能已經(jīng)有設(shè)計(jì)好的標(biāo)準(zhǔn)尺寸廣告，因而將有更大可能去購(gòu)買標(biāo)準(zhǔn)尺寸的廣告位。網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)該了解客戶希望出現(xiàn)在其網(wǎng)站上的廣告尺寸即標(biāo)準(zhǔn)尺寸。

博客通常會(huì)實(shí)用125×125的尺寸，盡管其他尺寸也在使用。Daily Blog Tips就是一個(gè)典型例子，6個(gè)125×125尺寸的廣告放在右側(cè)欄，其他唯一的廣告就是左側(cè)欄底下的長(zhǎng)條幅。

另一個(gè)常用尺寸是300×250，很多新網(wǎng)站都會(huì)在側(cè)欄實(shí)用這個(gè)尺寸。

設(shè)計(jì)師的最優(yōu)方法

1、設(shè)計(jì)滿足用戶需求

設(shè)計(jì)師最終是要像客戶負(fù)責(zé)的，必要時(shí)設(shè)計(jì)師應(yīng)該給客戶建議，但是最終網(wǎng)站是要讓客戶滿意才行。雖然設(shè)計(jì)師可能不同意客戶在網(wǎng)站上使用廣告的需求，但如果客戶確定要這樣做，我們就要考慮如何做到最好。

2、合理布局網(wǎng)站以便廣告成為設(shè)計(jì)的的一部分

看上去很自然、標(biāo)準(zhǔn)的帶廣告的網(wǎng)站，通常是設(shè)計(jì)時(shí)就把廣告考慮在內(nèi)的。廣告能非常適合在側(cè)欄的某一特定位置不是偶然的，合理布局廣告位置，使實(shí)現(xiàn)網(wǎng)站的最佳視覺(jué)效果成為可能，而把廣告隨意的放在不適合的位置上，將會(huì)壓倒其他精心設(shè)計(jì)的布局。

3、考慮將來(lái)的需求

你可能會(huì)發(fā)現(xiàn)自己處于這樣一種情況，當(dāng)時(shí)設(shè)計(jì)網(wǎng)站時(shí)廣告并不是重點(diǎn)，但是在不久的將來(lái)，它將成為主要收入的來(lái)源。很多網(wǎng)站開始時(shí)幾乎沒(méi)有廣告，一旦用戶群建立起來(lái)就需要提供更多廣告位。最理想的是，設(shè)計(jì)過(guò)程中將這種情況考慮在內(nèi)，并計(jì)劃將來(lái)新的廣告位放在哪里。側(cè)欄通常是增加廣告數(shù)量同時(shí)不影響布局以及內(nèi)容的最佳位置，但是頁(yè)頭廣告就相對(duì)比較困難了。

在最初就試著和客戶討論長(zhǎng)期計(jì)劃是很好的做法，以便避免這樣的情況發(fā)生。如果在新的改版之前，不久就會(huì)需要更多的廣告位，那么可以在一些位置放暫時(shí)性的內(nèi)容，直到它們被用來(lái)做廣告位。例如，一個(gè)區(qū)域可以被用來(lái)展示網(wǎng)站本身的內(nèi)容，一旦廣告收入變得更加重要就去掉這塊內(nèi)容用廣告位代替。

4、考慮對(duì)瀏覽者的影響

設(shè)計(jì)師努力讓網(wǎng)站包含廣告位置以讓廣告客戶滿意，但瀏覽者同樣也是要考慮的。當(dāng)涉及到廣告，很多決定、判斷需要確定，什么是適當(dāng)?shù)?？哪些看起?lái)太多了？

原文：http://ued.koubei.com/?p=637