技术文章

过去，我们讨论过如何开始原型设计，但现在我们将更进一步。今天，我们将学习如何将静态画板转变为交互式原型，使用叠加层使它们流行起来，并在不离开 Sketch 的情况下预览它们。我们还将向您展示如何在iOS 设备上测试您的原型，以便您可以了解它在野外的工作方式。

让我们开始制作原型吧！

不熟悉原型设计？我们在这篇文章中回答您所有紧迫的问题。

入门

要开始在 Sketch 中制作原型，您将需要一些画板。在这种情况下，使用画板模板比自定义绘制的模板更容易。这是因为模板可以帮助原型玩家了解画板的正确尺寸 - 这在处理更复杂的原型时会派上用场。但稍后会详细介绍！

您会发现大量内置 Apple 和Android设备模板可用于入门。只需按下A并从检查器的下拉列表中选择它们即可。

不确定如何填充您的画板？看看这些线框示例。

如何添加互动

有了画板后，就可以开始链接它们了。交互或链接将图层连接到要过渡到的画板 - 也称为目标。这样，如果您在预览原型时单击该图层，它会将您带到目标画板。

您可以使用画板中的任何图层来链接画板。要创建交互，请选择图层并按 I。您还可以前往检查器中的“原型”选项卡，然后单击“创建交互”。现在，您将看到光标附加了一个未放置的链接，并且您会注意到我们将在悬停时突出显示任何可链接的画板或图层。剩下要做的就是单击您想要链接到的画板，然后就完成了！

定制您的互动

设置交互后，您可以为其定义过渡动画。您将在检查器的“动画”部分中找到多个选项可供选择，但您也可以选择不使用动画。

如果您希望图层在原型预览中保持静态，即使您滚动浏览其余内容，也可以选中“动画”部分正下方的“单击后保持滚动位置”框。

在检查器顶部，您还可以使用“目标”下拉列表来选择要链接到的不同画板 - 包括“上一个画板”，它总是会带您回到您正在查看的上一个画板。如果您要创建一个原型，其中可以从多个其他画板访问单个画板（例如带有后退按钮的屏幕），则此功能非常有用。

热点：它们是什么以及何时使用它们

在某些情况下，您可能会发现向图层添加交互并不能提供所需的结果。例如，如果您希望图标或菜单项的可点击区域大于其所在的图层，则交互无法做到这一点 - 但热点可以。

热点允许您在设计的任何部分绘制目标并将其链接到画板。您可以通过“插入”菜单添加热点，或按 H 开始在画布上绘制热点。

您还可以通过选择具有交互的图层并单击检查器中的“创建热点”图标，将交互转换为热点 - 如果您已经连接了一堆画板，但决定稍后需要更改点击区域，那么这很方便。

热点非常有用，因为您可以将它们放置在符号内，然后您可以在其中覆盖目标目的地。这样，您可以重复使用符号，但每次都更改目标目的地。您还可以使用此行为来隐藏热点，方法是在覆盖面板中的“热点”下选择“无” 。

专业提示：您的画布可能会因所有这些交互和热点而变得非常繁忙。 使用快捷方式或从菜单栏中 ^F选择 “视图”>“显示原型”来打开和关闭它们。

如何使用叠加层增添活力

您可以使用Overlays（一种特殊类型的画板）创建菜单、模式、消息和许多其他 UI 元素。

要将现有画板转换为叠加层，请选择它，转到检查器的“原型”选项卡，然后将画板类型从“屏幕”切换为“叠加层”。您还可以创建指向小于父画板的任何类型图层的链接 - 我们将在其周围创建一个画板并将其设置为覆盖层。

您可以堆叠多个叠加层，让它们相互替换，并为每个叠加层设置动画。如果您想了解有关叠加的更多信息，请查看我们的综合指南。

设置起点

起始点是标记，可让您指定原型应从哪个画板开始播放。要设置起点，请按住 Control 键单击画板，然后从菜单中选择设置为起点。当您看到sketch.com/images/icons/mac/monochrome/11x11/flag.filled.svg" alt="起点" title="起点" data-hs-processed="true" style="box-sizing: border-box; border: 0px none; font: inherit; margin: 0px; padding: 0px; vertical-align: 0px; display: inline-block;"/>画板名称旁边出现一个图标时，您就会知道它起作用了。

通常您需要在流程的开始处设置一个起始点。但是，设置多个起始点可能非常有用 - 例如，如果您正在使用许多画板构建复杂的原型，或者您只想让别人查看原型的特定部分。

注意：对于您设置的每个起点，Sketch 都会在 Web 应用程序中生成一个新原型。

如何创建滚动原型

在 Sketch 中创建滚动原型只有一条黄金法则：确保使用模板。如果您使用自定义绘制的画板，它们可能会缩小以适应视口的高度，而不是按照您期望的方式滚动。这是因为 Sketch 需要预设的“屏幕尺寸”来了解您的内容何时超出其范围。

将模板放置在画布上后，您所要做的就是更改画板的高度。现在，每当您预览原型时，您都会获得流畅的滚动效果。请记住，如果您想让原型的任何元素保持静态，只需选中“维护滚动位置”框即可。

sketch" style="box-sizing: border-box; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.75rem; line-height: 2.125rem; font-family: "Marfa Mono", "SF Mono", "Source Code Pro", Consolas, Menlo, monospace; margin: 3.75rem 0px 1.25rem; padding: 0px; vertical-align: baseline; letter-spacing: -1px; text-wrap: wrap;">在 Sketch 中预览您的原型

创建原型后，下一步就是预览它，看看您的流程是否有效以及过渡是否有意义。您可以直接在Mac 应用程序、网络应用程序中预览原型（您可以在其中与客户和同事共享原型），也可以使用我们的iOS 应用程序在您的 iOS 设备上预览原型。

要在 Mac 应用程序中回放原型，请单击工具栏中的“预览”按钮以打开“预览”窗口。您的原型将从当前选定的画板开始，除非您在其他地方设置了起点。

在预览窗口的顶部，您将看到一个后退按钮，可将您带到上一个画板。您可以通过从窗口顶部的下拉菜单中选择特定的画板来导航到它。

点击目标：当您单击或点击时，这些指示器将出现在预览窗口中您添加交互和热点图层的位置。

分享您的原型

除了在 Sketch 中预览之外，您还可以在网络应用程序上共享原型，任何知道链接的人都可以从任何浏览器或设备查看和播放它。您所要做的就是设置一个起点并保存您的文档，我们将在网络应用程序中为您生成原型预览。