Sketch叠加层指南

借助叠加层，创建更丰富、更具交互性的体验比以往任何时候都更简单。它们易于使用，但我们提供了大量自定义选项，因此您可以使您的原型感觉更逼真。

 

 

 

覆盖层到底是什么？

叠加层是显示在现有 UI 之上的任何类型的交互或消息的总称。一些示例包括 iOS 样式的共享表、弹出警报，甚至是需要注意的交互阻止模式。换句话说，叠加层可以有各种形状和大小。

 

 

 

如何创建叠加

通过将检查器拆分为两个选项卡：“设计”和“原型”，使原型制作过程更加顺畅。这意味着您可以在自己的部分找到所需的所有原型设置，包括叠加层。

 

有两种不同的方法可以创建叠加层。一种选择是选择目标画板，前往 原型 检查器的选项卡，然后单击 叠加.

 

然后，您可以像创建任何其他图层一样创建交互。点击 ，选择要触发交互的图层，然后选择 叠加层.当您预览原型时，它将显示在画板顶部！当然，您也可以通过绘制热点来添加交互。

 

 

 

或者，您可以创建直接指向比要从中链接的画板小的任何图层的链接。由于它较小，我们假设您希望将其设为叠加层，因此我们将围绕它自动创建一个画板并为您设置。

 

 

如何自定义叠加

设置叠加层后，您可以使用一组强大的自定义选项（从通用和一次性定位到背景样式和交互）使其独特而逼真。

 

1.精确定位

您可以使用以下两种方法之一准确自定义叠加层在原型中的显示位置：

 

• 相对于屏幕对齐 — 您的叠加层将显示在视口中的固定位置。对于需要保留在屏幕中央的重要警报或警告消息，即使您已在预览中向下滚动，这是一个很好的设置。它也非常适合在移动应用程序中拉起键盘。
• 相对于图层对齐 - 您正在设置叠加相对于链接到它的图层的位置。当您希望叠加层显示在交互附近（例如弹出搜索菜单）时，或者如果您希望叠加层保留在屏幕上并与其余内容一起滚动时，这尤其有用。

 

通过将叠加层放置在画板上的特定点或触发交互的图层上，您可以创建一些真正身临其境的体验。例如，您可以相对于符号定位叠加。然后，即使覆盖更改了该符号的大小，叠加也将始终保持在同一相对位置。我们将在以后的帖子中更详细地探讨这一点——敬请期待！

 

您的叠加层仍然没有达到您想要的位置吗？没关系。您可以通过为叠加层提供偏移来定义叠加层在画布上的确切位置。

 

2.偏移量的力量

借助偏移，您可以进一步自定义叠加在画板上的显示位置，因此您可以确保它们在任何情况下始终准确地显示在您想要的位置。您可以通过选择触发交互的图层，然后将叠加预览拖动到您希望其在画布上显示的位置来控制偏移。

 

 

或者，您可以使用检查器中的控制 - 设置右侧的位置，然后根据该点调整水平和垂直偏移。检测器的偏移控制非常适合精细颗粒定位。

 

3.设置默认位置

您还可以在检查器中定义叠加层的默认位置，这对于始终需要显示在屏幕底部的触摸屏键盘等内容非常有用。只需选择叠加本身，然后使用检查器调整偏移。从那时起，每当您创建与该叠加层的交互时，它都会默认为该位置。

 

但你猜怎么着？您甚至可以一次性覆盖该默认值。因此，如果您需要菜单叠加显示在一个特定屏幕上的不同位置，则可以这样做。只需选择触发该交互的图层或热点，然后将叠加拖到画布上的新位置，或使用检查器中的控制。

 

如果覆盖默认位置，则可以使用检查器中的控制将其设为新的默认位置，或将其恢复到以前的默认位置。

 

4.堆叠叠加层

想要在叠加层之上叠加吗？没关系！您可以将叠加层堆叠在一起，即使它们的位置不同。例如，您可以将键盘层堆叠在搜索菜单的顶部。

 

 

您还可以设置叠加层，以便在出现时关闭所有现有叠加层。只需在检查器中选择“关闭现有叠加”复选框即可。

 

除了定位，还有很多样式选择。例如，要强调叠加层，您可以在背景中模糊或调暗原型。

 

想要限制叠加层出现时的交互？在检查器中的多个交互设置之间进行选择。例如，您可以决定是否可以在弹出菜单外部单击以将其关闭。您也可以完全阻止交互。

 

但是，如果您愿意，您仍然可以允许单击和滚动 - 即使显示叠加层也是如此。对于不需要立即关注的低优先级警报或通知，这是一个很好的选择。