Sketch 中的原型设计：你需要知道的一切

我们在 原型设计入门指南 中涵盖了所有基础知识，但在这里我们将更进一步！今天，我们将学习如何将你的静态画板转换为交互式原型，使用 叠加层 使其栩栩如生，使用智能动画添加运动效果，并在不离开 Sketch 的情况下预览它们。我们还将向你展示如何在 iOS 设备 上下文中测试你的原型，以便了解它在实际环境中的工作方式。

让我们开始原型设计吧！

入门

要在 Sketch 中开始原型设计，你需要一些画板。 在这种情况下，使用 画板模板 比自定义绘制的画板更容易。 这是因为模板可以帮助原型播放器了解视口的正确尺寸 — 这在处理更复杂的原型时会派上用场。 但更多相关信息稍后！

你可以找到大量内置的 Apple 和 Android 设备模板，你可以使用它们来入门。 只需按 A 并从检查器中的下拉菜单中选择它们即可。

如何添加交互

有了画板后，就可以开始链接它们了。 交互或链接将一个图层连接到你要转换到的画板 — 也称为目标。 这样，如果你在预览原型时单击、悬停或按下该图层，它会将你带到目标画板。

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

要删除交互，请单击“垃圾桶”图标，或者选择该图层并从菜单中选择 原型设计 > 从所选内容中删除链接。

自定义图层可见性

在设置交互时，你可以选择性地显示和隐藏图层、组和符号，当用户在原型中与它们交互时。 还有第三个选项，你可以在每次有人单击或点击它时切换显示和隐藏状态 — 非常适合设计开关或图标的不同状态。

你可以在检查器的“原型”选项卡中找到这些选项。 选择一个图层、一个组或一个符号，然后在“图层可见性”面板中选择 自定义。 然后，在“操作”选项中，选择你是否要显示、隐藏或切换元素。 如果你选择显示或隐藏你的图层，请在 触发于 菜单中选择什么交互将触发该操作。

自定义你的交互

你可以使用“交互”部分中的 目标 下拉菜单来选择要链接到的其他画板 — 包括“上一个画板”，它始终会将你带回到你上次查看的画板。 如果你要创建一个原型，其中可以从多个其他画板访问单个画板（例如，带有后退按钮的屏幕），这将非常有用。

使你的原型更逼真的关键部分是定义交互应该感觉如何。 你可以在检查器中的 动画 选项中找到多个选项可供选择，但你也可以选择不使用动画。

使用智能动画为你的原型带来运动效果

智能动画会查找具有匹配名称的图层的位置、大小、旋转或形状的变化，并对其进行动画处理。 你可以在多种情况下使用智能动画，例如，提供进度感或将导航菜单移入视图。 如果你需要一些灵感，请查看我们的指南以了解在你的原型中可以使用智能动画的四种方式。

要设置智能动画，请确保要动画处理的图层在多个画板上具有相同的名称。 按 W 以创建一个从一个画板到另一个画板的交互（你的交互可以从一个图层、热点或整个画板开始），然后在检查器的“原型”选项卡中选择 智能动画 作为动画类型。 然后，你可以自定义持续时间和缓动设置，以调整动画的时间，并使交互按你想要的方式工作。

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

在某些情况下，你可能希望交互的可点击区域大于或小于画布上的图层。 这就是热点的用武之地 — 一种专用的交互图层，可以自由调整大小和位置

热点允许你在设计的任何部分上绘制一个目标，并将其链接到一个画板。 你可以通过“插入”菜单添加热点，或按 I 开始直接在画布上绘制一个热点（确保你没有选择任何图层）。

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

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

如何使用叠加层添加动态

你可以使用叠加层（一种特殊的画板）创建菜单、模式、消息和许多其他 UI 元素。

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

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

如何在悬停、按下和切换时触发叠加层

默认情况下，当您点击/单击触发图层时，叠加层会出现，但您可以根据需要将交互类型更改为悬停或按下。

• 例如，当您原型制作工具提示或下拉菜单时，悬停非常有用。
• 当您需要额外的信息仅在按下并按住元素时出现时，按下触发器非常有用 — 例如，当您想要模拟按住图像的缩略图以预览更大的图像的动作时。
• 最后，使用切换选项，您可以随时点击/单击它来显示或隐藏叠加层 — 例如，在设计弹出菜单时非常方便。

一旦您创建了交互，您会在检查器的“原型”选项卡中找到所有这些选项。在下面的视频中，我们将逐步讲解所有内容，以便您可以一起练习。

设置起始点

起始点是标记，可让您指定原型应从哪个画板开始播放。要设置起始点，请按住 Control 键单击画板，然后从菜单中选择设置为起始点。当您看到图标出现在画板名称旁边时，表示设置成功。

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

创建滚动区域和原型

您可以创建滚动原型，或者使画板中的特定区域沿您想要的任何方向滚动 — 这对于卡片或交互式地图等内容非常有用。

创建滚动原型

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

一旦您将模板放置在画布上，您所要做的就是更改画板的高度。现在，每当您预览原型时，您都会获得流畅的滚动效果。

如果您希望您的图层在原型预览中保持静态，即使您滚动其余内容，您也可以选中“原型”选项卡中的滚动时固定位置框。

创建滚动区域

当您想使设计的特定部分可滚动时，例如地图或一行卡片，滚动区域非常有用。您可以使这些区域内的元素沿您想要的任何方向滚动。要使区域可滚动，只需选择您想要滚动的元素，转到检查器的“原型”选项卡并点击设为可滚动。Sketch 将自动识别方向并使您的区域垂直、水平或同时滚动。然后，使用橙色手柄调整滚动区域，以准确显示您想要的内容。

我们建议将滚动区域与符号一起使用，这将使编辑滚动区域内的内容更容易。请查看下面的视频，了解如何执行此操作的详细演练。

在 Sketch 中预览您的原型

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

要在 Mac 应用程序中播放您的原型，请单击工具栏中的“预览”按钮以打开“预览”窗口。您的原型将从当前选定的画板开始，除非您在其他地方设置了起始点。在“预览”窗口的顶部，您将看到一个返回按钮，该按钮会将您带到上一个画板。您可以通过从窗口顶部的下拉菜单中选择它来导航到特定的画板。查看我们的文档以了解更多关于如何在 Web 应用程序和 iPhone 应用程序上预览您的原型的信息。

分享您的原型

您可以在Web 应用程序上分享您的原型，任何拥有链接的人都可以从任何浏览器或设备查看和播放它们。您所要做的就是设置一个起始点并保存您的文档，我们将在 Web 应用程序中为您生成该原型预览。您将在 Web 应用程序“文档详细信息”中的视图下找到您的原型。

要从 Web 应用程序共享原型，请打开原型并单击工具栏右上角的复制链接图标。从这里您还可以切换复选框以隐藏热点和提示，和/或工具栏和导航栏 — 这非常适合与客户分享，以便他们可以完全专注于原型。您也可以直接从 Mac 应用程序的“预览”中共享原型。点击“共享”按钮，选择您想要隐藏或显示热点提示和导航项目。

您还可以启用评论，让观看者直接在原型播放器中留下反馈 — 非常适合与同事协作或立即从客户那里获得反馈。要查找更多共享选项，请单击顶部导航栏中的⋯。

在上下文中测试您的 iOS 设计

如果您正在处理移动界面，那么没有比在您为其设计的设备上测试它们更好的方法了。使用iOS 应用程序，您可以像在 Web 应用程序中一样简单地预览您的原型。当您点击以查看一个原型时，您可以通过点击点击目标来与其交互，以转换到另一个画板。准备好退出后，点击并按住几秒钟。

就这样！希望您很高兴开始您的下一个原型设计项目。如果您需要任何帮助或对我们有反馈，您可以在我们的社区论坛中找到我们。