网页的版式设计

网页的版式设计     在网页设计中根据特定的主题和 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 ，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成美观的页面并不是容易的事。由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的 格式 pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载 来完成，只是在文字内容上有所变化，所以使很多网页看起来千篇一律，缺乏个性。为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机的结合起来，使网络呈现更绚丽的色彩。     网页的版面设计应从造型、视觉心理及版式构成几方面入手。     一、版式设计的造型     在版式空间中标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素，将这些基本元素在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.10     1．点的作用     在空间中单一的点有集中醒目的特点，给人明确、坚定、充实的感觉。所以可利用点的这一特性强调将要重点表现的对象。可利用“点”符号，对文字信息加以强调，也可采用点状图形图像形式加以提示。 可口可乐宣传网页中坐下部分的三张小图片，在这个页面中实际上起着点的作用，以图片的形式强调后面的信息，如图。 www2.coca-cola.com     2．线与面的作用     线与面不仅能作为造型元素，同时还是划分空间的有力武器。由线和面形成的对空间的分割与遮挡使空间的层次得以延伸，形成距离美感。 下面一张普通的图片经线、面分割后，形成了色调、面积等方面的对比关系，使画面的层次分明，突出了中心内容。     3．留白的运用     在页面设计中往往点、线、面等实体造型元素是人们的重点注意的部分，实际上“留白”也是不容忽视的。所谓“留白”，就是除文字、图片、图案等信息要素以外的空白空间。“留白”与其它元素一样具有大小、形状等特征，它与其它元素的关系就是“图”与“地”的关系，是相互依存、相互衬托的。 在网页设计中，“无意”的留白应与“有意”的造型同样引起足够的重视，因为“无意”的留白空间有时给人的视觉冲击会高于其它的元素所带来的效果。 不过“留白”并不是越多越好，这要根据主题内容和整体风格而定，信息量大、内容更新快的网站一般空白较少，而专业的、艺术类的网站“留白”较常见。 下图是万宝路网站的页面，版面由文字、图片、色块与留白共同组成，此页面的留白空间较大，不仅有效的突出了文字及图片信息，同时还强化了空间的延续性。 ? www.philipmorrisinternational.com    这是一个设计展示类网站，版面的大面积的空白给人以无限的想象空间，文字及图形在空白的衬托下更显突出其设计主题。    下图是《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．节奏与韵律     节奏与韵律源自于音乐概念，“美丽属于韵律”，韵律被平面设计所吸收。节奏是按照一定的条理、秩序、重复连续地排列，形成一种律动的形式。节奏有等距离的连续，也有渐变、大小、长短，明暗、形状、高低等的排列构成，在节奏中注入美的因素和情感使之富于个性，就产生了韵律，韵律就像是音乐中的旋律，既有节奏又有情调，它能增强版面的感染力，开阔艺术的表现力。 下图采用类似水滴状的彩色圆点作为导航按钮，不规则的流动式排列形成一种律动的美感，给画面增添了动态效果。     5． 多样与统一     多样与统一是形式美的总法则，是对立统一规律在版面构成上的应用。两者完美结合，是版面构成最根本的要求，也是艺术表现力的因素之一。多样变化是一种智慧、想象的表现，是强调造型的曲直变化、虚实变化、平面与立体等变化；强调色彩的冷暖变化、明暗变化、色相变化；强调质感与肌理的粗糙与细腻、柔和与刺激等等因素中的差异性，造成视觉上的跳跃。 形式的统一     统一是强调物质和形式中种种因素的一致性方面，保证版面统一的方法是保持版面的构成要素尽可能少一些，而构成的形式却要丰富些。统一的手法可借助均衡、调和、秩序、渐变等形式法则。在同一版面中，尽量避免多样与统一两种因素同时出现，应以其一作为主导，或变化为主，或统一为主，以相对的一方求得统一。 色调的统一     四、 版面设计的构成类型 在网页设计中较常见的网页版式构成类型主要有：水平分割式、垂直分割式、水平与垂直分割交叉式、斜线式、“S”曲线式、重复式等。 水平分割的页面具有较强的视觉稳定性，给人平静、安定的感觉，观者的视线是水平流动的，一般是从左至右，遵从人的视觉习惯。    垂直分割强调的是垂线的视觉冲击力，体现坚强、理智与秩序的感觉。     一般情况下直的线条给人感觉流畅、挺拔、规矩、整齐，所以，直线和方正的面形在页面上的重复组合会给人秩序井然的视觉效果。多应用于比较庄重、严肃的网页题材。   美国历史学会的网络资源     曲线、弧线、曲线形状的应用能够产生运动、韵律的动感，形成富有活力的视觉效果。多应用于青春、活泼、运动、娱乐类型的网页题材。     曲形与直形的综合应用是将以上两种线条和形状结合起来运用，不仅能够丰富网页的表现力，还能使网页更富于变化，艺术效果更丰富多彩。这种网页比较常见，且用途广泛，相适应主题也较多。不过，如果页面的编排处理处理不当，会给人留下凌乱、无章法的感觉。    合理安排块面，保证画面松紧适宜。有的网页内容较多，标题较长，这样类型的内容应尽量避免编排在一起，否则会给人拥挤的感觉，应合理保持画面的松紧关系，同样，较短的文章，也不能编排在一起，这样会感觉零散、不整齐。图片的编排也应遵循此原则，要互相穿插，形成文字、图片等块面间错落有致的效果。     图文并茂，相得益彰。网页上文字和图片具有一种相互补充的视觉关系，文字太多的页面看时间久了会感到疲劳、枯燥，所以添加图片信息加以调解是一个好办法，还能够调节页面的构图布局。不过网页上图片太多，缺少文字，会给人感觉花哨的感觉，同时也会降低信息传播量。所以，文字与图片应适当配合，互相补充、互相衬托，让图片活跃界面，文字丰富内容。 下面我们以一个关于文艺欣赏教学的网页为例来 说明 关于失联党员情况说明岗位说明总经理岗位说明书会计岗位说明书行政主管岗位说明书 以上几点：     这是该文艺欣赏网页——美术欣赏部分的首页面，在页面中央部分为主要内容提要区域，展示本模块的中心思想，左侧则是更详细内容的导航按钮，以统一的图片形式展现，给人一种秩序美感，右侧是动画的连接按钮，也以图片形式展现，加以文字说明，是整个网页内容清晰明了，布局整齐，页面中以图片和文字互相穿插，摆脱了文字列表似的死板套路，使人有兴趣继续阅读下去。