如何設(shè)計(jì)標(biāo)注一個(gè)網(wǎng)頁(yè)的首屏線？

時(shí)間：2022-05-29 10:42:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-29 10:42:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

對(duì)于一個(gè)經(jīng)驗(yàn)豐富的網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，在做網(wǎng)頁(yè)原型設(shè)計(jì)或者視覺(jué)效果圖時(shí)，首先必須要做的是標(biāo)注清楚網(wǎng)站首屏的高度線，以便直觀的看到網(wǎng)站首屏的高度，首屏可以顯示的元素。那么，我們?cè)撊绾蝸?lái)標(biāo)注一個(gè)網(wǎng)頁(yè)的首屏線呢？

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

1、什么是首屏

首屏的英文是above the fold，fold有折疊之意，above the fold是指在折疊之后能看到的，為什么首屏的英文翻譯會(huì)跟折疊有關(guān)系呢，原因很簡(jiǎn)單，因?yàn)檫@個(gè)概念最早用于出版領(lǐng)域，可以簡(jiǎn)單的理解為“頭版”因?yàn)閳?bào)紙的運(yùn)輸和分發(fā)過(guò)程是折疊起來(lái)的，所以報(bào)紙的折疊后暴露在讀者面前的那一部分內(nèi)容就顯得尤其重要，讀者會(huì)根據(jù)頭版的內(nèi)容決定是否購(gòu)買。

因此處于頭版的內(nèi)容意味著一個(gè)，編輯認(rèn)為它們是最重要的，頭版的內(nèi)容也決定了出版物的立場(chǎng)和定位。所以“above the fold”也用來(lái)表示所有優(yōu)先顯示或或優(yōu)先級(jí)最高的內(nèi)容。

“above the fold（頭版）”的概念延伸到互聯(lián)網(wǎng)領(lǐng)域。用來(lái)指代web網(wǎng)頁(yè)中不用滾動(dòng)屏幕看到的信息。

與出版業(yè)的“頭版”不同的是互聯(lián)網(wǎng)的首屏區(qū)域是動(dòng)態(tài)的，由于互聯(lián)網(wǎng)用戶復(fù)雜的屏幕分辨率環(huán)境，導(dǎo)致他們看到的首屏內(nèi)容有很大差距。

很多店鋪設(shè)計(jì)就是因?yàn)閷?duì)首屏的忽視導(dǎo)致很嚴(yán)重的體驗(yàn)問(wèn)題，尤其是banner廣告圖的設(shè)計(jì)（具體可查看億企邦的《banner廣告設(shè)計(jì)的技巧和注意要點(diǎn)》相關(guān)介紹）。

2、用戶滾動(dòng)屏幕的概率

有些設(shè)計(jì)師可能會(huì)認(rèn)為，首屏并沒(méi)有那么重要，用戶是會(huì)滾動(dòng)屏幕最終看到我們期望他們看到的內(nèi)容。
如果你有這樣樂(lè)觀的想法，建議你看一下億企邦收集的這份尼爾森（雅各布尼爾森（Jakob Nielsen），著名網(wǎng)頁(yè)易用性專家。被譽(yù)為可用性測(cè)試鼻祖）的研究報(bào)告：

Above the fold: 80.3%

Below the fold: 19.7%

根據(jù)這份報(bào)告得出的結(jié)論，即使是在用戶滾動(dòng)屏幕的前提下，用戶的注意力分部占比任然是相當(dāng)懸殊的：

首屏以上：80.3%

首屏以下：19.7%

3、分析常見(jiàn)分辨率及瀏覽器下高度數(shù)據(jù)


常見(jiàn)瀏覽器分辨率表

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

4、分析客戶端實(shí)際分辨率及瀏覽器可見(jiàn)區(qū)域


實(shí)際分辨率比例圖

通過(guò)億企邦收集的以上用戶數(shù)據(jù)，我們可以得出如下數(shù)據(jù)：

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

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

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


用戶可見(jiàn)區(qū)域高度統(tǒng)計(jì)圖

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

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

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

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

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

5、瀏覽器可見(jiàn)區(qū)域熱區(qū)圖分析


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

通過(guò)上面的熱區(qū)分布圖，我們可以得到以下2點(diǎn)：

（1）、通過(guò)分析上面瀏覽器常見(jiàn)熱區(qū)分布圖我們可以看出來(lái)：在網(wǎng)頁(yè)設(shè)計(jì)時(shí)如果把頁(yè)面首屏高度定在大于600像素的分辨率上，有可能會(huì)導(dǎo)致很多的用戶看不完整，考慮到良好的用戶體驗(yàn)度。

（2）、根據(jù)用戶可見(jiàn)區(qū)域高度統(tǒng)計(jì)圖及整體二八比例劃分的原則，如果把首屏高度確定在710像素可以照顧到約80%的用戶群體。

綜合上面三個(gè)步驟，最終我們可以確定網(wǎng)頁(yè)的首屏線為：

（1）、網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)以600像素作為首屏高度來(lái)設(shè)計(jì)。

（2）、網(wǎng)頁(yè)寬度無(wú)干擾因素確定為1000，前端開(kāi)發(fā)在做頁(yè)面時(shí)可考慮把710像素視為首屏區(qū)域高度，采用技術(shù)手段對(duì)首屏的表現(xiàn)進(jìn)行優(yōu)先加載可獲得良好的用戶體驗(yàn)度。

億企邦點(diǎn)評(píng)：

一個(gè)網(wǎng)站首屏形象的設(shè)計(jì)關(guān)乎到訪客對(duì)網(wǎng)站的第一眼印象，一個(gè)首屏頁(yè)面設(shè)計(jì)的如何不但影響到網(wǎng)站主題展示是問(wèn)題，甚至還影響到了訪客的去留問(wèn)題，這就顯得至關(guān)重要了。