关于网页首屏设计

作为一枚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