几年前，我和一位同事冒险尝试了一种新的设计趋势，这种趋势赢得了网页设计奖，并在设计师论坛上赢得了赞扬。这种趋势就是视差滚动。我们没有被打动。更重要的是，用户也不是(原因我将在下面解释)。在短短几年后，视差趋势就慢慢消失了，可能是因为那些早期采用者看到了和我们一样的结果:对用户体验造成伤害，或者用户反应冷淡。这样的结果并不能证明为创造和维护精细的视差滚动效果所做的工作是正确的，因此这种趋势的受欢迎程度下降了。一段时间。
快进到今天。就在我们认为网络是安全的时候，视差滚动又卷土重来了。就像电影的续集一样，我们今天的测试揭示了一个熟悉的角色和故事线:不满意的用户和一系列可用性问题。然而，在这部续集中，视差滚动比第一部更加克制。如果说早期的视差实现是可用性问题的可怕展示，那么现代版本更接近PG-13家庭喜剧:不是特别有趣，但也不太可能让人们尖叫着关闭标签。
定义:视差动画效果是由两个或更多层的界面以不同的速度或不同的方向移动，以产生深度的印象。
(为了理解视差设计为什么会产生这种错觉，试试这个实验:把你的两只手举到脸前面，一只手尽量伸得远一点，另一只手放在第一只手和眼睛的中间。现在，在保持双手稳定的同时，从左向右移动你的头部:这看起来就像两只手在相对地移动，特别是当你闭上一只眼睛以获得2D视图时。)
下面的GIF动画展示了一家餐厅网站上的视差滚动。
在这篇文章中，我们将讨论为什么视差是一种流行趋势，为什么它会有问题，以及为什么有时它仍然可以用来增强用户体验。
为什么设计师要使用视差
如果你曾经玩过早期的电子游戏，你可能还记得视差效应。游戏设计师分别移动前景和背景中的物体，以增加游戏世界的深度，让玩家沉浸其中。同样地，想要在网页上提供一种“沉浸式”体验的渴望，也常常促使网站设计师使用视差效果，他们认为这种效果可以创造一种创造性的、独特的品牌声明和令人难忘的设计。
使用视差的另一个原因是为了引起对某些页面元素的注意。运动速度是a前注意特征:在一个场景中，一个物体以不同于其他物体的速度移动，就像猎豹在开阔的草原上奔跑;人们会注意到它，而不需要进行任何明确的搜索。
不幸的是,视差效果是有成本的．设计师需要知道他们的风险和好处是什么。
视差的问题
对于考虑采用(或重新选择)这种趋势的网站，让我们看看视差滚动效果的一些顶级UX问题。
- 视差呈现的内容可能很难控制。虽然视差是用来吸引人们对动画元素的注意的，但这些元素通常会被忽略。在我们的测试中，大多数用户不会等待视差效果加载:他们快速滚动，扫描感兴趣的关键字。因为这种效果需要时间，以目标为导向的用户寻找特定信息可能会错过使用视差呈现的重要内容。
页面加载可能需要更长的时间当使用视差动画时。在苹果网站上，一些用户滚动屏幕，但几乎看不到任何东西，因为视差效果还没有产生动画效果。空白屏幕不是设计师想要的，也不是用户想要看到的。
Apple.com:一名研究参与者遇到了空白的屏幕，因为视差动画文本和图像加载的速度不如他向下滚动时快。用户必须不断滚动屏幕才能看到内容，然后再滚动到每个部分的开头，这样他就可以阅读文本并查看图像。 但是过快的视差也是个问题:当动画与用户的滚动速度绑定在一起时，如果他们滚动得太快，人们可能就没有机会阅读动画文本。一个用户在滚动纽约《泰晤士报》移动网站注意到她正在阅读的图表上方有一段文字滚动。她说:“哦，事情发生得太快了，我都没来得及看。”这种影响延迟了她解释图表的能力，并让她感觉自己在控制体验。
iPhone版的《纽约时报》应用程序:一个快速滚动的用户导致视差动画文本在屏幕上快速滚动，然后离开屏幕，以至于她没有时间阅读它。 - 太多的动作，尤其是文字，会让人眼花缭乱。使用视差动画许多不同的页面元素和文本块使阅读困难甚至会让人感到恶心。如果这听起来有点夸张，请记住，在2013年，苹果发布了一个更新iOS 7允许用户减少运动，因为用于任务切换的视差动画导致许多人感到眩晕、恶心和眩晕的症状。从这个错误中吸取教训后，让我们期待未来的视差不造成伤害．
- 视差效果可能会被完全忽略。到目前为止，用户已经了解到许多广告商使用动作来吸引注意力。有些人故意忽略页面上的移动，因为这与不必要的广告联系在一起。在移动设备上，细微的视差效果很容易被忽略，因为用户的手可能会阻止下方出现的动画。忽略视差效应可能不会对体验造成伤害(只要内容没有消失)，但设计师应该考虑这些效果是否值得构建和维护。
- 视差是对用户来说并不是那么令人印象深刻．哪些人最喜欢视差效果?其他设计师或开发人员。当你知道如何构建像长视差滚动页面这样复杂的东西时，你就会欣赏这项工作。但是，坦率地说，普通用户可能不在乎。今天，用户的反应和五年前一样:漠不关心。他们不是“喝彩”。用户测试参与者不会停下来评论效果有多酷;他们并不是为了好玩而上下滚动，观看特效使页面栩栩如生。他们不会停下来观看每个效果顺利过渡到主要内容区域。相反，绝大多数人们关注内容，所以动画效果是事后才想到的，如果他们注意到的话。那么，设计师的问题就变成了:视差是给用户留下深刻印象的最好方式，还是展示品牌的最好方式?
(关于视差或其他动画的影响的用户研究:如果你提示用户谈论滚动动画，你可能会听到赞扬交互设计的评论。在赞美这样的评论之前要小心:有时候用户说了一件事，但他们的行为却显示出完全不同的现实。一旦你将用户的注意力引导到某个功能上，你就会偏向他们对该功能的理解。例如，在两个测试阶段的最后，一个参与者努力控制视差动画文本块，而另一个人没有注意到它们，我们询问他们在页面上看到的任何运动。那是当他们给予赞扬的时候，比如“哦，这太酷了”或“当你往下看时，它看起来太可爱了。”但我们不应该忘记当他们试图寻找答案或阅读一篇文章时到底发生了什么:他们挣扎或忽略了视差。)
让它发挥作用:使用约束，让用户处于控制之中
正如我在本文开头所说的，视差的最新迭代比五年前更加微妙。这是一件好事。记住视差是动画的一种形式，对于大多数动画来说，少即是多．
没有任务，没有问题。视差在用户休闲浏览的环境中是最安全的，没有特定的目标或任务。在这些情况下，视差可以用于支持叙事或促进品牌身份。如果你不确定你的用例是否符合这个类别，你总是可以参考3bs测试看看视差是否对您的业务和用户是一个好的选择。
如果用户有任务，就把内容放在第一位。视差可用性的最终测试是用户是否能够轻松快速地完成他们的任务。首先，这里有一些建议:
- 提供页面内导航链接在长视差滚动页面，这样滚动不是唯一的方式向下导航的页面。使用明显的导航UI，而不是小的垂直点，这很可能会被忽略信息的气味)．
- 为背景或周边图像保存视差效果，这样它们很容易被忽略，不会影响内容。
- 当用户向下滚动页面并在向下滚动时触发所有视差效果时，将这些对象保留在最终位置，而不是在向上或向下滚动时重新激活每个对象。在目标导向的环境中，一旦用户开始在页面上上下移动，那是因为他们在寻找信息。强迫人们重新观看视差效果会延迟他们获取信息的时间，而且很快就会变得乏味和恼人。就像一遍又一遍地听同一个笑话。在这里保持克制，你的用户将从中受益。
在下面的示例中，使用视差滚动动画圈出iPad的关键描述。动画是微妙的，但它们引起了人们对设备关键功能的注意。当用户向上或向下滚动页面时，它们也会保持在原位——关键字仍然会被圈起来。(请注意，由于iPad图像进入视图时产生的视差较大，导致页面加载速度变慢。较小的微妙影响不太可能造成这种延迟)。
结论
趋势可能来来去去，但人类行为在很大程度上保持不变。视差效应的风险仍然和几年前一样，因为人们仍然专注于他们的目标，他们对缓慢加载的网站没有耐心。幸运的是，我们可以从过去的错误中吸取教训。如果你的团队正在考虑视差，请确保它不会影响用户的使用，不会降低他们的使用速度，也不会影响他们快速、轻松地找到目标的能力。
参考:
希利,C.G。,知觉在可视化北卡罗来纳州立大学计算机科学系，网址:https://www.csc2.ncsu.edu/faculty/healey/PP/
分享这篇文章: