网页配色与布局复习资料[指南]

网页配色与布局复习 资料 新概念英语资料下载李居明饿命改运学pdf成本会计期末资料社会工作导论资料工程结算所需资料清单 [指南] 第一章 色彩原理 一、了解色彩的形成原理 色彩的发生，是光对人的视觉和大脑发生作用的结果，是一种视知觉，需要经过光——眼——神经的过程才能见到色彩。 光进入视觉通过三种形式 1. 光源光:光源发出的光直接进入视觉。 2. 透射光:光源光穿过透明或半透明物体后再进入视觉的光线。 3. 反射光:反射光是光进入眼睛，在光线照射的情况下，眼睛能看到的任何物体都是该物 体反射光进入视觉所致。 二、掌握色彩三个属性 1、色相:是指色彩的相貌，指各种色彩之间的区别，是色彩最明显色特点，是不同波长的光被感觉的结果。(通常人的眼睛可以分辨出约180种不同色相的色彩) *任何黑白灰以外的颜色都有色相的属性 2、明度:是指色彩的深浅、明暗，它决定于反射光的强度，任何色彩都存在明暗变化。 (黄色明度最高，紫色明度最低，绿红蓝橙的明度相近) 3、纯度:是指色彩的鲜艳水平，也称色彩的饱和度。纯度取决于该色中含色成分和消色成分(灰色)的比例。 三、掌握色环的含义和作用 色环:就是彩色光谱中所见的长条形的彩色序列，只是将其首尾连在一起。它是在光谱基础上推移出来的，通常讲的色环一般为12色。 1、 原色:色彩中不能再分解的基本色称为原色，原色能合成其他的任何颜色，而其他 颜色不能还原出原色。(原色指的就是红色、绿色、蓝色) 2、 二次色(间色):通过混合任何两种邻近的基色获得的三种颜色。(二次色包括青色、 品红和黄色) 3、 三次色(复色):在原色和二次色之间的中间色就是三次色。 4、 同类色:是指同一色相的一系列颜色，如黄色系列、蓝色系列等。 5、 互补色:也称对比色，互补色在色环上相对排列。(红绿互补、黄紫互补、蓝橙互补) 6、 邻近色:在色环上任一种颜色和其相邻的颜色互称为邻近色(红色和黄色、绿色和 蓝色) 7、 暖色:由红色调构成，如红色、橙色、黄色。 8、 冷色:来自于蓝色调，如蓝色、青色、绿色。 第二章 色彩构成 一、理解色调的概念 色调:人们感觉到的整体色彩感觉称为色调。 色调的分类: 1、冷暖调 (1) 暖色调:红、橙、黄 (2) 冷色调:绿、青、蓝 (3) 中性色调:黑、白、灰 2、主辅调 (1)主色调 (2)辅色调 (3)点睛色 (4)背景色 3、高低调 (1)高调 (2)低调 (3)中调 二、掌握色彩对比与调和的知识 1、色彩对比的类型 (1) 色相对比 (2) 明度对比 (3) 纯度对比 (4) 补色对比 (5) 冷暖对比 (6) 面积对比 2、色彩调和的类型 两种或两种以上的色彩合理搭配、产生统一、协调的效果，称为色彩调和。 (1) 同种色的调和 (2) 类似色的调和 (3) 对比色的调和 调和的方法: , 提高或降低对比色的纯度 , 在对比色之间插入中性色(金、银、黑、白、灰等)做分割色 , 采用面积大小不同的处理方法。比如大面积的冷色对应小面积的暖色。 , 对比色之间加入间色。 , 提高对比色的明度 , 利用聚散调和 (4) 渐变色的调和 三、熟知色彩构成的形式法则 1、色彩的均衡 2、色彩的节奏与韵律 3、色彩的主次 4、色彩的呼应 5、色彩的点缀 第三章 色彩的情感属性 一、理解色彩的情感属性的形成 1、色彩情感因素的形成 经验 社会 个人 二、掌握不同色彩的感觉特点 1. 冷暖感觉 2. 轻重感觉 决定色彩的轻重感的主要因素是色彩的明度，明度高的色彩感觉轻，明度低的色彩 感觉重。 3. 进退感觉 暖色具有前进感、冷色具有后退感;明度高的具有前进感，明度低的具有后退感。 4. 兴奋沉静感觉 影响色彩沉静兴奋感觉的首先是色相、其次是纯度，最后是明度。 5. 味觉感受 黄色——甜 绿色——酸 ——咸深红色 黑色——苦 白色——清淡 三、熟知色彩的联想与象征意义 当我们看到色彩时常常会联想起与该色相相联系的感受或事物，这种联想我们称之为色彩的联想。色彩的联想可分为具体的联想与抽象的联想。见 书 关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf 108页。 第四章 色彩应用 一、了解计算机显示色彩的原理 计算机色彩和RGB色彩模式相似，用放大镜近距离观察计算机显示器或电视机的屏幕时，会看到数量极多的红、绿、蓝三种颜色的小点。计算机屏幕上的所有颜色，都是由这三种颜色按照不同的比例合成的。 二、理解网络安全色的由来 网页安全色是指在不同的硬件环境、不同的操作系统、不同的浏览器中都能够正常显示的颜色。网页安全色为216中颜色，其中彩色为210种，非彩色为6种。 三、掌握网页设计中色彩的作用 1、 视觉区域划分 2、 引导主次关系 3、 营造活跃气氛 第五章 网页配色基础 一、了解网页配色经常出现的问题 1、缺乏主色调 2、文字易见度低 3、增加视觉负担 二、掌握网页配色的原则 1、整体性:页面上各部分的色彩从色调和比例上都有自己的角色，主色，辅助色，点睛色，背景色一起组合成有节奏韵律、和谐统一的色彩关系。 2、适用性:根据网站类型选择合适的色彩，使内容与形式相统一，符合人们固有的认识习惯。 3、独特性:网页设计要有独特的个性，大胆突破、出奇制胜，避免与其他网站雷同。 4、艺术性:具有艺术感染力的作品，才能持续地打动浏览者，从而引起其兴趣。 三、熟知网页配色的技巧 1. 使用一种色彩 2. 使用两种色彩 3. 使用一种色系 4. 使用黑色和另一种色 5. 尽量把颜色控制在三种以内 四、掌握网页文字配色的方法 1. 字号对文字显示的影响 2. 文字与背景色彩的搭配 浅色背景搭配深色文字，深色背景搭配浅色文字，不深不浅的背景，对文字进行处理， 如描边、添加阴影。 3. 文字与图片的搭配 (1) 文字周围尽量单纯化 (2) 图片与文字对比尽量明显，易于识别 (3) 文字与背景图片对比较弱，不易识别时，可用其他色彩衬托问题的方式强化与图 片的对比。 第六章 网页配色应用(上) 一、掌握网站色调与配色关系 1)红色系配色 2)橙色系配色 3)黄色系配色 4)绿色系配色 5)青色系配色 6)蓝色系配色 7)紫色系配色 8)黑色系配色 9)白色系配色 结合书上214页至245页和网站截图进行理解 二、掌握网站风格与配色关系 1)简约、质朴风格配色 2)尊贵、华丽风格配色 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、 明确主题 3、 确定主色调 4、 收集色彩素材 5、 进行主色调配色 6、 进行辅助色和点睛色搭配 7、 修饰不和谐的色调 8、 修饰细节 第九章 网页布局基础 一、理解网页布局的概念 1、构成:指将造型按视觉效应、视觉理学学和精神理学等原则组成、具备美好形态的造型。构成形式理由空间构成(平面构成和立体构成)和时间构成(静和动)。 (1)点构成 (2)线构成 (3)面构成 (2)混合构成 、掌握网页的框架结构2 (1)页面尺寸:分辨率在1024*768的情况下，页面的显示尺寸为1003*600像素，通常页面长度不要超过三屏。 (2)整体造型 , 矩形:代表正是、规则; , 圆形:代表柔和、团结、温暖、安全; , 三角形:代表着力量、权威、牢固、侵略; , 菱形:代表着平衡、协调、公平。 (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、设计网站广告位的思考方法 , 满足用户需求 , 合理布局网站以便广告成为设计的一部分 , 考虑将来的需求 第十章 网页布局方法与步骤 一、了解布局设计的方法 1、纸上布局法 2、软件布局法 Photoshop在网页布局规划中的作用:布局灵活、修改方便。 二、掌握网页布局设计的一般步骤 1、布局的步骤 1)草案 2)粗略布局 3)定案 2、布局的设计原则 1)简洁 2)一致性 3)对比度 第十一章 网页布局制作 一、了解网页布局制作的工具 1)九宫格构图 2)黄金分割法 3)网格的运用 二、学会使用黄金分割法 1、黄金分割点的比例:1:1.618 2、黄金分割的比率:1:0.618 三、掌握网页布局的一般分类形式 1、T型布局 2、口型布局 3、三型布局 4、对称对比布局 5、POP布局 第十二章 网页布局形式分析 一、明确网页布局的常见形式(了解不同形式的布局应用～见书上432-441页效果图～ 学会分析) 1. 上下结构 2. 左右结构 3. 上左右结构 4. 上左中右结构 5. 少见结构 6. 不规则结构 三、了解网页结构的综合运用 1、首页、二级页和三级页 按照逻辑结构来分，网站首页视为网站结构中的第一级，与其有从属关系的页面则为网站结构中的第二级，一般称其为二级页面。 2、网站结构的综合运用 多数情况下，做网站并不都是只是用一种框架结构式，而是选择几种结构式，应用在 同一个网站中。 第十三章 布局与人机学 一、了解人机学概念 1、什么是人机学 人机学是一门综合性的应用科学，它的研究对象是工作设计中与人体有关的问题，旨在解决工程设计包括及其系统和环境系统与人的生理、心理要求相适应，从而创造整个人机系统最优化的工作效率，使人们高效、安全、健康和舒适的工作。通常机器是直接由人操作或使用的部件，主要指各种显示器、操纵器、机具及工作空间等。 2、什么是界面 在人和机器的互动过程中，有一个层面，即通常所说的界面。 3、网页设计与人机学 人机界面设计需考虑以下内容 , 页面总体布局设计 , 用户操作设计 , 页面舒适设计 4、用户体验 (1)什么是用户体验 用户体验(User Experience,简称UE)是用户使用产品过程中建立起来的一种纯主观感受。 (2)如何设计优秀的用户体验 , 做出特色 , 做到让受众满意 , 做“减法” , 人性化的设计 , 表里如一 , 别让用户思考 二、了解结构设计 结构设计是将内容划分为清晰合理的层次体系，譬如栏目的划分及其关系、网页的层次及其关系、链接的路径设置、功能在网页上的分配等。 1、网站的逻辑连接结构 (1)树形结构 (2)线性结构 2、网站导航栏表现形式 (1)顶部水平栏导航 (2)侧边栏导航 (3)选项卡导航 三、了解交互设计 交互设计是一种如何让产品易用、让用户更愉悦的产品设计。 交互设计是一门特别关注以下内容的学科 , 定义与产品的行为和使用密切相关的产品形式 , 预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解 , 探索产品、人和物质、文化、历史之间的对话 1、交互设计的通用原则 , 就近原则 , 容错原则 , 帮助原则 , 习惯原则 , 响应原则 , 精简原则 三、了解视觉设计 视觉设计是针对眼睛官能的主观形式的表现手段和结果。 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、 后期维护