第3章网站版式设计与颜色搭配.pptVIP

教学目标： 本章重点介绍“网站建设流程”中的“具体设计”阶段中所使用到的相关知识，为读者实际动手建站打好基础。了解网页的基本元素，根据视觉流程原理，依据构成原理来进行网页版式设计（网页中放什么？怎么放？）。 重点和难点： 1．了解视觉流程原理 2．学习构成原理在网页中的应用 3．认识网页的基本元素 4．学习网页版式设计 5．网站的颜色搭配 3.1 视觉流程原理 3.2 构成设计在网页中的应用 3.3 网页版式设计 3.4 网站布局 3.5网站色彩搭配 3.6版式与色彩的综合案例 3.1 视觉流程原理 1、视觉流程的概念 人类的视觉流程习惯是由人类的眼晶体结构的生理构造决定的，人眼只能产生一个焦点，不能同时将视线集中在一处以上，所以人在阅读信息的时候总有流动的习惯，先看这些再看那些。 视觉流程是人的视线在被观察物上的运动过程。 设计中合理的运用视觉流程对于信息的有效传达极为重要，但同时又是很容易被网页设计者忽视的因素。 2、视觉流程原理 (1)阅读习惯：人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。所以注意价值最大的上部、左侧、左上与中上又被称为最佳视域。 (2)视觉心理学研究表明人在看一个平面内的信息时，上半部分让人轻松，下半部让人稳定，左侧让人自在而右侧让人压抑。这些心理特点都影响着人类的阅读习惯。 (3)加入一些线段可以引导视觉流程(P35图) 一条垂直线在页面上，会引导视线作上下的视觉流动；水平线会引导视线向左右的视觉流动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线流动是向四方发射的；圆形的视线流动是辐射状的；三角形则随着顶角之方向使视线产生流动；各种图形从大到小渐变排列时，视线会强烈地按照排列方向流动。 3、结论： 根据视觉流程的理论，设计师在设计网页时： （1）把信息有一定目的顺着视觉运动规律安排在页面中。 （2）重要的信息一般来说应该让浏览者最容易发现，而不是深藏在多层链接之后，按重要性依次放置其他内容。重要信息有：LOGO、重要广告、最新新闻、导航条、搜索框等，如公司的标志往往放在页面的左上角，最新消息也时常位于页面的上部等等 。 3.2 构成设计在网页中的应用 点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。网页设计实际上就是如何处理好三者之间的关系，因为任何视觉形象或者版式构成，归根结底，都可以归纳为点、线、面。 网页设计师应当将平面构成理论作为网页设计视觉形象表现的指导思想，在具体设计过程中大胆运用多种视觉元素形态变化和表现手法。它们是创造形式美的基本要素，使网页具有不同的审美倾向。 1．点的构成 概念：在网页中，一个单独而细小的形象可以称之为点。它没有指向性和具体的尺度，是相对周围环境所定义的一个相对概念。如一个按钮、一个标志等。 功能： (1) 点具有集中视线特征，可以凝聚注意力。 (2) 点具有很强的调节和修饰作用。 (3) 多个点的使用有时还可以引导视觉流程。 举例：以图形构成的按钮即可视为点。 举例：点具有凝聚视觉注意力的作用，在平面上只有一个点时，我们的视线就会集中在这个点上。 当有两个等大的点或多个等大的点相距一定的距离时，我们的视觉焦点就会在这几个点之间往返，在心理上产生了一种“线”的感觉，引导视觉流程。 点是构成网页的最基本元素，具有装饰和活跃画面气氛的作用。同时定位画面的视觉流程，使网页更加统一。 2．线的构成 线有长度属性，而无粗细的限制。 线起分隔和修饰的作用。 线比点具有更强的心理感受。 不同的线给人不同的感觉。网页中的线的类型有： 　　　（1）直线（横直线、竖直线、斜直线） 　　　（2）曲线（几何曲线、自由曲线） 网页中直线的应用非常广泛，使用直线可以非常清晰明了地划分页面的布局结构。 曲线划分页面的布局结构，自由、随意、运动的感觉 线的方向不同，也能激发起不同的心理感受。例如，水平线给人的感觉均衡、安定、平衡和静止。 垂直线则给人强有力的支柱、公正和信任的感觉。 斜线给人的感觉是生动、活泼、不稳定，适合用来体现运动和速度的感觉。 3．面的构成 （1）直线形面 曲线形面也分为几何曲线形和自由曲线形两种。富于变化和动感。它所表现出来的流动性和弹性给人以无限想象，使人感到有种生命活力。它具有同曲线一样的女性特征。 偶然形面是在现实生活中偶然获得的一种视觉形态。在平面设计领域大部分偶然形面是通过特殊技术手段（如绘图软件中的滤镜或毛笔绘制）获得的。它表现出来的是一种自然的、无序的形态，有着丰富的象征意义。 4．构成的形式 （1）重复构成形式 重复构成是指用同一形态或同组形态有序地反复出现，形成某种规律的构图