发挥极限– Long Scroll网站概述

本文概述

长卷的目的和好处
何时使用长滚动(何时不使用)
长滚动网站最佳做法
向右滚动的示例
总结

长滚动或无限滚动的网站正是这样的：页面比” 平均” 网站页面长得多, 因此可以” 无限滚动” 。这些类型的网站已在社交媒体网站和Pinterest之类的网站中流行, 这些网站包括许多用户生成的内容以及一些新闻和博客网站-个人网站和投资组合也开始采用长滚动技术以增加用户参与度以及人们在网站上花费的时间长度。
无限滚动已成为一种流行且常见的设计模式, 但是, 在设计使用长滚动的网站时, UI设计人员应注意一些潜在的陷阱。在某些类型的网站上, 不适合采用长滚动设计模式。
长卷的目的和好处长滚动网站的最大好处之一就是可以使访问者在网站上停留的时间更长。当人们不必做出有意识的决定来消费更多内容时, 他们点击的可能性就较小。
可以认为这类似于Facebook, YouTube, Netflix和类似网站在用户观看完视频后自动播放视频的方式。他们知道, 如果访问者必须努力点击一个新视频, 那么他们完全有可能完全点击另一个网站。但是, 如果视频继续播放, 则很有可能会继续观看。
对长滚动站点进行正确编码后, 它们会在每个新内容中加载一个新URL。这等于增加了该网站的页面浏览量, 这可以增加广告收入和网站的整体价值。

文章图片
当用户滚动时, Mashable的主页会自动加载更多内容, 使它们在页面上保留的时间更长。
与任何用户体验决定一样, 在决定格式之前, 必须权衡实际使用该网站的人员的利弊。对于某些类型的网站, 长滚动可能是一个不错的选择, 而在其他情况下, 长滚动则使用户感到沮丧。了解两者之间的区别很重要。
何时使用长滚动(何时不使用) 考虑长滚动时要记住的关键是, 无论设计哪种网站, 内容都应决定格式。长滚动网站非常适合某些类型的内容, 但与其他类型的内容相比, 可能会带来巨大的UX故障。
总体而言, 面向任务和目标的网站无法从无限滚动设计中受益(例如, 电子商务网站和教程或用户希望看到明确进展的其他教育网站)。这些类型的网站需要给用户一种完成和成就感, 而长滚动的网站则很难实现。
例如, Etsy在2012年尝试了无限滚动设计, 最终又改回了分页。他们发现, 尽管客户仍以大致相同的价格购买商品, 但用户参与度却下降了。甚至执行搜索次数之类的事情也下降了。

文章图片
Etsy最终放弃了长滚动, 转而在运行测试后返回分页搜索结果。
某些电子商务网站为访问者提供的一种选择是查看产品页面时的” 查看全部” 选项。如果用户选择以无限滚动格式查看站点, 则可以选择此选项, 同时为希望使用该格式的用户保留较短的结果页面。
当人们按时间顺序查看信息很重要时, 分页也很有用。一页滚动的网站可能会鼓励人们浏览和跳过, 而分页会减慢访问者的速度, 并增加他们按正确顺序使用信息的可能性。
单页滚动网站真正能够发亮的地方是那些自然而然地阅读其他内容或文章的网站。这适用于新闻网站或主题博客等内容。这些站点上的用户通常希望一次获取大量信息, 而无限滚动使它变得更容易。
无限滚动是UX受欢迎的另一个明显领域是社交媒体网站或包含大量用户生成内容的网站。 Facebook, Pinterest和Twitter都使用无限滚动。这些站点希望将用户留在站点上的时间尽可能长, 而无限滚动效果很好。
长卷轴的心理成本
任何设计决策的心理影响都应始终仔细考虑。当涉及到单页滚动网站时, 对它有不利的心理影响。
首先要考虑的是用户不介意故意点击。自点击以来, 点击实际上已经成为计算, 图形用户界面和Internet的一部分。人们已经习惯了这种特殊的交互方式, 如果他们不得不单击一些链接以获取更多内容, 就不会被关闭。
默认情况下, 许多用户不喜欢无限滚动。面对极长的滚动页面, 感觉就像淹没在无休止的信息之海中。当用户正在寻找特定信息时, 滚动很少是找到信息的最有效方法。
由于无法准确显示页面长度, 因此无限滚动会破坏页面侧面的滚动条。尽管不是每个用户都使用滚动条, 但就此而言, 使用滚动条的用户可能会感到无限滚动。
无限滚动还消除了用户在一页上完成任务或达到目标然后单击到下一页所获得的完成感。失去这种完成感会使用户望而却步, 并导致他们寻求其他来源寻求相同的信息或任务。
长滚动网站可能带来的另一个负面心理影响是, 用户倾向于查看页面下方的内容, 而不是顶部的内容。使用标题可以帮助解决此问题, 因为它可以” 重置” 访问者的大脑, 了解” 顶部” 在哪里。
长滚动网站最佳做法如果确定某个网站项目适合于长滚动设计, 则请牢记一些最佳实践, 以确保它提供最佳的用户体验。
首先, 放弃页脚！当内容连续加载时, 页脚将连续从页面底部移出。这意味着页脚中包含的任何内容或信息都将不可见。更糟糕的是, 当用户瞥见页脚但在有机会单击任何内容之前却看不见它的时候。使用粘性页脚是解决此问题的一种方法, 尽管完全摆脱页脚通常是一个更好的选择。

文章图片
Barbican绝对不允许你在页脚中看到所有有价值的信息, 因为一旦你找到它, 就会加载更多内容, 将其推离屏幕。
使用视觉提示非常重要, 尤其是当主屏幕加载页面上没有更多内容时, 这种提示并不立即可见。页面加载时, 具有较大标题图像或可视内容的内容会填充屏幕的网站通常包含箭头(有时为动画)或类似图像, 以指示下面有更多内容。

文章图片
Dynamit在主屏幕底部包括一个小箭头, 用于向访问者指示他们应该滚动。
通过使用粘性标题或带有导航链接的固定侧栏, 导航应始终可见。例外是在移动设备上, 其中粘性标题可能会占用宝贵的屏幕空间。 Facebook通过使标题在用户向下滚动时消失而在用户开始向上滚动时重新出现而很好地解决了这一问题。
Chrome网络浏览器的功能与屏幕底部的控件类似；它们在用户向下滚动时消失, 并在用户开始向上滚动时重新出现。这是创建界面的一种非常直观的方法, 可最大限度地利用屏幕空间。
令人欣慰的是, 在无限滚动网站中, 一项至关重要的UX功能已变得越来越普遍, 那就是在滚动到每个部分时更改URL。有些使用页面内的内部书签来完成。当用户滚动时, 其他站点(尤其是新闻站点和博客)会更新整个URL。这很重要, 因为它允许用户精确链接到他们想要链接的内容, 而不管页面本身如何更改。
一些Web设计人员选择使用” 加载更多” 按钮将内容直接加载到同一页面上, 以创建所谓的” 混合” 长滚动站点。一些UI设计人员在页面上重复使用此功能, 而另一些UI设计人员选择仅包含一次, 然后将网站转换为更传统的长滚动格式。
除了这些长滚动网站特定的设计注意事项以外, 其他用于创建良好设计的UI和UX最佳实践仍然适用于采用无限滚动的网站。
向右滚动的示例

文章图片
当你开始滚动时, Zohra的Story网站会使用视觉提示。

文章图片
Merbis摄影与电影制作网站是使用无限滚动的投资组合网站的一个很好的例子。

文章图片
纽约Windows站点直接在主页上加载所有内容。

文章图片
“ 像没有明天” 网站结合了长滚动和视差滚动技术。

文章图片
纽约时装周人脸网站(该活动的大量照片供稿)是长滚动格式的理想选择。

文章图片
约翰·鲍尔(John Ball)的网站采用的方法略有不同：背景图片无限滚动, 而文字内容保持静止。

文章图片
Fake It Digital网站使用长滚动条来显示其对常见业务, 设计和营销术语的幽默替代定义。
然后是安德鲁·麦卡锡(Andrew McCarthy)的网站。尽管设计是独特的, 但它会一遍又一遍地无限滚动相同的信息。由于麦卡锡(McCarthy)是设计师, 因此可能是一个明智的选择, 以便脱颖而出。

文章图片
还有另一个例子来自Sam Rosen, 他也不断重复重复相同的内容, 尽管该站点循环回到顶部而不是重新加载所有内容。

文章图片
总结长滚动网站并不是什么新鲜事物, 但它们已经达到了成熟的新水平。设计人员不再将它们当作下一个” 大” 事情来使用, 而是开始关注模式如何影响用户体验。
【发挥极限– Long Scroll网站概述】创建无限滚动网站时遵循最佳实践, 可使设计人员创建使用户感到愉悦而不是使用户沮丧的UX。同时, 正确实施的长滚动网站也可以帮助品牌实现其网站目标。
在srcmini设计博客上进一步阅读：