網頁一屏有多大?_網頁設計教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:書簽效果的優化
      一葉千鳥的blog:http://www.rexsong.com/blog/傳說IBM筆記本的小紅帽TrackPoint有個小秘密:鼠標指針在移動過程中,當手指離開小紅帽的瞬間,指針會向相反方

      網站設計時,有一個最常用的指導性原則:頁面長度原則上不超過3屏,寬度不超過1屏。這個原則明顯是從用戶的體驗出發,非凡是寬度不超過一屏,其最基本的表現是瀏覽器不出現橫向滾動條,這幾乎是目前的設計準則。那么這里的一屏到底是多大呢?

      普通用戶通常瀏覽網頁時,其瀏覽網頁的有效面積會受到下面幾個方面的影響:

      1. 顯示器的分辨率
        這個由科技發展和用戶購買力及喜好決定,其數據取決于統計。
      2. 操作系統
        毫無疑問目前是Windows的天下,其中WindowsXP占絕大多數。
      3. 網頁瀏覽器
        IE依舊份額最高,但是Firefox、Opera和Safari等也有一定市場。
      4. 個人定制
        主要是用戶定制操作系統的樣式、操作系統任務欄是否隱藏和瀏覽器的樣式,但是總體上這部分應該屬于高級用戶,絕大部分用戶依舊會使用操作系統和瀏覽器的默認樣式。

      下面是關于瀏覽器和屏幕分辨率的統計數據


      W3Counter于2006.11.12發布的全球統計數據


      某知名站點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

      分享:做網站的一些定律
      1.250定律拉德認為:每一位顧客身后,大體有250名親朋好友。假如您贏得了一位顧客的好感,就意味著贏得了250個人的好感;反之,假如你得罪了一名顧客,也就意

      來源:隨網之舞//所屬分類:網頁設計教程/更新時間:2007-04-06
      相關網頁設計教程