网页设计中细节与规范.docVIP

网页设计中细节与规范 　　摘要:本文主要讲述了网页设计中的一些元素(模块)的具体细节,以及各部分元素(模块)之间的关系。其中包括整个网页的设计,版块的布局,基本模块(导航,内容区域,底部),文字,以及网页上用到的图片及表单等内容的细节与规范化问题。特别强调的是网页上的留白,模块与模块之间的间隙。阐述了一个优秀的网页应该具备哪些规范。 　　关键词:网页设计;细节;规范 　　引言 　　随着网络时代的到来,人们越来越多的信息是于网络上交流吸收。作为一种平面设计与信息技术的结合延伸,网页设计也越来越突显其重要性。一个好的网页设计可以给其相关单位带来好的印象,带来一系列良性的发展。而网页设计是通过视觉元素来实现信息内容的传达,为了使网页获得最大的视觉传达功能,使网络真正成为可读强性而且新颖的媒体,网页的设计必须适应人们视觉流向的心理和生理的特点,满足社会科技条件的要求,因此网页设计中各种构成元素之间必须有一定的关系和秩序,而相关的网页设计细节与规范就显得尤为重要。 　　那么网页设计中的细节主要体现在哪些地方呢?我们又该如何去把握这些细节呢? 　　一、页面基本属性的设计规范 　　网页设计的总体宽度,没有固定的局限,但是有一些常规的尺寸可供参考。在以前小屏幕小分辨率时代(Windows 95或Windows 98时代),大部分显示器的分辨率都是800x600,所以那时候,网页的常规尺寸一般都是770像素至780像素之间,特别常用的一种是778像素。为什么不直接使用显示器的宽度800像素来作为网页的宽度呢?因为浏览器右边有一个20像素的滚动条。随着网络科技的发展,传统的网页宽度已经远远不能适应现在的页面需求,我们早已越过800×600的时代,现在普及显示器的分辨率是1024×768,甚至更大。那么,我们的网页宽度也应该随之而加大,目前最常用的网页宽度是960像素。 　　二、版块基本布局的设计细节与规范 　　网页布局大体是三大版块:顶部,内容区域,底部。网页上每个版块之间的间隙也有很严格的讲究,如MSN中国使用的横向间隙是10像素,纵向间隙是8像素。无论是横向间隙,还是纵向间隙,都必须统一,比如全部用8像素,或者全部用10像素,那么每个版块之间的间隙就可以保持相等,这样页面看起来才更加规范。这一点也是很容易被大多网页设计人员所忽视的。另外,网页顶部与底部的间隙应该比内容版块之间的间隙稍大一些,这样使整个网页的结构看起来更加明了。 　　同时,如果你的网页设计总体宽度是936像素,那么它的内容区域最好为930像素,两边都应该留有2～3像素的留白。页面上的留白运用也是网页设计人员要注意的,特别是网页的左右两侧,距离屏幕显示边缘一定要留有一点余地,如果一个网页的上下左右四边都跟浏览器边缘贴得紧紧的,那么这个网页看起来一定不会舒服,感觉很“撑”,很挤。 　　三、网页基本模块的设计细节与规范 　　1、标准导航及搜索区域细节与规范 　　无论是什么网站的导航页面部分,它都有它的内容(一排文字链接)与它的背景(一个区块)。我们这里要强调的是文字链接部分,导航的文字链接内容在它的背景区块里一定要是垂直居中的,而且,文字链接的内容上面部分与下面部分一定要有留白,不能紧贴着背景区块的顶边与底边。这样才能达到最佳的效果。至于留白的距离多少,我国设计界目前没有具体的规定,只需要与整体网页各个地方的留白大体保持一致既可,不能相差太大。 　　另外,网页导航设计中很多设计师喜欢用图片来替代文字链接,这对带宽及浏览者来说是一种负担,考虑到服务器带宽的成本和用户体验,以及商业网站对搜索引擎的友好性,除非不得已要达到某种美观效果,一般我们建议使用文字链接来制作导航。 　　门户站点页面的搜索区域一般分为三个部分:选项框(可以供用户选择搜索文章或图片等类别),文本输入框(输入搜索关键词),搜索按钮。这三个部分放在一起,中间产生两个间隙,这两个间隙必须相等。常规来说都设置为6像素。如果整体页面布局比较大气,可以设置10像素的间隙。 　　2、标准底部细节与规范 　　网站底部是注明版权及一些附加内容的地方(如地址),大部分网页的底部文字都是居中显示的,但是也有小部分是居左或者居右,取决于设计师在决定底部文字的对齐方式之后,对页面平衡感的检查,底部文字的上部下部也要留白。部分网站为了方便用户,在底部也加上了搜索区域。 　　3、内容区域细节与规范 　　网页内容区域一般包含模块框,栏目标题与文字内容,内容区域上下左右四边的留白要相等,包括内容图片四边的留白也一样,图片内容包括3个部分:单一图片,图片+文字注释,还有图片组合。通过这些细节的规范能够使网页在计算机上得到最佳的显示。 　　4、文字属性细节与规范 　　在开始设计网页之前,文字属性就是必须得考虑好的