网页设计中的色彩运用与研究

唐伟键

摘要：在网页设计过程中，色彩的运用会影响实际设计效果。科学、合理的色彩搭配，是网页设计水平的体现。在该文的研究中，重点对网页设计中的色彩应用原则、常用网页的配色方案以及色彩选取等几个方面进行了研究，希望可以为提升网页设计色彩的合理性提供一定的帮助作用。

关键词：网页设计；色彩运用；合理性；色彩效果

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

Color Application and Research in Web Design

TANG Wei-jian

（Career Technical College， Xiamen， Xiamen 361024， China）

Abstract： in the process of web design， the use of color will affect the actual design results. Scientific， reasonable color collocation， is a manifestation of the level of web design. In this paper， we focus on the principle of color application in web design， the color scheme of common web pages， and the selection of color.

Key words： web design； color use； rationality； color effect

网页设计水平的高低，很大程度上受到视觉效果的影响，优秀的网页设计者，通常都比较重视网页色彩的运用。网页色彩搭配的好坏，对于网页的感官效果有着十分直接的作用。网页访问者在浏览网页时，留给其最深刻印象的往往不是网页的内容，而是其色彩搭配。所以说，对于网页设计者来说，一定要充分利用好色彩的作用，强化网页的色彩感染力，从而提升网页的视觉冲击力，达到更好的宣传效果。

1 色彩在网页设计中的基本原则

1.1 合理使用色彩的功能

网页的最重要的功能就是向外界传递信息，政府机构、社会组织、企业单位等，通过设计网页，将一些自身的公开信息向外界进行传播。对于网页所有者来说，可以借助网络平台实现自身信息的扩散，而相关的信息需求者，可以通过浏览对口的网页、网站，满足自身的信息需求。

所以对于网页色彩使用，就要充分发挥其在宣传信息方面的优势，网页色彩的设计，要对网页信息的传递起到强化作用。在实际应用中，一般是企业在网页设计方面，投入的资源较多，尤其是一些大型的企业，其网页设计十分精美，充分发挥了色彩的功能。

而对于色彩功能的正确发挥，要根据网站的类别以及所要表达的整体意思，来确定符合要求的色彩搭配。色彩的搭配，要切实符合网页所表述的实质内容。另外，也应该根据浏览人群的不同差异，设计差异化的色彩。例如，网页内容是吸引女性购物的，应当根据女性对色彩总体偏好，增加一些绚丽的色彩，例如粉色、红色等。并且网页的底色，要注意同文字及相应图片的搭配，要注意避免对比过于明显，又要注意降低视觉审美疲劳。

1.2 保持色彩效果的统一性

专业的网页设计，要注意做到色系的统一、协调，不同的浏览者，其审美体验也不尽相同。但是，在色系变化方面，通常情况下，网页浏览者都更愿意欣赏比较纯净的网页色彩。其实，这就是要设计时注意尽可能保持网页色彩效果的统一性、协调性。一般来说，儿童类的网站，使用的色彩较多，其色系也以卡通色系为主，而其他类别网站，在制作过程中，要避免使用多种色系（不超过两种），尽量保持色系的统一，这样可以更加凸显网页内容的主题，同时在视觉感官色彩上，给网页浏览者留下比较深刻的印象，增加网页内容的宣传效果。

1.3 提高色彩风格的独特性

网页的色彩风格，是和网页的宣传主题相互映衬的，网页设计要注意突出网页内容的独特性、稀缺性，因此，就需要搭配独特的色彩风格。在给浏览者带来的视觉冲击和心理感受体验方面，不同风格的色彩有着较大的差异。从专业的色彩风格来看，红色的穿透力最长，因为其波长最长，当浏览者看到网页时红色时，最容易表现出的感情色彩是温暖，兴奋以及热情、幸福等，这就是通常所说的暖色调。不过，在很多领域，红色又被认为是危险、诱惑、警告的色彩。蓝色的色彩风格，同红色有着较大的差异，其通常被认为是寒色，在表现情感方面，多表现比较淡雅、理智、冷静、客观的感情色彩。可以说，不容风格的色彩，其心理感情归属是有着较大差异的，因此，在设计网页时，要注意根据网页内容所表达的整体感情色彩，选择独特的色彩风格。

2 常用的网页配色应用技巧

2.1 同类色配色应用

同类色指色相性质相同，但色度有深浅之分的色彩。这类配色，主要是一些专业性、技术性较强的网站，通过这种配色，能够有效提升网页的层次感，并且使得浏览者可以感受到较强的逻辑性和专业性。例如，奔驰公司北京分公司的网站首页，使用蓝色为主要色调，这种色彩风格，正好契合了奔驰品牌的价值理念，并给人以专业、优质、典雅和高贵的气质，显得非常有层次和内涵。

2.2 邻近色配色应用

邻近色，就是指的在色带上非常相近的颜色，所谓邻近色，这类颜色，通常在网页设计中，相互搭配交替使用。既能体现出一种流畅的过度，又能让浏览者感受到线条分明的层次感。例如比较常用的绿色和蓝色，红色和黄色等。这类邻近色，在网页中搭配使用，可以起到很好的效果，在内容方面，搭配以精美的图案，会更加显示出这种邻近色之间的婉转过度。缓解单一色彩造成的单调之感。过于单一的色彩，也容易让浏览者感受到缺乏活力，但是如果使用过于丰富的色彩又会显得过于华丽，对于一些优秀品质的服务或产品宣传，使用过于华丽的色彩，明显是不符合的，所以在这种情况下，可以使用邻近色。科学合理的使用邻近色，会使得画面更富有层次感，同时能避免因使用过多的其他色系所造成的花哨感。

2.3 对比色在网页配色中的应用

对比色指在24色相环上相距120度到180 度之间的两种颜色，把对比色放在一起，会给人的视觉带来强烈的排斥感。两种可以明显区分的色彩，也可以叫对比色。包括色相对比、明度对比、饱和度对比、冷暖对比、补色对比、色彩和消色的对比等。是构成明显色彩效果的重要手段，也是赋予色彩以表现力的重要方法。通常在使用中是以一种颜色为主调，占有较大比例的色块面积，同时辅以对比色，起到点缀的作用。对比色的应用需要注意的是色彩之间色块的搭配，做到主次分明，否则不仅不能突出视觉效果，反而会起到弱化视觉效果的作用。

3 色彩搭配在网页中的应用

3.1 色彩决定网页的第一印象

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。因此色彩是视觉信息传达的要素。进入一个网页的瞬间，首先进入视线的就是色彩，浏览者对网页的整体感觉印象就会固定下来，如同人与人之间第一次见面，在相互介绍之前，通过衣着打扮、言行举止就会大概了解人的性格一样。设计师可以利用色彩的认识作用，使网页的内容和设计理念有机结合，用色彩的表现力来与浏览者沟通，让其认识、理解、接受网页中所传达出的主题信息。各种颜色按照一定比例，按照美学原理有规律地联系应用到一起，构成一组完整的色彩设计作品，运用得当的色彩会使网页看上去协调、美观、气氛活跃，更富有美的感染力，从而吸引浏览者停留更长的时间。

3.2 色彩在网页中的功能和定位

色彩在网页中的功能和定位，除了主色，还有背景色、融合色、强调色等。主色是主角，确立主题；背景色决定了整体印象；融合色被应用于页面中的不同位置，通过颜色的反复共鸣让网页界面更具整体性；在大面积的背景颜色当中，强调色强调出某一亮点，吸引注意。

3.3 极简网页设计中的几种技巧

3.3.1 简约而通透的白色页面

白色，在网页设计中，是运用较多的色彩。因其明度最高，并且没有色相，给人以明亮干净、畅快、朴素，永恒无瑕的感觉。白色在视觉色彩中经常象征着纯净和整洁，温和而淡雅的色调，更适合搭配多元化的色彩。一般来说，一些科技意向较为深刻的网站，往往搭配较多的白色。在运用白色时，还可以通过色调层次深度的变化，以及饱和度的变化，呈现出不同的表现力。在设计白色页面时应该注意，减少无关主题内容的广告，使用稍微大一些的字体，降低浏览者阅读的疲劳度，把网页的相关链接做得尽可能简洁。

3.3.2 精致高雅的灰色绅士页面

灰质让人联想到智商与脑力，它不像黑色那么鲜明，又不像纯白那样苍白，灰色是黑与白的过度，是完美的补色。国外很多优秀的企业，在其网站首页或者分类二级页面上，经常使用精致典雅的灰质色彩。灰质色彩给人以睿智冷静的感觉，和任何色彩搭配，由于它的中立性，常常被用作背景颜色，从而使其他颜色更为突出。在设计中可使用浅灰色替代白色，用暗灰色替代黑色，以此赋予网页与众不同的高雅之感。在设计灰质色彩网站时，要注意其搭配色彩的明暗灰浅，降低颜色的重叠差异，充分发挥灰质色彩的变现力，提高网页的吸引力。

4 结束语

网页设计需要色彩的合理搭配，色彩的运用需要考虑的影响因素很多，但总的来说，要通过色彩的运用，提升网页内容的宣传效果，这是最重要的目的。而要想实现良好的宣传效果，色彩的设计和使用，要遵循美学的视觉感官规律，根据不同的内容，不同的宣传受众以及不同的网页类别，搭配不同的色彩以满足多数浏览者的审美习惯，使得网页的点击率得到提高，从而提升企业网站的知名度。

参考文献：

[1] 杨晔，曲业华，李曼.浅谈色彩在界面设计中的应用[J].辽宁经济管理干部学院：辽宁经济职业技术学院学报，2014（2）.

[2] 张小玲.电子商务网站界面设计中的色彩情感研究[D]. 重庆：重庆师范大学，2013.

[3] 公茂兰.平面视觉元素在网页设计中的运用研究[D].赣州：赣南师范学院，2013.

[4] 高隆.企业网站设计中网页版式设计的“性感”探究[D].长春： 东北师范大学，2013.

[5] 雷静，刘伟，黄道丽.网页信息排列方式、色彩和层级深度对视觉搜索效率的影响[C].第十五届全国图像图形学学术会议论文集，2010.