| 加入收藏

针对宽屏显示器进行网页布局设计

2009-06-15 21:29来源:未知 浏览:[]
所属专题:

现在的前端网页设计师在设计网页页面的时候,经常要考虑的一个问题就是针对的用户显示器显示分辨率的各不相同,现在越来越流行宽屏显示器,但同时又保有相当一部分的1024*768的旧用户,并不能只按照一个模式设置网站的宽度,在进行网页布局设计的时候,就让人很烦恼。本文将讨论如何针对宽屏显示器设计网页布局.

  根据某知名博客博客上月数据统计,在目前情况下,1024×768分辨率的用户占有率仅有50%了,并且还在不断地下降,而1280-1440这三个分辨率的用户则已慢慢增加到了35%,如果按照这个速度发展下去,明年宽屏将成为主流,这说明,前端网页设计师在进行网页布局设计的时候,考虑的就不仅是1024×768分辨率了,同时还要考虑考虑大屏幕宽屏用户的浏览体验了。

  同行的前端设计师们,你们可以做个简单的试验,在19寸宽屏显示器屏幕下,如果网站页面中内容较多,正好显示满屏,那么你在阅读内容的时候,要想阅读完完整行,眼睛就需要从左转到右,屏幕越大,这种情况显得俞加明显,因此,为了照顾好用户的眼睛,增加用户体验,在设计内容和版式的时候,就算是在大屏幕宽屏下,也不要将内容设计成整屏显示。

  在1024×768分辨率下,使用知名Google Reader产品浏览内容时,你会发现内容是全屏显示供用户阅读的,但是,当用户使用19寸宽屏在1440*900分辨率下再去阅读同样的内容时,就会发现在右边留出了一大块空白,使用测量工具测量宽屏下Google Reader的内容显示像素,结果是955个像素,相信我们在设计宽屏网页的时候,也可以考虑使用。

现在的电脑显示器,分辨率早已经不是以前流行的1024*768了,越来越大的分辨率下在流行,那么对于使用宽屏显示器的用户而言,现在看网站的时候,两侧空空的留白给人第一眼的印象是绝对的屏幕浪费,那作为职业是网站设计师的你,应该有责任给这一批用户一个良好的用户界面。

现在经过实践得出,网页采用弹性流体式版面布局是比较好的解决方案,它可以充分利用屏幕空间的优势,能适应大分辩率的用户,再大的分辨率显示器,内容都能满屏展示。然而因为种种限制,目前的网页完全采用流体弹性布局条件还不具备(特别是浏览器厂商对标准的肆意蹂躏以及CSS标准的不完全支持等等)。作为夹在用户和厂商的中间者,我们只能以一种兼容的心态去适应两者的差距。所以,作为一种过渡的解决方案,有了这样一种布局:弹性+固宽布局。

而这篇文章所说的弹性布局设计,所指的是用背景去适应宽屏显示器屏幕宽度,而固宽的意思呢,则是指让正文内容无论在宽屏还是窄屏中都能自动居中。夹缝中求生存,以满足不同大小分辩率用户的需要。



Copyright 2008 逆云网 | 粤ICP备08131116号 |关于我们 | 联系我们 |