技术文章

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

在 Sketch 中，叠加是一种画板，当您预览原型时，它会显示在现有画板的顶部。

相关： 叠加指南——一种使原型更具交互性的强大方法

sketch" style="box-sizing: border-box; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.75rem; line-height: 2.125rem; font-family: "Marfa Mono", "SF Mono", "Source Code Pro", Consolas, Menlo, monospace; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; margin: 3.75rem 0px 1.25rem; padding: 0px; vertical-align: initial; letter-spacing: -1px; text-wrap: wrap;">在 Sketch 中使用叠加的好处

叠加长期以来一直是日常设计的一部分，那么是什么让在 Sketch 中使用它们如此特别呢？嗯，我们确实考虑过这个产品的用户体验。叠加是一个很棒的功能，但当您使用大量模态和交互时，它们的设计和保持组织可能非常复杂。我们不想引入另一个笨重的叠加工具，并希望得到最好的结果。相反，我们坐下来思考常见的陷阱以及如何解决它们。

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

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

在 Sketch 中，叠加是一种画板，当您预览原型时，它会显示在现有画板的顶部。

相关： 叠加指南——一种使原型更具交互性的强大方法

sketch" style="box-sizing: border-box; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.75rem; line-height: 2.125rem; font-family: "Marfa Mono", "SF Mono", "Source Code Pro", Consolas, Menlo, monospace; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; margin: 3.75rem 0px 1.25rem; padding: 0px; vertical-align: initial; letter-spacing: -1px; text-wrap: wrap;">在 Sketch 中使用叠加的好处

叠加长期以来一直是日常设计的一部分，那么是什么让在 Sketch 中使用它们如此特别呢？嗯，我们确实考虑过这个产品的用户体验。叠加是一个很棒的功能，但当您使用大量模态和交互时，它们的设计和保持组织可能非常复杂。我们不想引入另一个笨重的叠加工具，并希望得到最好的结果。相反，我们坐下来思考常见的陷阱以及如何解决它们。

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

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

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

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

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

在交互层面上进行工作

你知道我们上面讨论的所有这些令人惊叹的事情吗？您可以在交互级别上做同样的事情。因此，您可以编辑相同的叠加层并重复使用它，而不是仅仅为了添加不同的位置而复制叠加层。您可以针对特定交互定制从对齐到偏移再到锚点的所有内容。

全链，无堆栈

叠加层的一大优点是它们允许用户完成一系列交互，而无需离开他们所在的屏幕。但在原型设计方面，对这些交互进行建模可能会变得很笨拙。通常，您最终会得到始终锁定在同一位置的交换覆盖层。或者更糟。你最终会看到一堆屏幕叠在一起——之前弹出的窗口的一部分从每个角落伸出。

使用 Sketch，不仅可以非常轻松地堆叠叠加，还可以将它们链接起来。通过将一个交互链接到另一个交互，您可以选择希望新叠加层出现的位置，以及当用户触发下一个交互时是否应关闭前一个叠加层。这就是我们所说的时尚原型设计💅

下面是一个堆叠的例子：

符号🤝 叠加

如果说素描和设计中有一件事是既定的，那就是没有什么是一成不变的。如果您习惯使用符号，您可能熟悉智能布局- 这是一个很好的工具，可以教您的符号如何适应画板或图层更改。但我们相信好事成三，比如三剑客、新手神奇宝贝或飞天小女警。现在，您可以将符号 + 智能布局 + 叠加三重奏添加到阵容中。

在上面的示例中，我们看到了如何使用符号覆盖在状态之间交换。但是如果我们希望对这些状态进行更改怎么办？通过智能布局，我们可以准备符号以进行操作，同时牢记原型覆盖层的整体尺寸。