如何來標(biāo)注一個網(wǎng)頁的首屏線？

一個經(jīng)驗豐富的網(wǎng)頁設(shè)計師在做網(wǎng)頁原型設(shè)計或者視覺效果圖時，首先必須要做的是標(biāo)注清楚網(wǎng)站首屏的高度線，以便直觀的看到網(wǎng)站首屏的高度，首屏可以顯示的元素。那么，我們該如何來標(biāo)注一個網(wǎng)頁的首屏線那？筆者結(jié)合網(wǎng)上的一些談?wù)撎卣砣缦拢?nbsp;

    首屏的高度直接跟客戶端的各種客觀的條件有關(guān)系，因為我們要確定首屏的高度（標(biāo)注首屏線）就需要結(jié)合一些相對準(zhǔn)確的內(nèi)部統(tǒng)計數(shù)據(jù)來分析了，根據(jù)各個客戶端的操作系統(tǒng)、瀏覽器分布和屏幕分辨率等情況，并結(jié)合常見瀏覽器狀態(tài)欄、任務(wù)欄等高度進(jìn)行分析如下： 

第一步：分析常見分辨率及瀏覽器下高度數(shù)據(jù) 

 

常見瀏覽器分辨率表 

綜合上面表中各個分辨率及瀏覽器下的統(tǒng)計數(shù)據(jù)，我們很容易畫出兩條首屏線，分別為 580PX 和 710PX，對應(yīng)不同的分辨率。 

第二步：分析客戶端實際分辨率及瀏覽器可見區(qū)域 

 

實際分辨率比例圖 

通過收集的用戶數(shù)據(jù)我們可以得出如下數(shù)據(jù)： 

1） 1024×768， 1440×900， 1366×768， 1280×800 分辨率是大部分客戶端的設(shè)置； 

2） 客戶端分辨率總類非常多，不常見的分辨率比例里面占了相當(dāng)多的種類； 

3） 隨著硬件的升級換代800×600，1024×600 等600PX高度的分辨率在逐步消失。 

 

用戶可見區(qū)域高度統(tǒng)計圖 

通過對大于30W臺客戶端用戶進(jìn)行測試，得到的測試數(shù)據(jù)如下： 

1） viewport 高度低于等于 580 的有 116786 個人，占 44.64％ 

2） viewport 高度低于等于 720 的有 216227 個人，占 82.64％ 

3） viewport 高度低于等于 800 的有 241420 個人，占 92.27％ 

4） viewport 高度低于等于 900 的有 259174 個人，占 99.06％ 

第三步：瀏覽器可見區(qū)域熱區(qū)圖分析 
 

瀏覽器常見熱區(qū)分布圖 

綜合上面三個步驟，最終我們可以確定： 

    1、通過分析上面瀏覽器常見熱區(qū)分布圖我們可以看出來：在網(wǎng)頁設(shè)計時如果把頁面首屏高度定在大于600像素的分辨率上，有可能會導(dǎo)致很多的用戶看不完整，考慮到良好的用戶體驗度，建議：網(wǎng)頁設(shè)計師在設(shè)計網(wǎng)頁時以600像素作為首屏高度來設(shè)計； 

    2、根據(jù)用戶可見區(qū)域高度統(tǒng)計圖及整體二八比例劃分的原則，如果把首屏高度確定在710像素可以照顧到約80%的用戶群體，小K建議：前端開發(fā)在做頁面時可考慮把710 像素視為首屏區(qū)域高度，采用技術(shù)手段對首屏的表現(xiàn)進(jìn)行優(yōu)先加載可獲得良好的用戶體驗度。 

服務(wù)器租用/服務(wù)器托管中國五強(qiáng)！虛擬主機(jī)域名注冊頂級提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]