绿维网络绿维网络
 
建站资讯

建站资讯最新消息,企业数字化营销知识分享

网站设计中的页面布局

人气:  作者:  发表时间:2020-12-24 09:40:58
在设计网页布局时,根据页面的排列方式和布局的不同,每个位置的重要程度也不同,首先最重要的就是考虑好页面中内容的排列顺序,因此,如果使用左侧排列方式,则将网站的标志放置在页面中间的上方位置。

另外,有些网站在设计布局时会根据网站的目的和性质考虑网站的普遍性,因为,一般用户都会根据自己的喜好浏览网站页面,但是,如果想要自己的网站更有创意、更与众不同,一般不用从头到尾一直兼顾网站的普遍性,只要让浏览者感觉实用性并且美观大方即可。

一、满屏式页面布局
采用满屏式布局的页面结构简单、视觉流程清晰,便于用户快捷定位,但由于页面排版方式的限制,只适用于信息量小,目的比较集中或者相对比较独立的网站,因此常用于小型网站首页、活动页面以及注册表单页面等场合。

采用满屏式布局的首页,其信息展示集中,重点突出,通常会通过大幅精美的图片或者交互式的动画效果来实现强烈的视觉冲击效果,从而给用户留下深刻的印象,提升品牌效果,吸引用户进一步浏览。但是,这类首页的信息展现相对有限,因此需要在首页中添加导航或者重要的入口链接等元素,起到入口和信息分流的作用。

一栏式布局还经常使用在目的性单一,如前面讲解的搜索引擎网站页面,或者较为独立的二级页面和更深层次的页面中,如用户登录和注册页面。

二、两栏式页面布局
两栏式而面布局是最常见的布局方式之一,这种布局方式兼具满屏和后面要讲的三栏式布局的优点。相对于满屏式布局,两栏式可以容纳更多的内容,而相对于三栏式布局,两栏式的信息不至于过度拥挤和凌乱,但是两栏式不具备满屏式布局的视觉冲击力和三栏式布局的超大信息量的优点。

两栏式布局根据其占面积比例的不同,可以细分为左窄右宽、左宽右窄、左右均等3种类型。虽然从表面上看只是比例和位置不同,但实际上它影响的是用户浏览的视线及页面的整体重点。
1、左窄右宽
左窄右宽的布局通常采用左边是导航(以树状导航或一系列文字链接形式出现),右侧是网页内容的设置。此时左侧不适宜放置次要信息或者广告,否则会过度干扰用户浏览主要内容。用户浏览习惯通常是从左至右、从上至下,因此采用这类布局的页面更符合合理性的操作流程,能够引导用户通过导航查找内容,使操作更加具有可控性,适用于内容丰富、导航分类清晰的网站。

2、左宽右窄
和左窄右宽方式相对应的,左宽右窄的页面通常内容在左,导航在右。这种结构明显突出了内容的主导位置,引导用户将视线焦点放在内容上。在用户阅读内容的同时或者之后,都引导其关注更多的信息。

搜索引擎的搜索结果同样采用了左宽右窄的布局方式,重点突出搜索的结果信息,在右侧也可以放置次要的信息或广告,从而在页面中体现出信息的主次。

3、左右均等
左右均等是指左右两侧的比例相差较小,甚至完全一致。运用这种布局类型的网站较少,适用于两边信息的重要程度相对比较均匀的情况,不体现内容的主次。

对比这3种方式,可以看到每种方式的内容重点和视线流的方向都是不同的。

左窄右宽型的导航位置相对突出,引导用户从左至右地浏览网站,即从导航寻找信息内容;而左宽又窄型的左侧往往放置信息内容,让用户聚焦在当前内容上,浏览完之后才会通过导航引导用户浏览更多相关内容;对于左右均等型,如果两侧均放置内容,那么用户的视线流主要从上至下,两侧间存在一定的交叉性,如果左侧或者右侧放置了导航,那么左右侧的视线会出现很多的交叉性,从一定程度上增加了用户的视觉负担。

三、三栏式布局
三栏式布局对内容的排版更加紧凑,可以更加充用的运用网页的空间,尽量多的显示信息内容,增加信息的密集性,常见于信息量非常丰富的网站,如门户网站或电商网站首页。

但内容量过多会造成页面信息拥挤,用户很难找到需要的信息,增加了用户查找所需内容的时间,降低了用户对网站内容的可控性。

由于屏幕的限制,三栏式布局都相对类似,区别主要是比例上的差异,左右两栏放置导航链接或者次要内容;第二种方式在两栏放置重要内容,另一栏放置次要内容。

很多门户网站和电商网站都采用中间宽、两边窄的方式,常见比例约为1:2:1。中间栏由于在视觉比例上相对显眼(相应地,字体也往往比左右两栏稍大),因此用户默认将中间栏的信息处理成重点信息,两边的信息自动处理为次要信息的广告等,因此这类布局往往引导用户将视线流聚焦于中间部分,部分流向两边,重点较为突出,但容易降低页面的整体利用率。

四、水平和垂直居中的页面
水平和垂直居中的页面是指将页面的横向和纵向设计成100%的布局框架,使页面中的内容无论在什么大小的分辨率下,都在浏览器的正中间显示。

考虑到计算机显示器分辨率不同,我们在设计时一般以1024pxX768px的分辨率为标准。在1024pxX800px的分辨率下,页面的周围肯定要比分辨率为1024pxX768px要多出很多空白区域。以1024pxX768px为标准,在设计时如果想要使页面变得更大并且不会出现滚动条的话,横向需设置在1007px之内,纵向则需要设置在566px之内,但是这不是固定不变的,考虑到页面的使用空间,也可以适当选择使用其他的数值。
网站设计中的页面布局:http://www.luweit.com/news/jianzhan/120.html
标签: 网站设计
热门标签
相关新闻
免费获取一份方案或报价
* 请认真填写需求信息,我们会在24小时内与您取得联系。

关于我们

东莞市绿维信息技术有限公司致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发,等服务范围,并且涵盖基础的域名服务、主机服务;企业邮箱、网络营销等应用服务;
more>
立即咨询
快速获得解决方案
咨询电话
135 8088 5012
公司地址
广东省东莞市南城建设大厦7F
公司邮箱
Copyright ©2016-2021 东莞市绿维信息技术有限公司 粤ICP备18104664号-2