动态网站设计的色彩应用

摘要：由于多数网站设计师一般是工科背景，缺乏对艺术和色彩的研究，导致设计出来的网站仅能满足客户功能方面的需求，在版面和网页整体视觉效果方面无法满足客户日益增长的需求，本案例从色彩学方面分析色彩及搭配特点，结合儿童摄影网站的浏览人群对色彩的喜爱，提出解决色彩搭配和主页版面设计的方案，为工科背景设计师在设计网页界面的时候解决版面色彩搭配提供启发和借鉴。

关键词：色彩；色彩搭配；儿童摄影网站

0引言

动态网站设计课程是计算机大专业的教学体系中的一门重要课程。计算机专业的授课老师通常出自工科而非艺术类专业，程序和技术是他们的强项，着重代码或界面在DREWEAVER中技术部分的实现，也是教学中的重点。计算机专业的学生一般也是非艺术类考生，对美术和色彩的知识了解相对较少，这导致其设计出的界面不美观，网页中图片素材的选择、色彩的整体把握和搭配比较欠缺。然而从网站使用者的角度来讲，打开网站首先是视觉上的感知，对于功能部分感受没那么直接，漂亮精美的界面可以让人耳目一新，视觉上的强烈印象可以激发浏览者更多的好奇心，从而增加浏览者停留在本网站的时间。网站的设计和推广的目的是获得浏览者的关注量，所以一个好的动态网站不仅功能代码要设计完善，界面美工方面也需要精心设计，而设计精美的界面则需要整体图片与色彩的搭配。

1色彩与网页设计

1.1网页界面布局

在动态网站设计课程的教学实际中，网页布局是授课重点，常见的布局技术手段是采用DIV+CSS。其技术核心是：DIV实现网页用层进行区域划分，在区域与区域的位置调整和细节效果的处理方面利用CSS盒子模型原理来实现，盒子模型如图一所示。利用DIV+CSS技术来布局网页界面使得网页整体效果看起来更为精美，但学生仅仅只掌握DIV+CSS技术还不能做出耳目一新的网页效果，DIV+CSS只是网页界面设计的一个工具，熟练掌握和运用工具还不能达到境界高的网页制作，想要随心所欲的根据不同浏览人群特点设计出相应的美工效果的界面则需要掌握和运用色彩学。

1.2色彩构成与搭配和网页界面设计的关系

1.2.1色彩

色彩是光经过物体散射到达人眼睛中的颜色，由明度、纯度、色相三要素组成，分为无彩色系和有彩色系，国际上普及的色彩分类是孟氏色立体，色彩实际运用和搭配中通常参考它。不同的要素组合出不同的颜色效果。色彩的构成是将两个或两个以上的色彩，根据不同的目的，按照一定的原则，重新组合、搭配、构成新的、美的色彩关系，在网页设计中要运用这个原理来进行素材搭配。色彩是客观存在的，但人对色彩的反应却是随着很多因素的变化而变化的，也就是说色彩具有生理特性。视觉的适应是由于外界变化引起视觉的改变过程，当人们看物体时，常常伴随着心里的调节。现实生活中，人们看到的颜色大部分是多种色彩的混合。即用两种或多种颜色互相混合而产生新色彩的方法，分为加色混合、减色混合和中性混合三种。网页界面设计中，整体色彩搭配选择图片组合的时候要重点考虑，可运用色彩混合来控制网页整体效果，从而达到设计效果耳目一新，具有强烈的色彩视觉冲击感，给网页浏览者留下深刻的印象。

1.2.2色彩与网页设计

一般来讲，网站美工设计要完成如下任务：表达一定的界面艺术效果、使页面结构清晰可读性强、实现不同的功能、丰富网页的内容。其中界面艺术效果设计主要包括色彩运用。在网页制作中，用户视觉上看到的往往是图片、线条、文字、动画等，这些元素在色彩方面都有色彩的构成要素。把诸多的网页要素放在同一个页面上，需要考虑网页元素之间的色彩搭配以及整体色彩的构成。根据不同的设计应用需求，选择性地把网页元素整合放在一起才能获得色彩美观的网页效果。

2儿童摄影动态网站美工设计中的色彩学应用

2.1案例概述

主题为儿童摄影的动态网站，一个优秀的网站通常比较注重主页的设计，本案例重点工作为区域划分和运用色彩学对整体效果的控制，根据主页要达到的整体效果准备网页图片等素材。网站主页界面区域布局为：公司店面和拍摄场地的展示区域、展示最新儿童摄影作品区域、页脚区域.

2.2儿童摄影网站中的色彩设计

2.2.1色彩与审美需求

配色实践证实，凡是能与接受者产生共鸣的色彩搭配，接受者才认为是美的，是调和的，因此色彩调和就有一个与接受者审美需求的统一问题。色彩设计能够获得成功，使接受者与之产生共鸣，设计就必须有针对性。儿童摄影作品的对象主要是儿童，儿童摄影中使用的工具是色彩对比强烈、个性鲜明的服装、玩具、道具及场景。儿童摄影网站浏览的对象主要以年轻妈妈居多，所以本案例的主页整体色彩要符合多数女性对色彩的接受和喜好需求。多数年轻女性一般喜欢粉、红色、白色以及其他偏清新亮丽的色系。

2.2.2色彩与营销

研究和了解消费者心理，给商品恰当定位，然后给商品、包装等恰当的色彩，将商品的理念传达给消费者，使营销实现高效化，取得最佳效果，可以说，色彩是一把打开消费者心灵的无形钥匙。

2.2.3儿童摄影主页的色彩设计

本案例中，主页整体风格为色彩清新亮丽的颜色。因为儿童摄影被拍摄者是小朋友，网站的浏览者以女性为主，所以网站色调以粉色系、白色系为主色调。色彩需要对比，色调需要过度，这样搭配出来的颜色更能使得多数人接受。本案例中，采用的网页整体背景以非常淡的粉色加少许白色为背景颜色。这个背景色将充满整个网页的边角和非主体区域。色彩的明度、纯度需要一个对比和过渡，所以在选择图片素材上，本案例中的照片素材部分选择纯度和明度比背景略高的粉色、红色。本案例采用大面积的暖色调粉色为主色调，冷暖色调搭配是工业设计应用中较为经典和谐的色彩搭配，所以笔者在大面积为暖色调的主页版面上加入蓝色、绿色等冷色调的小面积色区。这是因为在色彩视觉方面，当呈现在眼前的大面积是一种色调，容易引起视觉上的疲劳感，所以笔者在设计主页过程中加入了小部分蓝色的线条、小图片的冷色调色区，从而达到冷暖色调对比和谐的色彩呈现。由于黑色、白色和灰色这三种颜色一般可以与任何颜色相搭而不失协调，所以主页版面笔者加入了局部的黑、白、灰小色区的素材。这样儿童摄影主页的色彩构成为：淡粉色为主色调，图片区域既考虑了和粉色一个色系的暖色调，又加入了小面积的冷色调做点缀，同时破除掉色彩上的视觉疲劳问题，最后主页呈现出来的是色彩结构清新亮丽又不觉眼花缭乱和疲劳的效果。

3结束语

本案例从色彩学的原理及特性分析，以儿童摄影主页的美工设计为案例，解决了网站整体效果控制方面的色彩搭配问题，为工科背景的网站程设计人员在网页界面美工设计方面提供重要参考。

参考文献

[1]黑马程序员.网页设计与制作项目教程[M].北京：人民邮电出版社出版社，2017.

[2]赵国志.色彩设计基础[M].北京：高等教育出版社，2007.

[3]周至禹.艺术的色彩[M].重庆：重庆大学出版社，2013.

[4]张帆.网站美工高级培训教程[M].北京：清华大学出版社，2002.

作者:杨昭兵 单位:苏州经贸职业技术学院