讓色彩講好banner的故事

吳雁

【內(nèi)容摘要】當(dāng)今，絕大部分公司搶占互聯(lián)網(wǎng)虛擬世界的空間建立自己的品牌形象。通過(guò)互聯(lián)網(wǎng)進(jìn)行產(chǎn)品宣傳，并且網(wǎng)上商品買賣已經(jīng)成為大眾喜愛(ài)的購(gòu)物方式。互聯(lián)網(wǎng)媒體廣告也隨之蓬勃發(fā)展。在互聯(lián)網(wǎng)廣告中，banner最能傳達(dá)頁(yè)面中的重要信息和商品促銷信息。而且banner的設(shè)計(jì)品質(zhì)優(yōu)秀，那么整個(gè)網(wǎng)頁(yè)的品質(zhì)感和檔次也有明顯提升。因此banner設(shè)計(jì)顯示出越來(lái)越重要的作用，那么對(duì)banner設(shè)計(jì)的研究也是必要的。如何通過(guò)banner去做好廣告宣傳，如何提高banner的設(shè)計(jì)水平已成為設(shè)計(jì)師思考的問(wèn)題。文章著重從配色角度對(duì)banner設(shè)計(jì)的美學(xué)及表意進(jìn)行深入的分析，由此可以更理性地掌握banner設(shè)計(jì)的奧妙之處。

【關(guān)鍵詞】互聯(lián)網(wǎng)廣告 banner設(shè)計(jì) 配色方法

以互聯(lián)網(wǎng)為代表的信息技術(shù)革命，深刻地改變了我們社會(huì)生活的各個(gè)方面?；ヂ?lián)網(wǎng)廣告的產(chǎn)生和發(fā)展是建立在互聯(lián)網(wǎng)廣泛應(yīng)用基礎(chǔ)上的?；ヂ?lián)網(wǎng)廣告又叫做網(wǎng)絡(luò)廣告，是指采用相關(guān)電子多媒體技術(shù)設(shè)計(jì)制作，并通過(guò)互聯(lián)網(wǎng)傳播信息的廣告形式。

由于互聯(lián)網(wǎng)不僅是一種新興媒介，同時(shí)又是電子通訊平臺(tái)和商務(wù)平臺(tái)，因此互聯(lián)網(wǎng)廣告的類型比傳統(tǒng)媒介廣告類型豐富得多。目前，banner廣告是我們?cè)诨ヂ?lián)網(wǎng)上最常見(jiàn)的一種廣告類型。

banner也稱條幅廣告，是網(wǎng)絡(luò)上最常見(jiàn)、最基礎(chǔ)的廣告形式。它是位于網(wǎng)頁(yè)界面頂部、中部、底部任意一處，但是橫向貫穿整個(gè)或者大半個(gè)頁(yè)面的廣告條。也可以理解為是一個(gè)表現(xiàn)廣告內(nèi)容的GIF、JPG格式的圖像文件，是互聯(lián)網(wǎng)廣告中最基本的廣告形式。它往往做成動(dòng)畫形式，同時(shí)還可使用Java等語(yǔ)言使其產(chǎn)生交互性。標(biāo)準(zhǔn)GIF格式以外的banner被稱為Rich Media Banner。在本文中，將以靜態(tài)的banner畫面做解析。

在設(shè)計(jì)banner時(shí)往往使用色彩來(lái)突出重要的信息或傳達(dá)某種特定的感情來(lái)貼合主題。讓用戶在短時(shí)間內(nèi)有點(diǎn)擊的欲望，進(jìn)而提升宣傳力度和購(gòu)買的愿望。在實(shí)際應(yīng)用中，有的banner在首頁(yè)上只存在一天或一周的時(shí)間（如淘寶網(wǎng)、亞馬遜等大型的購(gòu)物網(wǎng)站的banner更新率就非常高）；有的banner存在的時(shí)間會(huì)長(zhǎng)一些，一個(gè)月或一個(gè)季度或更長(zhǎng)的時(shí)間。這樣的banner一般存在于專題促銷頁(yè)面或者公司、劇院網(wǎng)站等。通常根據(jù)banner存在的時(shí)間長(zhǎng)短，而采取不同的設(shè)計(jì)方法。在設(shè)計(jì)更新率高的banner時(shí)，圖形圖像與文字在構(gòu)圖中平分秋色，甚至有時(shí)只需文字。色彩的應(yīng)用符合主題、渲染氣氛。設(shè)計(jì)協(xié)調(diào)的配色方法就適合于此。在設(shè)計(jì)更新率較低的banner時(shí)，色彩的選用要考慮到整個(gè)頁(yè)面的色彩關(guān)系，設(shè)計(jì)風(fēng)格也要符合整個(gè)頁(yè)面以及網(wǎng)站的視覺(jué)風(fēng)格。那么強(qiáng)調(diào)設(shè)計(jì)的配色方法就適合這樣的banner設(shè)計(jì)。無(wú)論是更新率高的banner，還是更新率較低的banner，在設(shè)計(jì)的時(shí)候都要遵循主題明確、重點(diǎn)文字突出的原則。以下就是對(duì)這兩種類型的banner配色方法的分析。

一、協(xié)調(diào)的配色

在這里主要分析配色達(dá)到協(xié)調(diào)的方法。對(duì)于更新率高的banner設(shè)計(jì)而言，主題要明確，信息的有效傳達(dá)與內(nèi)容的易于理解是最重要的；色彩不要過(guò)于刺激。協(xié)調(diào)的配色就能達(dá)到以上的目的。

色相一致：色相一致的配色使設(shè)計(jì)的統(tǒng)一感強(qiáng)。在同一色相中，利用明度和純度的變化，微妙地去展現(xiàn)各個(gè)部分。如圖1是2010世界杯banner設(shè)計(jì)，其采用明度不同的黃色進(jìn)行單色搭配，利用明暗不同而呈現(xiàn)出來(lái)的前后關(guān)系來(lái)組織信息的主次。在這則廣告中色彩的運(yùn)用既體現(xiàn)了非洲地區(qū)的炎熱氣候，突出地域的特征，又使設(shè)計(jì)的整體感加強(qiáng)。

但有時(shí)由于色調(diào)一致，色彩上的變化很細(xì)微，所以會(huì)給人單調(diào)的印象。這時(shí)可以選擇色相環(huán)上位置比較相近的顏色，同樣可以達(dá)到統(tǒng)一感且變化的幅度也增大了。如圖2是應(yīng)用在新年年慶的促銷網(wǎng)站上的一則banner廣告。橘紅色和黃色在色環(huán)上是相鄰的色彩，兩色都屬暖色系。當(dāng)同純度的兩色同時(shí)出現(xiàn)在畫面上時(shí)，黃色明度更高些，與橘紅色產(chǎn)生明度差，這樣就可以更好地襯托出橘紅色的圖形和文字。紅色和黃色搭配傳達(dá)吉祥、喜慶的含義，很好地烘托了新年的氣氛。

明度一致：明度一致的配色，即使是繽紛的色彩也能讓設(shè)計(jì)達(dá)到整體且具有平面感。如圖3a在這個(gè)banner設(shè)計(jì)中，采用紅、黃、綠三種色相來(lái)搭配，但分別降低各自的純度，提高明度，使明度趨向一致，達(dá)到畫面整體統(tǒng)一，沒(méi)有割裂感。畫面中更多的暖色使用給人以溫暖、普照和煦陽(yáng)光的感覺(jué)。高明度色彩的使用也使整個(gè)設(shè)計(jì)看起來(lái)溫馨、明快。色彩的使用無(wú)論在視覺(jué)上還是在心理上都貼合了廣告的主題。

使色彩達(dá)到明度一致常常比較復(fù)雜，因?yàn)椴煌嗟纳时旧砭陀忻鞫鹊牟町?。所以通常都是將設(shè)計(jì)在photoshop中黑白化來(lái)查看明度的差異，如圖3b。

純度一致：高純度的配色能讓人感覺(jué)刺激、振奮，而低純度的配色讓人感覺(jué)樸素、穩(wěn)重。色彩的純度對(duì)人們的心理影響較大。

以色相分散但純度統(tǒng)一全體的配色設(shè)計(jì)出來(lái)的作品，如圖4中紅、黃、藍(lán)、綠相統(tǒng)一純度后放置畫面中，得到輕松、活潑的效果。白色的文字在明度稍低的背景中，跳出畫面、使觀者注目，第一時(shí)間傳達(dá)最重要的信息。降低了純度的多色彩運(yùn)用，既傳達(dá)了MOODY國(guó)際性公司的穩(wěn)重形象，又提示了其全球性業(yè)務(wù)的主題。既有效地傳達(dá)和渲染了廣告的信息，又增添了畫面的可視性。

二、強(qiáng)調(diào)設(shè)計(jì)的配色

強(qiáng)調(diào)設(shè)計(jì)的配色是指用色彩強(qiáng)調(diào)想要突出的內(nèi)容或視覺(jué)元素，其余的部分保持色彩的協(xié)調(diào)。也就是說(shuō)“強(qiáng)調(diào)設(shè)計(jì)的配色”是強(qiáng)調(diào)某一部分的配色方法。它適合應(yīng)用在更新率低的banner中。

更新率較低的banner設(shè)計(jì)要與整個(gè)頁(yè)面相協(xié)調(diào)。先將要設(shè)計(jì)的banner根據(jù)頁(yè)面的整體色彩進(jìn)行協(xié)調(diào)的配色，然后再依據(jù)強(qiáng)調(diào)的部分進(jìn)行色彩的替換。之后再審視畫面的整體性，如有必要，需再一次將配色取得協(xié)調(diào)。在設(shè)計(jì)時(shí)通常有信息優(yōu)先級(jí)的考慮，哪些信息應(yīng)該最引人注目，哪些信息或地方不想讓人把目光停留于此。此時(shí)，運(yùn)用“對(duì)比”法則是最為有效的。

更新率較低的banner中有一類型為專題促銷頁(yè)的banner設(shè)計(jì)。它與之前范例中的banner在所在頁(yè)面中的面積大小略有不同，它通常占了第一個(gè)顯示頁(yè)面的絕大部分面積。它被設(shè)計(jì)得個(gè)性十足，有更多的細(xì)節(jié)，具有完整性。它確立了所在頁(yè)面的設(shè)計(jì)風(fēng)格。

色相對(duì)比：由色相對(duì)比所形成的畫面通常都具有強(qiáng)烈的視覺(jué)沖擊力和艷麗感。如圖5是全民瘋搶預(yù)熱場(chǎng)的美食篇，描繪了美食類目卡通形象“吃貨兔”拉著一大包美食瘋狂逃生的場(chǎng)景，與年底大促銷的瘋狂相呼應(yīng)。畫面以紅色與綠色兩組補(bǔ)色進(jìn)行色相對(duì)比，巧妙地使用白色來(lái)平衡頁(yè)面中的色彩關(guān)系。畫面中采用較少的色相讓它看起來(lái)十分醒目，能有效地進(jìn)行廣告信息的宣傳。頁(yè)面整體可愛(ài)詼諧，旨在讓用戶在一個(gè)輕松有趣的環(huán)境里挑選自己喜愛(ài)的食物。這里要注意的是：將互補(bǔ)色組合時(shí)，盡量少選用其他色彩，更能強(qiáng)調(diào)其對(duì)比效果。

明度對(duì)比：在用色彩進(jìn)行banner設(shè)計(jì)時(shí)，拉大色彩的明度差異是重要的設(shè)計(jì)準(zhǔn)則。因?yàn)槿祟惖难劬?duì)明度的不同是最敏感的。如圖6，這幅banner的主角是文字，所以讓白色的文字與背景的藍(lán)色產(chǎn)生明度差，并且在白色文字部分加上了邊線，更加強(qiáng)調(diào)了對(duì)比。邊框色彩的選擇在本設(shè)計(jì)中也很重要。邊框色彩的明度一定要高出背景色大概4—5個(gè)明度等差色級(jí)數(shù)之間。

純度對(duì)比：人們的目光往往容易駐留在艷麗的顏色上，因?yàn)楦呒兌鹊纳视写碳と祟惛星榈男Ч?。若想?qiáng)調(diào)設(shè)計(jì)作品的某一重要之處，就可使用高純度的色彩，將觀者的視線引領(lǐng)到此處。然而，要想使設(shè)計(jì)的作品惹人注目，就要避免過(guò)度使用純度高的顏色。純度高的色彩組合到一起，容易給人低俗的印象。怎樣應(yīng)用高純度的色彩呢？在應(yīng)用高純度色彩的時(shí)候，應(yīng)先降低其他部分的色彩純度或?qū)⑵渌糠值纳试O(shè)成單一色調(diào)。這樣，就可以突出高純度色彩的位置。同理，反之亦可。如圖7，將想要表現(xiàn)的運(yùn)動(dòng)人物以純度高的綠色放置在畫面的中心，引人注目。然后商品品牌標(biāo)志以反白的方法放在紅色的色塊中，清新、醒目。人物的綠色服裝與下方的紅色色塊在小面積上形成色相對(duì)比，同時(shí)這兩處有色彩元素又與整幅偏向無(wú)色彩的黑白畫面形成大面積的純度對(duì)比。這使得整個(gè)banner看起來(lái)清爽、有力，信息與視覺(jué)要素達(dá)到了平衡。

節(jié)奏與色彩面積：為了強(qiáng)調(diào)設(shè)計(jì)，在考慮如何選擇色彩時(shí)，同時(shí)還要思考該如何配置這些色彩的面積。一般來(lái)說(shuō)，借助“面積對(duì)比”的強(qiáng)調(diào)法則，放大某一色彩的面積能讓人感受到設(shè)計(jì)作品的強(qiáng)烈魅力。如圖8利用“面積對(duì)比”法則，大膽地?cái)U(kuò)大底色面積來(lái)增強(qiáng)整體的視覺(jué)沖擊力，給人留下深刻的印象。同時(shí)也借助配置于底色上的圖形要素讓banner的設(shè)計(jì)意圖更清楚地展現(xiàn)。通常單一色彩的設(shè)計(jì)會(huì)顯得比較單調(diào)，但在這則banner廣告中，和圖形與文字等要素比起來(lái)，大大的藍(lán)色底色傳達(dá)出強(qiáng)烈的信息。

設(shè)計(jì)可以用音樂(lè)來(lái)比喻。音樂(lè)有抒情、流暢的古典樂(lè)曲，有激烈的搖滾音樂(lè)或嘻哈音樂(lè)。同樣，設(shè)計(jì)也有以簡(jiǎn)潔構(gòu)圖并能巧妙引導(dǎo)視線的畫面或者具有強(qiáng)烈視覺(jué)沖擊圖形畫面之分。 設(shè)計(jì)中節(jié)奏的運(yùn)用常常被比喻成視覺(jué)的音樂(lè)。就是說(shuō)，音樂(lè)的節(jié)奏是由節(jié)拍產(chǎn)生的，而設(shè)計(jì)的節(jié)奏是由重復(fù)相同的圖形、重復(fù)相同的色彩所形成的。圖9中運(yùn)用相似的圖形、相同的色彩等視覺(jué)元素的重復(fù)構(gòu)成，展現(xiàn)出節(jié)奏感的banner作品。

色彩是banner廣告設(shè)計(jì)的主題和情緒的表達(dá)方式之一。每種顏色都有自己的聲音，我們無(wú)法從各個(gè)角度去分析和闡述，但設(shè)計(jì)師必須學(xué)會(huì)去分析色彩，讀懂色彩，讓色彩幫設(shè)計(jì)師說(shuō)話。在設(shè)計(jì)的時(shí)候，用色彩去正確傳達(dá)banner的本質(zhì)和內(nèi)涵。當(dāng)色彩被正確傳達(dá)后，便能與觀者產(chǎn)生心靈共鳴，banner也就能更深入人心。

作者單位：吉林藝術(shù)學(xué)院設(shè)計(jì)學(xué)院

（責(zé)任編輯：曹寧）