网站设计中色彩运用分析（3篇）范文

第一篇：网站设计中色彩的应用分析

摘要:

进入21世纪，是互联网发展的又一个新时代，人们获得信息的主要方式是通过互联网。在用户浏览网页时，网页设计中色彩的选用是网站的点睛之笔，也是判断一个网页设计成败与否的关键。色彩不但能给浏览者强烈的视觉冲击力和艺术美感，还能更深层次的体现出该网站所要传递给浏览者:一个企业的经营理念和品牌所展示的价值。

关键词:

网页设计;色彩;搭配

在网页设计中，最难的让人无从下手的不是某个软件怎么运用，而是要怎么设计来吸引浏览者的眼球，这就要求我们在设计中加强对色彩的合理使用，使之为网页设计过程中能起到锦上添花的作用。这就要求在做网页设计的时候不仅要有熟练的技术，更要有艺术的美感，色彩可以说是网页设计中穿惯始终的一条纽带，从而也就体现了它的重要性。

1网页设计的基本概念

1．1网页设计的定义

在说明网页设计之前，先必须明白网页的概念:网页通俗的讲是网站中的一页，是HTML格式(文件扩展名为．html．asp．php．Jsp等)。网页实际上就是一个文件它会被存放在有网络存在的某台电脑中。网页会由相应的网址(URL)来读取和保存，当我们使用时，会穿过一系列看不见的程序，网页文件就会被你的计算机所接收，然后再由各种浏览器来分析网页的内容，最后呈现在你的眼前［1］。网页设计是一门把网络应用和艺术设计紧密相结合的一门新兴的学科，以网络作为载体，融入人们对审美的追求，继而有鲜活的艺术表现特色。在一个优秀的网页设计中，必须对色彩加以高度的重视。

1．2网页设计的发展阶段

第一阶段，以文字为主的阶段。这个阶段的网页是由一个个字符组成，所呈现的也只是单一的文字，在艺术的表现效果上基本上没有什么要求，只注重实用性。第二阶段，图和文字相结合。由于计算机技术的不断提高，静态的网页已经受到了局限性，人们整体审美观和艺术感加强，网站也不能仅仅以实用为主，而是慢慢的把制作网站的技术和艺术相联系来丰富网站的内容。第三阶段，一个字“动”。随着技术的不断更新，内容不断的增加，出现了动态交互式的网页，加之制作软件的不断强大，网页设计人员可以根据需要各自取舍相关的内容，这时候也涌入了一大批从事艺术的设计人员，网页设计技术也就从这个阶段开始成为一个新的起点，不断的注入新鲜的血液来不断壮大［2］。

1．3网页设计的要素

网页设计作为一门新兴的学科，主要要素包括:文字(既有它是局限性也有它独到的地位，所以文字是网页初始时的必不可少的要素，由之才慢慢扩展)、图形、图像、色彩(色彩是最能吸引浏览者的注意力的因素之一，色彩甚至可以直接判断一个网页设计的好坏，因为在网页中色彩占的比例较大，往往会填补不足之处)、导航栏(导航栏是网页站点超链接的主要线索，使得站点结构清晰、链接简单、查询便捷等)、多媒体(多媒体在网页设计的运用，可以说是又一个有意义的突破，与声音的结合更加增大了页面的感染力)、页面布局(在网页设计中不是把相关的页面机械的拼凑，而是要把有用的内容合理、有效的编排，分清主次，所以具备了前边说的几个基本要素的基础上，才能考虑页面的整体布局，这样才能更好的为浏览者展示更好的视觉效果)等。

2色彩在网页设计中的应用美国

光学学会的色度学委员会曾经把颜色定义为:颜色是除了空间的和时间的不均匀性以外的光的一种特性，即光的辐射能刺激视网膜而引起观察者通过视觉而获得的景象。在我国国家标准CG5698－85中，颜色的定义为:色是光作用于人眼球起除外形意外的视觉特性。因此，色彩感觉不仅与物体本来的色彩特性有关，还受时间、空间、外表状态以及该物体的周围环境的影响［3］。颜色分为无色系和有色系。无色系是指黑、白、灰;有色系是指除无色系以外的所有色彩。

2．1色彩属性

(1)明度

明度指色彩的明暗程度．是从明到暗的若干排列的灰色，无色系只有明度的特征。(图1)

(2)饱和度

是指色彩的鲜明度。根据需要可以调整色彩的鲜明度，突出所要表现的内容。

(3)色相

也叫颜色的光泽，是基本的特征，传递颜色基本基调(图2十二色相图)

2．2网页设计中色彩的搭配

(1)色彩的心理表述

色彩与人的视觉感受有着密切的关系，色彩有独特的象征意义，代表了人们丰富多彩的心理变化和复杂的情感。白色具有神圣不能侵犯的性质。给人洁净、纯朴、明快、清净的感觉。在一些高档商品网站设计中白色会被广泛采用。黑色具有庄重、沉稳的特性。给人神秘、深沉、稳重的感受。在高科技和军事网站中多采用黑色。(图4)灰色具有调和的特性。给人平凡、消极、中和、沉寂的感受。所以灰色可以用于任何色调为主的网站中，起到过度的作用。红色具有温暖、热情、活力、刺激、愤怒的特性。给人热血沸腾、过目不忘、幸福美满、喜庆的感觉。这种色彩多用于政府性网站、婚纱服务类网站。黄色具有成熟、清醒、高端的特性。给人一种娇贵、收获的感觉。多用于食品类、儿童类网站中。蓝色具有经典、冷静、清凉、诚实、悠远、永恒。给人冷静的思考氛围。多用于高科技企业网站和一些具有权威性的网站中［4］。绿色具有平静、柔和、新鲜、青春、活力的特性。给人宁静、安全、健康、平安的感觉。在学校、环保、宣传和健康类网站中被广泛使用。紫色具有深远、高傲、优雅的特性。给人捉摸不透的神秘感。多用于以女性为主题的网站:配饰、内衣、化妆品等。

(2)色彩法则

第一个法则:色彩的鲜明性。在设计中色彩鲜明，是很容易就能吸引浏览者的注意力。第二个法则:色彩的感染性。选用独特的色彩搭配，会给浏览者留下深刻的印象。第三个法则:色彩的合理性。紧扣主题、不过分夸张，给浏览者统一、和谐的感觉。第四个法则:色彩的延展性。不同的色彩会使浏览者产生不同的想象空间:看到黑色会想到神秘，深沉;看到红色会想到激情、刺激;看到蓝色会想到蓝天，大海;看到绿色会想到生命，健康等等［5］。在网页设计中，选择适合主题的色彩，会给整个网站增加灵气、有血有肉，更加鲜活。

3结语

色彩是网页设计的精髓。它不但给网页作品披上了一件华丽的外衣，能使平面的东西立体化，同时引导人们对网页有一个深层次的理解。色彩通过人们的视觉反应，在生理上和心理上产生强烈的共鸣，选用不同的颜色，所呈现的反应也各不相同。色彩有强烈的表现力和冲击力，选取好的色彩会及时吸引人们的眼球，给人留下深刻的印象，换句话说就是一种美的享受。色彩对人的视觉有决定性作用，一个好的网页设计，不但要求设计者的技术一流，还要求对色彩的运用也能游刃有余。在网页设计中色彩越来越被人们所重视，色彩的选用、比例、含义等方面，对我们有了新的要求，要求我们认真实践、研究、解决，要求我们无论在什么样的网页设计中，能准确找到它的定位。

参考文献:

［1］武上富．网页制作技巧和设计原则［M］．广州:广东科技出版社，2006．

［2］李宏，张小敏．网页设计与制作［M］．北京:化学工业出版社，2005．

［3］文涛，文峰．色彩设计［M］．北京:中国青年出版社，2008．

［4］黎芳．网页设计与配色实例分析［M］．北京:北京希望电子出版社，2006．

［5］徐育忠，林芝．色彩表现与训练［M］．北京:化学工业出版社，2007．

作者：史俊霞 高耀 单位：榆林学院网络管理中心 榆阳区教育局

第二篇：网站设计色彩搭配研究

摘要：

在网页设计与制作课程中，网页的版面布局设计是至关重要的一个方面，要设计网页版面，确立主题是设计之本，还要讲究布局的形式和色彩的搭配。

关键词：

确立主题；布局形式；色彩搭配；版面布局

网页设计与制作课程中，网页的版面布局设计是至关重要的一个方面，它关系到一个网页在欣赏者第一眼看到时，能否合“眼缘”，能否留下深刻的印象和驻足的欲望。针对页面的版面布局设计，结合实践应用，笔者有了一些自己的心得和见解，从以下几个方面做一个简单的总结。

一、网站主题的确立是设计之本

一个网站最终要设计成什么样子，主要还是由网站的主题来决定的，主题就是网站的灵魂，也是网站设计的第一步，只有主题明确了，设计者才能围绕这个主题去打开思路，寻找设计灵感。

二、版面布局的形式

在确立了网站主题之后，网站的设计也就有了大概的风格和方向了，接下来要做的就是设计网页的版面。从理论上来说，版面布局的方法不拘一格，没有固定的方式和方法，即使同样的主题同样的素材，不同的人根据各自的理解和解读可以设计制作出不同风格的页面效果来。但不管是哪种布局方法，大概不外乎以下几类。一种是按页面的区域分布划分，可以分为“T”形、“口”型、“三”型等几种形式。从这几个形象的字面表达上，我们不难想象出分别是一种什么样的布局形式。一种常见的是对称样式的，当然所谓的对称并不是一对一的绝对对称，那样看起来会比较呆板，可以通过上下或左右结构划分以及色彩的合理搭配形成一种对称的效果。还有一种是现在比较常用的所谓“豪华”型版面形式，首页设计成一个比较漂亮的海报或者是制作成优美的flash影片。这样的版型设计在广告及宣传类型的网页中比较常见，突出特点是制作比较新颖，画面漂亮，视觉冲击比较强。当然，要做出一个完整漂亮的网页，靠单一的版面布局样式是不够的，往往是几种样式的综合运用。在实践教学过程中，学生大多比较喜欢第三种样式的网页，但也只是作为欣赏之用，要做出这么有冲击力的效果，不光需要时间还需要有一定的专业功底，经常是几种工具软件齐上阵做出来的。

三、网页版面的色彩搭配

协调，是网页版面色彩搭配的基本原则，既不能太单一，也不要搞得太花哨，把整个页面弄得像个调色板一样，要合理搭配，达到“总体协调，局部对比”的效果。在色彩的运用和搭配上，学生得具备一定的审美观，懂得色彩的一些基础知识。对于色彩在设计中的搭配技巧，则需要通过不断的实践以及经验的积累慢慢悟出来。这种领悟不是靠讲解理论就能够懂得的，很多来源于生活。笔者在讲课过程中曾经举过这样一个例子：假设我们要分别制作一个清明节、一个中秋节、一个国庆节的网页，让学生自己选择以上三个节日网站的主色调。学生通过讨论之后最终制定了几种方案，清明节的主色调选用灰色，通过有点哀伤的灰色而不是太沉重的黑色，来表达这个节日人们对先人的怀念和哀悼之情；用金黄色来烘托中秋节家人团聚时和和美美的温暖氛围；而国庆节他们选择用热烈的大红色调来表达全国人民举国同庆的壮观和庄严。像这些不能单纯地靠理论知识去灌输，而是要通过日常生活中所见所得的引导，让学生自己去领悟和体会。

四、网页版面布局表格嵌套的问题

页面的版面设计方法比较常用的有表格层、框架、模板等。最简单也是最基本的方法就是表格布局法。在实践教学中，这种方法因为简单，界面清晰，学生接受起来比较容易，也多数用这种方法做页面。但就是这种简单的方法在设计过程中也会遇到一些小问题。

1．插入表格及表格的嵌套

在页面总体布局的时候，我们一般用的是直接插入固定宽度的一个表格，当然宽度由页面的宽度来决定。而页面内部的一些小的分区域，一般用嵌套表格，也就是在表格内再套表格的方式，且是用百分比的形式，这样嵌套的表格会自动去适应外部表格的变化。

2．表格嵌套中的小问题

开始的时候学生不理解为什么要用百分比的形式嵌套表格，笔者结合“青岛西海岸旅游网站”的主页设计进行了讲解。在制作页面的导航条时，直接用插入固定宽度的表格，而不是嵌套表格。因为导航项目并不一定都是字数一样的，在输入的过程中，由于宽度不统一，表格会自动变宽，而且调整其中的一个单元格的宽度时，会影响到其他的单元格，所以控制起来比较麻烦，很难统一导航内容的宽度，做出来的导航条很不整齐，影响整体美观。而利用百分比的形式再嵌套一个表格之后，这个嵌套的表格会自动适应原来上一层表格的宽度，明显的效果是制作出来的导航条宽度是平均分配的，看起来比较规整，比原来直接插入一个表格的效果好很多。通过以上几个方面的设计及实现，一个基本的网页版面的框架已经出来雏形了，接下来主要的工作就是往这个框架里面添加网页元素，逐步丰富网页内容。那将会涉及更深更广的内容，还需要学生不断去学习和探索。

作者：刘艳秋 单位：山东青岛市黄岛区职业教育中心

第三篇：网站设计中风格色彩研究

摘要：

在互联网时代，网站设计受到很多人的喜爱，特别是各种设计软件的快速发展，不仅为专业设计人员提供了便利，也使得越来越多的人开始接触网站设计，独特、灵活、便捷的网站设计不仅给用户带来美和舒适的享受，而且给用户留下深刻印象。本文分析了网站设计的风格定位、色彩搭配和网页美化。

关键词:

网站设计；风格色彩；美化

网站设计和建设是一门技术也是一门艺术，怎样设计一个成功、成熟的网站是很多设计人员应该关注、思考的问题。而风格色彩和美化是网站设计的重要内容，在具体设计中应综合考虑多方面因素，从搜集资料、网站框架设定、风格定位到各个设计制作环节和最后的优化调试，要认真做好风格色彩和美化，不断提高网站设计水平。

1网站设计的风格定位

网站设计首先应结合其主题内容，确定其形式和风格，实现内容和形式的完美结合，从而获得良好的宣传效果。风格定位对整个网站设计都非常重要，如生活类、娱乐类、经济类、技术类、企业类等类型网站，而不同类型的网站，其风格是不同的，所以在网站设计中，应考虑不同行业的性质，充分体现出不同主题风格。通过合理、科学的交互方式、先进技术、合理结构布局和色彩，可以帮助用户快速、熟悉网站操作，吸引用户的注意力。

1.1布局风格

合理的网站布局为用户浏览网站提供方便，也是网站阅读的重要指引，精心规划地网站布局，可以帮助用户快速找到所需内容。网站布局主要有居中、上下、左右等形式，若细化划分还包括“田”字形、“品”字形、“厂”字形、“国”字形等，不同行业、不同类型的网站可以结合自身需求，选择合适的网站布局。

1.2颜色风格

某网站以黑色为背景色，利用专业的flash制图软件，结合网站主题风格，以黑色为基础，双击flash快捷图标，进入“开始页面”，该页面中包含从模板创建、创建新项目、打开最近项目等内容，从模板创建中，设计人员可选择测试、广告、幻灯片演示文稿等项目；创新新项目中可创建flash项目、flashJavascript文件、动作脚本应用文件、动作脚本文件、flash表单应用程序、flash文档等，在网站设计中主要采用flash文档，单击flash文档按钮，进入flash软件操作界面。整个操作界面包括七个部分：活动面板、固定面板、舞台、时间轴、工具栏、菜单栏和标题栏。新文档创建以后，其由默认来设置文档属性，具体设计过程中，flash属性要求不符合默认值，这时设计人员应结合网页设计要求进行手动修改该，选择修改—文档命令，将文档属性对话框打开，在这个对话框中修改标尺单位、帧频、背景颜色、文档的尺寸和名称等参数，经过修改以后flash文档适用非线性编辑，对修改后的文档属性进行保存。Flash动作制作完成以后，利用SWF格式生成flash播放文件，从而在网络系统中传播。选择文件—设置的选项，将设置对话框打开，在类型选项中能够看出flash为MOV、HQX、EXE、PNG、JPG、GIF、HTML、SWF等格式文件，对类型的文件中选中复选框，然后将该格式标签打开。然后挑选一些明亮的颜色和黑色形成鲜明对比，强化视觉冲击力，在操作flash制图软件时，以该软件系统为设计平台，优化颜色设置。

2网站设计的色彩搭配

网站设计过程中，相关设计人员应全面把握用户的心理状态，并且结合色彩搭配原理，网站设计中应讲究艺术性，注意色彩搭配合理，色彩鲜明，通常情况下色彩鲜艳的网站更容易吸引用户，然而网站设计不能单纯利用某一种颜色，使用户感到乏味、单调，但是也不能运用所有颜色，使用户感到缺乏协调性和统一性，使整个网站花俏、轻浮。一个网站应保持一种或者两种主要颜色，不能使用户感到乏味、单调，更不能让用户迷失方向，相关设计人员应充分考虑到网站主题色，在一个网站中色彩使用应避免超过四种颜色，颜色太多使用户感到没有侧重点和方向感。另外，确定网站的主题色以后，在利用其它配色，协调处理主题色和其它配色的关系，呈现出良好的网站设计效果，并且网站色彩搭配应和网页内容协调起来，结合不同的网页内容，选择不同颜色，通过色彩的合理搭配，充分体现不同网站的特点和特色，突出个性，设计特点鲜明的网站，吸引用户在网页上驻足。

3网站设计的网页美化结合

网站主题内容，使用PS设计软件，从开始菜单中找到AdobeFlashProfessionalCS5.5，单击打开软件，新建一个空白文档，点击“新建文档”对话框中的ActionScript3.0选项，对话框右边出现一系列参数，在此可以设置文档的属性，启动Flashcs5.5的初始界面，利用工具面板、时间轴面板、属性面板等拖曳的活动面板，利用鼠标按住面板的顶部深灰色区域可以将面板拖动到合适的位置，在菜单“窗口”>“工作区”中可以选择适合的工作区环境，按快捷键N键，在舞台的空白区域拉出几根线条，选中线条在“属性”（Ctrl+F3）上设置线条的属性。在属性面板中，位置和大小指的是线条距离舞台左上角的位置。在笔触选项中设置线条的颜色、笔触的粗细、样式等，将端点和结合部设置为所需要的样式。在实际制作中，也经常需要将线稿导入到Flash中，然后根据线稿新建一个图层进行描线，将线稿转换为Flash文档，熟练的使用线条工具和选择工具进行描线是动画师的基本工作，最后使用“文件”>“保存”（Ctrl+S）或者“文件”>“另存为”（Ctrl+Shift+S），保存动画项目，存成.fla文件。网站设计美化应坚持反复和条理的原则，形成整体网页秩序美，在运动发展过程中实现一致性和协调性，为了使网站主体画面有生气，保持变化性，要通过合适的对比方法，使网站各个部分实现有效调和，保持不同元素的平衡和均齐，实现网页中心和动态元素的统一性。

4结束语

近年来，计算机科学技术快速发展，网站成为人们进行网络交互的重要门户，结合网站设计要求，做好风格定位、色彩搭配和网页美化，从而设计一个用色协调、形象突出、整体性好、使用方便、简洁实用的网站。

参考文献：

[1]贺冬梅.浅谈网站设计的风格色彩与美化[J].中国科技信息,2012,06:138-139.

[2]李海燕.网站设计色彩协同与风格异同研究[D].合肥工业大学,2013.

作者：古艳利 单位：天津市先行多媒体网络技术有限公司