近年来,,曾经的网站设计“禁忌”已经成为最受欢迎的技术之一,用户开始欣赏和喜欢网页站中的滚动设计。滚动设计摆脱了之前的标签定义,它正在重塑自己去成为交互设计的一个核心元素——这也意味着设计师们需要学习新的滚动设计规则。在本文中,我们将探索滚动设计的重生,讨论一些滚动设计的利弊,并分析一些技巧。为什么滚动条可以重新被人们喜爱?答案很简单,那就是移动设备的遍及。自从移动用户超越桌面用户以来,世界各地的UI设计师都进行了相应的调整。随着越来越多的用户使用较小的屏幕,滚动变得越来越重要:屏幕越小,滚动的时间就越长。也有其他因素。比如,人们在更多地方可以访问高速互联网,使用滚动能更快捷地访问信息,而不是从页面到页面点击。社交媒体网站的日益强大也推动了此技术:滚动自然地适应了他们丰富的用户生成内容。正如《2015-2016 年网页设计趋势》指南中所解释的,长滚动与基于卡片的设计一起演变。结合后,这些技术就可以为用户提供源源不断的小容量内容(这非常适合web,尤其是移动体验)。此外,把内容都集中在一屏里而不是使用长滚动的原则被认为是一种迷信。根据实际研究,事实是用户真的不介意滚动。当然,这个迷信之所以流行,部分原因在于,在Javascript和CSS的进步之后,滚动只被认为是一种有意义的设计模式。 在此之前,通过视觉讲故事使滚动 "有趣" 要困难得多。可以想象,包含文本的长页(偶尔被图像打断)并不是一个非常吸引人的 UI 布局但是一旦你尝试使用长滚动作为画布来展示开头,中间和结尾(通过图形,动画,图标等),那么你就会开始看到它在吸引用户注意力方面具有电影般的力量。事实上,一些混合模式正在成为滚动的最新趋势。 例如,我们在自己的UXPin游览页面上使用的 “原地固定滚动” 创建了传统长滚动网站的相同交互式体验,而无需垂直拉伸网站。滚动设计适合你的产品吗?每一种设计技巧和工具,都有喜欢这个概念的人和那些讨厌它的人。在大多数情况下,任何一方都不是本质上对错的;因此,在处理此类项目之前,权衡所有注意事项非常重要。滚动的优点:鼓励互动 – 随着不断变化的元素不断刺激,它可以是一种有趣的讲故事方法,鼓励用户交互 - 尤其是高雅执行的视差滚动。更快 – 长滚动比单击复杂的导航路径更快,并且不会减慢或限制用户体验。如Interaction Design Best Practices中所述,对时间的感知通常比实际时间的流逝更重要。吸引用户 – 易用性可促进交互性,增加现场时间。对于无限滚动网站尤其如此,您可以在其中帮助用户发现他们可能甚至没有想到的相关内容。响应式设计 – 页面设计在具有不同屏幕大小和功能的设备之间可能会变得复杂,但滚动有助于简化差异。手势控制 – 滚动似乎与触摸有着有机的联系,因为向下轻扫比在屏幕上不同区域重复点击要自然得多。。 用户(尤其是移动设备)通常接受这一方式来显示信息。令人愉快的设计 – 不需要多次单击即可获得更快的交互,从而获得更类似于应用或游戏的用户体验。
Photo credit: Bauer滚动的缺点固执用户 –一些用户总是毫无理由地去抵制改变。尽管如此,该技术现在非常普遍(特别是在移动体验期间),可以说大多数用户都习惯了这种技术。SEO缺点 - 只有一个页面可能对网站的SEO产生负面影响。迷失方向 - 滚动和内容之间的断开可能会使用户感到困惑或脱节。导航困难 – "返回"页面上的先前内容可能会很尴尬。为了对付这种情况,您可以创建一个持久的顶部导航,其中每个部分都锚定到页面。网站速度 – 视频或图像图库等大量内容可能会降低网站速度,尤其是视差滚动网站,它们依赖于 Javascript 和 jQuery没有页脚 – 使用无限滚动网站,我们建议使用简约的"粘性"页脚,这样您就不会牺牲可导航性。否则,用户可能会因为页面底部缺少进一步的导航而感到困惑。撇开优点和缺点不谈,某些类型的网站更适合长滚动设计。更长的滚动网站更适合……...包含很大一部分移动流量(大多数用户)...包括频繁更新或新内容(如博客)...有很多信息以单一的方式呈现,以便理解(如信息图)...不包含富媒体,因为这可能导致负载时间的消耗社交媒体网站带有不断和广泛的用户生成的内容,可以很好的进行长滚动设计(事实上,早在几年前,Facebook和Twitter就帮助推广了这项技术)。另一方面,像电子商务这样的目标导向的网站——需要连贯的导航——更趋向于保守的页面长度。