网页设计的版式设计-课件

第四章网页艺术设计的版式设计

【内容提要】

网页的版式设计形成了网页整体视觉印象，体现了网页的风格。网页的版式设计包括点线面的构成、布局设计、视觉流程、空间设计和动态设计等几个方面。

【关键词】

构成布局视觉流程空间动态第一节什么是网页版式设计

网页的版式设计，是指在有限的屏幕空间内,按照设计师的想法、意图将网页的形态要素按照一定的艺术规律进行组织和布局，使其形成整体视觉印象，最终达到有效传达信息的视觉设计。

网页的版式设计决定了网页的艺术风格和个性特征。网页的版式设计是设计师理性思维与感性表达的产物。网页的版式设计要达到形式和内容的统一。

网页的版式设计由于终端显示载体的不同而具有自身的特色：

第二节网页版式设计的点、线、面

网页的形态要素如文字、图像、动画、影像等要素相当于语言中的单词，网页的形式法则和构成规律则是将它们组合起来的句法和语法。

一、网页版式设计中的点点的形状、方向、大小、位置、聚散的变化，能够给人带来不同的心理感受和视觉冲击，产生各种不同的视觉效果。amaztype.tha.jp

二、网页版式设计中的线不同的线可以引发人的各种心理效应，具有不同的情感倾向。

三、网页版式设计中的面面既可以是有形的位置，又可以是虚无的空间。

四、点、线、面在网页中的综合运用点、线、面在网页中的运用不是孤立的。

在网页中，点、线、面的构成常常是以下构成手法的应用：

1.对称与均衡

2.对比与调和

3.节奏与韵律

4.聚散与留白

5.解构与重构

第三节网页版式设计的布局

一、版式结构的分割在结构上利用点、线、面等元素划分网页页面为不同的视觉区域就是结构的分割。1.框架式分割框架式分割是一种理性的分割形式，是指利用各种不同的方形框架对网页进行分割。

2.自由式分割自由式分割用各种显性或隐性的直线、曲线或交叉线自由分割页面。（1）满版型

（2）直线分割型

（3）曲线分割型

（4）自由型

二、版式设计中的场效应场的概念来自于造型艺术，是指画面的心理空间定式，其实质是指人们对空间的心理感知。物体间的相互作用力，会诱导人们内心发生反应变化，如稳定、失衡、紧张、放松、压抑等感觉。人们的心理在种种力的间接作用下，对空间所产生的知觉范围也就是心理力场。这种主观精神世界对客观物理空间的感知联想，以及客观物理空间对人的心理世界的刺激作用所产生的互动效应，就是一种艺术上的场效应。因此，无论在视觉传达设计中的虚拟空间，或是在产品乃至环境艺术设计中的现实空间，其实质是一种场效应。1.四方形场

2.椭圆形场

3.网格花纹场

4.台形场

5.带状形场

6.之字形场

7.块面形场2

8.色彩场

9.综合场

第四节网页版式设计的视觉流程

所谓的视觉流程，是指页面内容的一种视觉传达过程，它是以人的生理和心理习惯的认知模式来进行的，是将各种构成要素在视觉运动的规定下进行空间定位。

一、视觉流程原理

1.视觉流程的产生视觉流程既是一种人眼的生理运动，也包含了心理的微妙变化，是建立在视觉经验上的视线移动。2.网页的最佳视域

二、网页中的视觉流程

1.视觉流程的三阶段当我们浏览网页时，视觉流程通常是首先在一瞬间迅速浏览页面，形成第一印象，接着视线就会从最吸引注意力的一点开始依次作有序的流动，最后完成信息的传递。整个过程包括印象感知（第一印象）、运动感知（感知过程）、整体感知（最终印象）三个心理感知阶段，而每一阶段各视觉要素发挥的作用都有所不同。2.视觉流程的设计要求（1）符合人的视觉习惯

（2）保持信息传达的有效性gozone.jp（3）突出主要信息

（4）注意引导节奏感和流畅感

３.页面之间的视觉流程合理的站点地图和导航设计是保持网站视觉连续性和信息传达有效性的着力点。

第五节网页版式设计的空间

网页的视觉空间不仅是物理空间的使用，更多的是通过各种视觉手段去改变浏览者的视觉心理感受，以创造出舒适、和谐的视觉心理空间。一、平面空间

二、层次空间

三、虚拟空间

四、导航空间

第六节网页版式设计的动态化一、多媒体的动态利用从单个页面看，多媒体的