色彩元素在网页设计中的运用

2016-03-22喻芸张延玲

电脑知识与技术 2016年2期

喻芸　张延玲

摘要：网页作为现代生活中不可或缺的一种信息载体，如何使信息更有效的传递并被人们所正确的接受成为设计者们所要研究的新课题。而网页设计中的色彩作为信息传达最直接的元素，成为本文所要研究的主要对象。该文将从色彩元素在网页设计中所表现的作用出发，分析了色彩在传达过程中对人所产生的心理反应。之后分析了当今网页中色彩所存在的问题，从而针对性的对所存在的问题提出网页色彩运用原理的相关注意事项，依据这些原则并于文章最后对不同类型的网站所应采取的色彩提供了参考性的方案，以期使信息更有效合理的传达给浏览者。

关键词：色彩；色调；饱和度；网页设计；风格

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）02-0168-02

一个优秀的网页设计师制作出的网页往往会给人带来记忆深刻，好用易用的感觉。而网页设计中的版式、图片、色彩等视觉元素的运用都直接影响着浏览者对本文从色彩在网页设计中的作用及存在的问题出发，提出在网页设计中对色彩的运用需要注意的事项，并在文章最后结合自己实际操作中可能会用到的不同色彩给出参考性方案，以期帮助学习者在日后的网页设计中更好地把握色彩的运用。网站的感受，在这些内容中，网站整体的定位、风格都需要通过颜色来给用户直接感官上的刺激，使其产生共鸣，所以色彩在网页制作中就显得尤为重要了。

1 色彩在网页设计中的作用

1）视觉区域的划分

色彩可以创造出有序的视觉感，设计者可以通过不同的色彩区域来对信息进行分类划分。在网页中常常可以通过色彩不同的饱和度来体现网页的主次顺序，使浏览者有不同的心理效果。

2）重点主题的突出

在浩瀚的网络信息中，为使浏览者能尽快在网络漫游中寻找出自己所需要的信息，网页设计师可以运用色彩自身的表现力、情感效应来使网页的内容与形式进行有机的结合，以色彩的内在力量来美化页面，从而突出主题，帮助浏览者实现更有效的沟通。

3）目光焦点的吸引

在众多的网站中想要脱颖而出是不是件容易的事情，只有通过色彩的力量增强网页的吸引力去“讨好”浏览者挑剔的眼睛。

4）艺术性的增强

好的色彩设计会给网页作品带来生命力，它不仅反映在视觉上，也会体现在网页的心理影响和象征意义上，会给网页设计的作品增强艺术性。

2 色彩在网页设计中存在的问题

浏览者打开一个网站，首先映入眼帘的是这个网站的色彩，而不是其他元素。从某种程度而言，网页设计师对色彩的运用和搭配直接决定了网站设计的成功与否。因为在平面图上，色彩给人带来的视觉冲击力是最强的，给人留下的印象也是最深刻的。

目前一些网页往往会使用很多种颜色，使网页效果看起来很丰富。比如有些设计师为了能使网页做得更具有视觉冲击力，更具有艺术性，从而将风格不同颜色各异的图片、文字放在同一个页面上，而浏览者看完此类网站后往往会感觉没有艺术感。这就是因为色彩的过度使用使得页面缺乏统一的协调感和内在美感，从而干扰了用户浏览网页的效率。

另外，一些网页色彩的使用没有考虑到视觉因素对人的制约，如采用深色图片作为页面背景，严重干扰了用户识别信息主体的能力。还有一些网站对色彩的运用没有注重网站信息的性质，没有独特的风格和鲜明的个性，给浏览者没有留下深刻的印象。

3 色彩在网页设计中的注意事项

1）控制色彩数

一个网站最好有一个主色调，并利用这个主色调贯穿所有的页面，这一色调应有利于体现网站主题宗旨，而根据不同的单元，可再以辅色搭配做出区域划分。同一个画面色彩最好不要超过三种，过多的色彩会降低网站的阅读性，也会分散用户的注意力。现在设计师在对网页色彩设计时，多以浅颜色为背景，配上深颜色的字，这样浏览者阅读起来会显得自然流畅、柔和淡雅，符合人们的视觉认知习惯，也有利于突出页面的重点。

2）注意色彩的对比

① 明度对比

在网页设计中，往往通过明度对比来突出形态特征。明度越高越能突出主题。例如，文字的色彩与底色间如果存在较大的明度差，浏览者往往更会有易于阅读的感觉。

② 纯度对比

强纯度对比的色彩表现出的效果明确肯定，弱对比的色彩表现出柔和单一。在实际设计中，对色彩的运用往往并非饱和色，而恰恰是带有一定灰度的非饱和色。这里需要知道的是：纯度从高到低的排列为：红色>橙色>紫色>蓝色>绿色。

③ 面积对比

色彩学家歌德认为，色彩的明度和面积决定着色彩的力量。明度越高，色彩力量越强，并给出了各补色力量平衡的面积比例关系。

黄：紫=1：3 橙：蓝=1：2 红：绿=1：1

在对大面积的颜色选用上宜采用低纯度的背景，如果需要一定的变化来加强网页背景的厚重感和纵深感，则需要在尽可能颜色统一的前提下寻求色彩的变化。

4 色彩在网页设计中的参考方案

1）喜庆、动感型的网站

设计此类网站时，网页的主色调多采用红色。因为红色会使人感觉喜庆、动感、温暖，还具有很好的明视效果。如若红色与白色连用，会给人一种现代感，还会产生轻松、愉悦、休闲的氛围，常常被用于食品类型的网站中；而在体育网站及一些与运动相关的画册或宣传单中，常常会用红色与黑色连用，因为红色与黑色同用会给人一种跳跃、律动的感觉。

2）可爱、温馨型的网站

比如在很多的母婴或儿童教育类网站中，由于浏览者多为女性，所以在设计此类网站色彩时，多以粉色、黄色、橙色为主色调，在色彩上保持高纯度和高明度。另外还可以与白色连用，使其色感变得柔和，给人一种宾至如归的感觉。此类配色还多用于生活用品、纺织品或服务行业中。

3）科技智慧型的网站

此类网站通常可以选蓝、灰、或绿色等。

在一些商务型的网站中，比如注重稳健形象的金融和电信机构，运用最多的就是蓝色。而强调高科技型的网站中则会以黑色作为主色调，渲染出敏锐、先进的印象。在大多数的校园网站中多以蓝绿色作为其基本色，因为蓝绿色不仅能营造出沉静、收敛的效果，还具有学生特有的青春洋溢，朝气蓬勃的气息。

此外，在一些办公用品或者是高档西服等宣传页面中，常常用灰色来渲染，因为灰色给人稳重柔和的感觉，同时可以营造出简练、洒脱、充满智慧感的气氛。

5 结束语

总之，网站整体的色彩设计是个系统工程，只有充分认识色彩的心理反映，了解色彩的表现特征及其应用的基本原理和法则，才可在设计网站时做到统一规划，统一风格，这样才可以形成整个网页的整体性，让网页设计的个性创造和审美意识得到淋漓尽致的展现。

参考文献：

[1]何建华.视觉有温度——网页色彩情感研究[J]. 韶关学院学报·社会科学，2010（2）.

[2]游婷.网页界面设计中的配色方案研究[J]. 科技资讯，2009.

[3]李向来.网页界面设计中的配色艺术[J]. 濮阳职业技术学院学报，2007（2）.