使用 Sketch 中的 Overlays 的好处

我们最近推出了 Overlays，这是一项强大的功能，用于在 Sketch 中创建动态原型。今天，我们将深入探讨使用 Overlays 的好处，并介绍一些用例来激发您的创造力。

让它流行起来！

但首先...

什么是 overlays？

overlay 是指出现在现有 UI 之上的任何类型的交互或消息的总称。 这些可以是任何东西，从 iOS 风格的共享表到弹出式警报，甚至是需要关注的交互阻止模式。

在 Sketch 中，Overlays 是一种 画板，当您预览原型时，它会出现在现有画板之上。

在 Sketch 中使用 Overlays 的好处

Overlays 已经存在于日常设计中很长时间了，那么在 Sketch 中使用它们有什么特别之处呢？ 好吧，我们真的认真考虑了 这个 用户体验。 Overlays 是一项很棒的功能，但当您使用大量模式和交互时，设计和保持井井有条非常复杂。 我们不想仅仅引入另一个笨拙的 overlays 工具，然后寄希望于最好的结果。 相反，我们坐下来思考常见的陷阱以及如何解决它们。

让我们仔细看看这些解决方案。

制作了一个 overlay，制作了所有 overlay

使用 Sketch，overlays 始终是 overlays。 女孩，什么？ 别担心，这不是一些超现实主义的独白！ 我们的意思是，您不必每次都指定某些东西是 overlay。 相反，您可以将任何画板变成 overlay，并一次性定义所需的设置——包括位置、视觉处理和交互。 并且由于您选择的任何设置都将保留在该画板上，因此您每次链接到该 overlay 时都不需要再次输入它们。

这是一个例子

将它们卡入到位——或者不卡入

无缝的 overlay 设计完全是关于定位的，因此我们希望确保您可以将它们放置在您想要的任何位置，而不会使该过程变成额外的工作。 使用 Sketch，通过相对于图层或屏幕对齐它们，可以轻松保持 overlay 的一致性。 您可以使用我们的空间控件直接在画布和检查器中操作它。

那么这是如何工作的呢？ 将 overlay 与屏幕对齐时，您将有九个锚点可供选择。 但这还不是全部！ 您可以使用偏移量进一步自定义位置，这非常适合设置边距。

相对于图层对齐对于屏幕的特定区域的小弹出窗口或模式非常有用。 例如，语音气泡或提示。 当您选择相对于图层对齐时，您将能够使用与以前相同的控件，但它们将忽略屏幕的其余部分，而专注于所选的触发图层。

这是一个例子

在交互级别上工作

您知道我们刚刚讨论的所有优点吗？ 您可以在交互级别上做同样的事情。 因此，您可以编辑同一个 overlay 并重复使用它，而不是仅仅复制 overlays 以添加不同的放置位置。 您可以专门为该特定交互定制从对齐方式到偏移量到锚点的所有内容。

这是一个例子

全是链条，没有堆栈

overlays 的一大优点是它们允许用户完成一系列交互，而无需离开他们所在的屏幕。 但是当涉及到原型设计时，对这些交互进行建模可能会变得笨拙。 通常，您最终会得到总是锁定在相同位置的交换 overlays。 或者更糟。 您最终会得到一堆堆叠在彼此之上的屏幕——并且之前的弹出窗口的碎片从每个角落伸出来。

使用 Sketch，不仅可以非常轻松地堆叠 overlays，还可以将它们链接起来。 通过将一个交互链接到另一个交互，您可以选择希望新 overlay 出现在哪里，以及当用户触发下一个交互时是否应该关闭先前的 overlay。 现在这就是我们所说的流畅原型制作 💅

这是一个堆叠的例子

这是一个链接的例子

符号 🤝 Overlays

如果在 Sketch 和设计中有一件事是给定的，那就是没有任何东西会保持不变。 如果您习惯使用 符号，您可能熟悉 智能布局——这是一种很棒的工具，用于教您的符号如何适应画板或图层的变化。 但我们相信好事成三，就像三个火枪手、首发宝可梦或飞天小女警一样。 现在，您可以将符号 + 智能布局 + Overlays 三人组添加到阵容中。

在上面的示例中，我们看到了如何使用符号覆盖来在状态之间切换。 但是，如果我们希望更改这些状态怎么办？ 使用智能布局，我们可以为我们的符号做好准备，同时牢记原型 overlays 的整体尺寸。

这是一个例子

这就是全部！ 现在您可以将您的 原型设计 游戏提升到新的水平。 有关在 Sketch 中使用 Overlays 的更深入信息，您可以查看我们的 介绍帖子 或浏览我们的 文档。

在 Sketch 中见！