台式机网站滚动:首屏或首屏

Website Scroll for Desktops: Above the fold or below

有没有看到下面有什么?


现在你脑海中浮现的问题肯定是“世界上有什么?”


让我们把它变得更简单!我们在谈论网站!


制作桌面和移动屏幕时要牢记特定的维度。用户无需滚动即可在网页上看到的所有内容都称为 “首屏” “首屏”

那么,这到底是从哪里开始的呢?

要回答这个问题,我们必须回到形成某种规则的印刷媒体时代。引人注目的材料放在头版,因为它会引起路人的兴趣。它为论文创造了奇迹!因此,当技术进步出现时,同样的原则也适用于网站。

但是,有一个小问题。

数字页面的尺寸为 1024×768 像素。但是当你拿走任务栏占用的空间时,只剩下 600 像素。这意味着必须将所有重要信息塞进那个狭小的空间,这会导致用户的网页变得凌乱、杂乱和困难。但是,今天首选 1366×768 屏幕。查看 statcounter 对以下流行屏幕尺寸的看法:

以下是旧的可口可乐苹果 将所有信息放在首位的网站。

点击这里查看“Internet Explorer 1996 年世界博览会” 里面有一个旧网站设计目录!

看,问题出在哪里?

因此,出现了长滚动或无限滚动的网站!

这些网站的信息超出了传统的单页浏览器!除非他们愿意,否则用户不必导航到不同的页面。只需滚动即可获得他们可能需要的一切!

查看下面改版后的 Apple 网站!

 

为什么这相关?

假设您打算开发一个网站,但您不知道是短滚动还是长滚动!因此,您开始进行一些侦察并浏览多个网站,将自己想象为潜在买家并遇到两种类型:

短滚动网站

长滚动网站:

作为客户,基于可用性、视觉易用性和简单的导航,以上哪个示例更具吸引力?

我们把钱押在长卷轴上!没错,很多人都会同意你的观点!

人们的看法

根据SWEOR,用户对一个网站形成意见并决定他们是否足够喜欢它需要大约50毫秒留下来。根据 Jennifer Krynin 在“你的网页应该多长?” 多页面网站在第一。换句话说,如果有 100 人点击第一页,则 50 人进入第二页,25 人进入第三页,10 人进入第四页,以此类推。但这是否意味着每个网站都需要长卷轴,并且肯定会成为赢家?

绝对不是!在数字世界中,成功直接归功于您为用户提供的便利!点击一个元素或购买还有很长的路要走!如果您所说的内容引起了用户的兴趣,他们很可能会留下并最终购买!因此,这在很大程度上取决于受众类型、内容质量以及长滚动条的可用性

那么,一个长滚动网站应该多长呢?

您可以参加短版或长版联赛,但这最终取决于您的品牌所针对的受众类型。查看 Neil Patel 的文章“遵循这些长篇内容示例以提高您的排名”为您的网站!

短页面长度的“少即是多”方法需要仔细考虑。研究表明,平均而言,长篇内容可以获得更多参与度、更高排名和更多分享但如果您只有一个 CTA,则可能更简单更好的。为了将所有内容都放在一个页面上,用户可能会到达页脚,但这并不意味着您的网站很棒。在狭小的空间里塞进太多东西,只会让用户更难消化你的内容。

然而,长期联赛并不适合所有人。在 Nielsen Norman Group 的文章 Scrolling and Attention:

中查看 Long Scroll 网站的统计数据

根据 Nick Babich 在“继续滚动!如何设计冗长的页面”适用于以下情况: 

  • 用于讲故事以创建可利用的线性结构
  • 对于连续冗长的内容,比如长篇文章或多步骤教程,提供更好的用户体验
  • 当内容不能分割成单独的部分而应该作为一个整体呈现时,例如信息图
  • 在故事中突出产品的特征、品质或属性。

那么,长滚动网站的优点是什么?

  • 快速信息访问 
    • 在一个长页面上提供相关信息可确保访问者无需多次点击即可轻松访问所需内容。
  • 用你的故事吸引客户的注意力
    • 通过创意、无缝设计和动态内容(例如具有清晰开头、中间和结尾的图像),很容易让品牌故事参与进来。
  • 可以针对手机进行优化

那么,长滚动网站的缺点是什么?

  • 重要内容丢失

    • 长卷轴上的丰富信息有时会让用户感到困惑。当用户上下滚动查找所需内容时,重要的项目可能会丢失。

  • 网站速度慢

    • 对于滚动网页,图像有助于创建空白空间,让元素脱颖而出。但是,过多的图像和动画会减少您的加载时间,从而导致用户从您的网站上跳出。

  • 对 SEO 的损害

在这种情况下,电子商务网站都应该是长格式的,不是吗?

错误

奇怪的是,这些网站需要混合长格式和多个页面,因为它们是面向任务和目标的网站。在这里,用户希望在购买完成后看到明确的进展,并有成就感。一些网站,如 Etsy 甚至在转向完全长格式的滚动时看到 CTA 的下降。

在电子商务网站上实现长滚动的几种方法是:

  • 对产品页面使用“查看全部”选项。如果用户选择这样做,这使用户可以选择以无限滚动格式查看站点,同时为喜欢该格式的用户保留较短的结果页面。
  • 利用分页帮助用户按时间顺序查看信息,并减慢浏览速度,增加消费。

那么,你在设计长滚动网站时要注意什么:

根据 Jennifer Krynin,如果您的网页较长,请避免使用滚动拦截器。这些是网页的视觉元素,暗示内容已经结束。这些包括以下元素:

  • 水平线
  • 文本链接行
  • 短而宽的图形(尤其是 468x60 左右的图形——标准广告单元尺寸)
  • N导航 图标或社交媒体链接

任何在内容区域的整个宽度上充当水平线的东西都可以充当滚动块,包括图像或多媒体。

由于我们在技术领域工作多年,并且对哪些有效哪些无效有广泛的了解,因此我们想与您分享一些关于长滚动网站的技巧:

提示 1:

拥有一个长滚动网站很棒,但如果您觉得长度有点过长,您可以始终将顶部标题锚定到网站的各个部分。这确保了用户不必通过所有信息来找到他们需要的肉。他们只需在菜单上单击所需的内容,技术就会自动将它们带到那里。

提示 2:

网站推动者经常吹嘘移动优化,但他们通常不会完全自定义视图,通常桌面元素在移动视图上被分成两个部分。这些会增加滚动时间,因此请引入您最好的编码游戏,让您的网页对移动设备友好!

提示 3:

Web 的成功完全基于用户体验,最终,总会有用户不喜欢长滚动。不要让这个 % 妨碍其他真正喜欢滚动的人的体验。

结论:

归根结底,这完全取决于目标受众和您提供的服务类型。一些网站和有影响力的人提倡长卷轴,短卷轴也是如此,但决定哪些有效哪些无效的最佳人选是您的受众。

Therese Fessenden 的一项关于滚动和注意力的研究中 显示,120 名参与者中有 57% 的人花费了他们的页面- 首屏观看时间,74% 的观众花在了前两屏。这与他们之前的研究形成了直接对比,在该研究中观察到 80% 的观看时间是由折叠上方的注视构成的。

所以,长卷轴和短卷轴之间的选择是你的。

本文专为桌面卷轴而设。紧紧抓住,因为我们的下一个博客是关于移动视图的滚动!

参考文献:

https://wwwlifewire.com/web-page-length-3468959#:~:text=Conventional%20wisdom%20says%20that%20you,first%20screen%E2%80%94below% 20%20 倍.

https://www.smashingmagazine.com/2017/05/long-scrolling/

https://www.toptal.com/designers/ui/long-scroll-websites

https://usersnap.com/blog/long-scrolling-websites-tips-best-practices/

https://www.forumone.com/ideas/how-long-should-your-web-page-be/

https://blog.c-c.com.au/how-far-will-people-scroll-down-a-web-page

https://www.clearsite.nl/kennisbank/from-above-the-fold-to-before-the-scroll

http://www.logaholic.com/website-engagement/

https://www.justinmind.com/blog/10-90s-websites-designs-you-wont-believe-existed/

https://www.marketpath.com/blog/long-scrolling-website-the-pros-cons

https://www.sweor.com/firstimpressions

https://www.justinmind.com/blog/10-90s-websites-designs-you-wont-believe-existed/

https://www.nngroup.com/articles/scrolling-and-attention/