跳过导航

使用叠加

上次更新于 2024 年 5 月 7 日
4 分钟阅读

叠加是一种画板,当您预览原型时,它会显示在画板的顶部。 您可以使用叠加在原型中创建菜单、模式窗口、消息和许多其他常见的界面元素。

创建叠加

创建叠加

观看课程

您可以通过两种方式创建叠加

  1. 选择一个现有的画板,然后在检查器的“原型”选项卡中选择“叠加”作为画板类型。 从那里,您还可以设置其默认位置、动画属性以及背景行为和样式。 您还可以在指向叠加的链接或热点上覆盖这些设置。
  2. 创建一个链接或热点到画板外部且小于其父图层的任何类型的图层或符号。 Sketch 会假定您想将其用作叠加,并将围绕它创建一个画板并将其设置为您的叠加。

叠加选项

叠加选项

观看课程

您可以使用检查器的“原型”选项卡中的属性,为定义为叠加的任何画板设置默认行为

An annotated image showing Overlays settings for prototyping

Sketch 中用于原型设计的叠加设置

  1. 屏幕/叠加:画板类型(必须设置为叠加)
  2. 外部交互:确定叠加后面的内容会发生什么。 从三种类型的交互中选择未被叠加覆盖的区域
    • 无:当您单击或点击叠加外部时,什么也不会发生
    • 关闭叠加:如果希望在单击或点击外部时关闭叠加,请启用它
    • 允许全部:未被叠加隐藏的任何链接或热点都将保持活动状态
  3. 相对对齐到:确定画板在您定位它时将显示为叠加的位置,它可以是
    • 屏幕:始终显示在相同的位置,由底层画板的水平和垂直偏移量决定
    • 图层:显示在相对于定位叠加的图层的位置。 使用布局预览控件设置其位置并指定偏移量
  4. 偏移量:相对于画板或图层应用于叠加的水平和垂直偏移量
  5. 背景样式:确定叠加后面的样式,例如填充或模糊。 例如,设置模糊会导致叠加后面的画板上的任何内容都显得模糊
  6. 创建交互:允许您从画板创建进一步的交互。 这些与任何其他交互选项相同,但添加了一个关闭叠加选项

更改叠加的默认选项将更新指向它的任何现有链接或热点(即,如果您没有覆盖该特定链接或热点的默认设置)。

定位叠加

观看课程

任何链接或热点都可以定位叠加,您可以为链接或热点设置特定选项以覆盖默认的叠加行为

An image showing the settings when targeting Overlays from Links or Hotspots

用于定位叠加的链接或热点的设置

从链接或热点添加交互时,您可以设置以下其他选项

  1. 滚动时固定位置:固定源图层的位置——如果您创建了滚动原型,它不会滚动
  2. 目标和预览:具有所有画板的下拉列表,因此您可以更改目标,并显示当前定位的画板的预览。
  3. 动画:设置哪种动画将叠加带入原型。
  4. 关闭现有叠加:选中此选项可在显示此特定叠加时关闭所有其他活动叠加。
  5. 当您覆盖单个叠加的默认设置时,您可以恢复为默认设置——或将您的覆盖设置为新的默认设置(并更新该叠加的所有其他实例)
    • 重置叠加位置 逆时针箭头清除当前设置并恢复叠加的默认值
    • 将叠加位置用于此画板的所有交互 水平箭头向上矩形导致来自此目标设置覆盖叠加的默认值。

如果您在检查器中激活“原型”选项卡时选择定位叠加的图层,则叠加的低不透明度版本将出现在画布上,以帮助您调整其位置——可以使用检查器控件或直接拖动它。

使用悬停、按下和切换触发器

默认情况下,当您点击/单击触发图层时,叠加层会显示,但您可以在检查器的“原型”选项卡中更改触发叠加层的交互类型。 选择触发图层后,在检查器中的“交互”标题下,您可以从“触发”菜单中的以下选项中进行选择

  • 点击/单击 — 这是所有新交互的默认选项。 单击或点击将显示叠加。
  • 悬停 — 叠加层仅在光标悬停在触发图层上时才会出现。
  • 按下 — 叠加层仅在按下触发图层时才会出现。

此外,您可以更改“交互”菜单下的“操作”选项以切换,以便在您点击/单击它时显示或隐藏叠加。

如何为叠加分配悬停触发器