1、模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感网页美工设计模块二 网页色彩规划任务一 认识色彩情感 模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感教学目标 教学重难点认识色彩并区分色彩角色理解色彩情感及运用相关知识确立主色调通过学习，学生能够：1能区分网页中不同色彩的色彩角色2能运用色彩情感知识确立主色调模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入我们生活的世界充满了各种各样的色彩，色彩与人的情感有着密切的联系，不同的色彩被人们赋予不同的意义，表达特定的情感。运用色彩时，除了色彩与色调本
2、身的美感外，也通过色彩传递着相应的色彩联想与情感象征。如图所示，我们的生活中充满了不同色彩感觉的事物：观察四张图片并思考：1.几张图片中的色彩带给你什么样的感受 2.生活中哪些颜色给你留下了深刻的印象模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感目标展示目标展示主色调 辅助色 点睛色 背景色 一、色彩角色：以下图为例进行区分网页色彩角色的分析。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感目标展示目标展示二、色彩情感：如下图以白色为例，用不同主色调的网页帮助大家理解色彩情感在网页中的运用。模块二模块二 网页色彩规划网页色彩规划任务一任
3、务一 认识色彩情感认识色彩情感模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感1 1白色白色白色让人联想到：正面的：纯粹、纯洁、洁净、正直、信赖、神圣、和平、单纯、成熟、优雅；负面的：单调、恐惧、无力。白色象征着纯洁、神圣、明快、虚无、贫乏。纯白色会带给别人寒冷、严峻的感觉。白色通常需和其他色彩搭配使用，白色是万能色，可以和任何颜色作搭配。白色是所有色彩中亮度最高的，给人一种轻快的感觉。白色能使和它搭配的色彩显得更加鲜明、突出，可以让明亮的色彩更柔和、
4、优雅。白色与暖色搭配时可以增添华丽的感觉,与冷色搭配时可以产生清爽轻快的感觉。白色常用来表达明亮、洁净的感觉，如清洁用品、卫生用品、家居用品等，如图所示，在网页设计中白色多用做背景色与过度色。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感2 2灰色灰色灰色让人联想到：正面的：知识、安定、斯文、气质、优雅、成熟、节制、谦逊、创造；负面的：悲伤、无力、阴暗、荒凉、内向。灰色象征谦虚、沉默、中庸、忧郁，不凸显自身。灰色具有柔和、高雅的意象，属于中间性格，男女皆能接受，是一种高格调的、有品位感的颜色。使用灰色时，大多利用不同明度的灰
5、色变化或搭配其他色彩来调和画面的朴素、沉闷。灰色是中性色，和白色、黑色一样是一种无色彩属性的色彩。给人一种柔和、细致、朴素、大方、舒适、优雅的感觉，灰色作为背景色彩非常理想，搭配其他色彩，可以有效中和华丽、张扬的感觉。如图所示，电子产品、商业经济、军事类网站常常用灰色作为其主色调。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感3 3黑色黑色黑色让人联想到：正面的：神秘、干练、威严、权威、教养、力量、强势、攻击；负面的：恐怖、不安、绝望、悲伤、沉默、虚无、孤独。黑色象征着崇高、严肃、粗莽、沉默、退缩、沉稳、黑暗，有消极、谦逊的
6、意味，有高贵、稳重、科技的意象。电视、汽车、音响、仪器的色彩大多采用黑色，生活用品和服饰设计也大多利用黑色来塑造高贵的形象。黑色是万能色，可以和任何色彩搭配,同时黑色很酷又极具个性化，被称为永远的流行色,所以也适合用作音乐、时尚、个性化网页的主色调，如图所示的音乐网站设计。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感4 4红色红色红色让人联想到：正面的：热情、感动、勇气、力量、生命力、能量、爱情、温暖、开放、社交性；负面的：亢奋、攻击、恐怖、危险、欲望、冲动。红色象征着幸福、热情、活泼、温暖，是所有色彩中最鲜艳、纯净的色彩
7、，红色最容易引起注意，在各种媒体中被广泛运用。红色也常用来作为警告、危险、禁止、防火等标志的指定用色，在中国，红色有着更丰富的内涵和意义，代表喜庆、热烈、革命、忠诚、权利。红色与黑色搭配被誉为“商业成功色”，常被用于较前卫时尚、娱乐休闲和个性化网页中。粉红色鲜嫩而充满诱惑，容易营造出柔情、娇媚、温柔、甜蜜、纯真、诱惑和艳丽等气氛，这类颜色为主的网页多用于女性主题，如化妆品、服装网站等。如图所示以红色为主色调的网页设计模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感5 5橙色橙色橙色让人联想到：正面的：活力、健康、创造力、能力、
8、快乐、华丽、社交性；负面的：警告、不安。橙色象征着光明、华丽、甜蜜、快乐、辉煌、动感，极具扩展性。橙色很容易让人联想到金色的秋天和成熟的果实，是一种快乐而幸福的色彩，同时也是能引起食欲的色彩。在工业安全用色中，橙色是警告色，登山服装、背包、救生衣等常用橙色引起别人的注意。如图所示，橙色多用于餐饮、食品、运动及表现年青人活力的网站。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感6 6黄色黄色黄色让人联想到：正面的：快乐、轻快、撒娇、可爱、理解、智慧、幸福、和平、明朗、希望；负面的：卑鄙、妒嫉、欺骗、偏见、破坏、神经质。黄色也象
9、征智慧和光明，在中国古代，黄色常用于皇室，是权利和尊贵的象征。黄色是喜庆的用色，象征着明朗、高贵、希望、发展、警示，黄色是明度最高的色彩。有警示的作用，是易于引起注意的代表色彩，有集中视线的效果，常用于道路的标志线、禁止通行路障、工程用的大型机器等。如图所示，在网页设计中，黄色多用于商品销售、休闲娱乐、前卫时尚类网站。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感7 7绿色绿色绿色让人联想到：正面的：生命、丰盛、繁荣、希望、和平、舒适、安定、理性、正直、宽容；负面的：猜忌、贪婪、腐蚀、自我压抑。绿色传达了清爽、理想、希望、生
10、长的意味，代表生命、成长。绿色综合了蓝色的冷静与黄色的活跃，象征着新鲜、安逸、和平、青春、安全、理想，是一种中庸的、明净的、大自然的颜色，能让人联想到伸展着绿叶的树木，展示着大自然的生命力。绿色还可以缓解疲劳，有让视觉“休息”的效果，所以绿色调网站较适宜长时间浏览，如图所示。绿色给人一种舒适的感受，文化教育与医疗卫生类网站常常使用绿色作为主色调。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感8 8蓝色蓝色蓝色让人联想到：正面的：博大、高远、开阔、深邃、无限、忠诚、真挚、信赖；负面的：冷淡、冰冷、紧张、忧郁。蓝色象征着寒冷、深
11、远、沉静、内敛、理智、诚实。蓝色容易让人联想到天空、大海、平静而开阔的水面，给人冷静、沉稳，永恒的感觉，所以宣传科技和效率的企业和商品，大多选用蓝色作为标准色，如图所示。而且大多数人比较偏爱蓝色色调,使得蓝色成为网页设计中使用最多的一种色彩。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、色彩情感二、色彩情感9 9紫色紫色紫色让人联想到：正面的：智慧、神秘、幻想、浪漫、神圣、伟大、崇高、高贵；负面的：悲哀、忧郁、孤独。紫色象征着优雅、高贵、神秘、魅力，具有强烈的女性化特征。紫色不易与其他色彩搭配，紫色为主色调的网页，往往用不同明度的紫色或紫色的渐
12、变来装饰页面，如图2-1-22所示。紫色具有天然的高贵与冷傲气质，与女性有关的商品和企业形象常常使用紫色，如图所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感作业布置作业布置一、打开素材文件/模块二/任务一/“2-1-29.jpg”，在图中的白色区域内填充色彩,表现出“春、夏、秋、冬”任意一种季节给人的色彩感受
13、。二、打开素材文件/模块二/任务一/“2-1-30.jpg”，在图中白色区域内填充色彩，将“酸、甜、苦、辣”任意一种味道用色彩的方式表现出来。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感知识技能拓展知识技能拓展一、色彩的味觉效应一、色彩的味觉效应色彩的味觉效应来自于现实中食品的色调关系长期作用于人的刺激体验，人们经过长期生活经验的积累，形成一种自然的联想能力和条件反射，如图所示，不同色彩的食品带给人不同的味觉体验。色彩的味觉感受不完全是一种色彩对应一种味觉感受，很可能一种色彩与多种味觉感受相关，或者某些味觉感受需要多种色彩的搭配才能体现，色彩与味觉的大致对应关系
14、如下：黄、黄绿色酸，橙、粉红色、浅褐色甜，黑、深褐色苦，红、绿辣；白、蓝、深灰色咸，灰绿色、深绿色涩，白清淡，黑厚重。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感知识技能拓展知识技能拓展二、色彩与性格二、色彩与性格性格是人类的特征，色彩本身并没有性格，但由于色彩的象征性与人类性格表现出的一些特征有某些对应的关系，如图所示的休闲风格和沉稳风格，所以才让人感觉到色彩与性格是相关联的，如图2-1-28所示。红色象征外向型性格，特点是刚烈、热情、大方、健忘、善于交流、不拘小节；黄色象征力量型性格，特点是喜欢支配，习惯于领导别人；蓝色象征条理型性格，特点是个性稳重，不轻易
15、做出判断，易于亲近外向型性格；绿色象征适应型性格，特点是顺从、听话，善于倾听别人的述说。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感网页美工设计模块二 网页色彩规划任务二 搭配网页色彩 模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感教学目标 教学重难点从色环图开始理解色彩基本属性理解色彩搭配基础知识及运用知识搭配网页色彩通过学习，学生能够：1能理解色彩的基本属性2能理解色彩搭配的基础知识模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入初学者总是觉得色彩知识过于繁复深奥，不便于理解，那我们换
16、一种思路，从图2-2-1所示的二十四色色环图出发来简单认识色彩。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入色彩可以分为非彩色与彩色两大类。非彩色指黑、白和各种深浅不一的灰色，而其他所有颜色均属于彩色。从视觉和心理学角度出发，彩色具有三个属性：色相、明度、纯度。一、色相一、色相指色彩的种类和名称，如红、橙、黄、绿、青、蓝、紫等不同的色彩,色相是颜色的基本特征，是一种色彩区别于另一种色彩的标准，如图2-2-2至2-2-5所示不同色相的事物。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入二、明度二、明度又
17、叫亮度，指颜色的深浅、明暗程度，如图2-2-6展示了白色到黑色的明度变化。色彩的明度包括两个方面：一是指某一色相的深浅变化，如粉红、大红、深红，都是红色，但一种比一种深（图2-2-1中内环到外环就是同一色相由浅到深的明度变化）。二是指不同色相间存在的明度差别，如常见的七彩色中黄色明度最高，紫色明度最低，橙和绿、红和蓝处于相近的明度。如图2-2-7和2-2-8所示相同图像不同状态的区别。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入三、纯度三、纯度也叫饱和度，指色彩的鲜艳程度。纯度取决于含有某一种色彩成分的比例，比例越大，纯度越大；比例越小，纯度越小
18、。图2-2-1中处于中间位置的一环纯度最高，向内加入白色，提高了明度，同时降低了饱和度；向外加入黑色，降低了明度，同时也降低了饱和度。色彩越单纯其纯度越高，越混合其纯度越低，往色彩中加入任何其他色彩都会降低其纯度。如图2-2-9至2-2-11所示相同图像不同纯度关系时的区别。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入四、色彩的冷暖四、色彩的冷暖是指不同色彩之间的色彩感觉形成的差别，色彩分为冷、暖两大色调，如图2-2-12至2-2-15所示。从图2-2-1中可以清晰的看到从黄色到紫色的连线将整个色环分为两种具有明显冷暖差异的色彩体系：以红、橙、黄
19、为代表的暧色调，以蓝、绿、紫为代表的冷色调。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入四、色彩的冷暖四、色彩的冷暖虽说一般把黄色当成暖色调色彩，紫色当成冷色调色彩，但这二者都处于冷暖色调的过渡位置，其实他们的色彩感觉具有不确定性。特别是紫色，人们常说紫色的色彩感觉是一半海水一半火焰，是最具神秘感的色彩，常用于女性网站的主色调。另外，色彩的冷暖还受到明度和纯度的影响，浅色感觉冷，深色感觉暖。如图2-2-16和2-2-17所示的冷暖对比具有很强的视觉冲击力。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感目标展示目标展示
20、色彩搭配基础知识（以同类色搭配为例）模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解一、同类色搭配一、同类色搭配同类色是指颜色在色相环上位置十分接近，大约在1530左右的相邻色彩或者同一色相关系中不同明度或纯度的色彩搭配，例如深绿色与浅绿色、红色与橙红色等。同类色搭配可以产生有秩序的渐变感觉，色相差异小，显得协调统一，画面整洁有序，但相同的色彩感觉也容易产生平淡、单调的感觉，如图所示。可以加大明度与纯度对比来弥补单调感，或者加入小面积的其他颜色作点缀。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解一、同类
21、色搭配一、同类色搭配同类色搭配是最稳妥的配色方案，色彩搭配比较容易显得规范、美观，如图所示。是色彩运用初期最容易掌握的搭配方式，强力推荐！模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、近似色搭配二、近似色搭配近似色是指颜色在色相环上的位置在3060左右，距离较近，颜色之间色相差别不大，例如红色与橙色、橙色与黄色、黄色与绿色、绿色与蓝色、蓝色与紫色等。近似色的搭配是一种非常理想的色彩搭配方案，在色相关系上色彩相近而不相同，统一中有变化，变化又不失协调。色彩既有对比又相互调和，视觉关系上能做到清晰明朗、层次丰富。模块二模块二 网页色彩规划网页色彩规
22、划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、近似色搭配二、近似色搭配近似色搭配是最常见，应用范围最广的一种配色方案。配色难度不大却极易出彩，如图所示，是最值思考与运用的色彩搭配方式，极力推荐！模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、对比色搭配三、对比色搭配对比色是指颜色在二十四色色环图上相差120左右的色彩,对比色在色相环中位置相距较远，颜色之间共同因素减少，色相差异较大，如三原色（红、黄、蓝）之间或者三间色（橙、绿、紫）之间的搭配。对比色搭配属于强对比搭配方案，视觉效果上强烈、鲜亮，画面效果上层次清楚、结构明显，特别易于
23、突出主体，展示亮点，如图所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、对比色搭配三、对比色搭配由于对比色搭配色相差异较大，色彩有一定的冲突感，在运用的时候多用深浅不一的灰色做过渡，以降低色彩的不协调性。同时，必须注意色彩的主次之分，加大主色调与辅助色的面积对比，以达到色彩平衡的效果，如图所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解四、互补色搭配四、互补色搭配互补色是指颜色的位置位于色相环直径的两端，相差180，是距离最远的色彩，色彩共同因素消失，色相差异巨大，如红与绿、黄与紫、蓝与橙是
24、最常见的补色。互补色搭配是最强烈、最富刺激性的配色方案，互补色对比的画面特别鲜明、艳丽，很容易吸引人的注意力。互补色又极不调和，摆放在一起的时候，各自的色相感觉会更加明显，如图所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解四、互补色搭配四、互补色搭配强烈刺激会让人产生不安定感，如果搭配不当，容易产生生硬、急躁的效果。因此要通过调整主色调与辅助色的面积大小，或者分散的方法来调节，也可以同时提高或者降低互补色的明度或纯度来进行搭配，以降低画面的不适感，如图所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感课堂小结课
25、堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感作业布置作业布置一、打开素材文件/模块二/任务二/“2-2-26.psd”，将这个网页的配色修改为同类色配色关系。二、打开素材文件/模块二/任务二/“2-2-27.psd”，将网页配色修改为对比色配色关系。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感知识技能拓展知识技能拓展在实践操作中，我们可以用以下几种方法来协调配色效果
26、在实践操作中，我们可以用以下几种方法来协调配色效果1大面积使用低纯度色彩，小面积使用高纯度色彩。2多使用灰色系（如黑、白、灰）色彩作间隔色。3用画面中主要色彩的中间色作为过渡色。4降低双方或者一方色彩的纯度。5提高或降低一种色彩的明度。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感网页美工设计模块二 网页色彩规划任务三 选择网页色调 模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感教学目标 教学重难点网页色调确立的原则网页色调确立的方式通过学习，学生能够：1能理解网页色调确立的原则2能理解如何确立网页色调模块二模块二 网页色彩规划网页色
27、彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入网页色调的选择，首先应注重人性化原则和艺术性原则：人性化原则：网页设计在遵从艺术规律的同时，还要考虑到人的生理特点。色彩搭配要给人一种和谐、愉快的感觉，尽量避免采用高纯度、高明度和过于刺激的单一色彩，否则容易造成视觉疲劳。例如白色和红色，虽然都是让人愉悦的色彩，但刺激性很强，如果大面积使用并不合适。因此，降低视觉刺激的配色看起来会更舒服一些，比如用浅灰色代替白色，提高或者降低红色的纯度或者明度。如图所示的网页中，浅蓝灰色的运用使得画面色彩搭配得当、明度适中，清爽又不失变化，易于让人生出亲近感。模块二模块二 网页色彩规划网页色彩规划任务
28、一任务一 认识色彩情感认识色彩情感新课导入新课导入艺术性原则：艺术来源于生活，又高于生活，通常情况下，生活中常见的东西没必要在网页上简单重复。人们总是喜欢看一些新鲜的、新奇的东西，因此，一个有设计感的创意、一个富于感染力的色彩，会增加访问者对网站的兴趣。如图2-3-2所示的网页中，使用了大量点、线的元素，具有明显的构成风格；配色简单又富有变化，具有很强的艺术性。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感目标展示目标展示以网站Logo决定色调为例模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解一、网站一、网站LogoL
29、ogo决定色调决定色调几乎所有的网站都有自己的Logo，其作用有些类似商标，每一个Logo都是独一无二的，用于展示网站形象，提高网站辨识度。上图左是Citrus-SEO网站首页设计，使用了网站Logo中飞溅果汁的橙色作为网页的主色调，橙色本就是食品网站的最佳用色之一，而且也与商品本身的色调相关，一举两得。上图右肯德基的Logo形象早已为大家所熟知，其网站使用Logo中的红色作为主色调，显得充满热情，也可以理解为其食品充满能量。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解上图左中略显灰暗的蓝色与橙色从色相关系上来说本是一组对比色的搭配，蓝色代表冷静
30、、果敢，橙色代表警示、告诫、色彩对比鲜明而又显稳重，十分符合中情局的特点。如上图右所示的Poordesigners的网页，Logo的颜色是简单的黑色。Logo外形高端、大气，网页色调与Logo颜色相互呼应，给人一种有品质、有内涵的视觉感受。以上几个网页不但展现了常见的Logo类型，同时网页的色彩搭配也是来自于Logo本身的色彩关系。使用Logo中的颜色作为网页的主色调是很好的选择，这样规划网页色彩有以下好处：一是Logo的色彩使用较为规范，往往都考虑了网站本身的特点，能更好的展示网站形象。二是Logo与网页色调相互呼应，易于给访问者留下规范、严谨的印象。模块二模块二 网页色彩规划网页色彩规划任
31、务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、网站类型决定色调二、网站类型决定色调1企业形象类企业形象类企业网站就相当于一个企业的网络名片，是企业在互联网上进行网络建设和形象宣传的平台。企业网站的作用为展现公司形象，加强客户服务，完善网络业务。蓝色、红色、白色、灰色常常用于企业形象类网站，如图2-3-7所示，给人带来理性、稳重、高效、安全的视觉感觉，有利于企业品牌形象的建立与提升。如：IBM 的蔚蓝色、可口可乐的红色、联想集团的蓝色都与企业形象融为一体，已经成为企业的象征色彩。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、网站类型决定
32、色调二、网站类型决定色调2娱乐休闲类娱乐休闲类互联网的飞速发展，产生了很多的娱乐休闲类网站，如电影网站、音乐网站、游戏网站、交友网站、社区论坛等。这些网站为广大网民提供了娱乐休闲的场所。娱乐休闲类网站的配色特点非常显著，通常设计风格或轻松活泼、或时尚另类，内容综合、表现灵活，多配以大量图片。色彩或鲜艳亮丽，采用饱和度较高的色彩搭配；或简洁明快，采用高明度低饱和度的色彩搭配。具体的选择上如红色、蓝色、绿色、红色与黑色的搭配、蓝色与绿色的搭配等。如图2-3-8和2-3-9所示，两个同为音乐类网站，但配色风格差异明显。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分
33、解任务分解二、网站类型决定色调二、网站类型决定色调3信息资讯类信息资讯类信息资讯类网站将无数信息整合、分类，为上网者打开方便之门，绝大多数网民通过信息资讯类网站来寻找自己感兴趣的信息资源,其中有如搜狐、网易、新浪等大型门户类网站，还有如百度、google等搜索引擎网站，如图2-3-10和2-3-11所示的搜索类网站设计。由于网站功能定位的问题，这类网站在配色上的变化不大，主要是以强调协调统一，易于长时间浏览，符合大多数人的基本审美需求。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、网站类型决定色调二、网站类型决定色调4文化教育类文化教育类文化教
34、育类网站也是以提供资讯为主，一部分是以宣传学校本身为主，另一部分是提供在线教学、提供文化服务为主。文化教育类网站有其独特的人文气质和精神内涵，在表现形式上也要充分考虑到网站类型的特殊性。在配色上尽量使用轻松，具有活力的颜色，如红色、蓝色和绿色。再有就是使用明度较高的颜色，如白色，浅褐色，浅灰色等。如图2-3-12和2-3-13所示的学校网站设计。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、网站类型决定色调二、网站类型决定色调5个性化类个性化类是以个人名义开发创建的具有较强个性化的网站。一般是个人为了兴趣爱好或展示自我等目的而创建的。具有较强的
35、个性化特色，带有明显的个人色彩，无论从内容、风格、样式上都形色各异、包罗万象。这类网站的用色没有明确的方向性，随心所欲、任意而为，一般会使用平时配色中少见的搭配方式，比如多种色彩的混搭、高饱和度色彩与灰色的搭配、黑色与绿色的搭配等，如图2-3-14和2-3-15所示的个性化网站设计。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、艺术风格决定色调三、艺术风格决定色调1时尚风格时尚风格 适用房地产、珠宝、化妆品、婚纱、时尚服饰等需要特别注重视觉效果的行业。时尚风格类型的设计特色呈现出简约、精致、高品质的感觉。色彩的运用上建议要么使用饱和度高、对比鲜
36、明的色彩，能吸引眼球、烘托气氛目的；要么使用轻爽有透气感的高明度色彩，能给人高品质的感觉，如图2-3-16所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、艺术风格决定色调三、艺术风格决定色调2简约风格简约风格 简约风格网站一般没有繁复的元素和色彩，给人一种稳重、干练、大气的感觉。政府机关、大型企业、门户网站等常常使用简约风格的设计。色彩的选择上多用白底、黑字，各种降低饱和度的色彩（如蓝灰色、绿灰色）和同一色彩的明度变化来表现沉稳大气与协调统一的感觉，如图2-3-17所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色
37、彩情感任务分解任务分解三、艺术风格决定色调三、艺术风格决定色调3自然风格自然风格适用于休闲度假、旅游观光、户外餐厅等行业。自然风格类网页设计大多会使用户外场景素材来营造出休闲的风格。自然风格其实是一种贴近真实世界，还原自然状态的感觉，所以色彩的选择上多使用自然界中各种美好的色彩关系，如天的蓝、云的白、树的绿、草的青等等，同时为了使画面看上去更加的轻松、惬意，多使用高明度与低饱和度的色彩搭配，如图2-3-18所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、艺术风格决定色调三、艺术风格决定色调4古典风格古典风格主要用于企业形象或商品风格偏向“中
38、国风”或“欧洲古典风”的网页设计。“中国风”网站，通常在设计上会使用一些毛笔字和印章图片来传达中国文化；“欧洲古典风”网站将以复古风格的花纹底图或图案效果来表现柔美复古感。“中国风”网站在色彩的运用中一般常用黑色与白色来表现中国人独特的阴阳理念与水墨世界，用黄褐色来代表历史的积淀与岁月的印记。而“欧洲古典风”的色彩往往用大红、深红与金色营造高贵奢华的感觉，用各种明度较底的色彩营造如油画般厚重的感觉，如图2-3-19所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、艺术风格决定色调三、艺术风格决定色调5活泼风格活泼风格适用于主题乐园、童装、学校
39、等以儿童或年轻人为主的网站设计风格。这类网站在页画设计上往往大胆随意、不拘一格，有很强的灵活性，以展现出儿童或年轻人的心理与性格特点。在儿童或年轻人的眼中和心里，世界是完全另一番景象，色彩的选择上或奇异或怪诞，总是那么的与众不同。在具体使用上一是采用多种高饱和度色彩的搭配，以突出欢快、热闹的效果，二是采用轻快的色彩，也就是高明度的色彩，给人一种充满青春气息，热情有活力的感觉，如图2-3-20所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、艺术风格决定色调三、艺术风格决定色调6沉稳风格沉稳风格沉稳风格适用于高档贵重商品网站，高档商品不适合艳丽
40、的色调，低饱和度的暗色调更能体现出产品的价值不菲。男性或者老年人主题的网站也适合这种风格，成熟稳重是男性与老年人的特征。这类网站的色调通常使用暗淡的色彩作为主色调，灰暗且没有明度的色彩适合表现成熟的风采，低饱和度的颜色能营造出优雅的格调。如红色与紫色、黑色与灰色、褐色与咖啡色等都适用于表现成熟稳重的风格，如图2-3-21所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、艺术风格决定色调三、艺术风格决定色调7男性风格男性风格以男性用户为主的网站，常用于西服品牌、游戏、体育、健身等内容的网站。选用图片带有力量感、厚重感，画面元素多采用直线、折线，
41、空间常常穿插、破碎。男性风格常常采用成熟稳重的蓝色、棕色；阳刚开朗的红色、橙色；忧郁深沉的黑色、灰色等，如图2-3-22所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、艺术风格决定色调三、艺术风格决定色调8女性风格女性风格在互联网上，女性化的配色占的比重较大，这和女性用品多于男性用品有关，从美容化妆到时尚服饰，从娱乐休闲到衣食住行，生活中女性化产品无处不在。女性网站色彩设计中，常用提高明度的粉红象征轻快、俏皮的年青女性；用降低明度的暗红象征稳重、高雅的成熟女性；用紫色象征女性的优雅与神秘；用蓝色象征如水般的女性化特征，用蓝色到白色的渐变表现
42、女性的柔情；用白色象征着女性的圣洁与天真；用粉黄、明黄象征女性的清纯可爱等等，如图2-3-23所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感作业布置作业布置一、任务一课后的练一练，我们上网查找了五组Logo并分析其色彩关系，现在我们从中选择一个品牌，并为其做一个形象页设计。二、通过色彩的运用，设计一个带有明显
43、风格特征的欢迎页。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感网页美工设计模块二 网页色彩规划任务四 走出配色误区 模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感教学目标 教学重难点网页配色错误的几种主要原因如何运用相关知识避免网页配色错误通过学习，学生能够：1能理解网页配色错误的原因2能运用知识避免网页配色错误模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感新课导入新课导入色彩如何运用的问题，有时不需要我们绞尽脑汁去寻找答案。我们生活的空间已经存在很多成熟而优秀的色彩搭配方案，如图2-4-1所示。只要我
44、们平时多注意观察和分析，就能从中汲取色彩搭配的灵感：浅灰色调适宜制作页面背景，明度高而不刺激，生活中的报纸就是这样的浅灰色背景配色方案，如果换成高亮度的纯白纸张，版面就会刺目，不宜于阅读。男士着装强调成熟、稳重，所以一般无色彩系的黑、白、灰较多，这和我们网页中强调沉稳、大气的网站色彩搭配与出一辙，灰色系更显得低调奢华有内涵。女性服饰色彩丰富，色调或清新脱俗或明艳动人，这和网页设计中女性用品网站的色彩搭配是一样的。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感目标展示目标展示以缺乏主色调为例模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感
45、任务分解任务分解一、缺乏主色调一、缺乏主色调在网上常常可以看到这样的网站，网页上的元素众多、色彩凌乱，一个标题就是一种颜色，每个栏目、每个线条颜色都不相同。这样的网页，虽然画面色彩繁多，好象很丰富的样子，但过多的色彩感受只能给人一种复杂混乱的视觉效果，使访问者无法明确识别重点内容，甚至让人觉得难受、反感，不愿意再次访问浏览。一般来说，色调明确的网页更受访问者欢迎，因为这样的网页主次分明，易于识别、寻找，能减少访问者负担。如图2-4-2所示的配色，虽然只有红色一种色调，但色调统一、层次分明，视觉效果强烈。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解
46、二、文字能见度低二、文字能见度低人眼识别色彩的能力有一定的限度，由于颜色色的同化作用，色与色之间对比强则易于分辨，对比弱则难于分辨，这在色彩学上称为易见度。网页上的色彩通常与文字是结合在一起的，要么成为文字的背景色，要么成为文字本身的颜色，这就出现了文字与背景的对比问题。对浏览者来说，重要的是文字，因为文字才是传达信息最重要、最直接的元素。因此，网页色彩运用就必须注意文字的可识别性，也就是文字的易见度。文字与背景最简单快捷的搭配方式就是高明度背景上用低明度文字，反之亦然，如图2-4-3所示。如图2-4-4所示，如果背景和文字明度接近或者差别太小，就容易出现文字无法识别的问题。模块二模块二 网页
47、色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、文字能见度低二、文字能见度低各种色彩对比的易见度是不同的，黄色在白色背景上的易见度最低，如图2-4-5所示。橙色与任何一种颜色搭配都很清楚，而且它兼具红色与黄色的优点，柔和明快，易于为人们接受，如图2-4-6所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解二、文字能见度低二、文字能见度低黄与白、绿与红、绿与灰、紫与红、紫与黑、青与黑等几种搭配的易见度低，是应该避免使用的色彩组合，如图2-4-7所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色
48、彩情感任务分解任务分解三、增加视觉负担三、增加视觉负担色彩刺激强度高，画面当然容易引人注目，但这样的色彩不适合大面积使用，否则容易产生视觉疲劳，低明度色彩疲劳度虽小，但容易产生压抑、沉闷的感觉。一个能有效避免强烈刺激和平淡沉闷的办法就是大面积使用明快柔和的浅色调，而鲜艳的色彩小面积出现，画面呈现出一种既有对比又和谐统一的效果，如图2-4-8所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解三、增加视觉负担三、增加视觉负担红色是彩色系中最鲜艳的色彩，对视觉刺激十分强烈，长时间对着大面积的红色会产生烦躁、焦虑的情绪，很容易引起视觉疲劳，如果必须要用红
49、色作背景，如图2-4-11所示使用低明度、沉稳、消极的色彩与其搭配可以有效抑制红色的视觉刺激。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解四、风格与主题脱离四、风格与主题脱离每一个网站都有自己的气质、风格，但在互联网上却常常可以看到这样的现象，一个青年人的网站用了沧桑厚重的配色，一个奢华酒店的网站采用了简洁明快的风格，这样的做法明显背离了主题，合造成形象传达不准确、不合理。例如设计促销活动的网站，就要尽量使用热烈活泼的色彩，如图2-4-12所示。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感任务分解任务分解四、风格与
50、主题脱离四、风格与主题脱离如果是设计一个成熟稳重风格的别墅网站，就不能使用鲜艳、亮丽的色调，而是应该使用厚重沉稳的灰色调,即使页面中有比较鲜艳的色彩,也要降低其饱和度,使其更沉稳大气，如图2-4-13所示。网页配色涉及生理学、心理学、美学多个学科，不同的色彩能带来不一样的心理效应，例如美国的国旗由红、白、蓝三色组成，这三种色彩的排列在美国人心目中能唤起爱国主义情感，但对其他国家的人可能就没有这样的感受。色彩引起的知觉预期能够影响特定人群的感受，因此，色彩的选择要十分慎重，不能随心所欲。模块二模块二 网页色彩规划网页色彩规划任务一任务一 认识色彩情感认识色彩情感课堂小结课堂小结 本任务我们学习了
