UX 模式中上下文切换的重要性

您是否曾经在工作中遇到过这样的一天：当您正在努力完成当前任务时，不断地被分配新的任务？这种感觉充其量令人不快，最糟糕的情况是完全令人沮丧且浪费时间。近年来，大型公司的雇主开始考虑上下文切换的成本——重新调整大脑以适应不同任务所花费的时间会累积起来，导致员工感到沮丧，从而：损失金钱。网站的用户体验也以同样的方式运作。

每当新用户访问您的网站时，他们都会怀着忐忑的心情。这就是为什么随着时间的推移，所有网站都开始使用相同模式的原因。例如，人们倾向于知道单选按钮组的工作原理。您为用户提供了他们已经理解的交互方式。但是，许多大型网站并没有考虑到通过在交互时完全更改UI 中元素的放置，您也在要求用户重新适应这种新视图。这种缺乏上下文是一种反模式：我们没有优雅地向用户展示发生了什么变化以及为什么变化。

空间、时间和位置的关联可以帮助交互显得更加流畅和直观。它不需要过于夸张。想想简洁、最小的 UI 设计。它们易于导航且外观非常优雅，但这并不意味着它们更容易制作。

让我们为这些更改位置的交互起个名字：上下文切换 UX。然后我们将尝试通过一些示例和技巧来消除其神秘感。

在我们深入探讨解决方案之前，需要注意的是，任何一种方法都可能被过度使用。我们的大脑（以及随后的大多数生物）已经进化到特别注意运动中的事物。这种进化特征是为了保证我们的安全和警觉，然而，当某些意想不到的事物移动时，大脑中会触发肾上腺素本能以求生存的部分，正是这部分被触发了。动画很棒！没有它，网络就是一个静态的、乏味的盒子。但是，当涉及到 UX 动画时，微妙至关重要。

我们将要介绍的大多数技巧的力量在于结合它们。在整篇文章中，我将使用诸如下面的笔之类的互补方法来说明这一点。建议查看完整演示。

查看 Sarah Drasner (@sdras) 在 CodePen 上的笔 map 30。

显示

想象一个模态窗口，它在点击时显示自身。任何我们在没有任何警告的情况下弹出到屏幕上的内容都有可能引起不安。模态窗口功能强大，因为它们具有命令性和吸引注意力的状态，但往往不受欢迎，部分原因是因为它们可能非常突兀。

如果我们可以以更细致的方式显示模态窗口，例如通过展开、缩放或翻转它，我们突然创造了引导用户从一种状态转换到另一种状态的机会。我们将获得与突兀的模态窗口一样多的关注，或者可能更多，因为我们的大脑已经进化到检测运动。

显示状态（将模态窗口视为“状态”）特别有用，因为我们可以使用一些障眼法，使一切看起来都非常快。我们可以在页面其余部分加载完成后延迟加载隐藏状态，但将其保持休眠和暂停状态，以便它可以在按钮或甚至滚动事件等触发器调用时轻松出现。这有可能使这种技术显得无缝且直观。我并不是唯一一个在动画中考虑 UX 和显示状态的人，请查看 Val Head 在 A List Apart 上发表的这篇很棒的文章。

变形

一种视觉上明显的过渡技术是变形。如果您需要从一种状态转换到另一种状态，那么最简单的方法是将一个形状变形为另一个形状。这可能是一个非常漂亮的效果！

SVG 和 CSS 都是此类 UI 动画的不错选择。我从使用这两者中发现，它们各有优缺点。CSS 可以轻松地使用border-radius在圆形和方形之间进行过渡。它还可以优雅地处理大量缩放变换，而 SVG 在超过一定数量后，会在恢复之前出现像素化。但是，SVG 是为绘图而构建的。它非常适合复杂的形状。您可以使用 JavaScript 对路径甚至形状数据进行过渡，以前使用 SMIL（由于停止支持不再推荐），很快 CSS 将使用一些新的正在 W3C 制定的 SVG 样式属性。Snap.svg 以优雅地对具有相似点数的路径数据进行过渡而闻名，而 GSAP 通过其Attr 插件提供了类似的功能。您还可以使 SVG 看起来像是为了变形效果而自行绘制，方法是为stroke-dashoffset设置动画，就像您在关闭按钮消失时在演示中看到的那样。

效果的组合意味着用户界面可以在被调用时出现。

所有内容都已在页面上等待激活。

隔离

无论您的 UX 多么干净，人们都不会始终如一地专注于您的 UI。眼睛会四处移动，这种现象称为扫视，创建场景的三维心理地图，但会专注于兴趣点。如果您认为您的网站理想情况下会根据用户的兴趣将广泛的用户群引导到更小的部分，那么缩小他们扫描范围是有帮助的。

在这里，我们说明了用户一旦决定了他们相关的兴趣路径，设计就会发生变化以引导他们，减少他们需要扫描的区域，并使他们的注意力应该放在哪里更加清晰（请查看完整笔此处）

查看 Sarah Drasner (@sdras) 在 CodePen 上的笔 map 30。

样式

任何这些技巧都需要与适当的样式相结合。我之前写过关于如何在运动设计语言中实现适当的样式和品牌传达。我之前展示的变形/显示笔具有正弦/单曲线缓动。将其与这支笔中的弹跳缓动进行比较

查看 Sarah Drasner (@sdras) 在 CodePen 上的笔 map 30。

弹跳缓动使事物具有更具表现力和弹性的基调。以上示例和地图示例都补充了调色板和设计类型。上下文切换中的运动语言必须与设计的其余部分相结合。如果不是这样，它看起来就会格格不入。想象一下光滑的地图设计中的弹跳感——这会很奇怪。我们在每个示例中都使用了不同的上下文切换技巧来支持网站的品牌。

样式还可以改变上下文切换动作在我们大脑中的注册方式。Lucas Bebber 的这个果冻菜单是一种比其他实现相同开始和结束状态的方法更令人难忘和独特的方式来记录项目去向和来自何处。以创造力和风格令人难忘总是一件好事。Lucas 展示这种相对简单技巧的一系列笔的总观看次数接近 320,000！

缓动的相对样式可以像您考虑调色板一样使用。大多数公司谨慎地使用强调色以平衡完整的调色板，并引起人们对某些关键点的注意

假设你网站上的所有缓动效果都更线性化，而你试图引起注意的一些内容会突然出现在屏幕上或弹跳出来。这使得它在重要性上脱颖而出。在之前的演示中，我唯一使用的弹跳缓动效果是在确认成功后对勾的动画。

tl.fromTo(check, 0.2, {
    scale: 0,
    rotation: -30
  }, {
    scale: 1,
    rotation: 0, 
    transformOrigin: "50% 50%",
    // ease out with back ease which has a single exaggerated bounce
    ease: Back.easeOut
    // begin according to a relative label
  }, "done+=7.1");

这仅仅是整个交互中这种逻辑的一个例子。

拖放

你通过**实践**学习得更多。这是一句古老的格言，但却是准确的。让我们运用这句古老的智慧，并结合上下文切换的理念应用到我们的UX模式中。

与其仅仅选择一个项目并在用户眼前进行过渡，当用户自己推动操作时，UI状态之间的互连性可以得到极大的加强。考虑一下Mary Lou (Manoela Ilic)在Codrops上制作的这些非常优秀的拖放交互。

抽屉会在用户完成选择后弹出并收起。如果没有用户记住他们将某个部件放置在那里，将任何部件移动到单独的隔间都会很困难——比它自行折叠或消失要困难得多。

布局

你可能会发现你对动画的热情不如我。即使没有动画，也可以实现无缝上下文切换，但可以通过更精心的对象布局来实现。最清晰的方法是简单地将元素彼此靠近放置。这里有一个例子，说明了如何在折叠导航中实现这一点。

这可能比听起来要复杂得多。在一个页面上拥有几十个甚至更多的链接和交互，保持下一个状态靠近上一个过渡需要事先计划，并且可能意味着设计重组。

任何良好的UX用户流程都会考虑用户浏览网站的相对轨迹。这种组织应该建立在类似于故事地图的基础上，在那里已经考虑到了这一点。仅使用布局实现上下文切换是最不推荐的，因为它在UI的各个部分变得更像拼图碎片时灵活性较差，并且由于缺乏流畅性，元素的布局变得更脆弱。

微妙的提示

从一个视图切换到另一个视图并不是唯一重要的上下文切换行为。一些行为象征着已经发生的事情和即将发生的事情。以下是一些小例子：

• 下拉选择更改页面上的其他上下文
• 加载状态
• 按钮被按下
• 登录被拒绝
• 表单已提交但尚未通过
• 正在保存某些内容

当发生这些类型的更改时，进行大幅更改可能没有意义，但仍然需要表明页面的状态已更改或正在过渡——本身就创建了一个上下文。考虑到我们之前讨论的技术，我们可能会问自己：

• 我们在过渡状态期间是否吸引了观众的注意力，或者它仅仅是到达最终状态的一种小手段？
• 这种过渡状态是否会被用于其他实例？它是否需要设计得足够灵活以适应多个位置和故障条件？
• 移动是否需要表达活动？例如，用户正在保存尚未完成的内容，在这种情况下，拟人化的“等待”将有助于传达这一点。

在实施设计之前提出这样的问题，有助于我们辨别如何与我们的受众进行无声交流。

---

同样，这些技术结合起来效果更佳。通过撰写这篇文章，我并不是建议人们只使用我概述的内容。恰恰相反，上下文切换是直观界面设计的一个基本组成部分，我们仅仅触及了冰山一角。详细说明每一个目的都是为了为人们提供一个起点，让他们能够进行实验。用户界面设计在重复时会变得乏味。在单调的隐藏和显示以及令人困惑的弹出窗口在屏幕上四处缩放之间，还有很多空间。在深思熟虑的设计与交互性相遇的地方，有创新的空间。