技术文章

了解最新技术文章

当前位置:首页>技术文章>技术文章
全部 111 常见问题 0 技术文章 111

sketch中如何使用叠加层?

时间:2024-02-22   访问量:1017

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


创建叠加层

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

  1. 选择现有的画板,然后在检查器的“原型”选项卡中选择“叠加”作为画板类型。您还可以从那里设置其默认位置、动画属性以及背景行为和样式。您还可以在指向叠加层的链接或热点上覆盖这些。

  2. 在小于父画板的任何类型的图层(例如符号)上创建热点或链接。Sketch 会假设您想将其用作叠加层,并将在其周围创建一个画板并将其设置为叠加层。

叠加选项

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

带注释的图像显示了原型设计的叠加设置

Sketch 中原型设计的叠加设置

  1. Screen / Overlay:画板类型(必须设置为Overlay)

  2. 外部交互:确定覆盖层背后发生的情况。对于覆盖层未覆盖的区域,从三种类型的交互中进行选择:

    • 无:当您在叠加层外部单击或点击时,不会发生任何事情

    • 关闭叠加层:如果您希望在单击或点击叠加层外部时关闭叠加层,请启用它

    • 全部允许:未被叠加层隐藏的任何链接或热点将保持活动状态

  3. 相对对齐:确定当您定位画板时,画板将在何处显示为叠加层,可以是:

    • 屏幕:始终显示在相同位置,由与底层画板的水平和垂直偏移确定

    • 图层:显示在相对于覆盖层的图层的位置。使用布局预览控件设置其位置并指定偏移量

  4. 偏移:相对于画板或图层应用于叠加的水平和垂直偏移量

  5. 背景样式:确定叠加背后的样式,例如填充或模糊。例如,设置模糊将导致覆盖层后面的画板上的任何内容都显得模糊

  6. 创建交互:允许您从画板创建更多交互。这些与任何其他交互选项相同,但添加了“关闭叠加”选项

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

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

显示从链接或热点定位叠加层时的设置的图像

针对叠加层的链接或热点的设置

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

  1. 滚动时修复位置:修复叠加层的位置 - 如果您创建了滚动原型,则它不会滚动

  2. 目标和预览:具有所有画板的下拉菜单,以便您可以更改目标,并显示当前目标的预览。

  3. 动画:设置哪个动画会将叠加层带到原型上。

  4. 关闭现有叠加层:选中此选项可在出现此特定叠加层时关闭所有其他活动叠加层。

  5. 当您覆盖单个覆盖层的默认设置时,您可以恢复为默认设置 - 或将您的覆盖设置为新的默认设置(并更新该覆盖层的所有其他实例):

    • 重置覆盖位置sketch.com/images/icons/mac/monochrome/17x17/arrow.counterclockwise.svg" alt="逆时针箭头" title="逆时针箭头" style="box-sizing: border-box; border: 0px none; font: inherit; margin: 0px; padding: 0px; vertical-align: middle;"/>清除当前设置并恢复覆盖的默认值

    • 对与此画板的所有交互使用叠加位置sketch.com/images/icons/mac/monochrome/17x17/rectangle.horizontal.arrow.up.svg" alt="矩形水平向上箭头" title="矩形水平向上箭头" style="box-sizing: border-box; border: 0px none; font: inherit; margin: 0px; padding: 0px; vertical-align: middle;"/>导致此目标的设置覆盖叠加的默认值。

如果您在检查器的“原型”选项卡中选择了一个针对相对叠加的图层,您将看到这一点,并且能够直接在画布上调整它。


上一篇:sketch中如何添加热点?

下一篇:sketch中如何创建固定元素?

发表评论:

评论记录:

未查询到任何数据!

免费通话

24小时免费咨询

请输入您的联系电话,座机请加区号

免费通话

微信扫一扫

微信联系
返回顶部