让色彩讲好banner的故事

吴雁

【内容摘要】当今，绝大部分公司抢占互联网虚拟世界的空间建立自己的品牌形象。通过互联网进行产品宣传，并且网上商品买卖已经成为大众喜爱的购物方式。互联网媒体广告也随之蓬勃发展。在互联网广告中，banner最能传达页面中的重要信息和商品促销信息。而且banner的设计品质优秀，那么整个网页的品质感和档次也有明显提升。因此banner设计显示出越来越重要的作用，那么对banner设计的研究也是必要的。如何通过banner去做好广告宣传，如何提高banner的设计水平已成为设计师思考的问题。文章着重从配色角度对banner设计的美学及表意进行深入的分析，由此可以更理性地掌握banner设计的奥妙之处。

【关键词】互联网广告 banner设计 配色方法

以互联网为代表的信息技术革命，深刻地改变了我们社会生活的各个方面。互联网广告的产生和发展是建立在互联网广泛应用基础上的。互联网广告又叫做网络广告，是指采用相关电子多媒体技术设计制作，并通过互联网传播信息的广告形式。

由于互联网不仅是一种新兴媒介，同时又是电子通讯平台和商务平台，因此互联网广告的类型比传统媒介广告类型丰富得多。目前，banner广告是我们在互联网上最常见的一种广告类型。

banner也称条幅广告，是网络上最常见、最基础的广告形式。它是位于网页界面顶部、中部、底部任意一处，但是横向贯穿整个或者大半个页面的广告条。也可以理解为是一个表现广告内容的GIF、JPG格式的图像文件，是互联网广告中最基本的广告形式。它往往做成动画形式，同时还可使用Java等语言使其产生交互性。标准GIF格式以外的banner被称为Rich Media Banner。在本文中，将以静态的banner画面做解析。

在设计banner时往往使用色彩来突出重要的信息或传达某种特定的感情来贴合主题。让用户在短时间内有点击的欲望，进而提升宣传力度和购买的愿望。在实际应用中，有的banner在首页上只存在一天或一周的时间（如淘宝网、亚马逊等大型的购物网站的banner更新率就非常高）；有的banner存在的时间会长一些，一个月或一个季度或更长的时间。这样的banner一般存在于专题促销页面或者公司、剧院网站等。通常根据banner存在的时间长短，而采取不同的设计方法。在设计更新率高的banner时，图形图像与文字在构图中平分秋色，甚至有时只需文字。色彩的应用符合主题、渲染气氛。设计协调的配色方法就适合于此。在设计更新率较低的banner时，色彩的选用要考虑到整个页面的色彩关系，设计风格也要符合整个页面以及网站的视觉风格。那么强调设计的配色方法就适合这样的banner设计。无论是更新率高的banner，还是更新率较低的banner，在设计的时候都要遵循主题明确、重点文字突出的原则。以下就是对这两种类型的banner配色方法的分析。

一、协调的配色

在这里主要分析配色达到协调的方法。对于更新率高的banner设计而言，主题要明确，信息的有效传达与内容的易于理解是最重要的；色彩不要过于刺激。协调的配色就能达到以上的目的。

色相一致：色相一致的配色使设计的统一感强。在同一色相中，利用明度和纯度的变化，微妙地去展现各个部分。如图1是2010世界杯banner设计，其采用明度不同的黄色进行单色搭配，利用明暗不同而呈现出来的前后关系来组织信息的主次。在这则广告中色彩的运用既体现了非洲地区的炎热气候，突出地域的特征，又使设计的整体感加强。

但有时由于色调一致，色彩上的变化很细微，所以会给人单调的印象。这时可以选择色相环上位置比较相近的颜色，同样可以达到统一感且变化的幅度也增大了。如图2是应用在新年年庆的促销网站上的一则banner广告。橘红色和黄色在色环上是相邻的色彩，两色都属暖色系。当同纯度的两色同时出现在画面上时，黄色明度更高些，与橘红色产生明度差，这样就可以更好地衬托出橘红色的图形和文字。红色和黄色搭配传达吉祥、喜庆的含义，很好地烘托了新年的气氛。

明度一致：明度一致的配色，即使是缤纷的色彩也能让设计达到整体且具有平面感。如图3a在这个banner设计中，采用红、黄、绿三种色相来搭配，但分别降低各自的纯度，提高明度，使明度趋向一致，达到画面整体统一，没有割裂感。画面中更多的暖色使用给人以温暖、普照和煦阳光的感觉。高明度色彩的使用也使整个设计看起来温馨、明快。色彩的使用无论在视觉上还是在心理上都贴合了广告的主题。

使色彩达到明度一致常常比较复杂，因为不同色相的色彩本身就有明度的差异。所以通常都是将设计在photoshop中黑白化来查看明度的差异，如图3b。

纯度一致：高纯度的配色能让人感觉刺激、振奋，而低纯度的配色让人感觉朴素、稳重。色彩的纯度对人们的心理影响较大。

以色相分散但纯度统一全体的配色设计出来的作品，如图4中红、黄、蓝、绿相统一纯度后放置画面中，得到轻松、活泼的效果。白色的文字在明度稍低的背景中，跳出画面、使观者注目，第一时间传达最重要的信息。降低了纯度的多色彩运用，既传达了MOODY国际性公司的稳重形象，又提示了其全球性业务的主题。既有效地传达和渲染了广告的信息，又增添了画面的可视性。

二、强调设计的配色

强调设计的配色是指用色彩强调想要突出的内容或视觉元素，其余的部分保持色彩的协调。也就是说“强调设计的配色”是强调某一部分的配色方法。它适合应用在更新率低的banner中。

更新率较低的banner设计要与整个页面相协调。先将要设计的banner根据页面的整体色彩进行协调的配色，然后再依据强调的部分进行色彩的替换。之后再审视画面的整体性，如有必要，需再一次将配色取得协调。在设计时通常有信息优先级的考虑，哪些信息应该最引人注目，哪些信息或地方不想让人把目光停留于此。此时，运用“对比”法则是最为有效的。

更新率较低的banner中有一类型为专题促销页的banner设计。它与之前范例中的banner在所在页面中的面积大小略有不同，它通常占了第一个显示页面的绝大部分面积。它被设计得个性十足，有更多的细节，具有完整性。它确立了所在页面的设计风格。

色相对比：由色相对比所形成的画面通常都具有强烈的视觉冲击力和艳丽感。如图5是全民疯抢预热场的美食篇，描绘了美食类目卡通形象“吃货兔”拉着一大包美食疯狂逃生的场景，与年底大促销的疯狂相呼应。画面以红色与绿色两组补色进行色相对比，巧妙地使用白色来平衡页面中的色彩关系。画面中采用较少的色相让它看起来十分醒目，能有效地进行广告信息的宣传。页面整体可爱诙谐，旨在让用户在一个轻松有趣的环境里挑选自己喜爱的食物。这里要注意的是：将互补色组合时，尽量少选用其他色彩，更能强调其对比效果。

明度对比：在用色彩进行banner设计时，拉大色彩的明度差异是重要的设计准则。因为人类的眼睛对明度的不同是最敏感的。如图6，这幅banner的主角是文字，所以让白色的文字与背景的蓝色产生明度差，并且在白色文字部分加上了边线，更加强调了对比。边框色彩的选择在本设计中也很重要。边框色彩的明度一定要高出背景色大概4—5个明度等差色级数之间。

纯度对比：人们的目光往往容易驻留在艳丽的颜色上，因为高纯度的色彩有刺激人类感情的效果。若想强调设计作品的某一重要之处，就可使用高纯度的色彩，将观者的视线引领到此处。然而，要想使设计的作品惹人注目，就要避免过度使用纯度高的颜色。纯度高的色彩组合到一起，容易给人低俗的印象。怎样应用高纯度的色彩呢？在应用高纯度色彩的时候，应先降低其他部分的色彩纯度或将其他部分的色彩设成单一色调。这样，就可以突出高纯度色彩的位置。同理，反之亦可。如图7，将想要表现的运动人物以纯度高的绿色放置在画面的中心，引人注目。然后商品品牌标志以反白的方法放在红色的色块中，清新、醒目。人物的绿色服装与下方的红色色块在小面积上形成色相对比，同时这两处有色彩元素又与整幅偏向无色彩的黑白画面形成大面积的纯度对比。这使得整个banner看起来清爽、有力，信息与视觉要素达到了平衡。

节奏与色彩面积：为了强调设计，在考虑如何选择色彩时，同时还要思考该如何配置这些色彩的面积。一般来说，借助“面积对比”的强调法则，放大某一色彩的面积能让人感受到设计作品的强烈魅力。如图8利用“面积对比”法则，大胆地扩大底色面积来增强整体的视觉冲击力，给人留下深刻的印象。同时也借助配置于底色上的图形要素让banner的设计意图更清楚地展现。通常单一色彩的设计会显得比较单调，但在这则banner广告中，和图形与文字等要素比起来，大大的蓝色底色传达出强烈的信息。

设计可以用音乐来比喻。音乐有抒情、流畅的古典乐曲，有激烈的摇滚音乐或嘻哈音乐。同样，设计也有以简洁构图并能巧妙引导视线的画面或者具有强烈视觉冲击图形画面之分。 设计中节奏的运用常常被比喻成视觉的音乐。就是说，音乐的节奏是由节拍产生的，而设计的节奏是由重复相同的图形、重复相同的色彩所形成的。图9中运用相似的图形、相同的色彩等视觉元素的重复构成，展现出节奏感的banner作品。

色彩是banner广告设计的主题和情绪的表达方式之一。每种颜色都有自己的声音，我们无法从各个角度去分析和阐述，但设计师必须学会去分析色彩，读懂色彩，让色彩帮设计师说话。在设计的时候，用色彩去正确传达banner的本质和内涵。当色彩被正确传达后，便能与观者产生心灵共鸣，banner也就能更深入人心。

作者单位：吉林艺术学院设计学院

（责任编辑：曹宁）