第二章网页布局和色彩搭配
主讲人：XXX 电 话：XXXXXX 邮 箱：XXXXXX
学习目标
本节教学目标：
本章重点介绍“网站建设流程”中的“具体设计”阶段中所使
用到的相关知识，为实际动手建站打好基础。了解网页的基本元素
，根据视觉流程原理，依据构成原理来进行网页版式设计（网页中
放什么？怎么放？）
本节重点和难点：
密集构成形式
把基本形态按密集与疏散、虚与实、向心与扩展等方式进行构成的形式称为密集构成 形式。它具有方向性和目的性的运动特征。在这种形式的构图中，元素最密集的地方 和最稀疏的地方均为视觉的焦点
发射构成形式
以一点或多点为中心，呈向周围发射、扩散等视觉效果，具有较强的动感及节奏感。 格线和基本形呈发射状的构成形式，称为发射构成。此种类的构成，是骨格线和基本 形用离心式、向心式、同心式以及几种发射形式相叠而组成的
视觉流程是人的视线在被观察物上的运动过程
设计中合理的运用视觉流程对于信息的有效传达极为重要，但同时 又是很容易被网页设计者忽视的因素。
视觉流程原理
阅读习惯：人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览 者的眼睛首先看到的是页面的左上角，然后逐渐往下看。所以注意价值最大 的上部、左侧、左上与中上又被称为最佳视域。
网页设计师应当将平面构成理论作为网页设计视觉形象表现的指导 思想，在具体设计过程中大胆运用多种视觉元素形态变化和表现手 法。它们是创造形式美的基本要素，使网页具有不同的审美倾向
点的构成
概念：在网页中，一个单独而细小的形象可以称之为点。它没有指 向性和具体的尺度，是相对周围环境所定义的一个相对概念。如一 个按钮、一个标志等
功能： (1) 点具有集中视线特征，可以凝聚注意力。 (2) 点具有很强的调节和修饰作用。 (3) 多个点的使用有时还可以引导视觉流程。
例1
举例：以图形构成的按钮即可视为点。
例2
举例：点具有凝聚视觉注意力的作用，在平面上只有一个点时，我们 的视线就会集中在点相距一定的距离时，我们的视觉焦点就会 在这几个点之间往返，在心理上产生了一种“线”的感觉，引导视觉流程
了解视觉流程原理
学习构成原理在网页中的应用
认识网页的基本元素
学习网页版式设计
网站的颜色搭配
视觉流程原理
视觉流程的概念
人类的视觉流程习惯是由人类的眼晶体结构的生理构造决定的，人 眼只能产生一个焦点，不能同时将视线集中在一处以上，所以人在 阅读信息的时候总有流动的习惯，先看这些再看那些。
按重要性依次放置其他内容。重要信息有：LOGO、重要广告、最新新闻、导航条、 搜索框等，如公司的标志往往放在页面的左上角，最新消息也时常位于页面的上部等 等。
构成设计在网页中的应用
点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设 计语言。网页设计实际上就是如何处理好三者之间的关系，因为任 何视觉形象或者版式构成，归根结底，都可以归纳为点、线、面
线的构成
网页中直线的应用非常广泛，使用直线可以非常清晰明了地划分页面的布局结构 曲线划分页面的布局结构，自由、随意、运动的感觉 线的方向不同，也能激发起不同的心理感受。例如，水平线给人的感觉均衡、安定、
平衡和静止 垂直线则给人强有力的支柱、公正和信任的感觉 斜线给人的感觉是生动、活泼、不稳定，适合用来体现运动和速度的感觉
近似构成形式
在重复构成中保持原有规律性的基础上，把重复元素的基本形(大小、方向、色彩等) 进行微小变化，就演变成了近似构成形式。近似构成形式中既有形式变化，又有整体 的统一
渐变构成形式
渐变是一种常见的视觉效果，也是设计中常常使用的技巧。渐变是指构图基本形(形状 、大小、方向、颜色等)逐渐而有规律地变化。它能够表现出空间感和时间感
偶然形面是在现实生活中偶然获得的一种视觉形态。在平面设计领域大部分偶然形面 是通过特殊技术手段（如绘图软件中的滤镜或毛笔绘制）获得的。它表现出来的是一 种自然的、无序的形态，有着丰富的象征意义
构成的形式
（1）重复构成形式
重复构成是指用同一形态或同组形态有序地反复出现，形成某种规律的构图形式。重 复构成具有强化记忆的功能，反复地出现会不断地加强视觉冲击，加深形象认识
点是构成网页的最基本元素，具有装饰和活跃画面气氛的作用。同时定位画 面的视觉流程，使网页更加统一
线的构成
线有长度属性，而无粗细的限制。 线起分隔和修饰的作用。 线比点具有更强的心理感受。 不同的线给人不同的感觉。网页中的线的类型有：
（1）直线（横直线、竖直线、斜直线） （2）曲线（几何曲线、自由曲线）
特异构成形式
在重复、近似、渐变构成中，为了改变规律性的单调感，有意识地出现不合规律的个 别基本形，由此产生强烈的对比效果，这种构成形式就称之为变异。变异的形式有大 小变异、形状变异、方向变异、肌理变异、色彩变异等
对比构成形式
在两种或者两种以上的对象之间，有着明显的差别，我们就称之为对比。对比是一种 较为自由的构成表现形式。对比又可以划分为形的对比(大与小、方与圆、长与短、粗 与细、曲与直等)、质的对比(刚与柔、轻与重、强与弱等)、势的对比(动与静、聚与散 、快与慢等)、颜色的对比（色相、明度、纯度等）
面的构成
直线形面
具有简洁明快、有序和理性的特征，容易被人理解和记忆。在网页中，一幅图像可以 被看做面，一段文字也可以看成是面
曲线形面
曲线形面也分为几何曲线形和自由曲线形两种。富于变化和动感。它所表现出来的流动 性和弹性给人以无限想象，使人感到有种生命活力。它具有同曲线一样的女性特征。
偶然形面
肌理构成形式
肌理是物质表面的形态，通常是指物体表面的纹理感觉。它具有粗糙、细腻、柔软、 生硬、干燥、湿润等特性，既有自然形态的肌理(如水波纹、木纹、树叶纹等)，也有 人为形态的肌理(如布纹、墙纸等)。在网页设计中，大部分情况下可作为网页的背景 出现在页面设计中，使用适当的肌理作为背景图案，将起到很好的视觉调节作用
最佳视域
视觉流程原理
视觉心理学研究表明人在看一个平面内的信息时，上半部分让人轻松，下半部让人稳 定，左侧让人自在而右侧让人压抑。这些心理特点都影响着人类的阅读习惯。
结论
根据视觉流程的理论，设计师在设计网页时： （1）把信息有一定目的顺着视觉运动规律安排在页面中。 （2）重要的信息一般来说应该让浏览者最容易发现，而不是深藏在多层链接之后，