原文來(lái)自：Smashing Magazine
翻譯來(lái)自：Flora Lau

比方說(shuō)，你以65英里時(shí)速開(kāi)車(chē)行駛在高速公路上，看到路邊兩側(cè)的貼滿了廣告海報(bào)。有些小，一些大的，意味著都在一定程度上使你記住一個(gè)品牌或標(biāo)識(shí)，讓一個(gè)品牌得名稱印在你得心里。路邊得廣告牌越飽和，品牌就越需要鮮明，獨(dú)特，令人難忘的創(chuàng)意。

一般來(lái)說(shuō)，醒目的廣告大多帶有詼諧標(biāo)語(yǔ)，容易記住且有趣。不同顏色的圖像和正使用的字體刺激著你的眼睛，而且這個(gè)想法其實(shí)必須是唯一的，而且簡(jiǎn)單到可以從其他廣告中脫穎而出。

同樣的原則使用任何網(wǎng)站。雖然用戶并不一定要用65英里的時(shí)速經(jīng)過(guò)，但卻有一定的“跳出率”（跳出率：訪客進(jìn)入頁(yè)面后不久即離開(kāi)）對(duì)于許多網(wǎng)站來(lái)說(shuō)，這樣的機(jī)率太高了。這就給那些設(shè)計(jì)廣告牌的人提出了一個(gè)和快速經(jīng)過(guò)類(lèi)似的挑戰(zhàn)。你只有很多的時(shí)間來(lái)捕捉用戶的注意力，并讓用戶停留更長(zhǎng)的時(shí)間。

基于這一點(diǎn)，下面就是開(kāi)發(fā)網(wǎng)頁(yè)“廣告牌”樣式設(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)意和樂(lè)趣，heyindy.com打破了一個(gè)普通的模式：簡(jiǎn)易和乏味的網(wǎng)站。全都是由專門(mén)的插圖，繪畫(huà)和有趣的字體完成，每一個(gè)頁(yè)面保證用戶在網(wǎng)站都感到舒適。注意網(wǎng)站頂部的插圖是如何很好的符合標(biāo)語(yǔ)的含義的。Hey Indy 創(chuàng)建網(wǎng)站，插圖和動(dòng)畫(huà)，并使用“mixtape”去吸引客戶的注意力。這個(gè)網(wǎng)站不會(huì)讓人有局促感的感覺(jué)，反而非常受人喜愛(ài)。真是非常個(gè)人并吸引人的設(shè)計(jì)。

Dropr
這個(gè)在線服務(wù)的網(wǎng)站在頂部頁(yè)面運(yùn)用了一個(gè)非常有趣的印刷海報(bào)來(lái)解釋他們是做什么的。這個(gè)設(shè)計(jì)是富有創(chuàng)新的和誘人的，樸實(shí)簡(jiǎn)潔的文字信息能有效地傳達(dá)給訪客。有趣的是左邊的生動(dòng)有趣的云朵，會(huì)滴下五彩的水滴。這是對(duì)公司名稱一個(gè)很好的隱喻。一個(gè)原創(chuàng)且獨(dú)特的設(shè)計(jì)。

TVLCORPs
很有趣吧！雖然網(wǎng)頁(yè)上有標(biāo)語(yǔ)，但是下面的設(shè)計(jì)并不能說(shuō)明這個(gè)公司是做什么的，雖然排版富有創(chuàng)意且讓人產(chǎn)生興趣；有時(shí)候強(qiáng)烈、生動(dòng)的對(duì)比反而畫(huà)蛇添足。注意，通過(guò)聚焦訪客對(duì)于頁(yè)面上”服務(wù)“部分的關(guān)注來(lái)突出網(wǎng)頁(yè)設(shè)計(jì)上的突出“UX／UI“。

{ ro:newmedia }
有時(shí)候嘗試一種與眾不同的設(shè)計(jì)方法是一個(gè)很好的想法－夸張的版面，結(jié)合靚麗的色彩或者是不同尋常的設(shè)計(jì)版式。ro：newmedia’s的網(wǎng)站設(shè)計(jì)就是后者的情況。版式不同尋常且具有原創(chuàng)性，因此令人記憶深刻。一個(gè)靚麗的巨大扇形覆蓋在頁(yè)面上，相比暗沉的背景顯得生動(dòng)活潑。一個(gè)不足：頁(yè)面上的字體可以稍微大一點(diǎn)。（找個(gè)網(wǎng)站需要翻墻才能訪問(wèn)。你懂的。）

Pixelmator
和過(guò)去標(biāo)準(zhǔn)的截屏完全不同，Pixelmator將他們的應(yīng)用程序巧妙而優(yōu)雅的設(shè)計(jì)進(jìn)他們的網(wǎng)頁(yè)種。

Relogik

使得這個(gè)特別的網(wǎng)頁(yè)設(shè)計(jì)的如此有效源于他可以在他們所展示的案例上畫(huà)上眼睛。在這個(gè)案例中，事后顯示公司名稱以及使產(chǎn)品更加突出都做得很好。

Made My Day

另一個(gè)測(cè)試是去設(shè)想對(duì)于一個(gè)閱讀者，一個(gè)頁(yè)面上有多少元素會(huì)對(duì)他造成沖擊性的影響，如果他們只是快速的翻閱、瀏覽。問(wèn)一下你自己：如果你打開(kāi)了這個(gè)頁(yè)面，使什么令你印象深刻？這個(gè)巨大的橘色圓形優(yōu)雅的與整個(gè)結(jié)構(gòu)相協(xié)調(diào)，令訪問(wèn)者印象深刻。

引人注目的標(biāo)題(Compelling Headlines)
只要是有內(nèi)容的設(shè)計(jì)就是好的設(shè)計(jì)?；谶@個(gè)原因，讓文字說(shuō)明更加與眾不同變得非常重要。如果你看過(guò)一兩個(gè)廣告牌，你就會(huì)清楚地記得上面的廣告詞。簡(jiǎn)潔有力，他們就是要讓你記住這個(gè)標(biāo)語(yǔ)。

許多大公司并不用廣告詞，僅僅依靠標(biāo)志、標(biāo)識(shí)來(lái)維持作用。有的甚至在這方面讓廣告牌做得更多更遠(yuǎn)－像McD’s這個(gè)廣告。盡管我們都應(yīng)該向往擁有一個(gè)富有影響力的品牌，在這里建議你應(yīng)該堅(jiān)持讓你的設(shè)計(jì)中的文字說(shuō)明簡(jiǎn)單，有力，并且可以幫助你贏得更多的讀者。

以下是一些案例。

Ryan & Sofia

Ryan and Sofia 將手繪設(shè)計(jì)元素和強(qiáng)制性的標(biāo)語(yǔ)相結(jié)合，非常通俗自然，結(jié)合了富有情感化的語(yǔ)言和精心挑選的版式。信息表達(dá)簡(jiǎn)潔有力，因此非常具有感染力。

Comwerks Interactive

這家設(shè)計(jì)代理公司使用了一種清新簡(jiǎn)潔的設(shè)計(jì)語(yǔ)言來(lái)詮釋他們的網(wǎng)站?？蓯?ài)的插圖令整個(gè)網(wǎng)頁(yè)看上去更少被拘束并且生動(dòng)有趣。設(shè)計(jì)的意圖是清楚明了并且直接地展示客戶名單，他們確實(shí)非常出色的做到了。不足：以幻燈片形式展示的圖片中的文字也許不被植入會(huì)更有益。

Camera+

在這個(gè)網(wǎng)頁(yè)上，清楚、對(duì)比強(qiáng)烈的色彩只被運(yùn)用到了有效的標(biāo)題部分。在清楚簡(jiǎn)潔、優(yōu)雅的風(fēng)格中，讀者可以很快地掃視整個(gè)頁(yè)面并且了解它的用途。

Just Dot

保持廣告牌的清晰度，不要自作聰明地添加設(shè)計(jì)和標(biāo)題企圖吸引讀者。伴隨這個(gè)黑板主題，這個(gè)頁(yè)面突出了整齊簡(jiǎn)潔的導(dǎo)航來(lái)幫助訪客瀏覽網(wǎng)站。

Jeroen Homan

在簡(jiǎn)潔并且具有沖擊力的版式設(shè)計(jì)中，這個(gè)頁(yè)面清楚地說(shuō)明了他的作用。在這個(gè)到處充斥著快速通道的網(wǎng)絡(luò)世界里，想要讓網(wǎng)頁(yè)吸引瀏覽者就必須擁有這樣一個(gè)既簡(jiǎn)潔又吸引人的標(biāo)題。當(dāng)然，只要內(nèi)容的數(shù)量合適。

DBA Products

抓住讀者眼球很重要的一點(diǎn)就是擁有一段引人入勝的對(duì)話。當(dāng)一個(gè)讀者看到“意在筆先”的第一反應(yīng)可能是想像其中到底是何含義。首先，注意力被捕捉到了。其次，讀者的眼球被左下角的按鈕所吸引，讀者可以點(diǎn)擊觀看視頻來(lái)了解更多信息。

巧妙而恰當(dāng)?shù)?Clever and Poignant)
不是每個(gè)廣告牌都具有幽默感的，幾乎所有的努力從某種程度來(lái)說(shuō)都是為了突破普通的時(shí)尚。思考一下你最后看到的一些廣告。如果他們是賣(mài)牙膏的，那么他們是否簡(jiǎn)單直白的聲明“買(mǎi)這款牙膏”，或者是否有一些非常有創(chuàng)意的、直接的信息讓你記住這個(gè)品牌？

在網(wǎng)頁(yè)設(shè)計(jì)中，同樣的原理被應(yīng)用。通過(guò)觀察分析成百上千個(gè)網(wǎng)頁(yè)，我們發(fā)現(xiàn)了一個(gè)趨勢(shì)，太多的是借鑒、引用。但是網(wǎng)絡(luò)是不斷地改變的，簡(jiǎn)單的借鑒會(huì)導(dǎo)致網(wǎng)頁(yè)在發(fā)布時(shí)已成為過(guò)去式。

怎樣避免這樣的情況？我們?cè)俅位乜磸V告牌上的廣告。使得他們大多數(shù)是有作用的原因在于他們可以傳達(dá)一些有創(chuàng)意的，或者是超乎想象的東西給人們。

Tea Round

因?yàn)檫\(yùn)用了高質(zhì)量的圖片，Tea Round的網(wǎng)頁(yè)設(shè)計(jì)抓住了人們的注意力，同時(shí)也很好地體現(xiàn)了一個(gè)具有創(chuàng)意的標(biāo)語(yǔ)。

Spring: Supporting Biodiversity

這個(gè)特別的標(biāo)語(yǔ)是非常有效的，因?yàn)樗麑⒛阋脒@個(gè)問(wèn)題中。注意，為什么這個(gè)問(wèn)題不是“你支持biodiversity嗎？”而是“你將做什么來(lái)支持biodiversity？”那一個(gè)更能讓讀者感受到他們需要采取行動(dòng)！

Tapbots

另一種創(chuàng)造廣告牌樣式的網(wǎng)頁(yè)設(shè)計(jì)元素就是將他自己設(shè)計(jì)成一個(gè)產(chǎn)品或者是服務(wù)。如果不是特別重要，縮小減短名字和標(biāo)語(yǔ)。“Calcbot”更簡(jiǎn)單、記憶深刻地被理解為像是一個(gè)“iphone 里的計(jì)算機(jī)應(yīng)用程序”

Pointy

突出顯示靚麗生動(dòng)的圖片和字體，Pointy成功地將創(chuàng)意的字體運(yùn)用在具有挑戰(zhàn)性的標(biāo)題上。伴隨著標(biāo)語(yǔ)之后，很明顯地給讀者下一個(gè)指示“開(kāi)始談話”

有力的品牌(Powerfully Branded)
雖然之前已經(jīng)有所提及，建立品牌是另一個(gè)吸引網(wǎng)站注意力的重要方面。就像之前牙膏的例子，廣告牌的目的是最終促成購(gòu)買(mǎi)，但是重要的就是公司通過(guò)廣告建立品牌。畢竟你可以找到許多不一樣品牌的牙膏，就像你也可以找到很多網(wǎng)站，所以如何從中脫穎而出？通過(guò)網(wǎng)頁(yè)設(shè)計(jì)來(lái)建立品牌是讓訪客記住你最有效的方式。

McCafé?
隨著每一個(gè)特色的McDonald’s?和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)頁(yè)來(lái)做什么？
即使你正在開(kāi)發(fā)的網(wǎng)站沒(méi)有賺錢(qián)的靈魂目標(biāo)，但是品牌始終是非常重要的。品牌是刺激訪客不斷再次回訪的重要元素。思考你最近看到的廣告。如果是一個(gè)你了解并且熱愛(ài)的公司，也許你會(huì)說(shuō)你更傾向于將時(shí)間花費(fèi)在看他們的廣告上，而不是那些你從未聽(tīng)說(shuō)過(guò)或者你不感興趣的廣告上？網(wǎng)頁(yè)設(shè)計(jì)上同樣如此。

搶眼，但委婉(Eye-catching, yet tactful)
網(wǎng)絡(luò)上有數(shù)不盡的網(wǎng)頁(yè)會(huì)吸引你的注意力，這里只針對(duì)比較差的情況。簡(jiǎn)陋的，過(guò)時(shí)的設(shè)計(jì)，或者是堆積了大量閃爍的活動(dòng)的禮物只會(huì)增加你的彈回率。動(dòng)人的網(wǎng)頁(yè)必須平衡吸引讀者的注意力和提供充分的有用信息。記?。涸O(shè)計(jì)是你網(wǎng)站的關(guān)鍵，但是如果它削弱了內(nèi)容本身的目的，那么它就不再有它的意義。

Megumi

運(yùn)用了優(yōu)雅而簡(jiǎn)潔的jaw－dropping，這個(gè)網(wǎng)頁(yè)設(shè)計(jì)有效地品牌化了他的名字，做了一個(gè)減短的環(huán)顧，同時(shí)又保持了設(shè)計(jì)的清晰、簡(jiǎn)潔。

MailChimp

MailChimp的網(wǎng)頁(yè)設(shè)計(jì)是大膽簡(jiǎn)潔的，并且保持了一貫的用色風(fēng)格。運(yùn)用明快，動(dòng)人的色彩的同時(shí)使得內(nèi)容具有可讀性。

Emprivo

始終著眼于清晰和可讀性，Emprivo網(wǎng)站通過(guò)保持設(shè)計(jì)和版式的簡(jiǎn)潔，使得他們的配色方案很成功。如此簡(jiǎn)潔的樣式使得關(guān)鍵元素格外突出。

干凈，簡(jiǎn)單，開(kāi)門(mén)見(jiàn)山(Clean, Simple and Straight to the point)
當(dāng)然，有一個(gè)方案就是越簡(jiǎn)單越簡(jiǎn)潔 但并不是說(shuō)我們交付的就沒(méi)有創(chuàng)意。 但是文字和色彩的飽和度，特別是在首頁(yè)上 ，可以刺激我們的瀏覽者去點(diǎn)擊后退按鈕。下面我們將看看一些抓住了重要東西來(lái)吸引瀏覽者的優(yōu)秀廣告牌樣式網(wǎng)站：

Less
Less 有一個(gè)簡(jiǎn)單并良好的界面設(shè)計(jì). Complete with a clever tagline, this application shows you a screenshot of exactly what they’re offering to you. It doesn’t get much clearer than this.

Courier Mac App
以精心設(shè)計(jì)的圖標(biāo)完成，Courier清晰的描繪了他們帶有酷感與柔和的顏色的應(yīng)用程序，但優(yōu)雅的展示出來(lái)。朗朗上口的字幕還協(xié)助記住這個(gè)名字。要注意的事情，以及是，“下載”和“購(gòu)買(mǎi)”按鈕，顯然是在頁(yè)面頂部顯示的事實(shí)。

We Are Omazing
有了簡(jiǎn)單的方法，這個(gè)網(wǎng)站整合到標(biāo)語(yǔ)意境，風(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 Books
Live Books的網(wǎng)站上列出了許多不同的特點(diǎn)，但有一點(diǎn)是它的執(zhí)行非常出色的就是清晰度。沒(méi)有什么奧秘在這里，你清晰的知道他們能提供什么。

結(jié)論(Conclusion)
在我們的廣告充滿市場(chǎng)這個(gè)時(shí)代里，它使富有創(chuàng)意且有效的設(shè)計(jì)更加可見(jiàn)。正如我們?cè)谶@里探討，良好的設(shè)計(jì)使事物看起來(lái)更加nice，或跟隨潮流，但是有效地捕捉到了那些我們得到的觀眾。最后，觀眾做什么樣的行動(dòng)，或不做，可以收集為Web開(kāi)發(fā)人員所作出的決定的詳盡細(xì)節(jié)依據(jù)。

你可以隨時(shí)分享經(jīng)驗(yàn)和意見(jiàn)，歡迎有更多的分享！