第二节 网页的版式设计

第二节网页的版式设计在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成美观的页面并不是容易的事。

由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的格式来完成，只是在文字内容上有所变化，所以使很多网页看起来千篇一律，缺乏个性。

为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机的结合起来，使网络呈现更绚丽的色彩。

网页的版面设计应从造型、视觉心理及版式构成几方面入手。

一、版式设计的造型在版式空间中标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素，将这些基本元素在800*600像素或1024*768像素的版面中有机的结合起来就是设计的过程。

网页版式设计常常借助多种形式的框架（骨骼），规则的框架与不规则的框架，可见的框架与不可见的框架，同时还要与文字样式、色调等因素紧密联系起来。

网页界面设计不同于报纸、杂志等版面的设计，它是动态的、变化的版面。

多数人的显示器分辨率为800*600像素或1024*768像素，我们设计版面时就应以800*600像素为标准，除去滚动条所占的20像素，安全宽度应控制在780像素以内，这样才能浏览到全部的横向页面内容，垂直方向上，页面是可滚动的，版面的长度一般不作限制，但是一些较正规的网站要求滚动不超过3屏，针对这样动态的版面空间，设计起来就要存在较大的难度。

为此，网页设计师应采取一些相应的对策：1．运用自适应宽度技术。

即在版面宽度超出800像素时，页面内容自动伸缩，充满整个版面，这样的技术就要求版面设计也要具有适应性。

1024*768像素环境下的页面效果800*600像素环境下的页面效果2．运用背景来适应不同分辨率的版面效果。

????????1024*768像素环境下运用背景填充空白部分?? 800*600像素环境下3．使版面保持固定尺寸，禁止滚动出现，增强对版面的控制，这样的方案非常适用于设计性较强的图形界面。

通常网页中还会有一些动态的信息，不仅活跃了画面气氛，还可通过不同内容的替换，增大信息量，不过动画效果的运用要合理，千万不能泛滥，造成喧宾夺主的效果，而且动画的形式与内容要与网页主题相适应，政治与教育等内容比较严肃的网页在动画应用上更是要慎重。

二、页面中的点、线、面及留白的处理版面设计中，文字、图形图像根据其在画面中的大小、方向、排列可以视为点、线、面等构成要素，同时文字又有标题和正文之分；图片也有主次之分，所以在网页设计时都要加以考虑。

图片与文字，还有动画这些信息都需要同时展示给观众，不加设计的简单地罗列在一个页面上，往往会使人感觉粗制滥造，使人不愿继续停留，所以必须要跟据主题内容的需要，将传递信息的图片和文字按照一定的次序和关系进行合理的编排和布局，使整个页面和谐统一，充满艺术性。

点、线、面、视觉中心、留白等元素所处位置不同，对观众的视觉和心理会产生的作用也不同。

当设计主体处于版面的几何中心时，给人的感觉是平衡、稳重，不过相对就会显得呆板、缺乏灵活性；如将设计主体向一侧稍作偏移，既可打破了原有的稳定与平衡，形成一个动向，画面因此而造成不稳定趋势，这时需要在适当的位置添加平衡元素，使画面在变化中求稳定。

下图是奥迪公司的一个宣传网页，页面将最为稳定的几何中心作为视觉中心，画面中的文字标题与按钮却安排在页面的偏左侧，冲破了画面的呆板构图，为取得平衡，右下角的奥迪标志起了重要的作用，同时还突出了页面的宣传重点。

图8.101．点的作用在空间中单一的点有集中醒目的特点，给人明确、坚定、充实的感觉。

所以可利用点的这一特性强调将要重点表现的对象。

可利用“点”符号，对文字信息加以强调，也可采用点状图形图像形式加以提示。

可口可乐宣传网页中坐下部分的三张小图片，在这个页面中实际上起着点的作用，以图片的形式强调后面的信息，如图。

2．线与面的作用线与面不仅能作为造型元素，同时还是划分空间的有力武器。

由线和面形成的对空间的分割与遮挡使空间的层次得以延伸，形成距离美感。

下面一张普通的图片经线、面分割后，形成了色调、面积等方面的对比关系，使画面的层次分明，突出了中心内容。

3．留白的运用在页面设计中往往点、线、面等实体造型元素是人们的重点注意的部分，实际上“留白”也是不容忽视的。

所谓“留白”，就是除文字、图片、图案等信息要素以外的空白空间。

“留白”与其它元素一样具有大小、形状等特征，它与其它元素的关系就是“图”与“地”的关系，是相互依存、相互衬托的。

在网页设计中，“无意”的留白应与“有意”的造型同样引起足够的重视，因为“无意”的留白空间有时给人的视觉冲击会高于其它的元素所带来的效果。

不过“留白”并不是越多越好，这要根据主题内容和整体风格而定，信息量大、内容更新快的网站一般空白较少，而专业的、艺术类的网站“留白”较常见。

下图是万宝路网站的页面，版面由文字、图片、色块与留白共同组成，此页面的留白空间较大，不仅有效的突出了文字及图片信息，同时还强化了空间的延续性。

? 这是一个设计展示类网站，版面的大面积的空白给人以无限的想象空间，文字及图形在空白的衬托下更显突出其设计主题。

下图是《PC》杂志的网页，提供了大量的软件、硬件及计算机新闻的信息，所以页面中的空白很少，动态图像、图片与文字是页面中的主要构成元素。

4．点、线、面关系的处理根据大小、方向等因素，文字与图片在一个页面中既可以是点，也可以是线，也可以是面。

孤立的、小的文字与图片，在页面中往往被视为页面中的点。

按一定方向、秩序排列的字与图片会形成视觉上的线，它的存在在界面中一般起到引导和分割的作用。

面多数是由文字或图片、图形形成的，有时也会是由小字块构成，起到突出主题和衬托的作用。

?三、版式设计的构成形式网页的界面版式设计与其它设计一样要遵循一定的规律和秩序，将各个构成要素以一定的规律和秩序加以系统化的组合，协调好各个要素之间的关系，使整个网页作品体现整体秩序的美感。

首先就是要抓住主线，然后再协调好各个层级关系，应注意各部分之间的逻辑结构，根据主体特征确定版面设计形式结构，做到既风格统一，又富于变化。

其构成形式主要有：分割与比例、重复与渐变、对称与均衡、节奏与韵律、统一与变化等。

1．分割与比例空间分割是设计中最常用的造型方法之一，它所解决的就是如何把文字、图形、图像巧妙的配置在限定的版面空间的问题，同时还要确保有主有次，相互关联。

设计主体一般会占据较大的、突出的空间，其他的辅助元素则会依附于它，围绕主体进行配置。

有时分割也会由色彩色调来进行划分，最引人注目的部分，很容易被视为主体。

如下图大背景是灰蓝色块，彩色图片部分的绚丽色彩自然成为人们视觉焦点，而且画面中的动与静的对比也将人的视线先引入中间地带，处理得较好的是它通过色调的变化融合了这种对比，使画面又趋于统一。

山旅野外探险俱乐部比例是指图形或整体形式的部分与整体、部分与部分之间的量的比率关系，是图形或形体变化的尺度。

均衡的比例能够给人以美感，在设计中常用这种具有数理概念的比率，创造出优美的作品，如：黄金分割比，数列比等。

1.黄金分割比亦称黄金律、黄金比例。

在一条线段上，按照最佳长短比例，将此线段分割为长段与短段，或按此最佳长短线段的比例构成一个矩形的最佳的长边与短边的比例，即构成黄金分割。

目前，我们经常使用或看到的明信片、邮票、国旗、名片的长宽比都与黄金分割比例非常接近。

利用黄金分割比例完成的构图通常具有秩序、明朗的特性，予人一种清新的感觉。

黄金分割比的画法绘制一个正的矩形ABCD，取其中一边的中点M为圆心，以MA长为半径画弧，交CD的延长线于点E, 以点E向BA的延长线做垂线交于点F，得矩形BCEF。

此时EF：FB=1：1.618?? a：b=1：1.618。

去掉正方形ABCD后，矩形ADEF依然是一个黄金矩形，ED：EF=1：1.618。

黄金分割比广泛应用于各类造型艺术中，在建筑、雕塑、工业设计等领域它一直是一个美的尺度。

金星女神维纳斯具体标准是以肚脐为界，向上到头顶的长度是整個身长的0.382倍；向下到脚心的长度是整个身长的0.618倍。

不止于此，髋宽与躯干长度之比；上肢长度与下肢长度之比；下肢长度与全身长度之比，均近似于0.618；还有：眼位于头发际至頦底的上、中三分之一交界处；鼻的下点位于头发际至頦底的上、中三分之一交界处，全都符合黄金分割，大量事实证明：古人今人凡是越接近于黄金分割，五官、体态就越优美。

雅典巴特农神庙是卫城最耀眼的一颗明珠，它的屋顶的高度与房梁的长度比率是1：1.618，也是遵循黄金分割比率的典范。

黄金分割比率是一个常数，等于5：3、8：5、13：8……，我们的生活中很多都呈现了这种比率关系，如：照片、电视屏幕、邮票、书籍开本等等。

在网页版式设计中，有时会将设计主体也放置在版面的构成中心，就是视觉中心，这个中心位置就是根据黄金分割比找出的四个点，这四点将画面分割为“九宫布局”，如下图所示。

这四点内的范围就是视觉刺激范围。

网页的主体被放置在视觉刺激点或此范围内任何位置，其辅助元素可放置在视觉中心或四点连线的附近，并注意保持一定的向心性。

下面两幅页面既是依据黄金分割比创作的主页。

?2．重复与渐变重复是指相同或相似的形态规律性的连续出现。

其实重复是构成中的最常见的一种形式，我们生活中熟悉的花朵、小昆虫，甚至人类都存在重复的表象。

一定的秩序的重复能够给人统一、节奏、连续、平稳等感觉，重复又分单纯重复和渐变两种。

单纯重复就是单一个体的反复出现，大的形状、大小、方向、颜色都不作改变，这种重复多被采用作背景图案或底纹。

渐变是在重复的基础上连续性的又有一些变化，有时是形状上的变化，有时是方向上的变化，或者是色彩的变化，这种变化与重复给人感觉整齐而多样。

3．对称与均衡对称分为绝对对称和相对对称，绝对对称是指以中心线或中心点为轴，作上下、左右、旋转等同等、同量的对称，这种形式能展现出严正、庄重、肃穆、沉静的特征。

我国的传统宫殿建筑就是对称式造型为主的，如故宫紫禁城，在对称的造型中有一种威严的宏伟气势。

相对对称是在对称的格局中存在部分形状或色彩等方面的微小变化，这种对称形式具有对称的稳定性，同时又富于变化。

相对对称的表现形式较多，如形状置换、方向颠倒、体量变化、位置交叠、动势变化等。

均衡既是平衡，它摆脱了对称式的中心线或中心点的控制，但是它始终存在重心。

版面的均衡并不是实际重量的均衡，而是根据版面构成元素的形量、大小、轻重、色彩、位置等视觉判断产生的平衡。

均衡感使设计版面更具和谐的生命力，它同时存在调和与力学的空间配置。

4．节奏与韵律节奏与韵律源自于音乐概念，“美丽属于韵律”，韵律被平面设计所吸收。