网页设计中的色彩搭配探析

彭慧/吉首大学美术学院

随着互联网的发展与成熟，人们已经习惯于通过网页了解世界，网页也已经成为绝大多数企业传递企业信息与塑造企业形象的主要方式之一。网站作为新兴媒体（相对于传统的报刊、杂志等来说）有着更多的新兴元素，比如动画、声音等等。而色彩是这些元素中最具识别度与视觉冲击力的元素，优秀的色彩搭配不仅可以激起浏览者的兴趣提升网页的视觉美感，还能有效地传达企业形象。因此，在网页设计中科学、合理地色彩搭配应用起着至关重要的作用。

1 基本理论阐述

色彩是设计中不可或缺的元素。网页设计是伴随计算机的产生而出现的新型设计类别。人们在工作、娱乐以及学习生活中会使用到各种不同类型的网站，不同类别的网站的功能不同，所传递的信息与风格也不同。色彩会产生强烈的视觉冲击，是网页设计中的重要元素，对网页的风格起到至关重要的作用。因此，网页中的色彩搭配是互联网时代一个倍受关注的课题。网页设计所运用的色彩方案是感性与理性有机结合的结果。通过系统地学习设计色彩搭配原理，人们总结出一系列色彩搭配技巧，用以完善网页设计中色彩应用的理念。

1.1 网页设计的基本理论

浏览器中所呈现的画面便是网页，网页也是浏览器所解析的一份html文件。大多数网站是由多个网页组合而成，但单个网页也可以称作网站。网页设计也就是UI设计，即用户交互界面的设计。网页设计是一种基于新媒体的新型设计，不同于传统媒体如报纸、电影电视等[1]。其优点是既具备传统媒体的优势，又能实现更直接、高效的传播。网页设计具有强大的视觉效果和互动性，能够广泛涉及受众。设计网页需要结合感性思考和理性分析，过程相对复杂，方向需要根据网站主题确定，制作则是实现设计的关键。因此，设计网页需要制定明确的主题和目标，并规划网站的整体结构和风格定位。

1.2 色彩的相关理论

美国光学学会（Optical Society of America）的色度学委员会曾经把颜色定义为：颜色是除了空间的和时间的不均匀性以外的光的一种特性，即光的辐射能刺激视网膜而引起观察者通过视觉而获得的景象。色彩知觉不仅与事物本来的色彩特性有关，还会受时间、空间以及外部环境的影响，同时还受个人的经历、记忆以及视觉灵敏度等各种因素的影响。色彩可以分为有彩色和无彩色两大类。光谱中的所有颜色都属于有彩色，基础色为红、绿、黄、蓝和紫，不同比例的基础色混合可以产生各种彩色[2]。黑、白和灰色属于无彩色，但它们可以在彩色中改变明度和纯度，因此在心理学、生理学和化学上可视为完整的色彩性质。在网页色彩体系中，黑白灰三色也扮演着重要的角色[3]。

1.3 网页设计中的色彩搭配

网页设计是将互联网技术与艺术设计相融合的跨学科领域，其在实践中涵盖了互联网的理性特质和艺术设计的感性特点。好的色彩搭配会对人产生较强的视觉刺激，浏览者浏览网站时，会首先被好的色彩搭配所吸引，色彩搭配在网页设计中起着至关重要的作用。色彩作为一种视觉语言，不仅起着美化网页整体的作用还具有突出重点内容的功能。因此，设计师在进行设计网页时，必须重视网页中的色彩搭配与运用，应本着和谐、平衡以及突出重点的原则，将色彩进行搭配组合进而形成功能与形式并存的网页。

2 网页设计色彩搭配的重要性

近些年来，网络早已蔓延至生活的方方面面，人们对网页的要求早已不满足于简单的元素堆砌，他们对网页是否美观的要求越来越高。色彩是美学的重要组成部分，不同的颜色能表现不同的情感，根据网页的内容进行合理的色彩搭配，使页面所传达的信息与视觉效果相统一，能更快地与人们产生心灵共鸣，更有效地进行信息传达与情感表达。色彩作为网页设计中最具视觉冲击力的元素，还可以起到提高用户浏览效率、对内容进行分类的作用。具体来说，色彩在网页设计的重要性主要体现在以下几方面。

2.1 营造风格与表达主题

我们处在五彩斑斓的世界，色彩不仅会让我们有视觉美的感受，也会触动我们的心灵，让我们展开对色彩背后内容的想象。以梅赛德斯-奔驰的官网网页为例（图1），该网页整体上以黑色为主，以不同车型的色彩作为辅助，黑色一直以来都是高贵与典雅的代表，在视觉上又不至于抢了宣传图的风头，将车身颜色与黑色相结合既体现了品牌高端的路线，配合车型色彩又准确地传达了页面所想传达的轿车广告信息。

图1 梅赛德斯-奔驰官网

2.2 明确页面分区功能

网页具有内容丰富、信息含量大的特点，设计师可以利用不同色彩所带来的不同心理感受对网页不同的功能分区赋予不同的颜色，让网页达到主次分明、视觉流程完整的效果，让网页具有优秀的易读性和导向性。

2.3 视觉引导与强调内容

在网页设计中要充分发挥色彩的功能对重要信息进行强调，起到引导用户浏览顺序的作用，这对品牌推广新产品是有利的[4]。对需要强调的内容选择更为显眼的色彩进行强调，将用户的注意力引导到所强调的内容上去，可以从颜色的鲜艳程度以及色块大小方面入手。该图片中背景色为视觉效果较弱的灰色（图2），浏览者第一眼肯定是被鲜艳的产品图吸引；右侧小块面的产品图也是利用了与灰色的对比，小块面的色彩既能让浏览者注意到产品图，却也不会喧宾夺主盖过主打产品。

图2 圣罗兰美妆官网

3 网页设计色彩搭配原则分析

色彩搭配是一项艺术含量很高的工作，具有很强的感性特征，但是作为设计作品的一部分它又必须具有理性特征。因此，在进行色彩搭配时既要考虑到网站本身的特点，又要考虑受众的审美和心理方面的特点，从而做出既具有网页本身特点又符合受众审美的网页设计。

3.1 符合网站主题、体现网站个性

视觉传达设计是有明确的主题和内容的设计，在设计时应当利用各种视觉元素将所需传达的信息准确无误地传达给受众。这就要求主题设计者能够运用设计手段表现主题，使主题能被人们在短时间内快速接受。这就要求在设计作品不仅要简洁、易识别，具有相当的艺术性，还要有强烈的视觉冲击力与独特的风格，体现出设计作品的主题和个性。

作为视觉传达设计范畴的网页设计，其最终目的是准确地表达网页主题、传达信息，起到与用户沟通的作用。为了达到这种目的与作用，一方面要对网页内容进行逻辑性处理，符合用户获取信息的生理与心理习惯，让用户能更快地理解与接收网站信息；另一方面通过对网页视觉元素的艺术性处理，打造出体现设计主题的视觉效果，吸引用户的视觉注意力，加深用户对网页信息的印象，帮助用户理解网页内容。只有对逻辑与视觉进行了有机且和谐的处理，才能更好的表现网站主题。

只关注网页设计中的逻辑性而忽视其中的艺术性，或者只重视网页设计的艺术性而忽视其中的逻辑性，都难以达到准确传达网页信息的效果，更无法给用户留下深刻的印象，这样设计出的网页界面容易出现同质化严重的问题，无法完成网页的最终目的。要使网页设计从视觉上体现优秀的引导力，准确地突出网页主题，可以通过把握网页色彩关系中的主次关系、空间虚实、视觉顺序以及逻辑关系来实现，充分发挥色彩所具备的功能，强化网页传递信息的功能。

3.2 形式与内容的统一

设计是内容与形式的统一。内容是指设计作品中的一切要素，是构成设计作品的基础条件，主题、色彩、形象、题材等要素组成了设计的内容。形式就是设计作品的表现方式，例如设计语言、结构以及风格等等。形式由内容决定，同时又能优化内容。优秀的设计是形式与内容的完美结合。

优秀的网页设计前提是形式美与网页主题内容相契合。只注重网页的表现形式以及过于在乎其是否独特而忽视网页本身的内容与主题，或者只注重内容而忽视网页设计中的艺术性，网页设计的精彩程度都会大打折扣，显得空洞。只有将色彩与思想情感以及主题精髓相结合，才能打造出差异化的网页设计，体现出其独特的价值；另一方面，不要为了炫技而加入不必要的元素，应确保页面中每一设计元素都有其存在的价值，否则可能对用户接收页面信息造成干扰。所以，在设计之前应当进行全面地规划和考虑，只有这样才能做出功能与形式兼备的网页设计。

网页还具有多屏、分页、嵌套等特性，在设计时可以针对这一特性做出形式上更为丰富的变化，设计者在设计时不能只关注单个页面的形式与内容是否统一，也不能忽视由多个页面组合而成的同一内容的形式与内容是否统一。根据网站主题确认主体色，再围绕主体色以及页面内容进行色彩搭配，可以给用户带来较强的视觉冲击感。

3.3 注意网页整体性

网页的整体性可以从内容与形式两方面讨论，这里主要说的是形式上的整体性。网页是企业传播信息的重要途径之一，需要传达出企业想传达的内容，并要求所传达的信息能被特定的群体在特定的时间内所接受，满足目标群体的阅读需求是一切的前提。网页设计具有整体性可以让浏览者更快速的了解所传达的信息、对信息传达主题形成初步印象，更好地理解网页主题。同时，具有整体性也能更快地在浏览者脑海中形成记忆点，加强网页的独特性，有利于提高网页在市场中的竞争力。

网页是由视觉元素与听觉元素共同组成。在网页设计时，通过提取各元素之间的共同特征是加强网页设计的主要方法。例如从布局、色彩、文字排列方向等方面入手。但是，过度强调网页设计形式上的整体感会让其显得呆板，丧失灵活性。因此，在强调网页整体性设计的同时必须注重对比元素的运用，在注重网页整体性的同时也不失亮点，起到吸引浏览者眼球的作用，不至于让浏览者失去浏览兴趣。

4 网页设计色彩搭配方法

4.1 单色彩的应用

网页界面中，除了白色背景，那些频繁出现的颜色通常被视为主题色，直接影响着网页主题的表现。设计师在进行网页设计时，首先要根据网站主题和目标用户来确定网页的主题色，再在遵循主次关系前提下，搭配以合适的辅助色，让网页既具有层次感又不失和谐。下文主要从冷暖两个色系入手，对主体色彩的搭配应用进行分析。

4.1.1 冷色系色彩的应用

冷色系可见度低，给人冷静、严肃的心理感受。设计师也常利用冷色系的这一特点来表现网页的严肃性。比如，公安系统的网页中大量使用蓝色来表现警察这一职业的严肃。冷色系色彩还会给人带来清凉、舒爽的感受，在夏季我们可以在网页设计上大量使用冷色给浏览者带来愉悦的视觉感受。

4.1.2 暖色系色彩的应用

暖色系色彩可见度高，给观者带来欢快、热情、活力满满的感觉，红、黄、橙三色及其邻近色都属于暖色系。在网页设计中，设计师常常利用暖色带来的欢快感表达画面主题。例如，在国庆、春节这样举国欢庆的日子，网页往往会以红色为主题色来迎合这段时间浏览者的心理状态，为节日增添欢快的氛围，提升网页的吸引力。

4.2 多色彩的应用

商业网站的建立的初衷是宣传产品，最终目的是达成交易。分类及版面过于复杂网页不便于浏览者阅读更不能起到很好的宣传作用，与建立网站的最初目的背道而驰。因此，网页设计时要根据整体风格与被宣传的产品进行色彩搭配，将不同色彩搭配产生不同心理感受的作用发挥到极致。

4.2.1 邻近色的应用

邻近色可以是色相相邻的色彩，也可以是同一色系但明度和纯度不同的色彩。在网页设计中，可以根据不同的主题选择明暗程度以及色彩纯度不同的邻近色进行搭配，一般来说不超过四种[5]。例如，护肤品一般是为了达到皮肤干净、美白、水嫩的效果，所以在护肤品网站在选取色彩时尽量选取柔和、淡雅的色彩，给浏览者产生一种温暖、值得信赖的感觉，达到促成消费的目的。

4.2.2 对比色的应用

对比色反差较大，能起到吸引浏览者注意力的作用。对比色在纯度、明度和色相三个方面体现。其中色相对比最强烈、视觉效果也最为显著，也就是我们常说的互补色，互补色处在色相环中处于相对的位置，如红与绿、黄与紫、橙与蓝等。这些具有强烈对比度的颜色能够产生强烈的视觉效果，通常用于网页设计中的主视觉部分[6]。例如，新浪网蓝色与橙色搭配的网页标题，通过强烈的视觉对比达到宣传效果。此外，在特定的行业，例如金融地产等与鲜艳色彩不适配的行业，一般选用黑色、灰色、蓝色形成冷暖对比，既形成了互补又避免过于张扬，符合行业特征。

4.3 黑白色的应用

黑白色在色彩中被称为极色，是万能色。白色是网页设计中应用最多的颜色，适当地留白会给人以高级的感觉，给浏览者留下想象的空间[7]。而黑色虽然不及白色使用普遍，但是在设计网页色彩时，适当的黑色可以让页面变得更加沉稳，更利于浏览者阅读。例如，香奈儿官网色彩均以黑白为主，既与香奈儿的品牌调性相契合，也能体现其高贵典雅的特点。此外，对于很多追求简约的浏览者来说，黑白配色更加简单大气，更能激发他们的阅读兴趣。

5 结语

色彩具有独特魅力，色彩搭配贯穿企业生产、设计、营销的所有环节，是迅速提升品牌价值最有效的方法，是设计中不可或缺的元素。网页设计已经成为人们日常生活中非常重要的一部分，色彩搭配是网页设计过程中非常重要的环节，色彩更是网页设计中无法割舍的元素。在市场竞争如此激烈的今天，网页设计中色彩的运用要达到独特的创意效果，单纯地靠多色彩堆砌搭配是很难达到目的的，根据设计主题以及从用户角度出发进行色彩的合理配置才能行之有效。作为设计的一部分，色彩也不仅仅需要具有审美功能，它还需要具有实用功能，设计师在进行设计时需要将色彩的审美性与实用功能结合起来，才能做出优秀的网页设计。