在探讨这个问题之前,我们首先要知道什么是首屏?
首屏(above the fold),fold有折叠之意,abovethe fold是指在折叠之后能看到的内容。首屏的英文翻译与折叠有关,最初源自出版领域的概念,即“头版”。报纸在运输和分发过程中需要折叠,因此展示在读者眼前的折叠部分变得至关重要,读者会据此决定是否购买。由此可见,处于头版的内容被编辑视为最重要,也决定了出版物的立场和定位。因此,“abovethe fold”还用来指代所有优先显示或具有最高优先级的内容。
网页中什么是首屏呢?用一句话概括:首屏是指不滚动web网页屏幕的情况下就能被用户看到的画面。
那么影响首屏设计有以下几个因素:
1.尼尔森首屏原则
根据著名网页易用性专家尼尔森的报告,显示首屏以上内容的关注度高达80.3%,而首屏以下的关注度仅为19.7%。这些数据清楚地表明了首屏对于任何需要提升转化率的网站设计而言的重要性。
尼尔森首屏原则
Above the fold: 80.3%
Below the fold: 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 WinXP=30px)
浏览器=160px(包含工具栏、状态栏、边框等)
位置工具栏=30px(如搜搜工具栏,百度工具栏,360工具栏等等用户浏览器上安装的各种插件都会影响到首屏的高度)
首屏高度=屏幕分辨率总高度-系统任务高度-浏览器高度(工具栏、状态栏、边框等)-位置工具栏(如360、百度)
最佳设计范围:
如果是电商网页首屏设计,还得减去商城页头和吊顶高度共106px
因此得出最佳的有效设计范围为:
1002 X710 pX
以上就是今天的分享,如果你喜欢我们的分享,辛苦动动您的手指在文章的底部帮我们点个在看,您的支持是我们不断更新的最大动力。
关注我们,每天都有新鲜内容带给大家

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實(shí)的服務(wù)了近萬家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。