轻松制作原型 - InVision Studio 教程

除非您在 2018 年上半年睡着了，否则您可能敏锐地意识到交互式设计社区在 InVision Studio 应用程序发布之前的狂热期待。 InVision 以其 Sketch 和 Photoshop 插件套件（如 Craft）而闻名，并且是快速将静态界面设计转变为可点击和可共享原型的首选平台。 去年，他们迈出了大胆的一步，宣布开发自己的数字设计软件，以与 Sketch 和 Figma 等行业宠儿竞争。

该产品被宣传为革命性的，并为无缝的设计到原型工作流程、复杂的交互功能、令人惊叹的过渡动画做出了一些重要的承诺——而且它将是免费的。 InVision 发布了一些非常令人兴奋的预告视频和演示，以吸引设计师。 随着最初的 beta 版本在年初被推迟了几次以上，人们的预期进一步增加。

随着越来越多的设计师开始使用该软件，越来越多的教程和指南正在弹出来演示应用程序界面设计工具的基础知识。 InVision 还创建了一些自己的内容，以便让用户了解 InVision Studio 基础知识。

尽管早期访问版本的评价褒贬不一，但 Studio 有一些有趣的功能和巨大的潜力。 本教程旨在引导早期采用者了解 InVision Studio 原型制作的基础知识并添加一些基本的原型动画。

按照这个 InVision Studio 教程，立即创建具有流畅动画过渡的交互式原型！

InVision Studio 工作区的镍之旅

UI 设计师和任何使用过 Sketch 等数字设计软件的人都应该熟悉 Studio 的大部分内容。 大部分工作空间都借鉴了 Sketch 的 UI，左侧面板包含页面、图层和组； 检查员的右侧面板； 以及顶部的上下文工具栏。

您还会发现许多相同的工具，即使某些功能的名称不同。 例如，Sketch “符号”在 Studio 中称为组件。

交互面板

出于本教程的目的，我们将专注于利用交互工具在屏幕之间创建交互热点并在它们之间创建平滑过渡。 在 Studio 工作区右侧的“交互面板”中会发生很多神奇的事情。

创建交互的简单方法是选择一个触发层或组，然后在键盘上点击“c”（或单击顶部工具栏中的闪电图标），这会启动一个蓝色的选择鞭子来选择目标屏幕。 然后 Studio 将提示设计人员选择触发事件的手势或用户输入，并在一组预设转换或“运动”转换之间进行选择。

InVision Studio 动画

优秀的交互设计有很多元素，但在用户界面中正确使用动画过渡和微交互不仅仅是装饰门面。

它们增强了可用性，并可能意味着心爱的产品和令人困惑的混乱之间的区别。

在本教程中，我们使用预设过渡和运动过渡的组合来创建我们的应用原型。 预设转换相当简单，并且对于 InVision 在线原型平台的用户来说是熟悉的。

控制屏幕之间的运动转换如何工作的规则有点神秘。 虽然在构建该工具时考虑了许多明显的设计师考虑因素——例如，屏幕之间元素的自动链接——但在为过渡添加运动时需要一些试验和错误才能实现某些效果。 希望本教程能帮助设计师更轻松地尝试 InVision Studio 所提供的功能。

要记住的事情

Studio 承诺围绕动画提供许多智能功能。 例如，当通过交互连接时，它可以在从一个画板复制到另一个画板的对象之间创建运动过渡。 然后，设计师可以根据需要调整这些动画，以完成一些漂亮的缓动和其他运动效果。 在尝试以特定顺序转换一堆对象时，了解其工作原理的古怪之处可能需要耐心和一些练习。

运动过渡最适用于画板上相互复制的对象。 动画功能是“智能”的，因为它可以识别具有相同图层名称的重复对象，因此请注意不要在屏幕之间删除或重命名关键图层（这是破坏出色动画的令人沮丧的简单方法）。

请记住，Studio 仍处于起步阶段，因此设计师应该准备好遇到相当多的错误。 例如，“预览”按钮启动原型的交互式预览，但有时交互根本不会触发，在这种情况下，您需要保存并重新打开文件。

在学习该软件时，我发现不止一个文件似乎奇怪地损坏了自身——删除了所有画板并使所有工具面板都无法访问。 我已经报告了这个错误，并且已经学会了保存我的文件的多个版本，以免丢失太多的工作。

最后，它总是有助于组织起来。 在任何平台上创建原型时，无论是 Studio、Sketch 还是 Marvel，跟踪对象和图层标签将节省时间和挫败感——尤其是当您与团队合作或在某个时候提交文件时。 在构建交互时注意层和层组的顺序； 这通常会对实现所需的动画效果产生很大的影响。

教程！

让我们开始！ 如果您还没有，请前往 InVision Studio 下载 Studio 应用程序的早期访问版本。 在您的计算机上安装 InVision Studio 后，请在此处下载教程文件。 启动 Studio 软件后，选择从您保存文件的位置打开文件。

第 1 步：打开文件并查看

这个交互式原型将用于一个关于 19 世纪末至 20 世纪初现代艺术家的移动应用程序。 所有屏幕都是使用仔细的画板复制预先创建的，这是正确使用运动过渡功能所必需的。

层次结构有 3 个深度级别，从“家”开始，然后是每个艺术家的个人简历，最后是艺术家作品的四个示例的轮播。 您会注意到“主页”画板有一个房子的小图标，它指定了原型的起始画板。

本教程将着重于创建连接这三个深度级别的简单导航路径。 我们将利用 Studio 的交互和过渡工具使原型感觉像是一个适当交互的应用程序。

第 2 步：将 Artist Tile 连接到 Artist Bio

转到第一个画板。 花点时间展开图层组“Artist Tile 1”。 您会注意到三个嵌套组：一个用于艺术家姓名，一个用于特色图像，第三层包含“生物文本”。

查看画板屏幕，由于 Studio 处理运动转换的方式，第三层组不会立即可见 - 我们稍后会谈到。 暂时记下它。

选择包含所有这些元素的图层组：“Artist Tile 1”。 选择此组后，点击键盘上的“c”（或单击顶部工具栏中的闪电图标）以启动交互工具。 您的光标将跟随一个蓝色的鞭子来选择您交互的目标屏幕。

选择右侧标题为“Artist Bio 1”的画板，系统将提示您选择触发器和过渡类型。 对于触发器，选择“Tap”，然后选择“Motion”作为过渡。 然后，您可以选择过渡的持续时间。 让我们将此过渡设置为 2 秒，然后点击“保存”。

点击播放按钮预览原型。 你有没有看到屏幕上的东西是如何移动的，以及生物层是如何从图像下方滑落的？ 恭喜——你已经创建了一个非常流畅的交互过渡！

第 3 步：将返回按钮连接到主屏幕

现在我们应该为用户提供一种返回主屏幕的方法。 进入“Artist Bio 1”画板，选择左上角的“btn_back”组件。 通过点击“c”并选择“主页”画板在此处创建触发器。

同样，让我们​​将触发器设置为“Tap”，将交互设置为“Motion”，并将持续时间设置为 2 秒。 单击预览并欣赏您刚刚创建的流畅的打开和关闭过渡。 注意关闭磁贴触发的动画是如何反转打开磁贴时播放的动画。

第 4 步：连接画廊

如果您注意第一个和第二个画板中的图层名称，您可能会注意到它们是相同的。 这是因为，如前所述，Studio 动画会自动将重复的图层从一个画板链接到下一个画板（如果它们共享名称）。 更改这些图层的名称将中断动画链接，并且过渡将默认为简单的淡入淡出——对于那些痴迷于有意义的图层标签的人来说尤其具有挑战性。

我们想应用一种更简洁的运动过渡来打开图像的轮播库。 标题为“Artist 1 - Image 1”的画板包含从“Artist Bio 1”画板复制的元素，重新调整大小以显示更多示例图像。

首先单击“Artist Bio 1”图层以选择“特色图像”组。 这将是打开画廊的触发器。 在此处创建一个“点击”交互，连接到画廊中的第一个画板，然后选择“运动”。 这一次，将持续时间设置得快一点：1 秒。

要为关闭画廊创建一个漂亮的过渡，只需选择“Artist 1 - Image 1”画板中的关闭按钮层，然后将其连接回“Artist Bio 1”画板，设置与以前相同。

预览此动画并惊叹于原型从艺术家生物屏幕过渡到图像轮播并返回的效果。 现在，我们已经通过应用程序层次结构的三个级别连接了导航！

第 5 步：连接所有图库图像

我们已经完成了我们需要做的大部分运动过渡，现在将开始为画廊的其余部分使用一些动画预设。

我们的用户在这里翻阅这个轮播图像的交互模式将是一个熟悉的滑动手势。 好消息是最后一部分非常简单，使用 Studio 的动画预设完全不需要时间。

选择“艺术家 1 - 图像 1”画板并创建一个交互，引导到下一个画板“艺术家 1 - 图像 2”。 这一次，将触发器设置为“向左滑动”。 对于过渡，选择“预设”并从下拉列表中选择“向左推”。

要创建反向交互，请选择“艺术家 1 - 图像 2”画板并将其连接到前一个画板，只是这次使用“向右滑动”手势和“向右推”过渡。

在接下来的几个画板上重复此模式，将图像 2 的画板连接到图像 3，将图像 3 连接到图像 4。简单！

为了使这一点更加逼真，让我们关闭图像 1 和图像 4 之间的循环。选择图像 4 的画板并将其连接到图像 1。选择“向左滑动”触发器和“向左推”过渡，就像为系列中的下一张图片。 将 Image 1 画板连接到 Image 4 并反向连接——你已经创建了一个循环画廊！

最后，选择图库画板中的每个“btn_close”组件并将它们链接回生物画板。 你可以在这里选择你喜欢的任何过渡，但我选择了“向右推”。

到现在为止，您已经有一个非常有序的导航路径可以展示了。 点击预览试一试； 你的原型应该很像本教程开头的 gif。 给自己一个当之无愧的后背。

第 6 步：重复

既然您已经将第一个艺术家示例的所有屏幕与流畅的交互联系起来，请对教程文件中的其他两组屏幕重复这些步骤。 它们以类似的方式组织，这将是习惯 Studio 工作方式的好习惯。

下一步

希望本教程介绍了 InVision Studio 原型设计的一些很酷的功能。 在掌握 Studio 的窍门时，您应该尝试使用高级动画工具调整过渡。 试用工作区中的其他工具，并尝试按照其他一些 InVision Studio 教程进行操作。 通过练习，您可以成为领先的 InVision Studio 设计大师之一。

您可能在此过程中遇到了一些错误或意外行为，但这就是尝试新软件的本质。 InVision 的人员对反馈非常敏感，并且肯定会继续改进 Studio，使其更加稳定和有用。

Studio 是一款有趣的试用工具，没有理由不试用免费的应用程序原型制作工具。 虽然它不太可能取代当今设计界的 Sketch 等首选软件，但它具有很大的潜力。

进一步阅读 Toptal 设计博客：

• 完善你的用户体验设计过程——原型设计指南
• Figma 作为设计工具的力量
• 使用真实数据进行原型设计 - 成帧器教程
• 移动可用性基本指南
• 移动应用程序设计最佳实践和错误