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

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

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

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

很多店鋪設計就是因為對首屏的忽視導致很嚴重的體驗問題。

天貓&淘寶的首屏

那么我們店鋪的買家看到的首屏是什么樣的呢?

首先看以下天貓和淘寶的買家用戶的屏幕分辨率占比情況：

其中屏幕高度在768以內的用戶有41.57%，18.78%(1024X768)+2.91%(1280X768)+19.88%(1366X768)>41.57%

這就是你為什么一定要關注首屏。我們的設計師們都用上20寸以上的大屏幕的時候41%的用戶還在用768的顯示設備

典型問題

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

首屏差異性

店鋪類目結果列表的差異

點擊店鋪左側類目，首屏內容沒有任何變化，天貓和淘寶的店鋪普遍存在這個問題。

這種問題導致用戶誤以為自己的點擊沒有產生預期的頁面跳轉，自己還停留在原始頁面。多次嘗試都沒有效果之后，最終跳失是很正常的。

鏈接目標頁面的差異

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

當然，設計師的設計稿中這是兩個不一樣的頁面，只有頁頭的幾百像素是相同的，關鍵是用戶在沒有滾動屏幕的情況下，沒有看到下面的變化會誤以為自己的點擊無效，重復嘗試幾次后，最終跳失。同時成就了這個banner的點擊率。

首屏完整性

店鋪信息在用戶的顯示設備上顯示不完整。此問題通常出現在店鋪首頁的營銷信息，推廣banner上，看下面幾個案例：

首屏浮層遮蓋

屏幕寬度

1024的屏幕寬度，去除瀏覽器邊框的寬度，可見區域1003，1003-990=13也就意味著，店鋪頁面兩側各有6像素的可用寬度。

結果“掛耳朵”變成了“貼膏藥”，影響用戶瀏覽店鋪主體內容。

用戶會滾動屏幕?

有些設計師可能會認為，首屏并沒有那么重要，用戶是會滾動屏幕最終看到我們期望他們看到的內容。

如果你有這樣樂觀的想法，建議你看一下這份尼爾森的研究報告：

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

? Above the fold: 80.3%

? Below the fold: 19.7%

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

首屏以上：80.3%

首屏以下：19.7%

最合理的首屏設計稿范圍值

寬度：

寬度無干擾因素影響因此是確定的1003

高度：(此處是指店鋪設計稿高度)

屏幕總高度768

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

-商城頁頭+吊頂=106px

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

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

768-40-106-160-30=432

因此得出最終的有效設計范圍

1003X432

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

大家可以根據這個工具檢測自己的店鋪設計是不是在最合理的范圍

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

本文名稱：網頁的首屏標準你了解多少？
分享網址：http://m.newbst.com/news10/313260.html

成都網站建設公司_創新互聯，為您提供外貿建站、靜態網站、網站策劃、關鍵詞優化、全網營銷推廣、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯