网页色彩与布局设计（第2版）课件 第三章 网页色彩的搭配

TheColoringofWebpages第三章网页色彩的搭配2网页配色准则

ColorContrast1网页搭配技巧ColorHarmony2目录CONTENTS3网页配色准则色彩鲜艳独特风格主题相关1PART遵循艺术规律4请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。网页配色准则

ColorContrast3.1.色彩鲜明网页色彩达到鲜艳明亮的效果，会使得网页更加吸引眼球。有色彩的记忆效果是无色彩的3-5倍。有色彩的网页比完全黑白的网页更能吸引用户。如图3-1所示，此网页运用色彩鲜艳明快的颜色穿插在网页之中，更加吸引用户的注意力，印象深刻。图3-1网页色彩鲜明5请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。3.1.色彩鲜明明度或高纯度的色彩对视觉的刺激强烈，如图3-2所示，虽然使用大面积色彩的网页可能会很好看，但并不人性化，因此，尽量降低视觉刺激的配色才更人性。图3-2主页为高明度的色彩网页配色准则

ColorContrast6请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。3.1.1色彩鲜明网页色彩达到鲜艳明亮的效果，会使得网页更加吸引眼球。有关实验表明，有色彩的记忆效果是无色彩的3-5倍。也就是说，有色彩的网页比完全黑白的网页更能吸引用户。如图3-1所示，此网页运用色彩鲜艳明快的颜色穿插在网页之中，更加吸引用户的注意力，并给用户留下深刻的印象。图3-1网页色彩鲜明网页配色准则

ColorContrast7请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。3.1.1色彩鲜明如图3-3所示，同样是大面积的红色，但降低了明度与纯度，视觉刺激弱、柔和，女性特征比较明显，给人一种温柔、纯真、诱惑与浪漫的感觉。图3-3主页红色降低明度与纯度网页配色准则

ColorContrast8请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。3.1.2独特风格如图3-4所示的是一个有关产品展示的网页，此网页将不同颜色、形状的产品排列在一起，形成独特的视觉效果，体现网页设计中独特性。图3-4网页独特性网页配色准则

ColorContrast9请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。3.1.2独特风格图3-5通过大面积的蓝色与白色组合，充分表现一种安静感；同时通过气泡与曲线的变化又表现一种动感。因此整个页面动静结合，非常符合儿童的个性。图3-5某儿童网站网页配色准则

ColorContrast10请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。3.1.2独特风格图3-6通过太阳光穿透乌云的一点透视，将八爪鱼置于前景，在第一时间抓住浏览者的眼球。图3-6某网页设计网站网页配色准则

ColorContrast113.1.3主题相关网页中色彩要与网页的主题密切相关。不同的色彩有不同的象征意义，不同的色彩对人的心理感受也不同，所以不同的网页在选择色彩的时候，要充分考虑到色彩的象征意义和大众的心理感受。图3-8网页的主题相关性(2)图3-7网页的主题相关性(1)网页配色准则

ColorContrast123.1.4遵循艺术规律网页设计必须遵循艺术规律，注意的是形式美法则，即：对称与均衡、单纯与齐一、调和与对比、节奏与韵律以及多样与统一。图3-11对称与均衡网页配色准则

ColorContrast13如图3-12所示，此网页运用了节奏与韵律原则，利用点与线的组合形成具有节奏感和韵律感的图形。图3-14TOYSRUS网站图3-13充满无限情趣的儿童网站网页配色准则

ColorContrast14网页搭配技巧使用邻近色使用对比色2PART色彩的数量使用黑色使用背景色15色环中向邻近和靠近的颜色，可以是两两相靠的颜色，也可以是相隔几个色彩的颜色，但是相隔的色彩至多不能超过5个。3.2.1使用邻近色图3-15红与黄邻近色图3-16红与黄邻近色网页搭配技巧ColorHarmony16对比色，是指色环中相差不到180度的两种颜色，相互之间的角度越大，也就意味着对比度越大。图1-6补色组成的网页效果图3-18红色与绿色的对比图3-17蓝色与橙色的对比3.2.2.使用对比色3.2.2使用邻近色网页搭配技巧ColorHarmony17黑色是经典的色彩，更是神秘的色彩，它蕴含着攻击性，但它在邪魅中还隐藏着优雅，在沉稳中里还包含权威，它与力量密不可分，它都是最具有表现力的色彩之一，强烈而鲜明。3.2.3.使用黑色图3-19黑色系网页设计(1)网页搭配技巧ColorHarmony18如图3-20所示，此网页使用传统而经典的黑白系配色互相映衬，让网页的主题效果更加突出，整个网站的细节设计微妙而漂亮。3.2.3.使用黑色图3-19黑色系网页设计(2)网页搭配技巧ColorHarmony19在一般情况下，使用素淡清雅的颜色作为背景色，避免采用花纹复杂的图片和纯度较高的色彩，背景色的颜色要与网页的主色调相协调，背景色的目的是辅助主色调，丰富网页设计的整体性，因此背景色不能使用纯度过高的色彩。图3-21背景色与文字的对比3.2.4.使用背景色网页搭配技巧ColorHarmony20事实上，色彩的数量一般控制在3-5种颜色之间最好，通过颜色属性的不断调整来产生不同的效果。但在个别的