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

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

在本文中，我们将探索滚动设计的重生，讨论一些滚动设计的利弊，并分析一些技巧。

为什么滚动条可以重新被人们喜爱？

答案很简单，那就是移动设备的遍及。

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

也有其他因素。比如，人们在更多地方可以访问高速互联网，使用滚动能更快捷地访问信息，而不是从页面到页面点击。

社交媒体网站的日益强大也推动了此技术：滚动自然地适应了他们丰富的用户生成内容。

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

此外，把内容都集中在一屏里而不是使用长滚动的原则被认为是一种迷信。

根据实际研究，事实是用户真的不介意滚动。

当然，这个迷信之所以流行，部分原因在于，在Javascript和CSS的进步之后，滚动只被认为是一种有意义的设计模式。 在此之前，通过视觉讲故事使滚动 “有趣” 要困难得多。可以想象，包含文本的长页（偶尔被图像打断）并不是一个非常吸引人的 UI 布局

但是一旦你尝试使用长滚动作为画布来展示开头，中间和结尾（通过图形，动画，图标等），那么你就会开始看到它在吸引用户注意力方面具有电影般的力量。

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

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

每一种设计技巧和工具，都有喜欢这个概念的人和那些讨厌它的人。在大多数情况下，任何一方都不是本质上对错的；因此，在处理此类项目之前，权衡所有注意事项非常重要。

滚动的优点：

• 鼓励互动 – 随着不断变化的元素不断刺激，它可以是一种有趣的讲故事方法，鼓励用户交互 – 尤其是高雅执行的视差滚动。
• 更快 – 长滚动比单击复杂的导航路径更快，并且不会减慢或限制用户体验。如Interaction Design Best Practices中所述，对时间的感知通常比实际时间的流逝更重要。
• 吸引用户 – 易用性可促进交互性，增加现场时间。对于无限滚动网站尤其如此，您可以在其中帮助用户发现他们可能甚至没有想到的相关内容。
• 响应式设计 – 页面设计在具有不同屏幕大小和功能的设备之间可能会变得复杂，但滚动有助于简化差异。
• 手势控制 – 滚动似乎与触摸有着有机的联系，因为向下轻扫比在屏幕上不同区域重复点击要自然得多。用户（尤其是移动设备）通常接受这一方式来显示信息。
• 令人愉快的设计 – 不需要多次单击即可获得更快的交互，从而获得更类似于应用或游戏的用户体验。

Photo credit: Bauer

滚动的缺点

• 固执用户 –一些用户总是毫无理由地去抵制改变。尽管如此，该技术现在非常普遍（特别是在移动体验期间），可以说大多数用户都习惯了这种技术。
• SEO缺点 – 只有一个页面可能对网站的SEO产生负面影响。
• 迷失方向 – 滚动和内容之间的断开可能会使用户感到困惑或脱节。
• 导航困难 – “返回”页面上的先前内容可能会很尴尬。为了对付这种情况，您可以创建一个持久的顶部导航，其中每个部分都锚定到页面。
• 网站速度 – 视频或图像图库等大量内容可能会降低网站速度，尤其是视差滚动网站，它们依赖于 Javascript 和 jQuery
• 没有页脚 – 使用无限滚动网站，我们建议使用简约的”粘性”页脚，这样您就不会牺牲可导航性。否则，用户可能会因为页面底部缺少进一步的导航而感到困惑。

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

• …包含很大一部分移动流量（大多数用户）
• …包括频繁更新或新内容（如博客）
• …有很多信息以单一的方式呈现，以便理解（如信息图）
• …不包含富媒体，因为这可能导致负载时间的消耗

社交媒体网站带有不断和广泛的用户生成的内容，可以很好的进行长滚动设计（事实上，早在几年前，Facebook和Twitter就帮助推广了这项技术）。另一方面，像电子商务这样的目标导向的网站——需要连贯的导航——更趋向于保守的页面长度。

Photo credit: Amazon

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

Photo credits: Etsy

与所有 Web 设计趋势一样，不要仅仅因为看到其他网站遵循该模式而使用较长的滚动。确保您你的网站符合我们讨论的标准，否则实际上你可能会体验到更差的性能。

滚动最佳实践

长滚动、视差效应和类似机制在设计领域中仍然比较新（约4年历史），但仍从试错经验中可以获取一些基本的最佳实践。

从 2015 和 2016 的 Web 设计趋势总结，以下是成功实现长滚动的一些日常技巧。

1. 不用担心短滚动和长滚动交替使用。 让内容决定滚动长度，而不是反过来。 使用短滚动主页和长滚动着陆页（如产品，旅游等）非常好（并且非常受欢迎）。
2. 考虑粘性导航，以便用户始终可以快速”返回”或从滚动中的元素跳转到另一个元素。
3. 将滚动与设计元素或工具结合，以便每个用户都能快速了解网站的工作方式。箭头、动画按钮或类似的用户界面工具是帮助用户确定下一步操作的有趣且简单的方法。有些网站甚至包含一个小按钮，其中包含”滚动更多”或”开始”等说明，来提高页面的导航性。 
4. 明确区分滚动点击和其他CTA元素，以便网站获得所需的交互。
5. 做一些研究，看看用户如何与滚动交互。例如，在 Google 分析中，可以打开”网页分析”选项卡，查看屏幕下方（第二屏及之后）用户的点击数。然后，你可以根据需要调整设计。
6.  不要过分。长滚动并不意味着 500 页的连续内容 – 长滚动也可以很简单。讲述你的故事，然后适可而止，不要喋喋不休 。下面的 Deca 网站只使用了几页长的滚动。
7. 专注于用户目标，并接受即使是无限滚动网站也不是真正无穷无尽的。 创建长滚动网站时，要了解用户仍需要方向感（当前位置）和导航（其他可能的路径）。
8. 包括有助于在滚动中定位用户的视觉提示，例如左下方用于“七种类型的摩托车骑手”站点的头盔图标。

Photo credits: MCaleicester

滚动可能是一把双刃剑，所以坚持使用它的建议用法，以避免它弊大于利。

未来的无页面设计

长滚动网站不能适应所有的情况。尽管我们已经看到流行设备上屏幕大小的起伏和流动（或增加和减少），但在可预见的将来，屏幕尺寸很小。小屏幕需要更多的滚动。

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

Photo credits: Photohigh

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

你并不总是需要缩短滚动长度 – 你还可以让滚动过程更有趣。

看完这篇文章，你开始对滚动设计感兴趣了吧？那么就快去试一试啦~

产品经理和UI设计师们都可以使用墨刀，很方便地对产品进行滚动设计：把鼠标放在页面最底部区域，拖动即可调整页面长度。

本文由墨刀翻译自 Jerry Cao 的The New Rules for Scrolling in Web Design。

墨刀作为一款在线原型设计与协同工具，已经帮助众多产品经理和设计师们轻松做出交互原型，展现和验证设计想法，还支持多人协作编辑，分享和评论。新注册用户即可获得墨刀高级企业版的15天免费试用！开始体验一下吧！