InVision Studio：概述和回顾

InVision Studio 是一种原型制作和动画工具，借助灵活的图层和无限的画布，您可以快速创建基于矢量的高级屏幕设计。 它被认为是目前最好的高保真原型制作工具之一。 使用 InVision Studio，您可以加快工作流程； 创建有趣的交互式原型； 将您的设计传达给团队和客户； 测试您的设计； 并在开发阶段之前解决问题、顾虑和设计变更。

InVision Studio 是 InVision 工具套件的一部分，其中还包括 InVision Cloud，您可以在其中连接、存储和共享完整的产品设计工作流程，以及 InVision DSM，一个设计系统管理器和库，您可以在其中存储和控制所有品牌和用户体验组件。 InVision Studio 可用于 Mac 和 Windows。 您也可以导入 Sketch 文件。

InVision Studio 的特点

下载 InVision Studio 应用程序后，您可以选择要创建的项目。 选择要设计的内容后，您将浏览界面。

要添加图层或组件，请单击顶部的加号。 添加组件时，所有选项都会出现在右侧。

让我们回顾一下 InVision 的一些值得注意的功能。

无需遮罩即可调整大小和裁剪图像。

此功能称为智能图像裁剪，可在您更改大小时自动裁剪图像。 它类似于在 Sketch 中创建图像填充，然后将其设置为“填充”，但步骤更少，方式更直观。 智能图像裁剪适用于焦点靠近中心的图像。 如果您想裁剪成圆形、矩形或圆角矩形，这也是最好的选择。 对于具有不同焦点或更有趣形状的图像，您需要创建蒙版以访问更多自定义选项。

来源：LearnInVisionStudio.com

滚动时修复元素。

修复页眉和页脚对 InVision 来说并不陌生，但修复其他元素是。 将滚动设置为水平、垂直或两者，然后通过单击右上角的图钉图标选择要修复的元素。

将多个画板链接到一个动画中。

计时器可让您控制要转换为一个动画的多个画板。 您还可以循环播放动画，让最后一个画板指向第一个。 或者，您可以将多步动画直接用于设计的另一部分。 像这样的复杂动画非常适合视频片头和片尾。

为视差动画创建滑动触发器。

滑动触发器可以创建视差效果和滚动时发生的其他类型的动画。

无需编写代码即可创建响应式原型。

使用响应式原型，您可以使所有内容都基于百分比并根据画板大小调整每个元素的大小。 然后，您可以创建响应各种屏幕的原型。 这使得创建不同大小的模型变得更加容易。 此外，在 Studio 中将设计设置为“可调整大小”会在浏览器中查看时自动调整大小。

来源：LearnInVisionStudio.com

将原型镜像到您的手机。

如果你想在手机上测试一个动画或原型，你可以分享它，选择“镜像”，然后扫描手机应用程序中的二维码。

使用类似 Sketch 的快捷键。

如果您目前使用 Sketch，那么您将已经熟悉 InVision Studio 使用的快捷方式 - 几乎所有快捷方式都相同，尤其是在检查器、图层和工具栏方面。

在明暗主题之间切换。

非设计师可能没有意识到这个功能有多有用。 在设计浅色界面时，增加深色主题的对比度会很有帮助（反之亦然）。

与团队实时协作。

协作和工作流程得到简化，团队成员可以实时设计和评论。 通过全局同步和实时更新，没有人会被排除在外。

在浏览器上使用 InVision Studio 进行设计

我想快速向您展示使用 InVision Studio 的浏览器版本是什么感觉。 我们将简要介绍设计电路板、创建原型和使用手绘模式。

设计电路板

您的命令中心位于屏幕的右上角。 这五个图标代表：

• 编辑标题
• 设置布局类型
• 设置
• 注释
• 分享

编辑标题

我玩了一下标题。 单击“编辑标题”后，会弹出以下选项：

我替换了图像和文本，稍微模糊了它，并添加了一个轻微的叠加以使文本突出。 我特别喜欢“尺寸”选项——你只需将鼠标悬停在它上面并从三种尺寸中进行选择。

设置布局类型

然后我将布局类型更改为“Meticulous”。 这是用于标题下方的内容块，当您向下滚动时会显示出来。

编辑附加部分

如果您将鼠标悬停在部分标题的右侧，您将看到三个图标。 向下箭头是“向下移动部分”，“X”是“删除部分标题”。 如果您删除它然后改变主意，您只需将鼠标悬停在同一区域上，您就可以选择添加新的部分标题。

单击箭头右侧的加号和“X”，您将获得一个新菜单。 从左到右，图标代表：

• 添加色板
• 添加注释
• 上传文件

将鼠标悬停在内容块上，您将再次看到调整大小选项，就像标题一样。 选择不同的尺寸将自动更新布局的其余部分以重新适应块。 单击内容块会在右侧打开一个窗口。

将鼠标悬停在栏中的一种颜色上将显示其颜色代码。 这个窗口也是团队成员可以对这个特定的设计块发表评论的地方。

创建原型

我也玩了原型演示，只是为了向您展示选项是什么。

在这里，您的控制中心位于底部。 从左到右从眼睛图标开始，图标如下：

• 预览模式
• 建造模式
• 评论模式
• 检查模式
• 历史模式
• 社交分享
• 上传画面
• 配置
• 屏幕状态

手绘模式

手绘模式从交互式演示开始，快速向您展示如何使用它。 然后，您使用无限的画布将您的项目组合在一起。 如果您在应用程序中工作，您可以将“与手绘实时协作”链接发送给团队成员，他们可以实时在项目中绘图和添加文本。

InVision Studio 定价

免费计划包括一个具有无限合作者和屏幕的原型。 如果这就是你所需要的，那么你永远不必付钱。 演示不计入限制。 如果您设计了多个原型，您将获得 6 天的免费访问权限来创建无限的原型。 之后，您必须升级以创建和使用其他原型。 如果你想升级，这里是他们的计划：

最后的想法

与其他设计工具相比，您可能会发现 InVision Studio 有点慢，有时还有问题——这并不是说它总体上很慢，只是（有时）比其他类似工具（如 Adob​​e XD、Figma 和 Sketch）慢。 我个人没有遇到过这个问题，但它在评论中出现了很多。 此外，InVision Studio 不提供插件支持，因此如果这对您很重要，请考虑使用 Sketch。

但是，在原型制作方面，InVision Studio 很难被击败，尤其是在您必须与团队合作的情况下。 它可能不如 Adob​​e XD 强大，但它仍然是您会发现的最好的原型制作工具之一。

InVision Studio 的界面易于学习和使用，图标时尚现代。 还有很多帮助，包括教程、导览和指向更多指导的链接。 （现在，也就是说，我读过一些相反的评论，所以我想这是一个品味问题。）使用 InVision Studio 几乎不需要猜测，您可以直接了解您在那里要做的事情：创建。

在设计时，黄金比例是使用黄金比例。 查看我使用和理解黄金比例的终极指南。

特色图片来自 Visual Generation/shutterstock.com