Sketch中的原型制作工具演练

今年早些时候，sketch 49 发布了，随之而来的是一些期待已久的原型设计功能。在今天的演练中，我将介绍您需要了解的有关 Sketch 原型制作的所有知识，从必须知道的快捷方式，一直到获得反馈以及与您的团队就设计和原型进行协作。

如果您想详细了解如何使用 Sketch，请尝试我们的免费Sketch 教程，其中包括关于原型设计的整章。

新的原型设计图标

随着原型功能的发布，Sketch 工具栏中出现了四个新图标。也许最重要的是热点，当它被选中时，将允许您在画板上放置一个交互式热点。接下来是链接到画板，它使您能够将热点链接并连接到目标画板或目标。Show Prototyping图标允许您在 Sketch 中打开和关闭黄色/橙色原型 UI。如果您仍在设计并且不想看到应用程序中的所有链接和热点，这非常好。最后是预览图标，它可以打开一个预览窗口，以便您可以在 Sketch 中使用您的原型。稍后我们将更详细地讨论这一点。

捷径

自然，Sketch 在发布原型功能时实现了一些键盘快捷键。就个人而言，我喜欢使用快捷方式——我希望你也会发现它们也很有用！

• 按H插入热点

• 按W添加链接 

• 按Control + F切换以隐藏/显示覆盖的黄色/橙色原型 UI

• 按Command + P打开预览

• 您还可以像使用任何其他设计元素一样在画板之间复制和粘贴热点（如果有链接，则带有链接）。

热点、链接和检查器选项卡

为了更好地了解热点和链接的工作原理，让我们在Inspector Tab中查看它们的属性。如果单击任何元素，您会注意到一个用于原型制作的小选项卡，其右侧带有一个加号 ( + )（与填充、边框和阴影完全相同）。如果你点击+，它会将元素变成一个热点，并且会自动让你为那个热点添加一个链接。如果您点击远离元素，您将失去热点。但是，如果您确实添加了链接，那么您将可以访问该热点的原型属性。

原型属性相对容易，因为 Sketch 原型还没有变得过于复杂或广泛。

首先是目标下拉菜单。这是热点链接到的位置，以及点击热点将带您进入的下一个位置。默认值是您已经选择的，但此时您可以：

• 将其更改为另一个船上（它们按页面组织）

• 通过选择无完全删除热点 

• 选择上一个画板。这意味着在原型流程中，它将带您回到您来自的画板。这对于“后退”按钮来说太棒了。 

关于 Inspector 中属性的最后一件事是Animations。这决定了单击热点时发生的转换。您在这里有几个选择：

• 没有动画

• ←从右侧动画画板

• ↑顶部动画画板

• →动画画板从左边

• ↓从底部动画画板

使用热点和符号

可以通过以下两种方式之一创建热点。您可以像手动绘制矩形或文本图层一样在画板上手动创建矩形。或者，您可以选择特定的图层或元素。任何设计元素都可以变成热点，包括符号！

行动中的热点

具体到符号时，可以在符号内放置热点，而不是使用一个符号实例作为热点。如果您在符号内有一个热点，它将在每个符号实例中重复出现，但您可以像任何其他符号属性一样覆盖它，例如更改图像、图标或文本。您还可以完全覆盖热点，有效地将其从符号中删除。通过这种方式，您可以重复使用符号，直到奶牛回家，而不必担心不必要的热点。

图层列表中的图标

Sketch 包含在原型设计中的一个很酷的小细节是图层列表中的一个图标。这与他们对Symbols和Exportable Slices的概念相同。各层之间存在热点图标使原型设计体验更易于理解。

滚动画板

此功能对于移动设计的较长页面特别有用！Sketch 会自动为更长的画板启用滚动。在下面的视频示例中，您将看到我在本演练中使用的虚拟 UI 的文章视图。您不必担心设置任何内容以使页面滚动。

设立“起点”

起点是原型开始的默认画板。默认情况下，没有，这意味着如果您选择预览原型，它将在预览时选择的画板上打开。 

一旦你准备好与某人分享，定义一个起点会更有用。要选择一个，请导航到所需的起始画板并在Preview中打开它。在预览窗口的顶部，选择小标志图标。从现在开始，每次预览原型时，它都会从那个起点画板开始。 

取消选择标志图标（再次将其变为灰色）会将其作为起点移除，但您可以拥有多个起点。选择另一个画板上的标志图标不会将其从任何其他画板上删除！ 

“您可能希望在流程的一开始就定义一个起点，但您也可以定义多个起点 — 当您构建包含许多画板的更复杂的原型时，该功能将非常有用，或者如果您只希望其他人查看您原型的特定部分。” — 草图文档

预览和分享您的原型

目前，您可以借助预览功能在 Sketch 中预览您的原型。我们已经讨论过几次了。Sketch 应用程序上会弹出一个窗口，您可以四处点击并确保已正确设置。 

还有另一种方法可以预览您的原型。如果您专门处理移动设计，您可以在 Sketch Mirror 中使用它。在您的iphone和ipad上，您都可以将您的设备连接到 Sketch。然后，您可以在适当的设置中更自然地预览原型。热点将自动在那里，互动和所有。

无论是 Sketch Mirror 还是预览窗口，都无法让您轻松与他人分享您的原型。因此，如果您希望将其发送给您的团队，或进行快速可用性测试，您必须通过 Sketch Cloud 进行。任何拥有链接的人都可以通过 Sketch Cloud 查看和使用原型。您不能像从应用程序中导出任何其他设计或元素一样导出原型。

当您将当前文档上传到 Sketch Cloud 时，您默认上传原型。它只是随文档一起导出。

如果您已定义起点，原型将放置在 Sketch Cloud 文档中其自己的原型部分下。这是您需要采取的唯一额外步骤，以确保您可以通过 Sketch Cloud 轻松访问您的原型。一旦您单击您的原型，它自然会从起点开始，并且将是交互式的，一切就绪！ 

共享原型链接，供任何人访问和使用。 

为了帮助协作，您可以让人们对您的原型发表评论（如果您在 Sketch Cloud 中启用了评论）。他们将能够在原型中的各个画板上为您留下评论。

原型模板

如需更多帮助，请查看 Sketch 的预制原型模板。 

它位于File > New from Template > Prototyping Template下 ，其中有一堆解释功能的旁注。 

结论

新的 Sketch 原型功能是基本的（例如，它只有四个动画属性）。但是，它应该使快速原型制作更加容易。您不再需要导出您的设计，然后将它们导入外部工具，例如 UXPin 甚至 Marvel。

我确实认为它可以改善不需要任何花哨或强大功能的设计师的工作流程。它应该无缝融入他们的工作流程；特别是如果他们已经在使用 Sketch Cloud。如果您需要快速快速地将一些东西放在一起以展示您的设计的用户流程，这肯定会成功。它还将帮助您的团队执行初始流程或可用性测试。在这一点上，我不认为它会改变生活，但我绝对可以看到自己使用 Sketch 的原型与客户分享即将到来的项目的 UI 设计。