關(guān)于網(wǎng)頁首屏設(shè)計，你必須要知道的那些事?。。?/h1>
時間：2023-10-02 09:36:02 | 來源：網(wǎng)站運營
時間：2023-10-02 09:36:02 來源：網(wǎng)站運營
關(guān)于網(wǎng)頁首屏設(shè)計，你必須要知道的那些事?。。。鹤鳛橐幻禪I設(shè)計師，對于網(wǎng)頁設(shè)計那是家常便飯了，最近很多人在微信群里問我，網(wǎng)頁的首屏設(shè)計多高合適？我根據(jù)我的一些個人經(jīng)驗跟小伙伴分享一下關(guān)于網(wǎng)頁首屏設(shè)計的那些事兒
一、什么是首屏首屏（above the fold），fold有折疊之意，above the fold是指在折疊之后能看到的內(nèi)容。為什么首屏的英文翻譯會跟折疊有關(guān)系呢？原因很簡單，這個概念最早用于出版領(lǐng)域，可以簡單的理解為“頭版”。因為報紙的運輸和分發(fā)過程是折疊起來的，所以報紙的折疊后暴露在讀者面前的那一部分內(nèi)容就顯得尤其重要，讀者會根據(jù)頭版的內(nèi)容決定是否購買。因此處于頭版的內(nèi)容意味著編輯認為它們是最重要的，頭版的內(nèi)容也決定了出版物的立場和定位。所以“above the fold”也用來表示所有優(yōu)先顯示或或優(yōu)先級最高的內(nèi)容。
網(wǎng)頁中什么是首屏呢？用一句話概括：
首屏是指不滾動web網(wǎng)頁屏幕的情況下就能被用戶看到的畫面。整個綠色區(qū)域為首屏
一屏式首屏設(shè)計
二、影響首屏設(shè)計的因素1. 尼爾森首屏原則世界著名的網(wǎng)頁易用性專家尼爾森曾經(jīng)有報告顯示，首屏以上的關(guān)注度為80.3%，首屏以下的關(guān)注度僅有19.7%。這兩個數(shù)據(jù)足以表明，首屏對每一個需要轉(zhuǎn)化率的網(wǎng)站設(shè)計的重要性。
2. 屏幕分辨率和市場占有率根據(jù)相關(guān)數(shù)據(jù)統(tǒng)計分析，得出了以下結(jié)果：
3. 瀏覽器界面參數(shù)和市場占有率我們再來看看瀏覽器的問題，同樣經(jīng)第三方數(shù)據(jù)統(tǒng)計，分析各瀏覽器界面參數(shù)和市場占有率，得出以下結(jié)果：
4. 最佳首屏設(shè)計范圍值當我們掌握了個瀏覽器參數(shù)和市場占有率以及屏幕分辨率參數(shù)，就可以確定首屏設(shè)計的寬度和高度。
安全寬度：1002px 建議最大安全寬度：1258pxWindows XP首屏高度：580px
Windows7、8、8.1、10首屏高度：710px① 寬度：寬度無干擾因素影響因此是確定的1002px
② 高度：屏幕總高度768px、1080px
任務(wù)欄高度40px（Win7、8、8.1、10=40px Win XP=30px）
瀏覽器=160px（包含工具欄、狀態(tài)欄、邊框等）
位置工具欄=30px（如搜搜工具欄，百度工具欄，360工具欄等等用戶瀏覽器上安裝的各種插件都會影響到首屏的高度）
首屏高度=屏幕分辨率總高度—系統(tǒng)任務(wù)欄高度 — 瀏覽器高度（工具欄、狀態(tài)欄、邊框等）
— 位置工具欄（如360、百度）
如果是電商網(wǎng)頁首屏設(shè)計，還得減去商城頁頭和吊頂高度共106px
因此得出最佳的有效設(shè)計范圍為：
1002 X 710 px總結(jié)以上是U妹總結(jié)的一些觀點和個人的一些經(jīng)驗，具體設(shè)計時還需根據(jù)產(chǎn)品的定位去分析用戶群體進再進行設(shè)計，以上希望可以幫到各位小伙伴們，內(nèi)容未必是專業(yè)的，但文章肯定是U妹用心寫的。
aHR0cDovL3dlaXhpbi5xcS5jb20vci9zVGxGWFRERU1XMU9yWFFfOTJ5ag== (二維碼自動識別)
在線咨詢