第2章--网页版设设计与色彩搭配.ppt

2.4.2 网页配色原理 网页色彩搭配不仅是一项技术性工作，更是一项艺术性很强的工作。好的设计师总能用自己独到的艺术素养将网页想要表达的情感通过色彩表达出来，达到良好的效果。网页色彩搭配设计时，首先要考虑网站本身特点，然后结合一定的艺术规律，这样才能设计出特色鲜明的网页。 1．色彩的适合性 就是说色彩和网页所要表达的内容气氛相适合。这和不同色彩所要表达的情感有严格的关系。如用粉色体现女性站点的柔性，用深蓝色表现公司网站的严肃权威，用橙色表达商务网站的亲切时尚，用黑色体现游戏类网站的神秘，用浅绿色体现儿童网站的天真活泼。当你确定了网站的主题之后，网站的基调也就基本确定了。突破常规也未必是不可，除非你想有与众不同的艺术想象力。 2．色彩的鲜明性 网页的色彩要鲜明，这样才能引起浏览者兴趣。一般说来，要选择一个主色调，然后再根据主色调确定其他颜色。虽然有很多种色彩存在于一个网页之中，但是因为有了主要的色彩。网页的特色还是以主色调为基础，使得网页个性鲜明。 3．色彩的独特性 有的时候，可以在一个网页中增加一种或若干种个性鲜明的色彩。这种尝试显然是比较冒险的，但是通过合理把握色彩的大小和与其他色彩之间的关系，使得整个网页显得更加活泼，这样也能给浏览者留下深刻印象。 2.4.3 网页配色技巧 首先，网页设计用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。 我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。 无论使用彩色，还是用黑白色设计网页，都要遵循一定的原则和技巧。 1．彩色搭配的技巧 使用一种色彩 所谓的使用一种色彩，并不是指的是仅仅用一种颜色。这里是指先选定一种色彩，然后通过调整透明度或者饱和度，产生新的色彩。这样的页面看起来色彩统一，并且有层次感。 使用邻近色 邻近色就是在色环上相邻近的颜色。色彩的分布如下图所示。在色环中，任何一种颜色临近的颜色都有两种。相近的三种颜色搭配的时候，给人舒适自然的视觉效果，因此在设计中经常使用。 使用对比色 所谓对比色，就是在色环上相对的两种色彩。由于色环上相对的颜色在色彩的冷暖等视觉效果是完全相反的，因此在使用时候对比极为强烈。为了达到较好的效果，可以适当调整对比色的亮度。 2．非彩色搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字，对比强烈，简洁明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果对于网页中的某个元素，实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。使用黑白灰可以搭配任何色彩，在网页中，通常用黑白灰等颜色作为大面积的文字或者的背景颜色。 ? 提示：在网页配色中，需要注意的是： 1）不要将所有颜色都用到，尽量控制在三种色彩以内。 2）背景和文字的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。 2.5 实训 2.5.1 总结不同主题网站的版式设计及配色 1．实训目的 了解网站的分类 掌握不同主题网站的版式设计特点 掌握不同主题网站配色技巧 2．实训要求 网站按主题，主要分为教育类网站、政府类网站、科技类网站、商务类网站等。同类型的网站在页面设计上很大的相似性。浏览四种风格的典型网站，并总结其版式设计及配色规律。 2.5 实训 2.5.2 网页配色练习 1．实训目的 掌握网页风格确定方法 熟悉网站色彩搭配技巧 学会使用Photoshop进行网页配色 2．实训要求 使用Photoshop打开素材文件，尝试按照春夏秋冬不同的风格对其进行配色。 6．倾斜型 页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。 7．对称型 对称的页面给人稳定、严谨、庄重、理性的感受。 对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。 四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。 8．焦点型 焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。 （1）中心。以对比强烈的图片或文字置于页面的视觉中心。如图所示。 （2）向心。视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。 （3）离心。视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避