建站常識(shí)
網(wǎng)頁(yè)一屏有多大?
2007-04-06 14:55:00
網(wǎng)站設(shè)計(jì)時(shí),有一個(gè)最常用的指導(dǎo)性原則:頁(yè)面長(zhǎng)度原則上不超過(guò)3屏,寬度不超過(guò)1屏。這個(gè)原則明顯是從用戶的體驗(yàn)出發(fā),特別是寬度不超過(guò)一屏,其最基本的表現(xiàn)是瀏覽器不出現(xiàn)橫向滾動(dòng)條,這幾乎是目前的設(shè)計(jì)準(zhǔn)則。那么這里的一屏到底是多大呢?
普通用戶通常瀏覽網(wǎng)頁(yè)時(shí),其瀏覽網(wǎng)頁(yè)的有效面積會(huì)受到下面幾個(gè)方面的影響:
- 顯示器的分辨率
這個(gè)由科技發(fā)展和用戶購(gòu)買力及喜好決定,其數(shù)據(jù)取決于統(tǒng)計(jì)。 - 操作系統(tǒng)
毫無(wú)疑問(wèn)目前是Windows的天下,其中WindowsXP占絕大多數(shù)。 - 網(wǎng)頁(yè)瀏覽器
IE依舊份額最高,但是Firefox、Opera和Safari等也有一定市場(chǎng)。 - 個(gè)人定制
主要是用戶定制操作系統(tǒng)的樣式、操作系統(tǒng)任務(wù)欄是否隱藏和瀏覽器的樣式,但是總體上這部分應(yīng)該屬于高級(jí)用戶,絕大部分用戶依舊會(huì)使用操作系統(tǒng)和瀏覽器的默認(rèn)樣式。
下面是關(guān)于瀏覽器和屏幕分辨率的統(tǒng)計(jì)數(shù)據(jù):
W3Counter于2006.11.12發(fā)布的全球統(tǒng)計(jì)數(shù)據(jù)
某知名站點(diǎn)2006年10月份的數(shù)據(jù)
由上面的數(shù)據(jù)可以得出:
- 基本上用戶分辨率都在800×600以上,絕大部分都在1024×768以上,從全球情況來(lái)看,800×600的分辨率會(huì)越來(lái)越少。
- 國(guó)內(nèi)瀏覽器依舊是IE6的天下,這將會(huì)持續(xù)較長(zhǎng)的時(shí)間。從全球市場(chǎng)來(lái)看,國(guó)內(nèi)的Firefox2.0和IE7會(huì)逐步增長(zhǎng),特別當(dāng)IE7的中文版推出和Windows自動(dòng)更新的推廣開(kāi)始以及隨Vista上市,IE7增長(zhǎng)會(huì)更快。
所以計(jì)算一屏大小應(yīng)基于以下原則:
- 一屏指絕大部分用戶的瀏覽器顯示網(wǎng)頁(yè)的有效可視區(qū)域。
- 一屏的計(jì)算環(huán)境是Windows XP和瀏覽器均處于默認(rèn)樣式。
- 由于IE無(wú)論是否超過(guò)一屏都存在縱向滾動(dòng)條的位置,F(xiàn)irefox和Opera是在頁(yè)面超過(guò)一屏的時(shí)候出現(xiàn)縱向滾動(dòng)條,且瀏覽絕大部分網(wǎng)頁(yè)都有縱向滾動(dòng)條的存在,所以一屏大小的計(jì)算都基于瀏覽器有縱向滾動(dòng)條的狀態(tài)下。
- 由于Firefox2.0在只瀏覽一個(gè)網(wǎng)頁(yè)時(shí)不出現(xiàn)多窗口的控制欄,而其它的多窗口瀏覽器都出現(xiàn)多窗口控制欄且使用時(shí)都會(huì)同時(shí)瀏覽多個(gè)網(wǎng)頁(yè),所以一屏大小在Firefox中指多窗口的控制欄存在時(shí)。
下面是基于上面的原則得到常用瀏覽器和分辨率下的的數(shù)據(jù)結(jié)果:
有效可視區(qū)域(單位: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) |
關(guān)于上面數(shù)據(jù)的解釋和一些其他事實(shí):
- 在800×600分辨率和Windows XP下定制Windows的經(jīng)典樣式IE6的有效可視區(qū)域是780×445,Windows98、Windows 2000和Windows2003均采用經(jīng)典樣式切IE5.0、IE5.5、IE6.0的布局上相似,所以相同分辨率下應(yīng)該比Windows XP默認(rèn)的樣式要大。
- 知道瀏覽器型號(hào)和屏幕的分辨率能夠很容易的推算出可視區(qū)域面積,比如1024×768下IE7.0的可視面積是(1024-21)×(1024-148)
綜合上面所有的數(shù)據(jù),結(jié)論如下:
- 最保守而最有兼容性的一屏大小是:779×432
- 最廣泛的一屏大小是:1003×600
- 適合目前國(guó)內(nèi)的情況,一屏大小是779×600
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2007-05-15 16:23:00] 網(wǎng)頁(yè)信息的表現(xiàn)類型和常見(jiàn)的排版方式
- [2006-11-08 09:57:00] 學(xué)網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)頁(yè)制作,你該做些什么?
- [2010-09-11 08:57:00] 淺析網(wǎng)頁(yè)界面設(shè)計(jì)-首頁(yè)
- [2007-01-15 16:11:00] 網(wǎng)頁(yè)界面設(shè)計(jì)教程一:基礎(chǔ)理論
- [2009-11-12 08:30:00] 慢慢的網(wǎng)頁(yè)
- [2009-10-27 08:11:00] 美工自我培養(yǎng)的幾點(diǎn)經(jīng)驗(yàn)總結(jié)
- [2006-11-24 09:47:00] 淺議Web網(wǎng)頁(yè)Form表單設(shè)計(jì)技巧
- [2006-08-09 13:37:00] 《設(shè)計(jì)師談網(wǎng)頁(yè)設(shè)計(jì)思維》后記,聊幾件事情
- [2005-12-28 13:53:00] 從網(wǎng)頁(yè)設(shè)計(jì)到管理與維護(hù)的研究
- [2006-02-27 16:10:00] 網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)九大注意事項(xiàng)
- [2006-05-30 12:18:00] 網(wǎng)頁(yè)設(shè)計(jì)制作九大“要點(diǎn)”
- [2006-04-20 17:40:00] 很多人問(wèn)的問(wèn)題:怎樣設(shè)計(jì)網(wǎng)頁(yè)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
網(wǎng)站優(yōu)化 插畫 舒適的界面 網(wǎng)站制作 響應(yīng)式設(shè)計(jì) 蘋果系統(tǒng) 微官網(wǎng) 網(wǎng)站設(shè)計(jì)趨勢(shì) 集團(tuán)官網(wǎng) 微信開(kāi)發(fā) 審美 robots 青島做網(wǎng)站多少錢 企業(yè)網(wǎng)站建設(shè) 網(wǎng)站改版 青島網(wǎng)絡(luò)公司 SEO優(yōu)化 網(wǎng)站品牌 青島開(kāi)發(fā)區(qū)建站公司 網(wǎng)站設(shè)計(jì) 空白和簡(jiǎn)潔的設(shè)計(jì) 青島網(wǎng)站建設(shè)基礎(chǔ)知識(shí) 網(wǎng)站交互設(shè)計(jì) 高端輪胎網(wǎng)站設(shè)計(jì) 青島網(wǎng)頁(yè)設(shè)計(jì) 建站常識(shí) 海信網(wǎng)絡(luò)科技 網(wǎng)站視覺(jué) 圖形網(wǎng)格 企業(yè)網(wǎng)站設(shè)計(jì)