首屏的英文是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)買(mǎi)。

因此處于頭版的內(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)用戶(hù)復(fù)雜的屏幕分辨率環(huán)境，導(dǎo)致他們看到的首屏內(nèi)容有很大差距。

很多店鋪設(shè)計(jì)就是因?yàn)閷?duì)首屏的忽視導(dǎo)致很?chē)?yán)重的體驗(yàn)問(wèn)題。

天貓&淘寶的首屏

那么我們店鋪的買(mǎi)家看到的首屏是什么樣的呢?

首先看以下天貓和淘寶的買(mǎi)家用戶(hù)的屏幕分辨率占比情況：

其中屏幕高度在768以?xún)?nèi)的用戶(hù)有41.57%，18.78%(1024X768)+2.91%(1280X768)+19.88%(1366X768)>41.57%

這就是你為什么一定要關(guān)注首屏。我們的設(shè)計(jì)師們都用上20寸以上的大屏幕的時(shí)候41%的用戶(hù)還在用768的顯示設(shè)備

典型問(wèn)題

以下案例均以用戶(hù)瀏覽器分辨率占比最高的768像素為例

首屏差異性

店鋪類(lèi)目結(jié)果列表的差異

點(diǎn)擊店鋪?zhàn)髠?cè)類(lèi)目，首屏內(nèi)容沒(méi)有任何變化，天貓和淘寶的店鋪普遍存在這個(gè)問(wèn)題。

這種問(wèn)題導(dǎo)致用戶(hù)誤以為自己的點(diǎn)擊沒(méi)有產(chǎn)生預(yù)期的頁(yè)面跳轉(zhuǎn)，自己還停留在原始頁(yè)面。多次嘗試都沒(méi)有效果之后，最終跳失是很正常的。

鏈接目標(biāo)頁(yè)面的差異

這是某品牌的某個(gè)歷史版本的首頁(yè),在768高度的屏幕下的截圖。

當(dāng)然，設(shè)計(jì)師的設(shè)計(jì)稿中這是兩個(gè)不一樣的頁(yè)面，只有頁(yè)頭的幾百像素是相同的，關(guān)鍵是用戶(hù)在沒(méi)有滾動(dòng)屏幕的情況下，沒(méi)有看到下面的變化會(huì)誤以為自己的點(diǎn)擊無(wú)效，重復(fù)嘗試幾次后，最終跳失。同時(shí)成就了這個(gè)banner的點(diǎn)擊率。

首屏完整性

店鋪信息在用戶(hù)的顯示設(shè)備上顯示不完整。此問(wèn)題通常出現(xiàn)在店鋪首頁(yè)的營(yíng)銷(xiāo)信息，推廣banner上，看下面幾個(gè)案例：

首屏浮層遮蓋

屏幕寬度

1024的屏幕寬度，去除瀏覽器邊框的寬度，可見(jiàn)區(qū)域1003，1003-990=13也就意味著，店鋪?lái)?yè)面兩側(cè)各有6像素的可用寬度。

結(jié)果“掛耳朵”變成了“貼膏藥”，影響用戶(hù)瀏覽店鋪主體內(nèi)容。

用戶(hù)會(huì)滾動(dòng)屏幕?

有些設(shè)計(jì)師可能會(huì)認(rèn)為，首屏并沒(méi)有那么重要，用戶(hù)是會(huì)滾動(dòng)屏幕最終看到我們期望他們看到的內(nèi)容。

如果你有這樣樂(lè)觀的想法，建議你看一下這份尼爾森的研究報(bào)告：

(雅各布?尼爾森(Jakob Nielsen)，著名網(wǎng)頁(yè)易用性專(zhuān)家。被譽(yù)為可用性測(cè)試鼻祖。Jakob Nielson是尼爾森—諾曼集團(tuán)的主要負(fù)責(zé)人之一，他被《美國(guó)新聞與世界報(bào)道》雜志譽(yù)為“Web可用性方面的世界頂尖專(zhuān)家”。他的Alertbox專(zhuān)欄從1995年就開(kāi)始在互聯(lián)網(wǎng)上發(fā)布了(網(wǎng)站地址是：www.uselt.com)。Nielsen博士曾經(jīng)是Sun 公司杰出的工程師。)http://www.useit.com/alertbox/scrolling-attention.html

? Above the fold: 80.3%

? Below the fold: 19.7%

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

首屏以上：80.3%

首屏以下：19.7%

最合理的首屏設(shè)計(jì)稿范圍值

寬度：

寬度無(wú)干擾因素影響因此是確定的1003

高度：(此處是指店鋪設(shè)計(jì)稿高度)

屏幕總高度768

任務(wù)欄高度40px(win7=40px winxp=30px)

-商城頁(yè)頭+吊頂=106px

-瀏覽器=160px(IE8包含工具欄;狀態(tài)欄;邊框…等)

-位置工具欄=30px(如搜搜工具欄，百度工具欄，360工具欄等等用戶(hù)瀏覽器上安裝的各種插件都會(huì)影響到首屏的高度)

768-40-106-160-30=432

因此得出最終的有效設(shè)計(jì)范圍

1003X432

查看你的天貓店鋪首屏效果

大家可以根據(jù)這個(gè)工具檢測(cè)自己的店鋪設(shè)計(jì)是不是在最合理的范圍

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

本文名稱(chēng)：網(wǎng)頁(yè)的首屏標(biāo)準(zhǔn)你了解多少？
分享網(wǎng)址：http://www.rwnh.cn/news10/313260.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、靜態(tài)網(wǎng)站、網(wǎng)站策劃、關(guān)鍵詞優(yōu)化、全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)