网页设计的版式设计

1、第四章 网页艺术设计的版式设计,【内容提要】 网页的版式设计形成了网页整体视觉印象，体现了网页的风格。网页的版式设计包括点线面的构成、布局设计、视觉流程、空间设计和动态设计等几个方面。 【关键词】 构成 布局 视觉流程 空间 动态,第一节 什么是网页版式设计,网页的版式设计，是指在有限的屏幕空间内,按照设计师的想法、意图将网页的形态要素按照一定的艺术规律进行组织和布局，使其形成整体视觉印象，最终达到有效传达信息的视觉设计。,网页的版式设计决定了网页的艺术风格和个性特征。 网页的版式设计是设计师理性思维与感性表达的产物。 网页的版式设计要达到形式和内容的统一。,www.sodis.co.kr,w

2、ww.karina-,网页的版式设计由于终端显示载体的不同而具有自身的特色：,www.spehzies.de,第二节 网页版式设计的点、线、面,网页的形态要素如文字、图像、动画、影像等要素相当于语言中的单词，网页的形式法则和构成规律则是将它们组合起来的句法和语法。,一、网页版式设计中的点 点的形状、方向、大小、位置、聚散的变化，能够给人带来不同的心理感受和视觉冲击，产生各种不同的视觉效果。,amaztype.tha.jp,www.thisismusicbox,二、网页版式设计中的线 不同的线可以引发人的各种心理效应，具有不同的情感倾向 。,www.i-shot-,三、网页版式设计中的面 面既可

3、以是有形的位置，又可以是虚无的空间。,四、点、线、面在网页中的综合运用 点、线、面在网页中的运用不是孤立的。,www.hansihelle.de,在网页中，点、线、面的构成常常是以下构成手法的应用： 1.对称与均衡,www.stone-,2.对比与调和,www.pixelbarbecue.ch,3.节奏与韵律,4.聚散与留白,5.解构与重构,www.metamute.de,第三节 网页版式设计的布局,一、版式结构的分割 在结构上利用点、线、面等元素划分网页页面为不同的视觉区域就是结构的分割。,1.框架式分割 框架式分割是一种理性的分割形式，是指利用各种不同的方形框架对网页进行分割。,www.s

4、-,,www.fluid.nl,2.自由式分割 自由式分割用各种显性或隐性的直线、曲线或交叉线自由分割页面。 （1）满版型,（2）直线分割型,www.hidrante.art.br,（3）曲线分割型,www.altesclub.co.kr,（4）自由型,二、版式设计中的场效应 场的概念来自于造型艺术，是指画面的心理空间定式，其实质是指人们对空间的心理感知。物体间的相互作用力，会诱导人们内心发生反应变化，如稳定、失衡、紧张、放松、压抑等感觉。人们的心理在种种力的间接作用下，对空间所产生的知觉范围也就是心理力场。这种主观精神世界

5、对客观物理空间的感知联想，以及客观物理空间对人的心理世界的刺激作用所产生的互动效应，就是一种艺术上的场效应。因此，无论在视觉传达设计中的虚拟空间，或是在产品乃至环境艺术设计中的现实空间，其实质是一种场效应。,1.四方形场,.br,2.椭圆形场,www.3mind.it,www.yugioh.co.kr,3.网格花纹场,www.vogueing.jp,4.台形场,5.带状形场,6.之字形场,7.块面形场,www.subaru.co.jp,8.色彩场,9.综合场,www.rendez-fou.be,第四节 网页版式设计的视觉流程,所谓的视觉流程，是指页面内容的一种视觉传达过程，它是以人的生理和心理

6、习惯的认知模式来进行的，是将各种构成要素在视觉运动的规定下进行空间定位。,一、视觉流程原理 1.视觉流程的产生 视觉流程既是一种人眼的生理运动，也包含了心理的微妙变化，是建立在视觉经验上的视线移动。,2.网页的最佳视域,二、网页中的视觉流程 1.视觉流程的三阶段 当我们浏览网页时，视觉流程通常是首先在一瞬间迅速浏览页面，形成第一印象，接着视线就会从最吸引注意力的一点开始依次作有序的流动，最后完成信息的传递。整个过程包括印象感知（第一印象）、运动感知（感知过程）、整体感知（最终印象）三个心理感知阶段，而每一阶段各视觉要素发挥的作用都有所不同。,2.视觉流程的设计要求 （1）符合人的视觉习惯,（2

7、）保持信息传达的有效性,gozone.jp,（3）突出主要信息,www.bnx.co.kr,www.urbansmith.co.kr,（4）注意引导节奏感和流畅感,www.bascule.co.jp,.页面之间的视觉流程 合理的站点地图和导航设计是保持网站视觉连续性和信息传达有效性的着力点。,第五节 网页版式设计的空间,网页的视觉空间不仅是物理空间的使用，更多的是通过各种视觉手段去改变浏览者的视觉心理感受，以创造出舒适、和谐的视觉心理空间。,一、平面空间,www.citric.ws,二、层次空间,www.superlooper.de,三、虚拟空间,www.freisign.de,四、导航空间,

8、第六节 网页版式设计的动态化,一、多媒体的动态利用 从单个页面看，多媒体的利用是网页动态设计的主要途径。,二、超链接的跳跃动感 网页的超链接，打破了以前人们接受信息的线性方式，形成网页的多屏、多页、嵌套的特征。,三、设计的动态更新 从网页的长期效应看，网页具有可更新的特点。,【思考与练习】 1.网页的版式设计应注意哪几个方面？与平面设计相比有哪些共同点和不同点？ 2.你最喜欢什么样的版式设计？为什么？ 3.“场”的意识你有吗？找一个优秀的网页页面分析其场的作用。 4.找找你以前的平面构成作业，看你是否能够将它转化成为一个网页页面设计？ 5.为你的网页设计作业多画一些版式设计草图，并选择其中一个用Photoshop或其它图形图像软件制作成正稿。 提示： 使用软件时多建立图层，以利于各种效果调整与修改。 【学习方法提示】 1.网页设计是一个综合体，可将其它艺术形式的艺术处理方法应用于网页设计中。因为设计意识是共通的，艺术原理也是共通的，重要的是灵活地运用。 2.学习各种流派的艺术形式理论有助于我们提高网页艺