网上商店系统
首    页 | 电商资讯 | 电商作品 | 成功案例 | 电商方案 | 系统演示 | 电商建设 | 电商索引 | 电商问题
当前位置: 首 页 > 电商建设

网页设计页面大小分析 不同分辨率下的网页大小

文章来源:北京宇光宏达       浏览次数:2497次        发布日期:2011-7-18 12:22:47

网页设计页面大小分析 不同分辨率下的网页大小

网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基本的表现是浏览器不出现横向滚动条,这几乎是目前的设计准则。那么这里的一屏到底是多大呢?
普通用户通常浏览网页时,其浏览网页的有效面积会受到下面几个方面的影响:

1、显示器的分辨率

这个由科技发展和用户购买力及喜好决定,其数据取决于统计。

2、操作系统

毫无疑问目前是Windows的天下,其中WindowsXP占绝大多数。

3、网页浏览器

IE依旧份额最高,但是Firefox、Opera和Safari等也有一定市场。

4、个人定制

主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式,但是总体上这部分应该属于高级用户,绝大部分用户依旧会使用操作系统和浏览器的默认样式。

下面是关于浏览器和屏幕分辨率的统计数据:
<IMG onmouseover="if(this.resized) this.style.cursor='hand';" title=点击看大图 onclick="if(this.resized) window.open('http://www.webso.net/upload/wy1.png');" alt=点击看大图 src="http://www.webso.net/upload/wy1.png" onload="if(this.width>460) {this.resized=true; this.width=460;}">
W3Counter于2006.11.12发布的全球统计数据
<IMG onmouseover="if(this.resized) this.style.cursor='hand';" title=点击看大图 style="CURSOR: hand" onclick="if(this.resized) window.open('http://www.webso.net/upload/wy2.png');" alt=点击看大图 src="http://www.webso.net/upload/wy2.png" width=460 onload="if(this.width>460) {this.resized=true; this.width=460;}" resized="true">
某知名站点2006年10月份的数据

由上面的数据可以得出:

1、基本上用户分辨率都在800×600以上,绝大部分都在1024×768以上,从全球情况来看,800×600的分辨率会越来越少。

2、国内浏览器依旧是IE6的天下,这将会持续较长的时间。从全球市场来看,国内的Firefox2.0和IE7会逐步增长,特别当IE7的中文版推出和Windows自动更新的推广开始以及随Vista上市,IE7增长会更快。

所以计算一屏大小应基于以下原则:

1、一屏指绝大部分用户的浏览器显示网页的有效可视区域。

2、一屏的计算环境是Windows XP和浏览器均处于默认样式。

3、由于IE无论是否超过一屏都存在纵向滚动条的位置,Firefox和Opera是在页面超过一屏的时候出现纵向滚动条,且浏览绝大部分网页都有纵向滚动条的存在,所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。

4、由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏,而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页,所以一屏大小在Firefox中指多窗口的控制栏存在时。

下面是基于上面的原则得到常用浏览器和分辨率下的的数据结果:
有效可视区域(单位:px)
屏幕 一 二 三
800 600 1024 768 1280 1024
IE6.0 779(+21) 432(+168) 1003(+21) 600(+168) 1259(+21) 856(+168)
IE7.0 779(+21) 452(+148) 1003(+21) 620(+148) 1259(+21) 876(+148)
Firefox2.0 783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183)
Opera9.0 781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139)
关于上面数据的解释和一些其他事实:

1、在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445,Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似,所以相同分辨率下应该比Windows XP默认的样式要大。

2、知道浏览器型号和屏幕的分辨率能够很容易的推算出可视区域面积,比如1024×768下IE7.0的可视面积是(1024-21)×(1024-148)

综合上面所有的数据,结论如下:

1、最保守而最有兼容性的一屏大小是:779×432

2、最广泛的一屏大小是:1003×600

3、适合目前国内的情况,一屏大小是779×600

特别提示:如需转载此篇文章请注明文章来源企策互通
文章关键词:
上一篇:
便宜网站建设 便宜网站建设分析 (2011-7-20 关注度:2055)
下一篇:
什么是网上商城前端设计与网店前台设计? (2011-7-20 关注度:1070)
 
 相关文章
 
披露创业秘密 网站的盈利方式有哪些(2011-7-20 关注度:1459)
各大网站主页常用特殊效果分析及应用方法(2011-7-19 关注度:1818)
如何建设一个专业的企业WEB网站之设计篇 (2011-7-18 关注度:901)
企业门户网站建设策划书(2011-7-18 关注度:1415)
幽灵现象 新网站google排名不稳定的根源 (2011-7-17 关注度:1525)
精通CSS(10)-样式指南(2011-7-14 关注度:1221)
Asp中通用函数(2011-7-20 关注度:1259)
网页布局设计:注册登录框放哪里合适?(2011-6-10 关注度:1165)
 
行业观点类别
 

开店疑难(94)
电商建设(143)
电商运营(217)
电商发展趋势(96)
售后服务(10)

电商建设关注排行 
  1.网页设计页面大小分析 不同分辨率下的网页大小
  2.网站建设合同模板 标准网站建设合同下载
  3.网站设计论文下载
  4.便宜网站建设 便宜网站建设分析
  5.网站建设业务营销策略 企业网站建设业务营销分析
  6.小议中英文网站排版设计的视觉差异
  7.提高网站友好度的十点建议
  8.十大网站设计错误 - 2006
  9.深度分析 企事业单位网站建设问题严重
  10.网站可信度建设十大准则 如果建立可信度高的企业公
电商建设最新文章 
  1.基于SMS的移动电子商务存在哪些安全问题?
  2.国内首个电子商务调解中心获批并正式成立
  3.关键词对网站的运营有什么影响?怎么分析网站关键词?
  4.什么是网上商城前端设计与网店前台设计?
  5.网页META标签内容写作规范要点
  6.Asp中通用函数
  7.探讨网站获得盈利的前提条件
  8.网站建设三步:申请空间编写网页上传文件
  9.明定网站的优化设计
  10.披露创业秘密 网站的盈利方式有哪些
首    页  |  关于我们  |  定制开发  |  购买流程  |  网店系统特性  |  商城系统策划  |  开店疑问问题  |  网店建设观点  |  友情链接  |  联系我们
  Copyright 2005-2007 51system 网上商城系统 All Rights Reserved 北京宇光宏达 版权所有 地址:北京市朝阳区东三环北路戊2号A1505室。
京ICP备11007506号