17/01/21

如何设计最好的长滚动页面


首屏设计的日子走到头了。近来长滚动页面和无限滚动的网站正变得越来越普遍,这不仅仅是一个趋势和偶然。这个技术,不用任何干扰或额外的交互就让用户可以在大量的内容里无限遨游(用户只需向下滚动,内容就自然而然出来了),它有如下的优点:

  • 简化了导航
  • 对用户有更强的信息传达潜力
  • 更好地适应移动设备

长滚动页面的普及和接受得益于移动界面的不断发展:

屏幕越小,滚动越长

此外,移动设备的手势交互让滚动变得自然有趣。然而,长滚动页面还是有自身的缺陷。在此有一些很好的设计可以参考,让长滚动页面的设计更符合用户的期望和直觉。

使用视觉线索

让用户知道接下来有更多的内容

让滚动带有设计的元素线索,用户才能迅速地了解页面是如何变化的。一个精细的视觉线索,比如指向页面末端的箭头或“向下滚动”的文字,可以告诉用户页面下面有更多的内容。

屏幕边界的箭头让用户知道更多的内容还在下面 图像来源: Fillet

让导航选项持续可见

使用弹性导航或页面跳转选项

长滚动页面最大的隐患是定向障碍——用户可能会迷失方向。在确定当前所在位置和其他导航选项上的缺陷会对用户造成干扰和困惑,并且会伤害整体的用户体验。

在创建长滚动站点的时候,牢记于心用户始终需要方位(他们所在的位置)和导航(可以选择的路线)。解决这个问题最显而易见的办法就是使用弹性导航,它展示目前所在的位置并始终在屏幕上保持显示。

动态的滚动弹性导航 图像来源: Google

如果屏幕空间有限,不能增加一个导航条,你可以考虑使用页面跳转选项

页面跳转选项位于屏幕的右手边 图像来源: brightmedia

只移动设备:因为手机屏幕很小,可见的导航条将占据很大的空间。有一个好方法是在当用户往上滑动屏幕时将导航条隐藏,尝试回到页面顶部时将其显示。

Facebook根据滑动方向隐藏导航条,节省了一些垂直空间 图像来源:Imjabreu

将屏幕设计成书页

让内容根据滚动长度而非其他的方式显示

当一个网站想要用一种顺滑、细线的风格展示内容时,可以将每一个屏幕设计成一页页纸张,如此组织内容元素,可以让用户更容易的理解。比如,Le Mugs的每一个部分都包括它自己的信息面,由生动的动效完美的驱动。

图像来源: Le Mugs

建议:保持页面总数越少越好以简化导航。长滚动页面并不意味着有100个连续不停的页面!

一体的功能动效

使用动效来建立和用户的连接

交互设计是长滚动页面设计的基础,动效是其核心的部分。动效自有的笔致将内容更流畅和舒服地展现在用户的面前。长滚动页面有一些独具创意的元素比如视差滚动和激活的滚动动效,它们将滚动变得更有趣,让用户对下一步会发生什么产生期待。

动效让滚动的视觉表现更加有趣 图像来源: codemyul

视差效果的内容展现

视差滚动指背景图片的移动比前景内容的移动更缓慢,它创造了一种深度和沉浸的幻觉。视差不仅仅是一种娱乐的视觉效果。当合理应用的时候,它能给用户提供一种沉浸的顺滑的视觉叙述体验。

视差效果创造了一种立体的感觉

结论

长滚动页面可以创造一种完全沉浸的浏览体验。如果用户喜欢这一套用户界面,并且觉得符合直觉,他们就不会介意页面滚动的长度。因此,聚焦于你的用户目标,让你的用户更加便利。

P.S. 在 设计优秀的无限滚动页面的五个准则 中你可以看到一些很好的相关尝试。

原文信息: Best Practices for Long Scrolling by Nick Babich

相关文章

评论 (0)

还没有任何评论

发表评论 Leave a comment :