第6章网页设计基础Web美工设计.ppt

Web美工设计 主讲：杨锦伟 理论课时：6 Web美工设计 ■ 网页色彩设计 ■ 版面布局遵循的原则 ■ 网站的风格 ■ 美的原则 网页色彩设计 网页的色彩是树立网站形象的关键之一。网页的背景，文字，图标，边框，超链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵？ 网页色彩设计 （一）色彩的基本知识 颜色是因为光的折射而产生的，红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。 现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征：色相，明度和纯度。其中非彩色只有明度属性。 网页色彩设计 ◆色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色，绿色，黄色等等都代表了不同的色相。同一色相的色彩，调整一下亮度，或者纯度很容易搭配，比如，深绿，暗绿，草绿，亮绿。 网页色彩设计 ◆明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏类网站，充满神秘感；一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格。有明度差的色彩更容易调和。如紫色（#993399）跟黄色（#ffff00），暗红（#cc3300）跟草绿（#99cc00），暗蓝（#0066cc）跟橙色（#ff9933）等。 网页色彩设计 ◆纯度，指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。纯度底的色彩暗淡，含灰色。 网页色彩设计 ◆色环。将色彩按“红-黄-绿-蓝-红”依次过渡渐变，就可以得到一个色彩环。 色环的两端是暖色和寒色，当中是中型色。 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红 网页色彩设计 ◆相近色：色环中相邻的三种颜色。如黄绿色，黄色和桔黄色。相近色的搭配给人的视觉效果很舒适，很自然。所以相近色在网站设计中极为常用。 网页色彩设计 ◆互补色，色环中相对的两种色彩。如亮绿色跟紫色，另外如红色跟绿色，蓝色和橙色等。对互补色，调整一下补色的亮度，有时候是一种很好的搭配。就拿蓝色跟橙色来打个比方吧，调整了蓝色的亮度以后其搭配效果是不是更好呢？补色在网站设计中用得也极为普遍。 网页色彩设计 ◆暖色，如黄色，橙色，红色，紫色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站，电子商务网站，儿童类网站等等，用以体现商品的琳琅满目，儿童类网站的活泼，温馨等等效果。 ◆冷色，如绿色，蓝色，蓝紫色等等都属于冷色系列。冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技，游戏类网站，主要表达严肃，稳重等效果。 网页色彩设计 ◆色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。 红色——是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。 绿色——介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。 网页色彩设计 橙色——也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。 黄色——具有快乐，希望，智慧和轻快的个性，它的明度最高。 蓝色——是最具凉爽，清新，专业的色彩。 它和白色混合，能体现柔顺，淡雅，浪漫的气氛。 白色——具有洁白，明快，纯真，清洁的感受。 网页色彩设计 黑色——具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色——具有中庸，平凡，温和，谦让，中立和高雅的感觉。 每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。 网页色彩设计 ◆色彩均衡，网站让人看上去舒适，协调，除了文字，图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一的运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置，每种色彩所占的比例，面积等等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒适，不刺眼。这就是一种均衡的色彩搭配。 网页色彩设计 网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。 通常的做法是：主要内容文字用非彩色（黑色），边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。 网页色彩设计 （二）色彩搭配的基本知识 1、非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。 网页色彩设计