如何設計標注一個網頁的首屏線？

對于一個經驗豐富的網頁設計師來說，在做網頁原型設計或者視覺效果圖時，首先必須要做的是標注清楚網站首屏的高度線，以便直觀的看到網站首屏的高度，首屏可以顯示的元素。那么，我們該如何來標注一個網頁的首屏線呢？首屏的高度直接跟客戶端的各種客觀的條件有關系，因為我們要確定首屏的高度（標注首屏線）就需要結合一些相對準確的內部統計數據來分析了，根據各個客戶端的操作系統、瀏覽器分布和屏幕分辨率等情況，并結合常見瀏覽器狀態欄、任務欄等高度進行分析：

1、什么是首屏

首屏的英文是above the fold，fold有折疊之意，above the fold是指在折疊之后能看到的，為什么首屏的英文翻譯會跟折疊有關系呢，原因很簡單，因為這個概念最早用于出版領域，可以簡單的理解為“頭版”因為報紙的運輸和分發過程是折疊起來的，所以報紙的折疊后暴露在讀者面前的那一部分內容就顯得尤其重要，讀者會根據頭版的內容決定是否購買。

因此處于頭版的內容意味著一個，編輯認為它們是最重要的，頭版的內容也決定了出版物的立場和定位。所以“above the fold”也用來表示所有優先顯示或或優先級最高的內容。

“above the fold（頭版）”的概念延伸到互聯網領域。用來指代web網頁中不用滾動屏幕看到的信息。

與出版業的“頭版”不同的是互聯網的首屏區域是動態的，由于互聯網用戶復雜的屏幕分辨率環境，導致他們看到的首屏內容有很大差距。

很多店鋪設計就是因為對首屏的忽視導致很嚴重的體驗問題，尤其是banner廣告圖的設計。

2、用戶滾動屏幕的概率

有些設計師可能會認為，首屏并沒有那么重要，用戶是會滾動屏幕最終看到我們期望他們看到的內容。著名網頁易用性專家。被譽為可用性測試鼻祖）的研究報告：

Above the fold: 80.3%

Below the fold: 19.7%

根據這份報告得出的結論，即使是在用戶滾動屏幕的前提下，用戶的注意力分部占比任然是相當懸殊的：

首屏以上：80.3%

首屏以下：19.7%

3、分析常見分辨率及瀏覽器下高度數據

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

4、分析客戶端實際分辨率及瀏覽器可見區域

通過收集的以上用戶數據，我們可以得出如下數據：

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

（2）、客戶端分辨率總類非常多，不常見的分辨率比例里面占了相當多的種類；

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

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

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

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

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

5、瀏覽器可見區域熱區圖分析

通過上面的熱區分布圖，我們可以得到以下2點：

（1）、通過分析上面瀏覽器常見熱區分布圖我們可以看出來：在網頁設計時如果把頁面首屏高度定在大于600像素的分辨率上，有可能會導致很多的用戶看不完整，考慮到良好的用戶體驗度。

（2）、根據用戶可見區域高度統計圖及整體二八比例劃分的原則，如果把首屏高度確定在710像素可以照顧到約80%的用戶群體。

綜合上面三個步驟，最終我們可以確定網頁的首屏線為：

（1）、網頁設計師在設計網頁時以600像素作為首屏高度來設計。

（2）、網頁寬度無干擾因素確定為1000，前端開發在做頁面時可考慮把710像素視為首屏區域高度，采用技術手段對首屏的表現進行優先加載可獲得良好的用戶體驗度。

一個網站首屏形象的設計關乎到訪客對網站的第一眼印象，一個首屏頁面設計的如何不但影響到網站主題展示是問題，甚至還影響到了訪客的去留問題，這就顯得至關重要了。