第二章-网页版式设计与色彩搭配课件.ppt

1、第二章第二章 网页版式设计与色彩搭配网页版式设计与色彩搭配 本章主要内容：网页版式设计色彩基本理论及色彩的视觉效果网页色彩及搭配技巧2.1 案例分析：不同风格网页作品欣赏与解析案例分析：不同风格网页作品欣赏与解析1网页作品欣赏之一：可口可乐公司主页该网页版面设计采用四角该网页版面设计采用四角对称型，主色调采用红色。对称型，主色调采用红色。四角对称的版式设计稳重、四角对称的版式设计稳重、权威、大方，符合公司类权威、大方，符合公司类网站的形象需求；网站的形象需求；2网页作品欣赏之二：某饰品网上商城主页网页作品欣赏之二：某饰品网上商城主页网站的主要浏览者是年轻人，网站的主要浏览者是年轻人，为此，采用

2、曲线型版式设计，为此，采用曲线型版式设计，主要内容、图片和导航都依主要内容、图片和导航都依照曲线进行排列，设计简洁，照曲线进行排列，设计简洁，过渡自然，美观大方，符合过渡自然，美观大方，符合所销售商品的特点，同时给所销售商品的特点，同时给浏览者美妙的视觉享受。浏览者美妙的视觉享受。3网页作品欣赏之三：某房地产公司售楼主页网页作品欣赏之三：某房地产公司售楼主页该网页采用中轴型版式该网页采用中轴型版式设计。通常销售类网站设计。通常销售类网站都采用暖色系或者中性都采用暖色系或者中性色系，采用极端的黑色色系，采用极端的黑色背景镶嵌金黄色内容并背景镶嵌金黄色内容并不多见，但这不失为一不多见，但这不失为一

3、个优秀的网页。个优秀的网页。4网页作品欣赏之四：某学院管理与应用外语系主页网页作品欣赏之四：某学院管理与应用外语系主页网页采用三纵二网页采用三纵二横的骨骼式设计，横的骨骼式设计，整体色彩采用蓝整体色彩采用蓝色和绿色。色和绿色。2.2 学习任务：网页版式设计学习任务：网页版式设计浏览网页时，通常的顺序是：网页版式网页导航网页内容。由此可见，网页设计有三个关键因素，依次决定网页的艺术性、技术性和实用性。网页版式是吸引浏览者的重要因素。2.2.1版式设计概述版式设计概述所谓网页的版式设计，是指将网页的各种构成要素根据主题需求予以有机组合，进行必要的关系设计，进行一种视觉关联和合理配置。一个成功的网页

4、版式设计不仅能提高网页的注意力价值，而且有利于该网页主题的信息传达，并能增强浏览者的视觉留存，从而达到良好的预期效果。2.3 学习任务：色彩的基本理论及其视觉效果学习任务：色彩的基本理论及其视觉效果色彩在艺术设计中具有重要的地位。作为艺术设计，不管是数万年前的原始壁画创作，还是现代的产品设计、平面设计、室内装潢都离不开色彩，网页设计也是这样。网页中的背景、文字、LOGO、导航、图片等元素应该采用什么样的色彩，如何进行搭配才能更好的表达出设计的预想对于网页设计者来说尤其重要。2.2.2 网页版式的尺寸和构成要素网页标志网页标题导航条图片多媒体色彩字体 2.2.3网页版式设计原则网页版式设计是网页

5、中的各种页面元素进行有机组合。所谓有机组合，通常指网页版式形式与内容的统一。采用哪种版式并不是设计者随意决定的，不同的网站主题对网页构成元素编排方式的要求是不同的。设计网页版式时，应避免只追求花哨的表现形式，或者过于强调独特的设计形式而脱离内容。2.2.4 网页的版式设计风格骨骼型满版型分割型中轴型曲线型倾斜型对称型焦点型三角型自由型 2.3 学习任务：色彩的基本理论及其视觉效果色彩在艺术设计中具有重要的地位。作为艺术设计，不管是数万年前的原始壁画创作，还是现代的产品设计、平面设计、室内装潢都离不开色彩，网页设计也是这样。网页中的背景、文字、LOGO、导航、图片等元素应该采用什么样的色彩，如何

6、进行搭配才能更好的表达出设计的预想对于网页设计者来说尤其重要。2.3.1 色彩的基本理论光谱中的大部分颜色是由三种基本色光按不同的比例混合而成的，这三种基本色光的颜色是红（Red）、绿（Green）、蓝（Blue）三原色光。这三种光以相同的比例混合、且达到一定的强度，就呈现白色（白光）；若三种光的强度均为零，就是黑色，这就是加色法原理。色彩可分为有彩色和无彩色两大类。2.3.2 色彩的视觉效果色彩的心理感觉色彩的冷暖色彩的软硬色彩的进退色彩的大小2.4 学习任务：网页中的色彩及配色 在艺术设计中，色彩的视觉冲击效力是最强的，一个网页首先呈现给浏览者的是网页的色彩。正是由于网页色彩的重要性，设计

7、网页时，网页的配色显得尤为重要。2.4.1 网页色彩在网页设计中，常用到的色彩模式是RGB模式。是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色。2.4.2 网页配色原理 网页色彩搭配设计时，首先要考虑网站本身特点，然后结合一定的艺术规律，这样才能设计出特色鲜明的网页。色彩的适合性色彩的鲜明性色彩的独特性2.4.3 网页配色技巧 彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较黑白页面更加吸引人。通常的做法是：主要内容文字用非彩色(黑色)，边框、背景、图片用彩色。彩色搭配的技巧非彩色搭配2.5 实训浏览著名网站并归纳版式设计与色彩搭配技巧1实训目的掌握网页风格确定方法熟悉网站色彩搭配技巧掌握网页版式设计及网页基本元素搭配技巧2实训要求登陆优秀设计网的酷站欣赏栏目（http:/ 谢！谢！