网页配色与布局复习资料.docx

1、网页配色与布局复习资料第一章 色彩原理一、了解色彩的形成原理 色彩的发生，是光对人的视觉和大脑发生作用的结果，是一种视知觉，需要经过光眼神经的过程才能见到色彩。光进入视觉通过三种形式1. 光源光：光源发出的光直接进入视觉。2. 透射光：光源光穿过透明或半透明物体后再进入视觉的光线。3. 反射光：反射光是光进入眼睛，在光线照射的情况下，眼睛能看到的任何物体都是该物体反射光进入视觉所致。二、掌握色彩三个属性1、色相：是指色彩的相貌，指各种色彩之间的区别，是色彩最明显色特点，是不同波长的光被感觉的结果。（通常人的眼睛可以分辨出约180种不同色相的色彩）*任何黑白灰以外的颜色都有色相的属性2、明度：是

2、指色彩的深浅、明暗，它决定于反射光的强度，任何色彩都存在明暗变化。（黄色明度最高，紫色明度最低，绿红蓝橙的明度相近）3、纯度：是指色彩的鲜艳水平，也称色彩的饱和度。纯度取决于该色中含色成分和消色成分（灰色）的比例。三、掌握色环的含义和作用色环：就是彩色光谱中所见的长条形的彩色序列，只是将其首尾连在一起。它是在光谱基础上推移出来的，通常讲的色环一般为12色。1、 原色：色彩中不能再分解的基本色称为原色，原色能合成其他的任何颜色，而其他颜色不能还原出原色。（原色指的就是红色、绿色、蓝色）2、 二次色（间色）：通过混合任何两种邻近的基色获得的三种颜色。（二次色包括青色、品红和黄色）3、 三次色（复色

3、）：在原色和二次色之间的中间色就是三次色。4、 同类色：是指同一色相的一系列颜色，如黄色系列、蓝色系列等。5、 互补色：也称对比色，互补色在色环上相对排列。（红绿互补、黄紫互补、蓝橙互补）6、 邻近色：在色环上任一种颜色和其相邻的颜色互称为邻近色（红色和黄色、绿色和蓝色）7、 暖色：由红色调构成，如红色、橙色、黄色。8、 冷色：来自于蓝色调，如蓝色、青色、绿色。第二章 色彩构成一、 理解色调的概念色调：人们感觉到的整体色彩感觉称为色调。色调的分类：1、冷暖调（1） 暖色调：红、橙、黄（2） 冷色调：绿、青、蓝（3） 中性色调：黑、白、灰2、主辅调（1）主色调（2）辅色调（3）点睛色（4）背景色

4、3、高低调（1）高调（2）低调（3）中调二、掌握色彩对比与调和的知识1、色彩对比的类型（1） 色相对比（2） 明度对比（3） 纯度对比（4） 补色对比（5） 冷暖对比（6） 面积对比2、色彩调和的类型两种或两种以上的色彩合理搭配、产生统一、协调的效果，称为色彩调和。（1） 同种色的调和（2） 类似色的调和（3） 对比色的调和调和的方法： 提高或降低对比色的纯度 在对比色之间插入中性色（金、银、黑、白、灰等）做分割色 采用面积大小不同的处理方法。比如大面积的冷色对应小面积的暖色。 对比色之间加入间色。 提高对比色的明度 利用聚散调和（4） 渐变色的调和三、熟知色彩构成的形式法则1、色彩的均衡2、

5、色彩的节奏与韵律3、色彩的主次4、色彩的呼应5、色彩的点缀第三章 色彩的情感属性一、 理解色彩的情感属性的形成1、色彩情感因素的形成 经验社会个人二、 掌握不同色彩的感觉特点1. 冷暖感觉2. 轻重感觉决定色彩的轻重感的主要因素是色彩的明度，明度高的色彩感觉轻，明度低的色彩感觉重。3. 进退感觉暖色具有前进感、冷色具有后退感；明度高的具有前进感，明度低的具有后退感。4. 兴奋沉静感觉影响色彩沉静兴奋感觉的首先是色相、其次是纯度，最后是明度。5. 味觉感受黄色甜绿色酸深红色咸黑色苦白色清淡三、 熟知色彩的联想与象征意义当我们看到色彩时常常会联想起与该色相相联系的感受或事物，这种联想我们称之为色彩

6、的联想。色彩的联想可分为具体的联想与抽象的联想。见书108页。第四章 色彩应用一、 了解计算机显示色彩的原理计算机色彩和RGB色彩模式相似，用放大镜近距离观察计算机显示器或电视机的屏幕时，会看到数量极多的红、绿、蓝三种颜色的小点。计算机屏幕上的所有颜色，都是由这三种颜色按照不同的比例合成的。二、 理解网络安全色的由来网页安全色是指在不同的硬件环境、不同的操作系统、不同的浏览器中都能够正常显示的颜色。网页安全色为216中颜色，其中彩色为210种，非彩色为6种。三、 掌握网页设计中色彩的作用1、 视觉区域划分2、 引导主次关系3、 营造活跃气氛第五章网页配色基础一、了解网页配色经常出现的问题1、缺

7、乏主色调2、文字易见度低3、增加视觉负担二、掌握网页配色的原则1、整体性：页面上各部分的色彩从色调和比例上都有自己的角色，主色，辅助色，点睛色，背景色一起组合成有节奏韵律、和谐统一的色彩关系。2、适用性：根据网站类型选择合适的色彩，使内容与形式相统一，符合人们固有的认识习惯。3、独特性：网页设计要有独特的个性，大胆突破、出奇制胜，避免与其他网站雷同。4、艺术性：具有艺术感染力的作品，才能持续地打动浏览者，从而引起其兴趣。三、熟知网页配色的技巧1. 使用一种色彩2. 使用两种色彩 3. 使用一种色系4. 使用黑色和另一种色5. 尽量把颜色控制在三种以内四、 掌握网页文字配色的方法1. 字号对文字

8、显示的影响2. 文字与背景色彩的搭配浅色背景搭配深色文字，深色背景搭配浅色文字，不深不浅的背景，对文字进行处理，如描边、添加阴影。3. 文字与图片的搭配（1） 文字周围尽量单纯化（2） 图片与文字对比尽量明显，易于识别（3） 文字与背景图片对比较弱，不易识别时，可用其他色彩衬托问题的方式强化与图片的对比。第六章网页配色应用(上)一、掌握网站色调与配色关系1）红色系配色 2）橙色系配色 3）黄色系配色4）绿色系配色5）青色系配色6）蓝色系配色7）紫色系配色8）黑色系配色9）白色系配色结合书上214页至245页和网站截图进行理解二、掌握网站风格与配色关系1）简约、质朴风格配色 2）尊贵、华丽风格配

9、色3）男性化配色4）女性化配色5）自然风格配色6）时尚风格配色7）生动活泼配色8）成熟稳重配色结合书245页至249页网站截图、并对比风格了解。第七章 网页配色应用（下）一、 掌握网站的分类方式1、根据网站提供的服务分类2、根据网站的性质分类3、根据在大型搜索引擎上的设置分类 二、掌握不同内容网站配色特点1、门户网站配色 1）传统门户网站 2）垂直门户网站 2、企业网站配色 1）商业类网站配色 2）科技类网站配色3、社区类网站配色4、电子商务类网站配色5、机构类网站配色6、休闲娱乐类网站配色1）休闲类 2）娱乐类7、个人网站配色第八章项目综合案例一、网页配色的过程1、 收集用户信息2、 明确主

10、题3、 确定主色调4、 收集色彩素材5、 进行主色调配色6、 进行辅助色和点睛色搭配7、 修饰不和谐的色调8、 修饰细节第九章网页布局基础一、理解网页布局的概念1、构成：指将造型按视觉效应、视觉理学学和精神理学等原则组成、具备美好形态的造型。构成形式理由空间构成（平面构成和立体构成）和时间构成（静和动）。（1）点构成（2）线构成（3）面构成（2）混合构成2、掌握网页的框架结构（1）页面尺寸：分辨率在1024*768的情况下，页面的显示尺寸为1003*600像素，通常页面长度不要超过三屏。（2）整体造型 矩形：代表正是、规则； 圆形：代表柔和、团结、温暖、安全； 三角形：代表着力量、权威、牢固、

11、侵略； 菱形：代表着平衡、协调、公平。（3）页头（4）文本（5）页脚（6）图片（7）多媒体3、关于第一屏第一屏是指到达一个网站在不拖动滚动条时能够看到的部分。在1024*768像素的屏幕显示模式下，第一屏的大小为1003*600像素。二、 掌握一般网页的组成元素特点1）顶部 2）logo 3）导航 4）内容 5）工具条 6）页脚 7）空白区 三、广告也精彩1、尽量避免大幅广告出现在网站首页的第一屏2、常见的广告尺寸：博客通常使用125*125像素的尺寸，另一个常用的尺寸是300*250像素。3、设计网站广告位的思考方法 满足用户需求 合理布局网站以便广告成为设计的一部分 考虑将来的需求第一十章

12、 网页布局方法与步骤一、 了解布局设计的方法1、纸上布局法2、软件布局法Photoshop在网页布局规划中的作用：布局灵活、修改方便。二、 掌握网页布局设计的一般步骤1、布局的步骤 1）草案 2）粗略布局 3）定案2、布局的设计原则1）简洁 2）一致性 3）对比度第十一章网页布局制作一、了解网页布局制作的工具 1）九宫格构图 2）黄金分割法3）网格的运用二、学会使用黄金分割法1、黄金分割点的比例：1：1.6182、黄金分割的比率：1：0.618三、掌握网页布局的一般分类形式1、T型布局2、口型布局3、三型布局4、对称对比布局5、POP布局第十二章网页布局形式分析一、明确网页布局的常见形式（了解

13、不同形式的布局应用，见书上432-441页效果图，学会分析）1. 上下结构2. 左右结构3. 上左右结构4. 上左中右结构 5. 少见结构 6. 不规则结构三、 了解网页结构的综合运用1、首页、二级页和三级页按照逻辑结构来分，网站首页视为网站结构中的第一级，与其有从属关系的页面则为网站结构中的第二级，一般称其为二级页面。2、网站结构的综合运用多数情况下，做网站并不都是只是用一种框架结构式，而是选择几种结构式，应用在同一个网站中。第十三章布局与人机学一、 了解人机学概念1、什么是人机学人机学是一门综合性的应用科学，它的研究对象是工作设计中与人体有关的问题，旨在解决工程设计包括及其系统和环境系统与

14、人的生理、心理要求相适应，从而创造整个人机系统最优化的工作效率，使人们高效、安全、健康和舒适的工作。通常机器是直接由人操作或使用的部件，主要指各种显示器、操纵器、机具及工作空间等。2、什么是界面在人和机器的互动过程中，有一个层面，即通常所说的界面。3、网页设计与人机学人机界面设计需考虑以下内容 页面总体布局设计 用户操作设计 页面舒适设计4、用户体验（1）什么是用户体验用户体验（User Experience,简称UE）是用户使用产品过程中建立起来的一种纯主观感受。 （2）如何设计优秀的用户体验 做出特色 做到让受众满意 做“减法” 人性化的设计 表里如一 别让用户思考二、 了解结构设计结构设

15、计是将内容划分为清晰合理的层次体系，譬如栏目的划分及其关系、网页的层次及其关系、链接的路径设置、功能在网页上的分配等。1、网站的逻辑连接结构(1）树形结构 (2）线性结构2、网站导航栏表现形式(1）顶部水平栏导航(2）侧边栏导航(3）选项卡导航三、了解交互设计交互设计是一种如何让产品易用、让用户更愉悦的产品设计。交互设计是一门特别关注以下内容的学科 定义与产品的行为和使用密切相关的产品形式 预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解 探索产品、人和物质、文化、历史之间的对话1、交互设计的通用原则 就近原则 容错原则 帮助原则 习惯原则 响应原则 精简原则三、 了解视觉设计视觉

16、设计是针对眼睛官能的主观形式的表现手段和结果。1、设计符合视觉的布局 具有清晰的视觉层次 针对用户的阅读模式来设计布局 合理利用页面空间 选择与页面类型相匹配的版式 页面定宽2、在视觉设计中突出关键内容 醒目的颜色 形状不一致 加背景色 加外框 不成一条直线 加阴影 立体感 清晰度第十四章网页布局综合案例一、了解网页风格特点的分类（了解不同风格特点的网页，见书上504-509页效果图，学会分析）1. 平面风格2. 矢量风格。3. 像素风格4. 三维风格5. 简约风格6. 速写风格 二、掌握网页布局版式类型（了解不同网页布局版式类型，见书上514-521页效果图，学会分析）1. 骨骼型2. 满版型3. 分割型4. 中轴型5. 曲线型6. 倾斜型7. 对称型8. 焦点型9. 三角型10. 自由型三、掌握网页的主题类型1. 企业型网站布局2. 论坛类网站布局3. 非商业网站布局4. 个人网站布局第十五章项目综合案例一、网页设计流程1、 确定网站主题2、 搜集资料3、 网站策划4、 选择合适的制作工具5、 网站制作6、 上传测试7、 网站推广8、 后期维护