网页设计中的滚动:多少是太多?



滚动可能看起来是网站的一个非常基本的功能,从本质上来说,它是。然而,尽管它具有基本功能,但你网站上的滚动要么对用户有利,要么让他们发疯,把他们推到竞争对手的网站上。

一些网站采用“无限”滚动——当你滚动到一个长主页的底部时,只会看到滚动条跳回其轨迹的中间,因为底部加载了更多的内容。这种类型的滚动在某些情况下可能有效,但它往往会让用户感到沮丧。重要的是要认识到滚动在哪里有效,以及应该使用什么类型。

复杂性要求简单

网站比以往任何时候都更加强大,内容更加丰富,因此设计师们想出了一种新的方法,在屏幕上填充信息,而不会让用户感到不知所措。鉴于移动设备用户数量超过桌面用户,这一点现在尤其如此。设计师必须将大量内容放在相对较小的屏幕上,需要一定程度的滚动。

平铺设计的理念是创建一小片内容(通常是指向更详细内容的交互式链接),以便快速高效地浏览。将这一概念与滚动结合起来,您可以为用户提供看似无穷无尽的内容流。

滚动在移动设备上自然也很有吸引力。滑动手指是一个简单、容易但精确的动作。用户可以快速学习如何快速滑动到页面底部,或缓慢滑动到下一个相关内容。

滚动的类型

根据你的品牌形象和客户群,你应该在网站上使用的滚动类型会有所不同。在决定使用哪种方法时,请考虑它将如何与您提供的内容交互。滚动有四种基本类型:

1、长滚动

长滚动的优点是可以创建一个无缝内容的页面。这为用户提供了一种流畅、线性的浏览体验,自然也有利于讲故事。

The Boat something like an interactive novel这艘船是长滚动的绝佳例子

当用户滚动时,他们可以自然地吸收更多的故事,提供更沉浸式的浏览体验。许多网站选择长滚动的单页,但这种配置的一个主要缺点是它可能会损害你网站的搜索引擎优化。具有多个页面的网站往往在搜索引擎优化方面表现更好。

2、固定长滚动

固定的长滚动配置使一些内容保持静态,而其他内容滚动,而不是让整个页面滚动。或者,您可以设置滚动,以便当用户到达某个点时,静态内容转移到新的部分。

这是伟大的网站,不想转换为一个单一的网页由于搜索引擎优化的关注。

3、无限滚动

对于提供极其密集内容的网站来说,一次在一个页面上加载的内容可能太多。通过无限滚动设置,基本上可以创建节奏。大多数社交媒体,如Facebook、Tumblr和Imgur都配置为无限滚动。这允许用户不断浏览新鲜内容。

infinite scrolling example

这样做的唯一缺点是,用户会对失去位置感到非常沮丧。如果你认为无限滚动可以很好地处理网站内容,那么你应该研究粘性导航,一个工具栏或一组按钮,允许用户快速跳回顶部或特定区域。

4、视差滚动

通过视差滚动,视频游戏爱好者将感到宾至如归。在二维环境中进行的旧视频游戏没有技术来创建最近的游戏中所看到的巨大、三维、超现实的环境。

parallax scrolling example视差滚动示例:制动不良

较老的8位和16位游戏,如Sonic the Hedgehog、Mega Man和Super Mario Bros,通常被称为“侧卷轴”。这是因为玩家从左向右移动以完成一个阶段,深度是通过运动创建的。前景和背景将以不同的速度移动,产生深度的视觉感觉。当你可以在滚动触发的动画中工作时,视差滚动在网站设计中真的很闪耀。

滚动的最佳实践

你在网站上使用的滚动类型应该取决于你的内容。滚动的基本功能是允许用户根据自己的意愿消化尽可能多或尽可能少的内容,因此根据您的产品定制体验非常重要。

内容极其丰富的网站可能希望调查无限长的滚动。这种方法适用于社交媒体,尤其是在移动平台上,因为在一个页面中有太多的内容无法消化,试图将每一点都融入到单个页面中是不切实际的,也是没有意义的。

让你的内容决定你的卷轴长度。你也可以用简单的按钮来调整滚动,比如“滚动查看更多”或“查看更多”。让用户决定是否继续,你的页面不仅加载得更快,而且人类的好奇心会让用户更频繁地点击。

你的用户数据将告诉你很多关于你的用户如何与你的网站互动,以及你是否应该重新考虑你的滚动配置。当用户访问您的页面时,他们看到的第一件事就是顶部。他们视图的底部称为“折叠”,你的谷歌分析可以告诉你有多少用户点击它下面以及点击频率。这个指标将告诉你当前的滚动设置和网站布局是否鼓励用户不断向下滚动,看看你能提供什么。

粘性导航是一个很棒的工具

无论你为你的网站选择何种类型的滚动,粘性导航都是一种很好的方式,可以让用户在浏览你的网站时保持控制感。想象一下像Gmail这样的基于网络的电子邮件客户端:你可以向下滚动收件箱,但屏幕左侧的栏上有用于在帐户之间切换或访问不同文件夹的按钮。用户可以在空闲时滚动,但他们总是可以选择跳转到一个确切的部分。

parallax scrolling example

任何类型的网站都可以从粘性导航中受益。如果你使用无限滚动,用户可能会喜欢一次点击就能跳回页面顶部,而不是连续滑动。您还可以创建一个标题,无论用户向下滚动多远,它都会保留在屏幕上,从而提供对基本功能的即时访问。

利弊

随着越来越多的人转向移动设备浏览网页,滚动似乎是网站的自然选择。当然,点击各种链接既快捷又简单,但大多数用户更喜欢尽快访问网站的大部分内容。你可以通过强大的内容服务吸引用户,如果你提供一定程度的控制,你不会压倒他们。

然而,重要的是要记住,大块的内容或多媒体可能会减慢页面加载速度。这可能会损害用户在移动设备上的体验,因为许多用户在移动中会使用手机数据或弱于平均水平的Wi-Fi连接进行浏览。

你可能还需要牺牲网站的页脚。几乎每个网站的页面底部都有一个页脚,上面有指向公司简介的精确链接,可以在那里提交求职申请、联系信息和其他一般信息。您可以使用粘性导航工具消除对页脚的需要,用户可以单击这些工具进入站点的特定区域。

如果你是为移动设备浏览而设计的(你应该这样做),那么滚动的好处远远大于缺点——只要你明智地配置你的网站的滚动。移动设备天生就鼓励互动,通过精心制作、响应迅速的网页设计,你的用户会喜欢以独特的方式吸收你的内容。

来源:https://speckyboy.com/scrolling-web-design/

0