当前位置:首页 > 网站建设

设计师的烦恼:宽屏显示下的网站网页宽度

时间:2019-05-27 18:40:00来源:网站建设作者:seo实验室小编阅读:79次「?#21482;?#29256;」
 

19宽屏分辨率

当前的前端设计师有一个苦恼,就是用户屏幕显示分辨率的各不相同,并不能只按照一个模式设置网站的宽度,特别对于宽屏用户来说更为烦恼。

根据我的博客?#26174;?#32479;计,1024×768分辨率的用户只占到50%,并且在逐月下降,而1280-1440这三个分辨率的用户则达到了35%,如果按照这个速度发展下去,明年就会超过1024分辨率,这说明,使用17寸普屏的用户正在加速减少,而17、19寸宽屏用户正在稳步逐步增加,这给前端设计师的一个考验是,不能只考虑1024×768分辨率的用户了,要想想大屏幕宽屏用户的浏览体验了。

Google Reader是一个典型的内容阅读性质的网站,用户在上面阅读时间非常之长,那么,Google的前端设计师是怎么考虑这个问题的呢?

大家可以做一个实验,在19寸宽屏下,如果网站页面全文显示,铺满整屏,那么阅读的时候,眼睛需要从左转到右,才能阅读完一行,屏幕越大,这种效果越明显,因此,一个让用户大量阅读的网站,为了照顾好读者的眼睛,在大屏幕宽屏下,也不应该全屏铺开的显示文字内容。

在1024×768分辨率下,使用google reader时,会发现内容是全屏显示的,但是,使用19寸宽屏在1440×900分辨率下打开Google Reader,会发现这时并没有宽屏显示内容,右边留出了一大块空白,如下图显示。

使用工具测量宽屏下Google Reader的内容显示像素,结果是955个像素,很有趣的数字。

我在《更改博客页面宽度到960像素》一文中已经提到了,现在的网页设计的行业标?#21152;?#35813;就是950/960像素宽度,这个宽度应该是人眼在不转动的情况下能看到的极限了,实际阅读区域正文的宽度是650像素,Google Reader的这个设计很有意思。

在Google搜索引擎中,搜索结果的显示宽度确是另外一个数字580像素,这是又一种内容宽度设计,Google这么做的原因估计是为了更好的显示右侧广告

我的博客最初使用的是778像素这个宽度,在2008年的那次改版后,修改为878像素宽度,主要是为了修改方便,直接加了100像素,正?#37027;?#22495;的阅读宽度是668像素,左侧侧栏宽度是200像素。不过,今年的改变,我的博客的整体宽度修改为960,正?#37027;?#22495;的宽度是728像素,728的宽度仅仅为了好放google adsense而已。

相关阅读

设计师的沟通之道:如何有效地完成,并跟进设计?#26041;?#30340;工作

初入职场的设计小伙伴在与上下游沟通中常常产生一些困惑,也许是青涩的你过于内向,?#21482;?#32773;是文艺的你跟不上产品的逻辑,实践虽不如理论

写给设计师:技术,要懂多少才算懂?

这篇?#24700;?#20889;给我自己看,也分享给各位有需要在这个方面提升的童鞋。由于本人学的是计算机相关专业,所以这篇?#24700;?#21482;讲技术这一块。接下

中国明星发微博?#31181;艱G设计师辱华 共青团中央官博转发:

A5创业网(公众号:iadmin5)11月21日,国?#25163;?#21517;?#25918;艱&G(杜嘉班纳)的设计师被微博网友曝出言辱华,该信息在微博上迅速传开。原定于今天参

设计师如何准备职级晋升

每次快到晋级答辩的时候,大家都会?#31034;?#33041;汁地准备PPT。相信很多参加过晋级的同学,都总结出了一套自己的方法,但仍有部分同学会感到困

设计师配色宝典!教你从零开始学配色(一)

设计原则101——色彩理论第一印象决定一切!大家都可?#28304;?#21508;自的外表上大概看出一个人的性格。同样的,这个理论也可以?#30001;?#21040;设计工作

分享到:

?#25913;?#23548;航

推荐阅读

?#35753;?#38405;读

疯狂麻将试玩
理财会把本金全亏没了 广西十一选五 棒球比分的x什么意思 广东快乐10分 股票配资来选保利配资优2 腾讯财经股票 北京快三 九点期货配资 股票涨跌西部证券 金管家期货配资 163即时比分 31选7 北京赛车 广东36选7 2014上证指数预测 炒股高手