网页色彩与布局设计（第2版）课件 第五章 网页色彩应用分析

WebColorApplicationanalysis第五章网页色彩应用分析2暖色WarmColor1冷色CoolColor2单色Monochrome3近似色SimilarColor4目录CONTENTS互补色ComplementaryColour5突出色HighlightTheColor63暖色红色黄色1PART4请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。网页色彩应用分析WebColorApplicationanalysis5.1.暖色

暖色，是指色环中红色、橙色一边的色相。称暖色，能带给人温馨、和谐、温暖的感觉，这是出于人们的心理和感情联想。因此给人们一种温暖、热烈、活跃的感觉。

1.红色在暖色系中，红色是最具备力量的，它能强烈表达感情，也是抓住人的注意力的高手。红色是视觉效果最强烈的色彩，鲜艳的红色容易带给人热情、主动、活泼、温暖的感觉。5.1.1红色5请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。网页色彩应用分析WebColorApplicationanalysis如图5-1所示的网页是TrolIntermedia企业的官方网页的一部分，该企业运用红色作为网页的背景，给人一种积极向上、乐观的心理感受，同时也很好地传达了企业的工作精神。另外，红色与白色是经典的配色，是整个网页更加稳定，是一个成功的网页案例。图5-1网页中的红色运用5.1.1红色6网页色彩应用分析WebColorApplicationanalysis

黄色就像橙色和红色，黄色也是一个暖色。它有大自然、阳光、春天的涵义，而且通常被认为是一个快乐和有希望的色彩。黄色是所有色相中最能发光的颜色，给人轻快，透明，辉煌，充满希望的色彩印象。5.1.2黄色7请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。网页色彩应用分析WebColorApplicationanalysis如图5-2所示，此网页是为设计者在遇到问题时提供帮助的网站，利用黄色作为背景，给人一种明快、向上的心理感受，认为这是一个很有帮助的网站，在配上卡通的造型，更加吸引用户的眼球。图5-2网页中的黄色运用5.1.2黄色8网页色彩应用分析WebColorApplicationanalysis在有关食品类的网页设计中暖色系色彩更是他们的首选，这些网站的设计主体突出，大部分以暖色调为主，因为暖色的另一个心理感受是刺激人们的食欲，所以很多有关食品的网页都适当运用红色来刺激用户，带来利益。如图5-3所示的“舌尖上的中国”官网首页，背景图片是一幅精妙绝伦的插画，在颜色的选择上采用了单纯的红色，并填充了不同明度的红色，以凸显画中人物和美食复杂的轮廓，彰显出中国民间美食街上热闹的景象。图5-3暖色在食品类网页的运用5.1暖色9冷色蓝色绿色2PART10网页色彩应用分析WebColorApplicationanalysis色环中蓝、绿一边的色相称冷色，它使人们联想到海洋、蓝天、冰雪、月夜等，给人一种阴凉、宁静、深远，死亡，典雅、高贵，冷静，暗淡、灰暗，孤僻，面积较大，寒冷，忧郁，悲伤，宽广、开阔的感觉。5.2冷色11网页色彩应用分析WebColorApplicationanalysis如图5-5所示，网页运用蓝色营造出高贵、伟大、理性的氛围，表现出伟人们的魅力，表现网页所要传达的精神。5.2冷色图5-5网页中的蓝色运用12网页色彩应用分析WebColorApplicationanalysis

在冷色中，蓝色是最冷的色彩。蓝色非常纯净，通常让人联想到海洋、天空、水、宇宙。纯净的蓝色表现出一种美丽、冷静、理智、安详与广阔。由于蓝色沉稳的特性，具有理智、准确的意象，在网页设计中，强调科技、效率的商品或企业形象，大多选用蓝色当标准色、企业色。如图5-5所示，网页运用蓝色营造出高贵、伟大、理性的氛围，表现出伟人们的魅力，表现网页所要传达的精神。5.2.1蓝色13网页色彩应用分析WebColorApplicationanalysis在一些企业和技术相关网页中，冷色常常是被利用其中。如图5-6所示的“2021年中国国际智能产业博览会”和“APIE2022亚太国际智能装备博览会”网站。5.2.1蓝色图5-6冷色在网页中的运用14网页色彩应用分析WebColorApplicationanalysis另外，冷色的另一大类是绿色，它是自然界中常见的颜色，代表意义为清新、希望、安全、平静、生命、和平、宁静、自然、成长、生机。绿色是一种合成色，有多种用途，能够清晰的传达设计师的意图。绿色令人放松，当一想到绿色，大多数人会想到户外和植物，因此具有平静心态的功效。绿色也能够对可读性达到最大化，降低用户视觉疲劳发生的几率，这在网页设计中非常关键，并还能够激发用户的视觉兴趣。5.2.1绿色15网页色彩应用分析WebColorApplicationanalysis

如图5-7所示的鄂尔多斯草原官方网站，其利用绿色的清新、自然来体现草原的宽广与草原人民的热情，同时利用绿色来给浏览者营造一种平静、舒适的心理感受，以此来吸引浏览者。图5-7网页中绿色的运用5.2.1绿色165.3单色色彩对情感有着巨大的冲击，色彩的搭配无穷无尽，可以玩多彩风格，也可以极简配色。单色是使用一种颜色的不同饱和度和明度，单色网页是网页色彩设计中比较经典的一种模式，其用色不是很多，或是同一种颜色的不同明暗渐变、或是贯穿全站的单一色彩，但是色彩的功能性凸显无疑。下面是一些单色网页设计。网页色彩应用分析WebColorApplicationanalysis17单色3PART18图5-8所示的网页中，运用黑白两色的经典搭配和手绘风格图形相结合，体现极简主义风格，彰显独特魅力。图5-9所示的网页中，同时也是黑白的配色，在加上一抹精致的淡绿色，给人一种优雅、忠实的感觉。图5-8单色网页设计(1)图5-9单色网页设计(2)5.3单色网页色彩应用分析WebColorApplicationanalysis19图5-10所示的网页中，鲜亮、活力十足的红色效果非常显著，很好的支持了网页中的瑞士产品。图5-11所示的网页中，利用灰度图像作为网页背景，干净利落，柠檬绿的点缀加入了活力和个性化，体现企业文化和理念。图5-10单色网页设计(3)图5-11单色网页设计(4)5.3单色网页色彩应用分析WebColorApplicationanalysis20近似色4PART21

近似色是色环中相邻的色彩，在网页中使用近似色可以为协调网页，使网页成为一个整体，突出中心，不会出现网页的色彩杂乱，避免用户的视觉疲劳。如图5-12所示，此网页所宣传的对象是一件旅店，其运用蓝色、绿色和黄色这三种近似色体现旅店的自由、自然。5.4近似色图5-12近似色网页设计1网页色彩应用分析WebColorApplicationanalysis22图5-13所示，Quirky是一个创意产品社区与电子商务网站，利用众多方式，让社区参与产品开发的整个过程，其运用红色和黄色者两种近似色来表达企业的文化，表现积极、活跃的态度。5.4近似色图5-13近似色网页设计2网页色彩应用分析WebColorApplicationanalysis23互补色5PART24

互补色是指色环中相反的色彩，比如红色与绿色互补，蓝色与橙色互补，紫色与黄色互补。使用互补色可以使网页加强对比，更好的突出网页的中心，引导用户的视线聚焦在主题中。但是要注意的是，网页中互补色的明度和纯度不能太高，相反明度纯度较低的色彩能够更加有效地宣传网页。5.5互补色网页色彩应用分析WebColorApplicationanalysis25如图5-14所示，此网页是Adobe软件公司的官方网页，其利用蓝色与橙色这对互补色，形成强烈的视觉冲击，抓住用户的眼球。5.5互补色图5-14互补色网页设计(1)网页色彩应用分析WebColorApplicationanalysis26图5-15所示是一家关于烹饪公司的官方网页，巧妙地运用食物中红色与绿色这对互补色，既能吸引用户的浏览，又能体现网页的主题。5.5互补色图5-15互补色网页设计(2)网页色彩应用分析WebColorApplicationanalysis27突出色6PART28

突出色与前面所提到的的点睛色大同小异，能够丰富页面，增强页面的层次感，是整个页面看起来显得生动活泼。突出色具体是指在没有色调或者在