资源简介

(共25张PPT)
第2章
网页配色设计
2.2
网页设计中最敏感和最重要的就是色彩的运用。网页中色彩的类型、数量、面积、冷暖等直接影响着网页的视觉效果和要表达的主题。因此，掌握网页色彩运用的知识是制作优秀网页的关键。
网页中的色彩运用
网页设计常用配色表
2.2.1网页中的色彩角色为网页配色时，应注意页面中颜色的数量与主次关系。如果网页中不同颜色所占的面积相当，会让人感觉页面风格不统一，没有整体感；如果网页中使用的颜色过多，则会让人感觉页面过于琐碎、花哨、轻浮，没有内涵。因此，为网页配色时，应根据网站的主题区别颜色主次，让不同的颜色扮演不同的角色，发挥不同的功能。根据不同颜色在网页中的视觉主次、面积大小和所起的作用，可将其分为主色、副色和背景色，下面分别说明。提 示副色中有一种颜色叫点睛色，它在小范围内用强烈的颜色来突出效果、活跃气氛，使页面的色彩更加生动。在网页设计中，点睛色常用于占用面积较小的按钮、标签等，数量根据画面的需要而定。主色：主色是网页中使用面积最大、出现次数最多的颜色。它贯穿网站的所有页面，在创造特定气氛和意境上发挥着主导作用，是整个网站色彩表现的灵魂。通常，在描述网页是什么色调时指的就是其主色。副色：副色也称为辅助色，它在页面中所占面积比主色小，起到与主色呼应，调和画面色彩关系的作用。根据实际需要，同一网页中的副色可以有多种颜色，作为区分栏目、标识等作用。背景色：背景色是用于网页背景的颜色，起到协调、衬托页面整体色彩关系的作用。通常背景色仅起到陪衬作用，在画面中显露的面积较小，但有些网页的背景色对页面的影响较大，既是背景色也是主色。以美团网为例，该网页主色为Logo中提取的绿色，副色为橙色和红色（起点睛作用），背景色为白色。主色占所用颜色的比例较大，属于冷色系颜色，副色用量较少，属于暖色系颜色，页面冷暖搭配得当，能给浏览者舒适的浏览体验，如图2-18所示。图2-18 美团网网页副色副色主色提 示在网页设计中，主色通常用在导航和其他重要位置；而Banner和海报为了更加醒目，主色通常用在背景上，如图2-19所示。图2-19 使用主色做底色的Banner
课堂互动
在图2-20所示的网页中，
分别指出其使用的主色、副色、点睛色和背景色。
图2-20 辨识网页中的色彩角色
2.2.2如何搭配网页色彩在搭配网页色彩时应先从网站风格和内容出发，选择合适的主色，然后从视觉效果出发，选择副色并控制主色和副色之间的比例，使网页整体色调美观、舒适。在进行网页配色设计时，除了使用前面介绍的冷暖色搭配外，还可使用以下色彩搭配方式。提 示在进行冷暖色搭配时，应注意：① 控制好冷色与暖色的面积比例。因为冷色与暖色处于同一画面时对抗非常激烈，所以应选择一种作为主色，另一种作为副色。② 降低其中一种颜色的明度或饱和度，从而产生明暗对比，以缓冲对抗。③ 可在画面中加入少量与副色相近的颜色或黑、白、灰色作为装饰色进一步缓冲对抗。在搭配网页色彩时应先从网站风格和内容出发，选择合适的主色，然后从视觉效果出发，选择副色并控制主色和副色之间的比例，使网页整体色调美观、舒适。在进行网页配色设计时，除了使用前面介绍的冷暖色搭配外，还可使用以下色彩搭配方式。同类色搭配是指色相环上位置相邻（15°夹角内），或者同一色相中不同明度或纯度的颜色之间搭配，如深蓝色与浅蓝色、红色与橙红色搭配。同类色搭配的优点是可以产生有秩序的渐变感觉，使画面显得协调统一，缺点是由于色彩相同，容易产生平淡、单调的感觉。在进行网页配色时，可以加大颜色明度与纯度的对比来弥补单调感，或者加入小面积的其他颜色作点缀，如图2-21所示。1．同类色搭配图2-21 使用同类色配色的网页近似色搭配是指色相环上距离较近（15°～60°夹角内）、色相差别不大的颜色之间搭配，如红色与黄色、黄色与绿色、蓝色与紫色搭配。近似色搭配是一种很理想的色彩搭配方案。其色彩相近而不相同，统一中有变化，变化又不失协调。此外，色彩既有对比又相互调和，视觉关系上能做到清晰明朗、层次丰富。因此，近似色搭配是应用范围最广的一种网页配色方案，如图2-22所示。2．近似色搭配图2-22 使用近似色配色的网页对比色搭配是指色相环上距离较远（相差120°左右）、色相差异较大的颜色之间搭配，如红色与蓝色、橙色与绿色、紫色与绿色搭配。对比色搭配属于强对比搭配方案，视觉效果强烈、鲜亮，画面效果层次清楚、结构明显，特别易于突出主体，展示亮点，如图2-23所示。3．对比色搭配图2-23 使用对比色配色的网页由于对比色搭配色相差异较大，色彩之间有一定的冲突感，因此在运用时应多用灰色、白色或近似色做过渡，以降低色彩的不协调性。同时，需要注意色彩的主次之分，应加大主色与副色的面积对比，以达到色彩平衡的效果。互补色搭配是指色相环上直径两端（相差180°），距离最远的颜色之间搭配，如红色与绿色、黄色与紫色、蓝色与橙色搭配。互补色搭配是最强烈、最富刺激性的配色方案。使用互补色搭配的画面特别鲜明、艳丽，很容易吸引人的注意力。但是，使用互补色配色时，强烈的刺激会让人产生不安定感，如果搭配不当，容易产生生硬、急躁的效果。因此，使用互补色配色时，应通过调整主色与副色的面积大小，或者提高（或降低）互补色的明度（或纯度），或者使用灰色、白色或近似色作为过渡，以降低画面的不适感，如图2-24所示。4．互补色搭配图2-24 使用互补色配色的网页提 示色调明确、统一、和谐、易于识别的网页更受访问者欢迎。但是，在设计网页时，部分初学者为了区别网页中的不同版块，在网页中使用了大量的颜色，让页面的视觉效果显得凌乱、复杂。使用“色不过三”原则能够有效地避免页面颜色混乱的问题。所谓“色不过三”，不是限定网页中使用的颜色不超过三种，而是指不超过三种色相。在设计网页时，可通过调整色彩的明度或饱和度来对色彩进行变化，产生多种颜色，而色相不变。除了避免在网页中运用过多色彩外，在设计网页时还应注意网页文字与底色的搭配应遵循“三个不要”原则，即：不搭配同色系颜色，如深红配大红；不搭配饱和度接近的颜色，如深紫色配棕色；不搭配明度接近的颜色，如白色配柠檬黄。否则，会造成文字识别度低。
课堂互动
（1）总结上述几种网页色彩搭配方式的优缺点和应用技巧。
（2）指出图2-25所示网页中的色彩搭配问题。
图2-25 指出网页中的色彩搭配问题
2.2.3如何选择网页色调网页页面由具有内在联系的各种色彩组成一个完整统一的整体，形成画面色彩的总体趋向，称为网页色调。网页色调如同网页的性格，不同色调的网页会给访问者不同的心理感受。网站的类型和风格是决定网页色调的主要因素，不同类型的网站，其色调会有明显差异。下面就来学习确定网页色调的方法。几乎所有的网站都有自己的Logo，用于展示网站形象，提高网站辨识度。使用Logo中的某种颜色作为网页的色调有两个好处：一是Logo的色彩使用较为规范，往往都考虑了网站本身的特点，能更好地展示网站形象；二是Logo与网页色调相互呼应，易于给访问者留下规范、严谨的印象。以淘宝网为例，该网页使用Logo中的橙色作为网页的主色调，如图2-26所示。1．根据网站Logo确定网页色调图2-26 通过Logo确定网页色调2．根据网站类型确定网页色调图2-27 使用蓝色作为主色调的企业网站网页（1）企业网站。企业网站是企业在互联网上进行形象宣传、产品展示和加强客户服务的平台。设计企业网站时，可根据企业类型和色彩的象征意义确定网页色调。例如，科技类、商业类企业可使用蓝色、灰色等作为网页色调，这些色调能给人带来理性、稳重、高效、安全的感觉，有利于企业品牌形象的建立与提升，如图2-27所示。关于不同色调带给人的心理感觉和象征意义，请参考2.1.2节内容。图2-28 购物类网站网页（2）购物类网站。网购已成为当今主要的购物方式之一。购物类网站应根据销售的商品类型选择合适的颜色作为网页色调。当网站主要销售奢侈品等高端商品时，可选择黑色、白色、灰色等颜色作为网页色调，这些颜色给人高贵、奢华、精致的感觉，如图2-28（a）所示；当网站经营的商品种类繁多时，可以使用橙色、红色、黄色等颜色作为网页色调，这些颜色给人活跃、热烈的感觉，能潜移默化地促进购买，如图2-28（b）所示。（a）（b）图2-29 娱乐类网站网页（3）娱乐类网站。娱乐休闲类网站包括电影网站、音乐网站、游戏网站、交友网站、社区论坛等。此类网站的设计风格多样，或轻松活泼，或时尚另类；或鲜艳亮丽，或简洁明快。因此配色也非常灵活，可以使用任何色彩搭配，如图2-29所示。3．根据网站风格确定网页色调 图2-30 男性风格网站的网页（1）男性风格。男性风格的网页主要用于户外运动、健身、男性服饰等与男性相关的网站。设计此类网站的网页时，可选用具有力量感的图片及黑色、棕色、蓝色、红色、橙色等作为网页色调。此外，网页中还可使用直线、折线等硬角元素，以凸显男士的阳刚和力量，如图2-30所示。为了贴合人们的认知习惯和审美要求，在设计网页时可根据网站内容和风格选择不同的色彩和视觉元素，使网页达到形式和内容的统一。图2-31 女性风格网站的网页（2）女性风格。女性风格的网页主要用于与美容、化妆、休闲娱乐、女性服饰等相关的网站。此类网页中使用的元素相对柔和，色调可以选择低明度的紫色、暗红色等，以表现成熟女性的神秘和优雅；或者使用高明度的粉色、黄色、蓝色等，以表现年轻女性的俏皮和清纯，如图2-31所示。图2-32 “中国风”网页（3）古典风格。古典风格的网页主要用于企业形象或商品风格偏向“中国风”或“欧洲古典风”的网站。“中国风”的网页较为素雅，通常使用毛笔字体和印章元素来传达中国文化，并使用黑色、墨绿色和白色等作为网页色调，以体现中国人独有的水墨情怀，如图2-32所示。“欧洲古典风”的网页色彩感觉相对厚重，往往使用深红、黑色、褐色、钴蓝、金色等，营造出如油画般质感的页面，如图2-33所示。图2-33 “欧洲古典风”网页图2-34 自然风格网页（4）自然风格。自然风格的网页主要用于与休闲旅游、食品、化妆品等相关的网站。这种风格的网页大多会使用真实的外景素材来体现自然气息。设计时，色彩可以提取自然界的颜色，如天的蓝色、云的白色、树的绿色、草的青色等，如图2-34所示。图2-35 时尚风格网页（5）时尚风格。时尚风格的网页多用于与珠宝、化妆品、婚纱、潮流科技产品等相关的重视视觉效果的网站。这种风格的网页需要呈现出简约、精致、高品质的感觉。设计时，可以使用饱和度高、对比鲜明的色彩来烘托气氛，如图2-35（a）所示；也可以使用高明度颜色或直接使用黑色、白色或灰色，给人高品质的感觉，如图2-35（b）所示。（a）（b）
THANK YOU!

展开更多......

收起↑