網頁設計之網頁首屏高度確定技巧

網頁設計之網頁首屏高度的確定有什麼技巧呢？本站小編就為大家分享以下的技巧，希望可以為你帶來幫助!

首屏的高度直接跟客戶端的各種客觀的條件有關係，因為我們要確定首屏的高度(標註首屏線)就需要結合一些相對準確的內部統計資料來分析了，根據各個客戶端的作業系統、瀏覽器分佈和螢幕解析度等情況，並結合常見瀏覽器狀態列、工作列等高度進行分析如下：

　　第一步：分析常見解析度及瀏覽器下高度資料

常見瀏覽器解析度表

綜合上面表中各個解析度及瀏覽器下的統計資料，我們很容易畫出兩條首屏線，分別為 580PX 和 710PX，對應不同的解析度。

　　第二步：分析客戶端實際解析度及瀏覽器可見區域

　　實際解析度比例圖

通過收集的使用者資料我們可以得出如下資料：

1) 1024×768， 1440×900， 1366×768， 1280×800 解析度是大部分客戶端的設定;

2) 客戶端解析度總類非常多，不常見的解析度比例裡面佔了相當多的種類;

3) 隨著硬體的升級換代800×600，1024×600 等600PX高度的解析度在逐步消失。

　　使用者可見區域高度統計圖

通過對大於30W臺客戶端使用者進行測試，得到的測試資料如下：

1) viewport 高度低於等於 580 的'有 116786 個人，佔 44.64%

2) viewport 高度低於等於 720 的有 216227 個人，佔 82.64%

3) viewport 高度低於等於 800 的有 241420 個人，佔 92.27%

4) viewport 高度低於等於 900 的有 259174 個人，佔 99.06%

　　第三步：瀏覽器可見區域熱區圖分析

　　瀏覽器常見熱區分佈圖

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

1、通過分析上面瀏覽器常見熱區分佈圖我們可以看出來：在網頁設計時如果把頁面首屏高度定在大於600畫素的解析度上，有可能會導致很多的使用者看不完整，考慮到良好的使用者體驗度，建議：網頁設計師在設計網頁時以600畫素作為首屏高度來設計;

2、根據使用者可見區域高度統計圖及整體二八比例劃分的原則，如果把首屏高度確定在710畫素可以照顧到約80%的使用者群體，小K建議：前端開發在做頁面時可考慮把710 畫素視為首屏區域高度，採用技術手段對首屏的表現進行優先載入可獲得良好的使用者體驗度。