如何将 Sketch 与 InVision 集成以进行原型制作

已编辑 4 几天前 通过 ExtremeHow 编辑团队

SketchInVision原型设计集成设计工作流模型图测试用户体验工具

在数字设计领域，原型制作已成为设计过程中不可或缺的一部分。对于想要创建令人惊艳的原型的设计师来说，将 Sketch 与 InVision 集成是一个强大的组合。在本指南中，我们将引导您完成将 Sketch 与 InVision 集成以进行原型制作的过程。我们将详细解释每一步，以便您全面了解，并提供示例以帮助巩固您的知识。

理解 Sketch 和 InVision

Sketch 是许多设计师用于 UI/UX 设计的流行设计工具。它为创建数字产品（包括网站、应用程序等）提供了一个灵活而高效的平台。Sketch 以其基于矢量的设计功能而备受推崇，设计师可以轻松创建可缩放的高质量设计。

另一方面，InVision 是一个原型制作工具，允许设计师从静态设计中创建交互和可点击的原型。它通过提供一个设计师可以展示最终产品如何工作的平台来弥合设计与开发之间的差距。这是通过向设计中添加热点和交互来实现的，从而使利益相关者和开发人员更容易理解用户体验。

为什么要将 Sketch 与 InVision 集成？

将 Sketch 与 InVision 集成可以充分利用两者的优势。通过这样做，您可以利用 Sketch 的设计功能，并将其与 InVision 的原型功能相结合，创建一个连贯和交互的原型。此集成有助于简化工作流程，减少不必要任务上花费的时间，并增强团队成员之间的协作。

整合的先决条件

要求：

• 一台运行 macOS 的电脑（Sketch 仅在 macOS 上运行）
• 您的电脑上已安装 Sketch
• 一个 InVision 账户

逐步骤的集成过程

1. 在 Sketch 中设计您的界面

在与 InVision 集成之前，您必须完成在 Sketch 中的设计。确保您的设计已经打磨好并准备进行原型制作。使用画板来定义应用程序的不同屏幕和状态。确保所有组件都已到位，设计逻辑结构合理。

示例：

在 Sketch 中设计应用程序的登录屏幕：
- 创建一个 375x667 像素的画板。
- 添加用户名和密码的文本字段。
- 包括一个登录按钮。
- 使用符号对重复的组件（如按钮）以确保一致性。

2. 在 InVision 中创建新项目

要开始集成过程，您必须首先在 InVision 中创建一个项目。请按以下步骤操作：

• 登录您的 InVision 账户。
• 点击“+ 创建新”按钮。
• 在给定的选项中选择“原型”。
• 输入项目名称并选择原型类型（例如：桌面、移动或平板）。
• 点击创建以设置项目。

3. 安装 Sketch 的 Craft 插件

为了实现无缝集成，您需要安装 Craft 插件，这是一个将 Sketch 连接到 InVision 的工具。

• 访问 InVision Craft 插件页面。
• 下载 Craft Manager 应用程序。
• 打开 Craft Manager 并安装 Sketch 的 Craft 插件。

4. 在 Sketch 中启动 Craft 同步

安装 Craft 后，您将在 Sketch 中看到 Craft 工具栏。使用它将您的设计同步到 InVision。

• 打开 Sketch 应用并加载您的设计文件。
• 找到 Craft 工具栏并点击“同步”图标。
• 在提示时使用您的 InVision 凭证登录。
• 选择在 InVision 中创建的项目以同步您的画板。
• 点击“同步”将您的设计上传到 InVision。

5. 在 InVision 中管理画板和屏幕

一旦您的画板同步到 InVision，它们将在您的项目中显示为屏幕。您可以管理这些屏幕以创建交互原型。

• 登录您的 InVision 账户并进入您的项目。
• 打开项目以查看上传的屏幕。
• 根据需要重新排序、复制或删除屏幕以组织您的原型。

6. 使用热点添加交互性

要使您的原型具有交互性，您需要添加热点。它们是可点击的区域，用于模拟按下按钮或屏幕切换的交互。

• 在 InVision 中，选择您要添加交互的屏幕。
• 将鼠标悬停在屏幕上并点击“+ 新建热点”。
• 在您想要其交互的元素（如按钮）上方创建一个热点区域。
• 点击热点后，选择要转换到的目标屏幕。
• 设置手势（例如：点击、滑动）和转换动画。

7. 测试并分享您的原型

一旦您的原型完全设置了交互性，测试它是很重要的。仔细测试确保您的原型按预期工作并提供良好的用户体验。

要测试原型：

• 导航到屏幕并点击热点以模拟用户旅程。
• 注意任何问题或不一致并返回到 Sketch 如果需要做任何更改。

要分享原型：

• 点击 InVision 项目右上角的“分享”按钮。
• 自定义分享设置以设置您的利益相关者的权限和访问。
• 复制分享链接并将其分发给您的团队、利益相关者或客户。

常见问题的故障排除

问题：Craft 同步不起作用

如果 Craft 同步不起作用，请尝试以下操作：

• 确保 Craft Manager 是最新的。
• 检查您的互联网连接。
• 必要时重新安装 Craft 插件。

问题：画板没有更新

如果 InVision 中的画板没有反映您在 Sketch 中所做的更改，请确保：

• 您已将 Sketch 的最新版本同步到 InVision。
• 您的 Sketch 画板在画布区域内。

问题：热点不起作用

如果热点没有按预期工作，仔细检查以下内容：

• 确保交互元素上的热点创建正确。
• 验证目标屏幕和手势设置正确。

有效集成的技巧

• 通过明确的命名惯例保持设计文件井井有条。
• 根据反馈和测试定期更新原型。
• 利用 InVision 的评论功能进行高效协作。
• 在 Sketch 中使用符号以确保一致性和快速设计更新。

总结

将 Sketch 与 InVision 集成以进行原型制作是将您的设计变为现实的强大方式。通过遵循本指南中列出的详细步骤，您可以创建有效和互动的原型，以帮助可视化用户体验并简化设计过程。此集成可以促进设计师、开发人员和利益相关者之间更好的沟通，确保最终产品符合预期的设计愿景。

请记住根据反馈和测试见解定期迭代您的原型，以完善用户体验并创建成功的数字产品。

  分享本文

如果你发现文章内容有误, 您可以 请求更新