讲解网页的首屏标准你了解多少？

首屏浮层遮盖

屏幕宽度

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

查看你的天猫店铺首屏效果

大家可以根据这个工具检测自己的店铺设计是不是在最合理的范围