当前位置:园子博客 » 网页标准 » 网站布局设计原则

网站布局设计原则

1月 10th, 2009 | Filed under 网页标准 | 共有8,240次浏览

园子认为,网页的布局和网站提供的内容同样重要。一个注重用户体验的布局,能更好的体现你的网页内容,更能表现网站设计者想要突出的一些主题和思想。

网页布局的基本概念

最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思。在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局的基本概念。

一些网页设计中常用的尺寸(仅供参考)

  • 分辨率800*600时,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
  • 分辨率1024*768时,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
  • 页面长度原则上不超过3屏,宽度不超过1屏。
  • 全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px。另外120*90,120*60也是小图标的标准尺寸。
  • 每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K

网站的整体造型设计

网站的造型就是你创造出来的网站外在表现形象,这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。

对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多ICP和政府网页都是以矩形为整体造型;圆形带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些。

页头的设计

页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

文本的设计

文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。

页脚的设计

页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。

图片的设计

图片和文本是网页的两大构成元素,缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

多媒体的应用

除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。

网页布局的常见方法

  • css布局网站
    在基于WEB标准的设计中,CSS(层叠样式表)被提出来,它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂,但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上,层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。
  • 表格布局
    表格布局的方法在前些年还比较常见,现在的一些大型网站或者个人站长慢慢的放弃的使用表格布局的方法。表格布局最大的缺点是:当你用了过多表格时,页面下载速度受到影响,而且相对于使用CSS来进行布局对搜索引擎的支持不如后者,现在表格的应用仅仅是用来显示数据使用的。如果想了解更多请看:DIV布局和table布局的区别
  • 框架布局
    不知道什么原故,框架结构的页面开始被许多人不喜欢,可能是因为它的兼容性。但从布局上考虑,框架结构不失为一个好的布局方法。它如同表格布局一样,把不同对象放置到不同页面加以处理,因为框架可以取消边框,所以一般来说不影响整体美观,国内多数电子邮箱都是采用框架布局设计的。
目前还没有任何评论.
您必须在 登录 后才能发布评论.