UI设计中什么视差缺乏

视差滚动效果增加了视觉吸引力，但是它们经常会引起可用性问题，例如内容加载缓慢或难以阅读。考虑一下好处是否值得付出代价。

几年前，我和一位同事冒险去测试一种新的设计趋势，该趋势赢得了网页设计奖并在设计师论坛上赢得了赞誉。这种趋势是视差滚动。我们没有留下深刻的印象。更重要的是，用户都不是（出于原因，我将在下面解释）。短短几年后，视差趋势逐渐消失，可能是因为那些早期采用者看到了与我们相同的结果：充其量是损害用户体验或使用户反应冷淡。结果并不能证明创建和维持精细的视差滚动效果所需要进行的工作，因此这种趋势逐渐消失。一阵子。

快进到今天。就在我们认为网络安全的时候，视差滚动才卷土重来。就像电影的续集一样，我们今天的测试显示出熟悉的演员表和故事情节：不为所动的用户和一系列可用性问题。但是，在此续集中，视差滚动比原始滚动更受限制。如果早期的视差实现是可用性问题的恐怖表现，那么现代版本将更接近PG-13家庭喜剧：虽然娱乐性不强，但也不太可能让人尖叫起来关闭标签。

定义：视差动画效果是由两层或多层界面以不同速度或沿不同方向移动以产生深度印象而创建的。

（要了解为什么视差设计会引起这种错觉，请尝试以下实验：将两只手举在脸前，一只手尽量伸开手臂，另一只手放在第一只手和您的手之间的中间位置现在，在握住双手的同时，将头从左向右移动：这看起来就像两只手相对于彼此移动一样，尤其是当您闭上一只眼睛以便获得2D视图时。）

下面的动画GIF显示了在餐厅网站上视差滚动的示例。

餐厅网站上视差动画的GIF动画

RestaurantLeDuc.com：在此视差滚动示例中，鱼和白色菜单框的移动速度与滚动背景不同，从而产生了在屏幕上分层的印象。

在本文中，我们将讨论为什么视差是一种流行的趋势，为什么它可能会带来问题，以及如何有时仍可以使用它来增强用户体验。

为什么设计师使用视差

如果您曾经玩过早期的视频游戏，您可能还记得视差效果。游戏设计师分别在前景和背景中移动对象，以增加游戏宇宙的深度并使玩家感到沉浸在其中。希望在网络上提供“身临其境”体验的愿望通常会激发网站设计人员使用视差效果，他们认为这种效果有助于创造新颖，独特的品牌形象和令人难忘的设计。

使用视差的另一个原因是要引起人们对某些页面元素的注意。运动的速度是一个吸引人的特征：一个物体以不同于场景中所有其他物体的速度运动，就像猎豹在开阔的草原上冲刺一样突出。人们会注意到它，而无需进行任何明确的搜索工作。

不幸的是，视差效应会带来一些成本。设计师需要知道他们的风险和收益是什么。

视差的四个问题

对于考虑采用（或重新采用）这种趋势的站点，让我们看一下视差滚动效果中最重要的UX问题。

1、视差呈现的内容可能难以控制。视差应该引起人们对动画元素的注意，但这些元素常常最终被忽略。在我们的测试中，大多数用户都不会等待视差效果加载：他们快速滚动浏览感兴趣的关键字。由于这种效果需要时间，因此寻找特定信息的面向目标的用户可能会错过使用视差呈现的重要内容。

使用视差动画时，页面加载时间可能会更长。在Apple网站上，一些用户滚动并在屏幕上几乎看不到任何东西，因为视差效果还没有动画。黑屏不是设计师想要的，也不是用户看到的。

缓慢加载的视差效果导致iPhone上出现三个近乎空白的屏幕

Apple.com：一位研究参与者遇到了空白屏幕，因为视差动画文本和图像没有像他向下滚动一样快地加载。用户必须继续滚动才能显示内容，然后向后滚动到每个部分的开头，以便他可以阅读文本并查看图像。

但是视差过快也可能是一个问题：当动画与用户的滚动速度联系在一起时，如果人们滚动得太快，人们可能就没有机会阅读动画文本。在《纽约时报》移动网站上滚动的一个用户注意到，向上滚动并翻过她正在阅读的图形的文本面板。她评论说：“哦，那件事发生得太快了，我什至都没看过。”这种效果延迟了她解释图表和控制体验的能力。

视差动画文本块快速滚动出屏幕

适用于iPhone的NYTimes应用程序：一位快速滚动的用户使视差动画文本滚动得如此之快，然后离开了用户的屏幕，以至于她没有时间阅读它。

2、动作过多，尤其是文字移动过多，可能会令人头晕。使用视差为许多不同的页面元素和文本块设置动画会导致阅读困难，甚至可能使人感到不适。如果听起来有些夸张，请记住，2013年，苹果发布了iOS 7的更新，该更新允许用户使用Reduce Motion，因为用于任务切换的视差动画使许多人感到眩晕，恶心和头晕的症状。从这个错误中学到了，让我们希望未来的视差不会造成伤害。

3、视差效果可能会完全丢失。到目前为止，用户已经了解到，许多广告商都在使用动作来吸引注意力。由于与不必要的广告相关联，某些人故意忽略了页面上的移动。在移动设备上，很容易错过细微的视差效果，因为用户的手会挡住下方的动画。忽略视差效果可能不会对体验造成危害（只要内容不会消失），但设计人员应考虑这些效果是否值得构建和维护。

4、视差对用户而言并没有那么令人印象深刻。人们最有可能欣赏视差效果？其他设计师或开发人员。当您知道构建诸如长滚动视差页之类的复杂内容所需要的工作时，您将很感激。但是，坦率地说，普通用户可能不太在意。如今，用户的反应与五年前一样：冷漠。他们并没有“惊叹”。用户测试参与者不会停止评论效果有多酷。他们不会为了娱乐而上下滚动，以观看效果使页面栩栩如生。他们不会停下来观看每种效果平稳过渡到主要内容区域。相反，绝大多数人专注于内容，因此，如果根本没注意到动画效果，那就是事后的想法。因此，设计师面临的问题变成：视差是打动用户或发表品牌声明的最佳方法吗？

（有关对用户研究视差或其他动画的影响的注释：如果您提示用户谈论滚动动画，您可能会听到一些赞美交互设计的评论。在庆祝这些评论之前要谨慎行事：有时用户会说一件事，但是他们的行为却显示出完全不同的现实。例如，当您将用户的注意力吸引到某项功能上时，您就对他们对该功能的解释产生了偏见。例如，在两个测试阶段的最后，一个参与者苦苦挣扎为了控制视差动画文本块，而另一个没有注意到它们，我们问人们他们在页面上看到的任何运动。那是当他们赞扬的时候，他们说“哦，太酷了”或“太可爱了”当您向下浏览页面时，它会出现。“但是我们不应该忘记当他们试图找到答案或阅读文章时真正发生了什么：他们挣扎或忽略了视差。”

发挥作用：使用约束并控制用户

就像我在本文开头所说的那样，最新的视差迭代比五年前要微妙。这是一件好事。请记住，视差是动画的一种形式，对于大多数动画，少即是多。

没有任务，没有问题。在用户出于休闲目的浏览而没有特定目标或任务的环境中，视差最安全。在这种情况下，视差可用于支持叙述或有助于品牌标识。如果不确定用例是否适合此类别，则始终可以参考3 Bs测试，以了解视差是否对您的企业和用户都是不错的选择。

如果用户有任务，则将内容放在第一位。视差可用性的最终测试是用户是否可以轻松快速地完成任务。首先，这里有一些建议：

• 在长滚动视差页面上提供页面内导航链接，因此滚动并不是向下导航页面的唯一方法。使用引人注目的导航UI，而不仅仅是可能会错过的垂直小点（信息气味差）。

• 将视差效果保存为背景或外围图像，以使它们易于忽略并且不会损害内容。

• 用户向下滚动页面并触发所有视差效果时，将这些对象保留在其最终位置，而不是在向上或向下滚动时重新激活每个对象。在面向目标的上下文中，一旦用户开始上下浏览页面，那是因为他们正在寻找信息。强迫人们重新观看视差效果会延迟他们获取该信息的时间，并且很快会变得乏味且令人讨厌。就像一次又一次地听同一个笑话一样。在这里显示克制，您的用户将受益。

在以下示例中，使用视差滚动动画来圈出iPad的按键描述。动画有些微妙，但它们引起了人们对设备关键功能的注意。当用户向上或向下滚动页面时，它们也会保留在原处（关键字仍然带圆圈）。（请注意，同一页面由于iPad图像的较大视差效果滑入视图而导致页面加载时间变慢。较小的微妙效果不太可能导致此类延迟）。

当用户滚动时，视差动画会在关键字周围加下划线

在iPad产品页面上，用户没有注意到细微的视差动画，例如在标注文字下划线或加圈。但是这些效果不会干扰用户阅读页面的能力。标记样式的动画通过展示将Apple Pencil与平板电脑结合使用的可能性，还增强了页面的某些内容。

结论

趋势可能会来来去去，但人类的行为基本上保持不变。视差效应的风险与几年前一样，因为人们仍然专注于自己的目标，并且对缓慢加载的站点不耐烦。幸运的是，我们可以从过去的错误中学习。如果您的团队正在考虑视差，请确保它不会干扰用户，降低用户速度或剥夺他们快速轻松地找到目标的能力。