网页设计中的滚动设计是什么？ 滚动条如何设计？

近年来，曾经“禁忌”的网站设计已经成为最流行的技术之一，用户开始欣赏和喜欢网站中的滚动设计。 滚动设计已经摆脱了之前的标签定义，正在重塑自己，成为交互设计的核心元素——这也意味着设计师需要学习新的滚动设计规则。

在本文中，我们将探讨滚动设计的重生，讨论滚动设计的一些优点和缺点，并分析一些技巧。

滚动条为何能再次受人喜爱

答案很简单：移动设备无处不在。

自从移动用户超过桌面用户以来，世界各地的 UI 设计师都做出了相应的调整。 随着越来越多的用户使用较小的屏幕，滚动变得越来越重要：屏幕越小，滚动所需的时间就越长。

还有其他因素。 例如，人们可以在更多地方访问高速互联网，并且可以使用滚动而不是逐页点击来更快地访问信息。 社交媒体网站日益强大的力量也推动了这项技术的发展：滚动自然地适应了丰富的用户生成内容。

正如 2015-2016 年网页设计趋势指南中所解释的，长滚动与基于卡片的设计一起发展。 结合起来，这些技术可以为用户提供源源不断的小容量内容（这非常适合网络体验，尤其是移动体验）。

此外，将内容塞进一个屏幕而不是使用长滚动条的原则被认为是一种迷信。 根据实际研究，事实是用户并不介意滚动。 当然卡通形象，这种迷信之所以流行的部分原因是，在 Javascript 和 CSS 进步之后，滚动只被认为是一种有意义的设计模式。 在此之前，通过视觉叙事使滚动变得“有趣”要困难得多。 正如您可以想象的那样，包含文本（偶尔被图像中断）的长页面并不是一个非常有吸引力的 UI 布局。 但是，一旦您尝试使用长卷轴作为画布来展示开头、中间和结尾（通过图形、动画、图标等），您就会开始看到它在吸引用户注意力方面的电影力量。

事实上，一些混合模式正在成为滚动的最新趋势。 例如，我们在自己的 UXPin 游览页面上使用的固定滚动可以创建与传统​​长滚动网站相同的交互体验，而无需垂直拉伸网站。

滚动设计适合您的产品吗？

对于每一种设计技术和工具，都有人喜欢它的概念，也有人讨厌它。 在大多数情况下，双方本质上都没有对错之分。 因此，在实施这样的项目之前，必须权衡所有考虑因素。

滚动的优点：

照片来源：鲍尔

滚动的缺点

撇开优点和缺点不谈，某些类型的网站更适合长滚动设计。 较长的滚动网站更适合……

社交媒体网站拥有持续且广泛的用户生成内容，非常适合长滚动设计（事实上，Facebook 和 Twitter 几年前帮助普及了这项技术）。 另一方面，像电子商务这样的以目标为导向的网站——需要连贯的导航——在页面长度上往往更加保守。

照片来源：亚马逊

中间是像 Etsy 这样的网站：一个使用混合解决方案的用户生成产品的在线商店：几页所谓的“无限”滚动，以“显示更多”号召性用语结束。

照片来源：Etsy

与所有网页设计趋势一样，不要仅仅因为看到其他网站遵循该模式就试图使用更长的滚动条。 确保您的网站符合我们讨论过的标准，否则您实际上可能会遇到更糟糕的性能。

滚动最佳实践

长滚动、视差效果和类似的机制在设计领域仍然相对较新（大约有 4 年历史）表情包设计，但仍然可以从反复试验的经验中收集一些基本的最佳实践。

回顾 2015 年和 2016 年的网页设计趋势，以下是一些成功长滚动的日常技巧。

不用担心短卷轴和长卷轴的交替。 让内容决定滚动长度，而不是相反。 使用短滚动主页和长滚动登陆页面（如产品、旅游等）是很棒的（而且非常流行）。 考虑粘性导航，以便用户始终可以快速“返回”或从滚动上的一个元素跳转到另一个元素。 将滚动与设计元素或工具结合起来，以便每个用户都可以快速了解网站的工作原理。 箭头、动画按钮或类似的用户界面工具是帮助用户确定下一步该做什么的有趣而简单的方法。 有些网站甚至包含一个带有“滚动更多”或“开始”等说明的小按钮，以改进页面导航。 明确区分滚动点击和其他 CTA 元素，以便网站获得所需的交互。 做一些研究并了解用户如何与滚动交互。 例如，在 Google Analytics 中，您可以打开“Web Analytics”选项卡，然后在屏幕底部（第二个屏幕及其他屏幕）查看用户点击次数。 然后您可以根据需要调整设计。 不要做得太过分。 长滚动并不意味着 500 页的连续内容 – 长滚动也可以很简单。 讲述你的故事，然后停止说话，不再继续。 关注用户目标并接受即使是无限滚动的网站也不是真正无尽的。 创建长滚动网站时网页设计，请了解用户仍然需要方向感（当前位置）和导航（其他可能的路径）。 包括视觉提示以帮助引导用户滚动，例如“七种摩托车骑手”网站左下角的头盔图标。

照片来源：麦克莱斯特

滚动是一把双刃剑，因此请遵循推荐的用法，以避免弊大于利。

无页设计的未来

长滚动网站并不适合所有情况。 虽然我们已经看到流行设备上屏幕尺寸的潮起潮落（或增大和减小），但在可预见的未来，屏幕尺寸将会很小。 小屏幕需要更多滚动。

事实上，从长滚动到“无页”设计的转变已经开始，一些设计师（例如数字远程技术设计师）甚至相信这就是网络的未来。 随着网站不断摆脱用户思考和消费信息方式的一些限制，设计师必须更彻底地思考在不同环境下创建内容的最佳方式。

交互设计是长滚动网站设计的基础。 如果用户喜欢该界面并发现它直观且有趣网页设计，那么他们就不会真正关心滚动的长度（只要它不是太长）。

您并不总是需要缩短滚动长度——您还可以使滚动过程变得更有趣。

读完这篇文章，你对滚动设计感兴趣吗？ 那就赶紧去尝试一下吧~

产品经理和UI设计师可以使用墨刀轻松设计滚动产品：将鼠标置于页面底部区域并拖动以调整页面长度。

本文由莫道翻译自曹杰瑞的《网页设计中的滚动新规则》。

作为一款在线原型制作和协作工具，魔道已经帮助许多产品经理和设计师轻松创建交互式原型来展示和验证设计想法。 还支持多人协作编辑、分享和评论。 新注册用户即可获得魔道高级企业版15天免费试用！ 开始体验吧！