网格化布局实际上是一种框架布局,这种框架能够引导浏览者的视觉,有序地展示信息内容,它已经成为了大多数网站功能实现的基础。有了框架的约束,并不代表着网站的版面设计就会平淡无奇、索然无味,我们可以巧妙利用这些框架,引导浏览者们的视觉流向,把他们的注意力吸引到网站内容本身。以下列举的是目前较为常见的四种网格化布局。
1.通栏式
通栏式布局是一种较为传统的布局方式,就是在页面中的垂直方向只有一栏,没有间隔。这样网页中所有的信息内容都要放置在这一栏中,文字除了换行外,不进行任何处理,早期的网页普遍采用这种布局方式。它的优点是让浏览者的视线没有限制,视角更加开阔,庄重大气,给人以信服感。但是这种布局的文字信息要横跨整个版面,会引起一些浏览者的阅读困难。为了避免视觉疲劳,需要尽量把栏目的宽度控制在较合适的范围内,不要排满整个屏幕。另外,这种布局方式也可以灵活处理,使文字信息区域与Logo组合和导航区密切配合,有机地协调在一起。目前,这种布局方式仍为很多网站所采用。
2.两栏式
两栏式布局就是把页面空间从垂直的方向分割为两个部分,它与通栏式布局相比,页面的空间可以有更多的变化,又不失平衡。两栏式布局又可以分为对称式和非对称式两种类型
对称式是对网页界面的均分,形成两块结构相同、信息量均等的分栏。这种分割方式可以达到页面高度平衡、整体稳定的效果,但如果在一个网站中大量重复使用这种分割,则容易引起浏览者的视觉疲劳,使网页呆板、缺乏生气,我们也可以通过调整页面元素的位置来达到缓解。非对称式是网页界面的不等分分割,也就是两个分栏的宽窄不同,设计师可以根据版面的需要灵活调整两个分栏之间的比例,也可以按照某种特定的比例分割,例如1:2、34等。这样的版面布局更趋于灵活、生动,在网页设计中十分常见。
3.三栏式
三栏式布局就是把网页沿垂直的方向分割为三个分栏的布局方法。三栏式布局较两栏式布局更加活跃、多变,适合信息项目较多的网站使用,它的布局类型类似于杂志,能有效避免因一行中字数过多而引起的读者视觉疲劳,也适合于图文混排较多的页面,它的分栏会使页面的结构更加富有条理。在三栏式的布局中,左、中、右的三栏可以是均分的,也可以是不均分的。均分的三栏看起来更为整齐,更适合排放同类的内容信息,形成一种并列的关系。不均分的三栏可以让信息的分类一目了然,制造出加独特的版面效果,如,这个网页左边的两栏等宽,显示的是同类的内容信息,右边的一栏作为侧边栏,宽度略窄,不难看出网站设计师对于这些信息的主次引导,也让浏览者感到非常舒适实用。
4.多栏式
多栏式布局一般是指页面分为四栏及更多栏的分割方式,它般适合于信息量较大的网站使用,对屏幕的分辨率也要求较高,一些行业信息、资讯、门户类等综合性网站经常使用这种布局类型。由于信息量巨大,分栏安排不当容易使浏览者有满胀感和压迫感,调整好分栏的比例关系,才能让这种布局方式的适用性更强。