2020年网站版式设计与颜色搭配.ppt

教学目标：
本章重点介绍“网站建设流程”中的“具体设计”阶段中所使用到的相关知识，为读者实际动手建站打好基础。了解网页的基本元素，根据视觉流程原理，依据构成原理来进行网页版式设计（网页中放什么？怎么放？）。
重点和难点：
1．了解视觉流程原理
2．学习构成原理在网页中的应用
3．认识网页的基本元素
4．学习网页版式设计
5．网站的颜色搭配
网站版式设计与颜色搭配
2021/1/13
1
视觉流程原理
构成设计在网页中的应用
网页版式设计
网站布局


网站版式设计与颜色搭配
2021/1/13
2
视觉流程原理
1、视觉流程的概念
人类的视觉流程习惯是由人类的眼晶体结构的生理构造决定的，人眼只能产生一个焦点，不能同时将视线集中在一处以上，所以人在阅读信息的时候总有流动的习惯，先看这些再看那些。
视觉流程是人的视线在被观察物上的运动过程。
设计中合理的运用视觉流程对于信息的有效传达极为重要，但同时又是很容易被网页设计者忽视的因素。
网站版式设计与颜色搭配
2021/1/13
3
(1)阅读习惯：人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。所以注意价值最大的上部、左侧、左上与中上又被称为最佳视域。
最佳视域
2、视觉流程原理
网站版式设计与颜色搭配
2021/1/13
4
(2)视觉心理学研究表明人在看一个平面内的信息时，上半部分让人轻松，下半部让人稳定，左侧让人自在而右侧让人压抑。这些心理特点都影响着人类的阅读习惯。
网站版式设计与颜色搭配
2021/1/13
5
(3)加入一些线段可以引导视觉流程(P35图)
一条垂直线在页面上，会引导视线作上下的视觉流动；水平线会引导视线向左右的视觉流动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线流动是向四方发射的；圆形的视线流动是辐射状的；三角形则随着顶角之方向使视线产生流动；各种图形从大到小渐变排列时，视线会强烈地按照排列方向流动。
网站版式设计与颜色搭配
2021/1/13
6
3、结论：
根据视觉流程的理论，设计师在设计网页时：
（1）把信息有一定目的顺着视觉运动规律安排在页面中。
（2）重要的信息一般来说应该让浏览者最容易发现，而不是深藏在多层链接之后，按重要性依次放置其他内容。重要信息有：LOGO、重要广告、最新新闻、导航条、搜索框等，如公司的标志往往放在页面的左上角，最新消息也时常位于页面的上部等等 。
网站版式设计与颜色搭配
2021/1/13
7
构成设计在网页中的应用
点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。网页设计实际上就是如何处理好三者之间的关系，因为任何视觉形象或者版式构成，归根结底，都可以归纳为点、线、面。
网页设计师应当将平面构成理论作为网页设计视觉形象表现的指导思想，在具体设计过程中大胆运用多种视觉元素形态变化和表现手法。它们是创造形式美的基本要素，使网页具有不同的审美倾向。
网站版式设计与颜色搭配
2021/1/13
8
1．点的构成
概念：在网页中，一个单独而细小的形象可以称之为点。它没有指向性和具体的尺度，是相对周围环境所定义的一个相对概念。如一个按钮、一个标志等。
功能：
(1) 点具有集中视线特征，可以凝聚注意力。
(2) 点具有很强的调节和修饰作用。
(3) 多个点的使用有时还可以引导视觉流程。
网站版式设计与颜色搭配
2021/1/13
9
举例：以图形构成的按钮即可视为点。
网站版式设计与颜色搭配
2021/1/13
10