确保客户能够轻松在网站上找到重要信息,这应该是在线商家的首要任务。过去,你可能听说过“设计在首屏上方”作为一种展示重要信息的方式。虽然这种策略在过去可能有效,但随着互联网的不断发展,传统的“首屏折痕”正变得越来越不相关。
折叠的历史
折叠的概念自早期网页出现以来便已存在,并一直是网页设计师们热烈讨论的话题。最初,“首屏之上”(above the fold)一词专用于报纸。报纸在投递时是折叠的,上半部分朝上展示。重要的内容被放置在折叠后报纸版面的上半部分,以吸引读者继续阅读——因此产生了“首屏之上”这一说法。
后来,这个术语在网页设计中流行起来,用来描述用户在滚动页面之前所能看到的网站部分。(这也常被称为“滚动之上”。)在互联网早期,许多用户根本不会滚动网页。这促使许多网页设计师要么消除其网站上滚动的需要,要么将网站的所有重要信息都放在首屏之上。虽然在某些情况下这种做法很有效,但往往导致设计杂乱无章和站点布局不佳。
折叠带来的问题
随着互联网用户开始使用不同尺寸的屏幕,折叠概念带来了一个问题。因为折叠位置取决于屏幕尺寸——即“分辨率”——不同用户看到的折叠位置各不相同。到2005年,大多数网页用户使用的分辨率为1024像素×768像素,针对该分辨率进行设计成为了一种标准做法。随后,人们普遍认为标准折叠位置大约在页面下方600像素处。
w3schools 指出,如今大多数电脑屏幕的尺寸已超过1024×768像素。
然而,根据教育及开发网站 w3schools 的浏览数据显示,如今大多数屏幕分辨率的大小超过1024×768——约占85%。600像素的折叠位置不再像过去那样具有普遍性。今天,我们还必须考虑手机和平板电脑的浏览行为。平板电脑和移动设备不仅屏幕分辨率较小,还允许用户在竖屏或横屏模式下浏览,这使得即使在移动网站上,要精确定位折叠位置也变得更加困难。
此外,虽然在互联网早期声称用户不会滚动浏览网页可能是准确的,但我们现在知道人们滚动浏览网页毫无问题。Paddy Donnelly 的网页 “Life, Below 600px” 很好地阐明了这一点。
唐纳利的《Life, Below 600px》展示了页面如何在大部分内容位于折叠位置下方的情况下依然有效运作。
从折叠中汲取经验
我不推崇“首屏”(above the fold)概念,原因有几个。首先,我认为许多人将其视为非黑即白的选择:要么内容完全位于首屏之上,要么就会流失观众。这种做法往往破坏良好的设计,导致设计师尽可能将大量信息塞入网站顶部600像素的区域。其次,我使用高分辨率的大显示器——许多其他互联网用户也是如此。因此,600像素仅占我可视屏幕的一半多一点,在大屏幕上查看时,那些将大部分内容置于首屏之上的网站会显得头重脚轻、比例失衡。此外,当我浏览网站时,我希望有理由继续往下阅读。当然,我也不想为了翻到页面底部而把鼠标滚轮磨坏,但我愿意向下滚动一点,探索网站的内容。尽管如此,我仍然认为网页设计师,尤其是商家,可以从“首屏”概念中汲取一些重要的原则。
首先,思考你的网站“首屏在哪里?”这一问题,应促使你考虑不同的屏幕分辨率以及你的网站在不同设备上的显示效果。你的网站在1920×1080分辨率的显示器上如何显示?与智能手机相比呢?它在平板或移动设备上以横屏和竖屏模式显示时有何不同?这些都是网页设计师和商家应该针对自己网站提出的问题。
其次,“首屏”的概念迫使你考虑你的网站给用户留下的第一印象。当有人访问你的网站时,最先应该看到什么?请记住,第一印象不仅仅关乎内容。设计所营造的第一印象至少与内容一样重要,甚至更为突出。
第三,也是最重要的一点,我认为“首屏”引入了网站设计中层次结构的基本概念。在首屏之上进行设计的目标,是让重要信息对观看者立即可见,这一原则至今依然适用。然而,你不应该害怕引导观看者向下滚动页面。将网站内容构建在一个允许留白和信息流畅流动的层次结构中,始终优于将所有信息堆砌在首屏之上的空间里。
Paddy Donnelly 以在线协作工具提供商 37 signals 为例来证明这一观点,我认为这是完美的范例。请注意该网站如何给出清晰的第一印象,却并未将所有内容塞进前600像素内?相反,它通过信息的层级结构引导你顺畅地向下浏览页面。
37signals 页面的布局简洁干净,并延续至首屏之下。
走向首屏之下
在互联网早期,设计首屏之下的内容可能充满风险;但如今,完全局限于首屏之上反而更加危险。相反,应从“首屏”概念中学习。在不同的屏幕分辨率和设备上测试你的网站,观察其显示效果。从内容和设计两个角度综合考虑网站的第一印象。最后,为你的网站建立信息层次结构,安全地引导观看者浏览至首屏之下。

