網頁首屏設計的那些事

作為一枚UI設計師，對于網頁設計那是家常便飯了，最近很多人在微信群里問我，網頁的首屏設計多高合適？我根據我的一些個人經驗跟小伙伴分享一下關于網頁首屏設計的那些事兒

一、什么是首屏

首屏（above the fold），fold有折疊之意，above the fold是指在折疊之后能看到的內容。為什么首屏的英文翻譯會跟折疊有關系呢？原因很簡單，這個概念最早用于出版領域，可以簡單的理解為“頭版”。因為報紙的運輸和分發過程是折疊起來的，所以報紙的折疊后暴露在讀者面前的那一部分內容就顯得尤其重要，讀者會根據頭版的內容決定是否購買。因此處于頭版的內容意味著編輯認為它們是最重要的，頭版的內容也決定了出版物的立場和定位。所以“above the fold”也用來表示所有優先顯示或或優先級最高的內容。

網頁中什么是首屏呢？用一句話概括：首屏是指不滾動web網頁屏幕的情況下就能被用戶看到的畫面。

整個綠色區域為首屏

一屏式首屏設計

二、影響首屏設計的因素

1. 尼爾森首屏原則

世界著名的網頁易用性專家尼爾森曾經有報告顯示，首屏以上的關注度為80.3%，首屏以下的關注度僅有19.7%。這兩個數據足以表明，首屏對每一個需要轉化率的網站設計的重要性。

尼爾森首屏設計原則

2. 屏幕分辨率和市場占有率

根據相關數據統計分析，得出了以下結果：

屏幕分辨率比重

市場占有率

3. 瀏覽器界面參數和市場占有率

我們再來看看瀏覽器的問題，同樣經第三方數據統計，分析各瀏覽器界面參數和市場占有率，得出以下結果：

瀏覽器參數及市場占有率

4. 最佳首屏設計范圍值

當我們掌握了個瀏覽器參數和市場占有率以及屏幕分辨率參數，就可以確定首屏設計的寬度和高度。

安全寬度：1002px 建議最大安全寬度：1258px

Windows XP首屏高度：580px

Windows7、8、8.1、10首屏高度：710px

最佳首屏區域

① 寬度：

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

② 高度：

屏幕總高度768px、1080px

任務欄高度40px（Win7、8、8.1、10=40px Win XP=30px）

瀏覽器=160px（包含工具欄、狀態欄、邊框等）

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

首屏高度=屏幕分辨率總高度—系統任務欄高度 — 瀏覽器高度（工具欄、狀態欄、邊框等）— 位置工具欄（如360、百度）

如果是電商網頁首屏設計，還得減去商城頁頭和吊頂高度共106px

因此得出最佳的有效設計范圍為：

1002 X 710 px

總結

以上是U妹總結的一些觀點和個人的一些經驗，具體設計時還需根據產品的定位去分析用戶群體進再進行設計，以上希望可以幫到各位小伙伴們，內容未必是專業的，但文章肯定是U妹用心寫的。