技术文章

了解最新技术文章

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

原型设计中如何使用叠加层

时间:2023-09-21   访问量:1024

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

在本页


创建叠加层

有两种方法可以创建叠加层:

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

  2. 您可以创建一个热点或链接到比父画板小的任何类型的图层(例如符号),我们假设您想要将其用作叠加层,在其周围创建一个画板并将其设置为叠加层为你。


叠加选项

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

直接在 Mac 应用程序中显示叠加设置的图像

Mac 应用程序中叠加层的默认设置(v92 2022 年 9 月)

  1. 屏幕/覆盖- 画板类型,必须设置为覆盖。

  2. 外部交互- 决定覆盖层后面发生的情况,覆盖层未覆盖的区域有三种类型的交互:

    • - 当您在叠加层外部单击/点击时,不会发生任何事情。

    • 关闭叠加层- 启用此选项将在您单击或点击叠加层外部时关闭叠加层。

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

  3. 相对对齐- 这决定了当您定位画板时,画板将在哪里显示为叠加层,它可以是:

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

    • 图层- 显示在相对于针对叠加层的图层的位置。您可以使用布局预览控件来指定确切位置,还可以根据需要指定偏移量。

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

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

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

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

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

该图显示了在 Mac 应用中从链接或热点定位叠加层时的设置

直接在 Mac 应用程序中针对叠加层的链接或热点的设置(v 2022 年 7 月 90 日)

上面介绍了基本的叠加选项,但是当您从链接或热点设置交互时,您可以设置以下附加选项:

  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;"/>- 这将推送此目标的设置以覆盖叠加的默认值。

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


上一篇:原型制作中如何添加热点

下一篇:原型制作中如何创建滚动原型

发表评论:

评论记录:

未查询到任何数据!

免费通话

24小时免费咨询

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

免费通话

微信扫一扫

微信联系
返回顶部