近年来,曾经的网站设计“禁忌”已经成为最受欢迎的技术之一,用户开始欣赏和喜欢网页站中的滚动设计。滚动设计摆脱了之前的标签定义,它正在重塑自己去成为交互设计的一个核心元素——这也意味着设计师们需要学习新的滚动设计规则。
在本文中,我们将探索滚动设计的重生,讨论一些滚动设计的利弊,并分析一些技巧。
答案很简单,那就是移动设备的遍及。
正如《2015-2016年网页设计趋势》指南中所解释的,长滚动与基于卡片的设计一起演变。结合后,这些技术就可以为用户提供源源不断的小容量内容(这非常适合web,尤其是移动体验)。
此外,把内容都集中在一屏里而不是使用长滚动的原则被认为是一种迷信。根据实际研究,事实是用户真的不介意滚动。
当然,这个迷信之所以流行,部分原因在于,在Javascript和CSS的进步之后,滚动只被认为是一种有意义的设计模式。在此之前,通过视觉讲故事使滚动"有趣"要困难得多。可以想象,包含文本的长页(偶尔被图像打断)并不是一个非常吸引人的UI布局
但是一旦你尝试使用长滚动作为画布来展示开头,中间和结尾(通过图形,动画,图标等),那么你就会开始看到它在吸引用户注意力方面具有电影般的力量。
事实上,一些混合模式正在成为滚动的最新趋势。例如,我们在自己的UXPin游览页面上使用的“原地固定滚动”创建了传统长滚动网站的相同交互式体验,而无需垂直拉伸网站。
每一种设计技巧和工具,都有喜欢这个概念的人和那些讨厌它的人。在大多数情况下,任何一方都不是本质上对错的;因此,在处理此类项目之前,权衡所有注意事项非常重要。
滚动的优点:
鼓励互动–随着不断变化的元素不断刺激,它可以是一种有趣的讲故事方法,鼓励用户交互-尤其是高雅执行的视差滚动。
响应式设计–页面设计在具有不同屏幕大小和功能的设备之间可能会变得复杂,但滚动有助于简化差异。
手势控制–滚动似乎与触摸有着有机的联系,因为向下轻扫比在屏幕上不同区域重复点击要自然得多。用户(尤其是移动设备)通常接受这一方式来显示信息。
令人愉快的设计–不需要多次单击即可获得更快的交互,从而获得更类似于应用或游戏的用户体验。
Photocredit:Bauer
滚动的缺点
固执用户–一些用户总是毫无理由地去抵制改变。尽管如此,该技术现在非常普遍(特别是在移动体验期间),可以说大多数用户都习惯了这种技术。
SEO缺点-只有一个页面可能对网站的SEO产生负面影响。迷失方向-滚动和内容之间的断开可能会使用户感到困惑或脱节。
导航困难–"返回"页面上的先前内容可能会很尴尬。为了对付这种情况,您可以创建一个持久的顶部导航,其中每个部分都锚定到页面。
网站速度–视频或图像图库等大量内容可能会降低网站速度,尤其是视差滚动网站,它们依赖于Javascript和jQuery
没有页脚–使用无限滚动网站,我们建议使用简约的"粘性"页脚,这样您就不会牺牲可导航性。否则,用户可能会因为页面底部缺少进一步的导航而感到困惑。
撇开优点和缺点不谈,某些类型的网站更适合长滚动设计。更长的滚动网站更适合……
...包含很大一部分移动流量(大多数用户)
...包括频繁更新或新内容(如博客)
...有很多信息以单一的方式呈现,以便理解(如信息图)
与所有Web设计趋势一样,不要仅仅因为看到其他网站遵循该模式而使用较长的滚动。确保您你的网站符合我们讨论的标准,否则实际上你可能会体验到更差的性能。
滚动最佳实践
长滚动、视差效应和类似机制在设计领域中仍然比较新(约4年历史),但仍从试错经验中可以获取一些基本的最佳实践。
从2015和2016的Web设计趋势总结,以下是成功实现长滚动的一些日常技巧。
不用担心短滚动和长滚动交替使用。让内容决定滚动长度,而不是反过来。使用短滚动主页和长滚动着陆页(如产品,旅游等)非常好(并且非常受欢迎)。
考虑粘性导航,以便用户始终可以快速"返回"或从滚动中的元素跳转到另一个元素。
将滚动与设计元素或工具结合,以便每个用户都能快速了解网站的工作方式。箭头、动画按钮或类似的用户界面工具是帮助用户确定下一步操作的有趣且简单的方法。有些网站甚至包含一个小按钮,其中包含"滚动更多"或"开始"等说明,来提高页面的导航性。
明确区分滚动点击和其他CTA元素,以便网站获得所需的交互。
不要过分。长滚动并不意味着500页的连续内容-长滚动也可以很简单。讲述你的故事,然后适可而止,不要喋喋不休。下面的Deca网站只使用了几页长的滚动。
专注于用户目标,并接受即使是无限滚动网站也不是真正无穷无尽的。创建长滚动网站时,要了解用户仍需要方向感(当前位置)和导航(其他可能的路径)。
包括有助于在滚动中定位用户的视觉提示,例如左下方用于“七种类型的摩托车骑手”站点的头盔图标。
Photocredits:MCaleicester
滚动可能是一把双刃剑,所以坚持使用它的建议用法,以避免它弊大于利。
长滚动网站不能适应所有的情况。尽管我们已经看到流行设备上屏幕大小的起伏和流动(或增加和减少),但在可预见的将来,屏幕尺寸很小。小屏幕需要更多的滚动。
事实上,从长滚动到"无页面"的设计的过渡已经开始,一些设计师(如数字远程技术设计师)甚至相信这是网络的未来。随着网站不断摆脱用户思考和使用信息的一些限制,设计人员必须更彻底地思考在不同环境中创建内容的最佳方式。
Photocredits:Photohigh
你并不总是需要缩短滚动长度-你还可以让滚动过程更有趣。
产品经理和UI设计师们都可以使用墨刀,很方便地对产品进行滚动设计:把鼠标放在页面最底部区域,拖动即可调整页面长度。