第五章 5.2 单色、近似色、互补色和突出色-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

Web Color Application analysis 第五章 网页色彩 应用分析 2 暖 色 Warm Color 1 冷 色 Cool Color 2 单 色 Monochrome 3 近似色 Similar Color 4 目 录 CONTENTS 互补色 Complementary Colour 5 突出色 Highlight The Color 6 3 单 色 3 PART 4 图5-8所示的网页中，运用黑白两色的经典搭配和手绘风格图形相结合，体现极简主义风格，彰显独特魅力。 图5-9所示的网页中，同时也是黑白的配色，在加上一抹精致的淡绿色，给人一种优雅、忠实的感觉。 图5-8 单色网页设计(1) 图5-9 单色网页设计(2) 5.3 单色 网页色彩应用分析 Web Color Application analysis 5 图5-10所示的网页中，鲜亮、活力十足的红色效果非常显著，很好的支持了网页中的瑞士产品。 图5-11所示的网页中，利用灰度图像作为网页背景，干净利落，柠檬绿的点缀加入了活力和个性化，体现企业文化和理念。 图5-10 单色网页设计(3) 图5-11 单色网页设计(4) 5.3 单色 网页色彩应用分析 Web Color Application analysis 6 近似色 4 PART 7 近似色是色环中相邻的色彩，在网页中使用近似色可以为协调网页，使网页成为一个整体，突出中心，不会出现网页的色彩杂乱，避免用户的视觉疲劳。 如图5-12所示，此网页所宣传的对象是一件旅店，其运用蓝色、绿色和黄色这三种近似色体现旅店的自由、自然。 5.4 近似色 图5-12 近似色网页设计1 网页色彩应用分析 Web Color Application analysis 8 图5-13所示，Quirky是一个创意产品社区与电子商务网站，利用众多方式，让社区参与产品开发的整个过程，其运用红色和黄色者两种近似色来表达企业的文化，表现积极、活跃的态度。 5.4 近似色 图5-13 近似色网页设计2 网页色彩应用分析 Web Color Application analysis 9 互补色 5 PART 10 互补色是指色环中相反的色彩，比如红色与绿色互补，蓝色与橙色互补，紫色与黄色互补。使用互补色可以使网页加强对比，更好的突出网页的中心，引导用户的视线聚焦在主题中。但是要注意的是，网页中互补色的明度和纯度不能太高，相反明度纯度较低的色彩能够更加有效地宣传网页。 5.5 互补色 网页色彩应用分析 Web Color Application analysis 11 如图5-14所示，此网页是Adobe软件公司的官方网页，其利用蓝色与橙色这对互补色，形成强烈的视觉冲击，抓住用户的眼球。 5.5 互补色 图5-14 互补色网页设计(1) 网页色彩应用分析 Web Color Application analysis 12 图5-15所示是一家关于烹饪公司的官方网页，巧妙地运用食物中红色与绿色这对互补色，既能吸引用户的浏览，又能体现网页的主题。 5.5 互补色 图5-15 互补色网页设计(2) 网页色彩应用分析 Web Color Application analysis 13 突出色 6 PART 14 突出色与前面所提到的的点睛色大同小异，能够丰富页面，增强页面的层次感，是整个页面看起来显得生动活泼。突出色具体是指在没有色调或者在灰色调的颜色中突出一个高饱和度的色彩，使得页面更加鲜明生动。 5.5 突出色 网页色彩应用分析 Web Color Application analysis 15 如图5-16所示的是一个关于音乐的网站，此网页的灰色的背景下，采用饱和度较高的红色作为突出色，在表达了音乐二字的同时，突出网页的主题。 5.5 突出色 图5-16 突出色网页设计 网页色彩应用分析 Web Color Application analysis 16 THANK YOU 感谢聆听。 176335.92 $