转载自:http://jdodo.aliued.cn/archives/38
2009年6月12日
目前,网页的页面宽度可以分为固定、自适应、弹性和混合。
固定宽度:页面宽度固定,不随屏幕大小变化。
自适应:页面宽度随不同屏幕宽度变化而变化。
弹性:字体大小不变时,页面宽度固定,页面随字体大小变化而变化。这种情况很少出现。
混合:采用2种及以上的布局方式。
页面宽度的选择根据互联网主流宽度、用户电脑的分辨率、用户的生理视角等情况,来综合考量,选择最适合的宽度方式。目前比较推荐固定宽度。
网站分类 | 网站名称 | 搜索list页面 |
新闻类 | 网易 | 固定 |
搜狐 | 固定 | |
新浪 | 固定 | |
BBC | 固定 | |
B2B | 环球资源 | 自适应 |
全球纺织网 | 混合 | |
中国化工网 | 固定 | |
Top100的b2b | 40个b2b网站 :5个自适应(12.5%),6个混合(15%),29个固定(72.5%) | |
B2C\C2C | 淘宝 | 固定 |
易趣 | 固定 | |
ebay | 固定 | |
亚马逊 | 混合 | |
当当 | 固定 | |
搜索引擎 | | 混合 |
百度 | 混合 | |
yahoo | 混合 |
从以上统计的数据来看,固定宽度还是主流。
1.2 屏幕分辨率越来越大,用户的视角到底能看多少信息
页面宽度跟现如今的显示器分辨率息息相关。这里,我们通过阿里巴巴网站用户群的客户端分析,得出用户现在主要的屏幕分辨率如下图分布:
可以看出我们的用户,主流的屏幕分辨率为1024px。800px的占有率已3%不到,其他21%为大于1024的分辨率。根据市场发展和需求趋势,19寸宽屏趋向显示器的主流产品,分辨率也随之越来越高。
自适应的布局或混合的布局,让我们的信息充满整个屏幕。这种方式的可用性到底如何,我们从视角角度来做个分析。
根据科学证明,人眼的视角大约在150°至170°。从面的纬度说,10°以内的视觉范围为中心视野,对图像的颜色及细节部分的分辨能力较强。20°以内为有效视野,能正确识别图形等信息。20°至30°,对信息内容仍比较敏感。30°之外信息已开始相对模糊。从线的纬度来说,横向较清晰的视觉区域大概为35°,而纵向大概为20°。大部分用户操作电脑时,人眼离屏幕的距离为50cm至60cm,这也是最合适的距离。
根据以上的数据,我们做数据换算,50cm=1417px,60cm=1701px
设半屏幕宽为k,那么当距离为50cm时,tan17.5°=k/1417,k=446,整屏大小为2k=892px
当距离为60cm时,tan17.5°=k/1701,k=536,整屏大小为2k=1072px。
所以,当距离为50cm时,横向宽度在892px以内;当距离为60cm时,横向宽度在1072px以内。考虑到内容最大化,和均数,及1024px的分辨率,在1002px以内的一个宽度是适合的。不管屏幕分辨率如何变化,操作电脑的距离不变的情况下,人的视角在1002px以内。
1.3 除了考量以上数据之外,固定宽度还有很多优点
1 节省新上线产品需要考虑自适应布局而带来的设计与开发成本。
2 避免页面放大、缩小时,自适应引起的页面信息错位等问题。
3 保证所有用户看到页面都是一样的。
4 当其他页面,比如外部合作页面,嵌套搜索页面信息模块时,不会因为页面宽度问题而出错。
5 避免自适应时,文字拉伸得很长、区块间距加大,不适合阅读,思路连贯性受影响。