網(wǎng)頁中廣告牌的設(shè)計(jì)

1、網(wǎng)頁中廣告牌的設(shè)計(jì)：如何贏得用戶的注意力比方說，你以65英里時(shí)速開車行駛在高速公路上，看到路邊兩側(cè)的貼滿了廣告海報(bào)。有些小，一些大的，意味著都在一定程度上使你記住一個(gè)品牌或標(biāo)識(shí)，讓一個(gè)品牌得名稱印在你得心里。路邊得廣告牌越飽和，品牌就越需要鮮明，獨(dú)特，令人難忘的創(chuàng)意。一般來說，醒目的廣告大多帶有詼諧標(biāo)語，容易記住且有趣。不同顏色的圖像和正使用的字體刺激著你的眼睛，而且這個(gè)想法其實(shí)必須是唯一的，而且簡(jiǎn)單到可以從其他廣告中脫穎而出。同樣的原則使用任何網(wǎng)站。雖然用戶并不一定要用65英里的時(shí)速經(jīng)過，但卻有一定的“跳出率”（跳出率：訪客進(jìn)入頁面后不久即離開）對(duì)于許多網(wǎng)站來說，這樣的機(jī)率太高了。這就給那些

2、設(shè)計(jì)廣告牌的人提出了一個(gè)和快速經(jīng)過類似的挑戰(zhàn)。你只有很多的時(shí)間來捕捉用戶的注意力，并讓用戶停留更長(zhǎng)的時(shí)間。基于這一點(diǎn)，下面就是開發(fā)網(wǎng)頁“廣告牌”樣式設(shè)計(jì)的一些原則：有創(chuàng)意和獨(dú)創(chuàng)性(Creative and Unique)廣告牌網(wǎng)站困惑的一個(gè)非常重要的部分就是創(chuàng)意和獨(dú)創(chuàng)的設(shè)計(jì)。這可能是交織在其他原則范圍內(nèi)，當(dāng)他有效的完成時(shí)，能夠成為深度挖掘網(wǎng)站的瀏覽者的唯一原因。Hey Indy創(chuàng)意和樂趣，打破了一個(gè)普通的模式：簡(jiǎn)易和乏味的網(wǎng)站。全都是由專門的插圖，繪畫和有趣的字體完成，每一個(gè)頁面保證用戶在網(wǎng)站都感到舒適。注意網(wǎng)站頂部的插圖是如何很好的符合標(biāo)語的含義的。Hey Indy 創(chuàng)建網(wǎng)站，插圖和動(dòng)畫，并

3、使用“mixtape”去吸引客戶的注意力。這個(gè)網(wǎng)站不會(huì)讓人有局促感的感覺，反而非常受人喜愛。真是非常個(gè)人并吸引人的設(shè)計(jì)。Dropr這個(gè)在線服務(wù)的網(wǎng)站在頂部頁面運(yùn)用了一個(gè)非常有趣的印刷海報(bào)來解釋他們是做什么的。這個(gè)設(shè)計(jì)是富有創(chuàng)新的和誘人的，樸實(shí)簡(jiǎn)潔的文字信息能有效地傳達(dá)給訪客。有趣的是左邊的生動(dòng)有趣的云朵，會(huì)滴下五彩的水滴。這是對(duì)公司名稱一個(gè)很好的隱喻。一個(gè)原創(chuàng)且獨(dú)特的設(shè)計(jì)。TVLCORPs很有趣吧！雖然網(wǎng)頁上有標(biāo)語，但是下面的設(shè)計(jì)并不能說明這個(gè)公司是做什么的，雖然排版富有創(chuàng)意且讓人產(chǎn)生興趣；有時(shí)候強(qiáng)烈、生動(dòng)的對(duì)比反而畫蛇添足。注意，通過聚焦訪客對(duì)于頁面上”服務(wù)“部分的關(guān)注來突出網(wǎng)頁設(shè)計(jì)上的突出

4、“UXUI“。 ro:newmedia 有時(shí)候嘗試一種與眾不同的設(shè)計(jì)方法是一個(gè)很好的想法夸張的版面，結(jié)合靚麗的色彩或者是不同尋常的設(shè)計(jì)版式。ro：newmedias的網(wǎng)站設(shè)計(jì)就是后者的情況。版式不同尋常且具有原創(chuàng)性，因此令人記憶深刻。一個(gè)靚麗的巨大扇形覆蓋在頁面上，相比暗沉的背景顯得生動(dòng)活潑。一個(gè)不足：頁面上的字體可以稍微大一點(diǎn)。（找個(gè)網(wǎng)站需要翻墻才能訪問。你懂的。）Pixelmator和過去標(biāo)準(zhǔn)的截屏完全不同，Pixelmator將他們的應(yīng)用程序巧妙而優(yōu)雅的設(shè)計(jì)進(jìn)他們的網(wǎng)頁種。Relogik使得這個(gè)特別的網(wǎng)頁設(shè)計(jì)的如此有效源于他可以在他們所展示的案例上畫上眼睛。在這個(gè)案例中，事后顯示公司名稱

5、以及使產(chǎn)品更加突出都做得很好。Made My Day另一個(gè)測(cè)試是去設(shè)想對(duì)于一個(gè)閱讀者，一個(gè)頁面上有多少元素會(huì)對(duì)他造成沖擊性的影響，如果他們只是快速的翻閱、瀏覽。問一下你自己：如果你打開了這個(gè)頁面，使什么令你印象深刻？這個(gè)巨大的橘色圓形優(yōu)雅的與整個(gè)結(jié)構(gòu)相協(xié)調(diào)，令訪問者印象深刻。引人注目的標(biāo)題(Compelling Headlines)只要是有內(nèi)容的設(shè)計(jì)就是好的設(shè)計(jì)?；谶@個(gè)原因，讓文字說明更加與眾不同變得非常重要。如果你看過一兩個(gè)廣告牌，你就會(huì)清楚地記得上面的廣告詞。簡(jiǎn)潔有力，他們就是要讓你記住這個(gè)標(biāo)語。許多大公司并不用廣告詞，僅僅依靠標(biāo)志、標(biāo)識(shí)來維持作用。有的甚至在這方面讓廣告牌做得更多更遠(yuǎn)像

6、McDs這個(gè)廣告。盡管我們都應(yīng)該向往擁有一個(gè)富有影響力的品牌，在這里建議你應(yīng)該堅(jiān)持讓你的設(shè)計(jì)中的文字說明簡(jiǎn)單，有力，并且可以幫助你贏得更多的讀者。以下是一些案例。Ryan & SofiaRyan and Sofia 將手繪設(shè)計(jì)元素和強(qiáng)制性的標(biāo)語相結(jié)合，非常通俗自然，結(jié)合了富有情感化的語言和精心挑選的版式。信息表達(dá)簡(jiǎn)潔有力，因此非常具有感染力。Comwerks Interactive這家設(shè)計(jì)代理公司使用了一種清新簡(jiǎn)潔的設(shè)計(jì)語言來詮釋他們的網(wǎng)站?？蓯鄣牟鍒D令整個(gè)網(wǎng)頁看上去更少被拘束并且生動(dòng)有趣。設(shè)計(jì)的意圖是清楚明了并且直接地展示客戶名單，他們確實(shí)非常出色的做到了。不足：以幻燈片形式展示的圖

7、片中的文字也許不被植入會(huì)更有益。Camera+在這個(gè)網(wǎng)頁上，清楚、對(duì)比強(qiáng)烈的色彩只被運(yùn)用到了有效的標(biāo)題部分。在清楚簡(jiǎn)潔、優(yōu)雅的風(fēng)格中，讀者可以很快地掃視整個(gè)頁面并且了解它的用途。Just Dot保持廣告牌的清晰度，不要自作聰明地添加設(shè)計(jì)和標(biāo)題企圖吸引讀者。伴隨這個(gè)黑板主題，這個(gè)頁面突出了整齊簡(jiǎn)潔的導(dǎo)航來幫助訪客瀏覽網(wǎng)站。Jeroen Homan在簡(jiǎn)潔并且具有沖擊力的版式設(shè)計(jì)中，這個(gè)頁面清楚地說明了他的作用。在這個(gè)到處充斥著快速通道的網(wǎng)絡(luò)世界里，想要讓網(wǎng)頁吸引瀏覽者就必須擁有這樣一個(gè)既簡(jiǎn)潔又吸引人的標(biāo)題。當(dāng)然，只要內(nèi)容的數(shù)量合適。DBA Products抓住讀者眼球很重要的一點(diǎn)就是擁有一段引人入

8、勝的對(duì)話。當(dāng)一個(gè)讀者看到“意在筆先”的第一反應(yīng)可能是想像其中到底是何含義。首先，注意力被捕捉到了。其次，讀者的眼球被左下角的按鈕所吸引，讀者可以點(diǎn)擊觀看視頻來了解更多信息。巧妙而恰當(dāng)?shù)?Clever and Poignant)不是每個(gè)廣告牌都具有幽默感的，幾乎所有的努力從某種程度來說都是為了突破普通的時(shí)尚。思考一下你最后看到的一些廣告。如果他們是賣牙膏的，那么他們是否簡(jiǎn)單直白的聲明“買這款牙膏”，或者是否有一些非常有創(chuàng)意的、直接的信息讓你記住這個(gè)品牌？在網(wǎng)頁設(shè)計(jì)中，同樣的原理被應(yīng)用。通過觀察分析成百上千個(gè)網(wǎng)頁，我們發(fā)現(xiàn)了一個(gè)趨勢(shì)，太多的是借鑒、引用。但是網(wǎng)絡(luò)是不斷地改變的，簡(jiǎn)單的借鑒會(huì)導(dǎo)致網(wǎng)頁

9、在發(fā)布時(shí)已成為過去式。怎樣避免這樣的情況？我們?cè)俅位乜磸V告牌上的廣告。使得他們大多數(shù)是有作用的原因在于他們可以傳達(dá)一些有創(chuàng)意的，或者是超乎想象的東西給人們。Tea Round因?yàn)檫\(yùn)用了高質(zhì)量的圖片，Tea Round的網(wǎng)頁設(shè)計(jì)抓住了人們的注意力，同時(shí)也很好地體現(xiàn)了一個(gè)具有創(chuàng)意的標(biāo)語。Spring: Supporting Biodiversity這個(gè)特別的標(biāo)語是非常有效的，因?yàn)樗麑⒛阋脒@個(gè)問題中。注意，為什么這個(gè)問題不是“你支持biodiversity嗎？”而是“你將做什么來支持biodiversity？”那一個(gè)更能讓讀者感受到他們需要采取行動(dòng)！Tapbots另一種創(chuàng)造廣告牌樣式的網(wǎng)頁設(shè)計(jì)元素

10、就是將他自己設(shè)計(jì)成一個(gè)產(chǎn)品或者是服務(wù)。如果不是特別重要，縮小減短名字和標(biāo)語?！癈alcbot”更簡(jiǎn)單、記憶深刻地被理解為像是一個(gè)“iphone 里的計(jì)算機(jī)應(yīng)用程序”Pointy突出顯示靚麗生動(dòng)的圖片和字體，Pointy成功地將創(chuàng)意的字體運(yùn)用在具有挑戰(zhàn)性的標(biāo)題上。伴隨著標(biāo)語之后，很明顯地給讀者下一個(gè)指示“開始談話”有力的品牌(Powerfully Branded)雖然之前已經(jīng)有所提及，建立品牌是另一個(gè)吸引網(wǎng)站注意力的重要方面。就像之前牙膏的例子，廣告牌的目的是最終促成購(gòu)買，但是重要的就是公司通過廣告建立品牌。畢竟你可以找到許多不一樣品牌的牙膏，就像你也可以找到很多網(wǎng)站，所以如何從中脫穎而出？通過

11、網(wǎng)頁設(shè)計(jì)來建立品牌是讓訪客記住你最有效的方式。McCafé®隨著每一個(gè)特色的McDonalds®和McCafé ® logo杯，觀眾可以即抓住了產(chǎn)品質(zhì)量的同時(shí)，又記住它的品牌關(guān)聯(lián)。Coca-Cola®Coca-Cola®網(wǎng)站是一個(gè)一直更新變化的廣告牌。用干凈的logo和瓶子的明確和簡(jiǎn)單的口號(hào)，使得這個(gè)品牌很容易被記住。一個(gè)品牌需要用網(wǎng)頁來做什么？即使你正在開發(fā)的網(wǎng)站沒有賺錢的靈魂目標(biāo)，但是品牌始終是非常重要的。品牌是刺激訪客不斷再次回訪的重要元素。思考你最近看到的廣告。如果是一個(gè)你了解并且熱愛的公司，也許你會(huì)說你更傾向于將時(shí)

12、間花費(fèi)在看他們的廣告上，而不是那些你從未聽說過或者你不感興趣的廣告上？網(wǎng)頁設(shè)計(jì)上同樣如此。搶眼，但委婉(Eye-catching, yet tactful)網(wǎng)絡(luò)上有數(shù)不盡的網(wǎng)頁會(huì)吸引你的注意力，這里只針對(duì)比較差的情況。簡(jiǎn)陋的，過時(shí)的設(shè)計(jì)，或者是堆積了大量閃爍的活動(dòng)的禮物只會(huì)增加你的彈回率。動(dòng)人的網(wǎng)頁必須平衡吸引讀者的注意力和提供充分的有用信息。記住：設(shè)計(jì)是你網(wǎng)站的關(guān)鍵，但是如果它削弱了內(nèi)容本身的目的，那么它就不再有它的意義。Megumi運(yùn)用了優(yōu)雅而簡(jiǎn)潔的jawdropping，這個(gè)網(wǎng)頁設(shè)計(jì)有效地品牌化了他的名字，做了一個(gè)減短的環(huán)顧，同時(shí)又保持了設(shè)計(jì)的清晰、簡(jiǎn)潔。MailChimpMailChi

13、mp的網(wǎng)頁設(shè)計(jì)是大膽簡(jiǎn)潔的，并且保持了一貫的用色風(fēng)格。運(yùn)用明快，動(dòng)人的色彩的同時(shí)使得內(nèi)容具有可讀性。Emprivo始終著眼于清晰和可讀性，Emprivo網(wǎng)站通過保持設(shè)計(jì)和版式的簡(jiǎn)潔，使得他們的配色方案很成功。如此簡(jiǎn)潔的樣式使得關(guān)鍵元素格外突出。干凈，簡(jiǎn)單，開門見山(Clean, Simple and Straight to the point)當(dāng)然，有一個(gè)方案就是越簡(jiǎn)單越簡(jiǎn)潔 但并不是說我們交付的就沒有創(chuàng)意。 但是文字和色彩的飽和度，特別是在首頁上 ，可以刺激我們的瀏覽者去點(diǎn)擊后退按鈕。下面我們將看看一些抓住了重要東西來吸引瀏覽者的優(yōu)秀廣告牌樣式網(wǎng)站：LessLess 有一個(gè)簡(jiǎn)單并良

14、好的界面設(shè)計(jì). Complete with a clever tagline, this application shows you a screenshot of exactly what theyre offering to you. It doesnt get much clearer than this.Courier Mac App以精心設(shè)計(jì)的圖標(biāo)完成，Courier清晰的描繪了他們帶有酷感與柔和的顏色的應(yīng)用程序，但優(yōu)雅的展示出來。朗朗上口的字幕還協(xié)助記住這個(gè)名字。要注意的事情，以及是，“下載”和“購(gòu)買”按鈕，顯然是在頁面頂部顯示的事實(shí)。We Are Omazing有了簡(jiǎn)單的方法，這

15、個(gè)網(wǎng)站整合到標(biāo)語意境，風(fēng)格。Branding 實(shí)際上是一個(gè)難忘的令人稱道并有可讀性設(shè)計(jì)的名字清晰度和對(duì)比度(Clarity and Contrast)任何設(shè)計(jì)的關(guān)鍵在于，良好的對(duì)比度是必須的。而微妙的字體和圖形變化都在設(shè)計(jì)的恰到好處，對(duì)比強(qiáng)烈重要的是要快速抓住用戶的注意，或讓他們記住一些東西時(shí)尤其如此。如果觀眾能補(bǔ)抓到你做的或你提供的 極有可能左右他們?cè)静痪玫耐Ａ魰r(shí)間。你要從最初就讓你的用戶很容易的知道。Charles Elena不要害怕大文字，該網(wǎng)站用可行有效特大號(hào)sans serif字體抓住讀者的注意，并讓他們記住了他們做的事情。該設(shè)計(jì)并不一定強(qiáng)，生動(dòng)，但傳達(dá)的信息很清楚。Live BooksLive Books的網(wǎng)