轻松原型设计– InVision Studio教程 _原型设计

本文概述

InVision Studio工作区的镍之旅
教程！
下一步

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

文章图片
InVision Studio网站的屏幕截图显示了最强大的屏幕设计工具。
该产品被誉为革命性产品, 并为无缝设计到原型的工作流程, 复杂的交互功能, 惊人的过渡动画做出了重大承诺, 而且它是免费的。 InVision推出了一些令人兴奋的预告片和演示, 以吸引设计师。随着年初Beta版本的发布被推迟了多次, 人们的期望进一步提高。
随着越来越多的设计师开始使用该软件, 越来越多的教程和指南弹出来演示应用程序界面设计工具的基础。 InVision还为InVision Studio基础创建了一些自己的用户。

文章图片
令人振奋的宣传视频突出了InVision Studio应用程序中的强大功能。
【轻松原型设计– InVision Studio教程】尽管抢先体验版的评论不一, 但Studio仍具有一些有趣的功能和巨大的潜力。本教程旨在引导早期采用者了解InVision Studio原型的基础知识, 并添加一些基本的原型动画。
跟随本InVision Studio教程, 立即创建具有光滑动画过渡的交互式原型！

文章图片
借助此InVision Studio教程, 我们将制作移动应用程序的精美动画原型, 并熟悉该软件的工作流程, 工具和怪癖。
InVision Studio工作区的镍之旅 UI设计人员和使用Sketch等数字设计软件的任何人都应该熟悉Studio的大部分内容。大多数工作区都是从Sketch的UI中借用的提示, 左侧面板中包含页面, 图层和组。检查员的右侧面板；以及顶部的上下文工具栏。

文章图片
如果你使用过诸如Sketch和Figma之类的界面设计工具, 则InVision Studio设计工具工作区可能看起来非常熟悉。这是该软件随附的一些预构建的InVision Studio基础教程之一。
即使某些功能的名称不同, 你也会发现许多相同的工具。例如, 草图” 符号” 在Studio中称为组件。
互动小组
就本教程而言, 我们将专注于利用交互工具在屏幕之间创建交互式热点, 并在它们之间创建平滑的过渡。 Studio工作区右侧的” 交互面板” 将发生很多神奇的事情。

文章图片
在创建交互式原型时, InVision Studio交互面板是发生许多” 魔术” 的地方。
创建交互的简单方法是选择一个触发层或组, 然后单击键盘上的” c” (或单击顶部工具栏中的闪电图标), 这将启动一个蓝色的拾取鞭, 用于选择目标屏幕。然后, Studio会提示设计人员选择触发事件的手势或用户输入, 并在一组预设过渡或” 运动” 过渡之间进行选择。

文章图片
创建交互就像选择一个图层并在键盘上单击” c” 一样容易。
InVision Studio动画
出色的交互设计有很多要素, 但在用户界面中正确使用动画过渡和微交互不仅仅是修饰窗口。
它们提高了可用性, 并可能意味着受人喜爱的产品和令人困惑的混乱之间的区别。
在本教程中, 我们结合使用了预设过渡和运动过渡来创建我们的应用程序原型。预设过渡非常简单, InVision在线原型平台的用户会很熟悉。
控制屏幕之间的运动过渡如何工作的规则更加神秘。尽管在构建工具时会考虑很多明显的设计人员考虑因素(例如, 屏幕之间的元素自动链接), 但在向过渡添加运动时要花费一些尝试和错误才能达到某些效果。希望本教程可以帮助设计人员更轻松地尝试InVision Studio提供的功能。
注意事项
Studio承诺围绕动画提供许多智能功能。例如, 当通过交互连接时, 它可以在从一个画板复制到另一个画板的对象之间创建运动过渡。然后, 设计人员可以根据需要调整这些动画, 以实现一些漂亮的缓动和其他运动效果。在尝试按特定顺序转换对象堆栈时, 要了解其工作原理的怪癖性, 可能需要耐心和一些练习。

文章图片
InVision Studio允许进行一些高级时间轴编辑, 以使设计人员可以为其原型自定义缓动, 反弹和其他动画效果。
运动过渡最适用于彼此重复的画板上的对象。动画功能是” 智能” 的, 因为它可以识别具有相同图层名称的重复对象, 因此请注意不要删除或重命名屏幕之间的关键层(这是破坏出色动画的一种非常令人沮丧的简单方法)。
请记住, Studio仍处于起步阶段, 因此设计师应该准备好面对相当多的bug。例如, “ 预览” 按钮可启动原型的交互式预览, 但有时交互根本不会触发, 在这种情况下, 你需要保存并重新打开文件。
在学习该软件时, 我发现有多个文件似乎自身异常损坏-删除了所有画板并无法访问所有工具面板。我已经报告了该错误, 并学会了保存文件的多个版本, 以免丢失过多的工作。

文章图片
在由于Studio错误(如上面的空白屏幕)浪费了数小时的工作后, 我学会了在工作时经常保存文件的多个版本。
最后, 它总是有助于组织。在Studio, Sketch或Marvel等任何平台上创建原型时, 跟踪对象和图层标签将节省时间和精力(尤其是在与团队合作或在某个时候分发文件时)。建立交互时, 请注意图层和图层组的顺序；这通常在实现所需的动画效果方面有很大的不同。
教程！让我们开始！如果还没有的话, 请转到InVision Studio下载Studio应用的早期访问版本。在计算机上安装InVision Studio之后, 请在此处下载教程文件。启动Studio软件后, 选择从保存文件的任何位置打开文件。
步骤1：打开文件并看一看
该交互式原型将用于19世纪末至20世纪初有关现代艺术家的移动应用程序。所有屏幕都是使用仔细的画板复制预先创建的, 这对于正确使用运动转换功能是必需的。
层次结构具有3个层次, 从” 家” 开始, 然后进入每个艺术家的个人简历, 最后到四个艺术家作品实例的轮播。你会注意到, ” Home” 画板有一个房子的小图标, 它指定了原型的起始画板。

文章图片
打开InVision Studio教程文件, 工作区应如下所示。
本教程将重点介绍创建连接这三个深度级别的简单导航路径。我们将利用Studio的交互和过渡工具来使原型感觉像是一个适当的交互应用程序。
步骤2：将Artist Tile连接到Artist Bio
转到第一个画板。花一点时间来扩展图层组” Artist Tile 1″ 。你会注意到三个嵌套的组：一个用于艺术家名称, 一个用于特色图像, 以及第三层, 其中包含” 生物文本” 。
在画板屏幕上, 由于Studio处理运动过渡的方式(我们稍后将要介绍), 因此第三层组不会立即可见。暂时记下它。

文章图片
在此, 遮罩用于隐藏” 生物文本” 层。在到下一个屏幕的动画过渡中, 这似乎从图块图像下方向下滑动。
选择包含所有这些元素的图层组：” Artist Tile 1″ 。选择此组后, 按键盘上的” c” (或单击顶部工具栏中的闪电图标)以启动交互工具。光标后会出现一个蓝色的鞭子, 以选择用于交互的目标屏幕。
立即选择右侧标题为” Artist Bio 1″ 的画板, 系统将提示你选择触发器和过渡类型。对于触发器, 选择” 点击” , 然后选择” 运动” 作为过渡。然后, 你可以选择过渡的持续时间。让我们将此转换设置为2秒, 然后点击” 保存” 。
单击播放按钮预览原型。你是否看到事物沿着屏幕移动的方式以及生物层如何从图像下方滑落？恭喜！你创建了一个漂亮的交互过渡！

文章图片
预览第一个原型交互动画。
步骤3：将” 返回” 按钮连接到主屏幕
现在, 我们应该为用户提供一种返回主屏幕的方法。转到” Artist Bio 1″ 画板, 然后选择左上角的” btn_back” 组件。点击” c” 并选择” 主页” 画板, 在此处创建触发器。
同样, 让我们??将触发器设置为” 点击” , 将交互设置为” 运动” , 并将持续时间设置为2秒。单击预览, 对你刚刚创建的平滑的打开和关闭过渡感到满意。请注意, 通过关闭图块触发的动画与打开图块时播放的动画相反。

文章图片
再次预览应用程序原型, 它应该可以像这样工作。
步骤4：连接图库
如果你注意到第一和第二画板上的图层名称, 你可能会注意到它们是相同的。这是因为, 如前所述, 如果Studio动画共享名称, 则Studio动画会自动将重复的图层从一个画板链接到下一个画板。更改这些图层的名称将中断动画链接, 并且过渡将默认为简单的淡入淡出, 尤其是对于那些痴迷于有意义的图层标签的人而言。
我们要应用另一种整洁的运动过渡来打开图像轮播画廊。标题为” 艺术家1-图像1″ 的画板包含与” Artist Bio 1″ 画板重复的元素, 并调整大小以显示更多示例图像。
首先单击” Artist Bio 1″ 图层, 然后选择” Featured Image” 组。这将是打开画廊的触发器。在此处创建一个” 点击” 互动, 并连接到图库中的第一个画板, 然后选择” 运动” 。这次, 将持续时间设置为更快一点：1秒。

文章图片
选择” 特征图像” 图层组以触发交互。将过渡设置为” 运动” , 持续1秒。
要创建一个很好的过渡以关闭画廊, 只需在” Artist 1-Image 1″ 画板上选择关闭按钮层, 然后将其连接回” Artist Bio 1″ 画板上即可, 其设置与以前相同。
预览此动画, 并惊叹于原型从艺术家生物屏幕到图像轮播的完美过渡。现在, 我们已经在应用程序的三个层次结构之间建立了导航联系！
步骤5：连接所有图库图片
我们已经完成了大部分所需的运动转换, 现在将开始为画廊的其余部分使用某些动画预设。
在这里, 供我们的用户翻阅此图像轮播的交互模式将是一种熟悉的轻扫手势。好消息是, 最后一部分非常简单, 使用Studio的动画预设完全不需要时间。
选择” Artist 1-Image 1″ 画板并创建一个交互, 该交互导致下一个画板” Artist 1-Image 2″ 。这次, 将触发器设置为” 向左滑动” 。对于过渡, 选择” 预设” , 然后从下拉列表中选择” 向左推” 。

文章图片
在此步骤中, 为触发器选择一个” 向左滑动” 手势, 然后选择一个” 向左滑动” 预设过渡进行匹配。
要创建反向交互, 请选择” Artist 1-Image 2″ 画板并将其连接到先前的画板, 仅这次使用” 向右滑动” 手势和” 向右推动” 过渡。
在接下来的几个画板中重复此模式, 将图2的画板连接到图3, 将图3的画板连接到图4。容易！
为了使此效果更加逼真, 让我们关闭图像1和图像4之间的循环。为图像4选择画板并将其连接到图像1。选择” 向左滑动” 触发器和” 向左按下” 过渡, 就像你为系列中的下一张图片。将图像1画板反向和预先连接到图像4, 你已经创建了一个循环画廊！
最后, 选择图库画板中的每个” btn_close” 组件, 并将它们链接回生物画板。你可以在这里选择自己喜欢的任何一种转换, 但我选择了” 向右推” 。

文章图片
将每个关闭按钮分别链接回生物画板。不幸的是, Studio似乎不支持像在Sketch中那样一次在不同的画板上选择所有这些来创建一个交互, 因此你必须一次做一个。
到现在为止, 你已经有了一个排列合理的导航路径。点击预览并尝试一下；你的原型应该像本教程开始时的gif一样工作。给自己一个心疼的拍子。
步骤6：重复
现在, 你已将第一个艺术家示例的所有屏幕都与平滑的交互链接在一起, 请在教程文件中为其他两组屏幕重复上述步骤。它们的组织方式相似, 这是习惯Studio工作方式的好习惯。
下一步希望本教程对InVision Studio原型的一些很酷的功能进行了介绍。在摆脱Studio的困扰时, 你应该尝试使用高级动画工具来调整转场。在工作区中尝试其他工具, 然后尝试遵循其他InVision Studio教程。通过实践, 你可以成为领先的InVision Studio设计专家之一。
你可能在此过程中遇到了一些错误或意外行为, 但这就是试用新软件的本质。 InVision的员工对反馈非常敏感, 并且肯定会继续改进Studio, 使其变得更加稳定和有用。
Studio是一个非常有趣的工具, 可以尝试使用-并且没有理由不尝试使用免费的应用原型工具。虽然目前不太可能在设计社区中取代像Sketch这样的入门软件, 但它具有很大的潜力。
? ? ?
在srcmini设计博客上进一步阅读：