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

首屏的英文是above the fold,fold有折叠之意,above the fold是指在折叠之后能看到的,为什么首屏的英文翻译会跟折叠有关系呢,原因很简单,因为这个概念最早用于出版领域,可以简单的理解为“头版”因为报纸的运输和分发过程是折叠起来的,所以报纸的折叠后暴露在读者面前的那一部分内容就显得尤其重要,读者会根据头版的内容决定是否购买。

因此处于头版的内容意味着一个,编辑认为它们是最重要的,头版的内容也决定了出版物的立场和定位。所以“above the fold”也用来表示所有优先显示或或优先级最高的内容。

讲解网页的首屏标准你了解多少?,PS<a href=/photoshop/ target=_blank class=infotextkey>教程</a>,

“above the fold(头版)”的概念延伸到互联网领域。用来指代web网页中不用滚动屏幕看到的信息。

与出版业的“头版”不同的是互联网的首屏区域是动态的,由于互联网用户复杂的屏幕分辨率环境,导致他们看到的首屏内容有很大差距。

很多店铺设计就是因为对首屏的忽视导致很严重的体验问题。

天猫&淘宝的首屏

那么我们店铺的买家看到的首屏是什么样的呢?

首先看以下天猫和淘宝的买家用户的屏幕分辨率占比情况:

下图是最近的淘宝网用户屏幕分辨率占比情况的分布图。

讲解网页的首屏标准你了解多少?,PS教程,

其中屏幕高度在768以内的用户有41.57%,18.78%(1024X768)+2.91%(1280X768)+19.88%(1366X768)>41.57%

这就是你为什么一定要关注首屏。我们的设计师们都用上20寸以上的大屏幕的时候41%的用户还在用768的显示设备

典型问题

以下案例均以用户浏览器分辨率占比最高的768像素为例

首屏差异性

店铺类目结果列表的差异

点击店铺左侧类目,首屏内容没有任何变化,天猫和淘宝的店铺普遍存在这个问题,如下图:

讲解网页的首屏标准你了解多少?,PS教程,

讲解网页的首屏标准你了解多少?,PS教程,

这种问题导致用户误以为自己的点击没有产生预期的页面跳转,自己还停留在原始页面。多次尝试都没有效果之后,最终跳失是很正常的。