新增:智能动画 — 为您的原型带来动感。 了解更多

跳过导航

使用叠层

上次更新于 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. 当您覆盖单个叠层的默认设置时,您可以恢复为默认设置 - 或将您的覆盖设置为新的默认设置(并更新该叠层的所有其他实例)
    • 重置叠层位置 逆时针箭头:清除当前设置并恢复叠层的默认值
    • 将叠层位置用于此画板的所有交互 水平矩形向上箭头:导致来自此目标的设置覆盖叠层的默认值。

如果您在检查器中“原型”选项卡处于活动状态时选择一个将叠层作为目标的图层,则叠层的低不透明度版本将出现在画布上,以帮助您调整其位置 - 无论是使用检查器控件还是直接拖动它。

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

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

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

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

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

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