页面宽度：固定、自适应、弹性、混合

 转载自：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	固定
亚马逊	混合
当当	固定
搜索引擎	Google	混合
百度	混合
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 避免自适应时，文字拉伸得很长、区块间距加大，不适合阅读，思路连贯性受影响。