我们拿到了InVision Studio 的内测资格，设计师们关心的都在这里

为什么说 Studio 是最值得期待的设计工具？因为这是一款集成了视觉设计，快速原型，动效制作，团队协作于一体的全能设计工具。得益于移动互联网的快速发展，Sketch 最近几年的发展也是顺风顺水，近乎行业标杆，价格也由最初的 $99 (大版本内的) 一次性付费，变成了 $99/year 的订阅付费。由于 Sketch 的先发优势，即使后来者如 Figma、Adobe XD 是如此优秀然而也并没有搅局成功，那么随着 Studio 的到来，UI 设计圈即将迎来怎样的变化让人期待。

知名设计协作服务提供商 InVision 于2017年10月18日放出了新一代设计软件 Studio 的宣传视频并开放内测申请，团队原计划于2018年1月发放 Early Access，由于某些原因延期至3月份。另外，由于多达20多万的申请人数已经远远超过官方预期，转而实行分批随机发放。

机智的我们使用了多个 Email 在官宣当天便申请内测，经过半年的等待， 终于拿到了期待已久的 Early Access，本文将基于版本 Version 0.10.40 展开介绍 Studio 的各种特性。

一、视觉设计

打开 Studio，首先弹出的是欢迎窗口，可以看到右侧列表里会出现你最近打开的 .sketch 文件。没错，Studio 能够兼容 Sketch 的文件格式，不过当前还不能做到完美兼容，比如导入我们常用的带有 Symbol 的 Sketch 文件时，Symbol 将无法显示。

进入 Studio，页面布局和 Sketch 类似，也是 macOS 上较为常见的布局样式，左侧图层列表与组件库，顶部的工具栏，右侧的检查器。拥有暗色和亮色两套主题是个比较好的设计。一来在不同环境光下选择不同的主题能帮助缓解视觉疲劳，二是根据不同色彩的设计稿选择对比更舒适的主题也更容易专注。（Sketch 也有改暗色的付费插件，访问 midnightsketch.com）

Studio 作为后来者，在交互、功能以及快捷键上很大程度借鉴了 Sketch， 是否抄袭见仁见智，但这么做的好处是很大程度降低了学习成本，方便设计师迁移至 Studio，如果你精通 Sketch、XD，那么 Studio 对你来说上手将会相当容易。

我们尝试做了四张简单的页面，在这几张页面的绘制过程中，Studio 基本能满足常用的功能需求，比较遗憾的是对位图的编辑功能还不丰富，比如基本的模糊，裁剪，投影，混合模式等暂不支持。Studio 当前 Bug 较多，流畅度一般，图片边缘渲染精度不高，抗锯齿效果有待加强，距离成为主力的设计工具还有一段路要走。但如果你是产品经理或交互设计师，那是完全够用的，可能还会有惊喜哟。

Studio 也提供类似 Sketch Mirror 一样的预览 APP（安卓暂不支持预览仅可查看线上项目），在 iPhone 上预览设计稿暂不支持数据线连接，只能通过 WiFi，那么问题来了，在复杂网络环境下（比如在有上千台设备同时在线的公司内网）的刷新有极大延迟，跟 Sketch Mirror 早期类似，相信后面会支持数据线连接来预览。

二、动效与原型设计

早在2016年，InVision 收购了一款名叫 Silver Flows 的工具，这是一款 Sketch 插件，能在 Sketch 里实现原型设计（页面跳转，转场效果，调用iOS系统控件等），被收购时，Silver Flows 还处于内测阶段，而后做功能阉割后整合在 InVision Craft 插件内，那么现在也将顺其自然的集成在 Studio 中。

说起动效制作，大家首先想到的必定会是强大而性感的 After Effect，然而 Studio 也不弱，虽比不上 AE 的全能，但胜在轻量，易上手。Studio 的动效实现原理和 Keynote 的「神奇移动」颇有几分相似（同时也类似 Principle），通过2个画板来固定一组动作的首尾关键帧，同一元素会自动补全中间的过渡帧，非同一个元素会以渐隐渐现的形式展现。

我们通过上部分的4张图片，制作了一组动效来演示喜马拉雅用户在购买付费专辑时的试听与支付过程。动效中用到了遮罩，变形，位移，缩放，旋转，渐隐等常见效果，可以看到 Studio 是可以轻松完成的，不过偶尔会出现 Bug（比如2个画板之间的同一个元素不能识别导致无法链接）。而眼尖的朋友可能发现了，动效中的封面图在矩形与圆形切换的过程中，画面会出现卡顿。

在时间轴编辑面板里，可以对图层逐个编辑时间关系，在预览时，最慢可选择0.1倍速播放，方便你观察调整动效细节。Studio 也支持动效缓动节奏的调整，自带 POP 弹性效果，让你告别 AE 表达式。不过目前使用下来的感觉是缓动调节在灵敏度和精度上距离 AE 还有一点差距。

△ 触发条件与缓动调节

△ 连接页面跳转

三、团队协作

协作是 InVision 的老本行，早期凭借优雅的产品设计，强大的原型能力，且宣称永久免费等优点俘获了一大批用户（后更改为1个项目免费），现在我们可以通过 Studio 将设计稿上传至 InVision 服务器，随后即可在 Web 端使用协作功能了。

Tips：Sketch 用户也可通过官方插件直接上传设计稿。

在 Web 端，我们同样可以查看动效与页面跳转，同时还具有组内成员讨论与标注功能（标注里包含参数属性，切片，CSS代码以及文件图层），对需要远程协作的团队来说会相当方便，唯一的缺点是服务器在国外，由于没有国内 CDN 节点的缘故，访问速度较慢，有科学上网的加成会比较顺滑。

△ Web端播放动效

△ 成员讨论，添加批注

△ 标注，CSS代码与切图

在 Web 端里还有「随手画」的功能，方便大家在脑暴时做快速原型工具阐述想法。

比较遗憾的是，目前的版本并没有找到官方视频里宣传的「共享设计系统」的功能，视频截图可以看到，该功能看上去类似程序员们使用的 Git，通过 Pull 拉取的方式来更新规范化的设计组件，集中管理的方式将大大方便大型 UED 团队的设计规范版本控制，且组件库将会提供角色管理与权限管理，让不同项目成员互不打扰。

四、有待完善与已知 BUG

当前版本还不支持安装第三方插件，不过官方承诺会开放丰富的公共 API 给开发者。

缺少了三角形、星星、多边形、直线、箭头等形状工具。

自家 Craft 插件也暂不支持 Studio；暂不支持按最近的操作再制；暂不支持版本控制；对齐像素偶尔失灵；暂不支持形状图层填充位图；不能像 Principle 一样导出动效视频或 GIF。

官方宣称支持响应式设计，试用下来好像功能不完善，不支持同时固定左右或上下边距。

没有类似 Adobe XD 的跳转路径图，当修改跳转逻辑较为复杂的文件时可能会难以定位到，也不方便他人二次编辑。

对位图编辑的支持暂时一般，比如基本的模糊、裁剪、添加投影、混合模式等都还不支持。

目前不支持导入 Svg，但是可以通过 Sketch 中转后使用 Svg 素材，也不支持 Svg 切片导出。

中文字体无法修改字重，且无法通过手机预览，某些特殊字体在电脑上的预览也无法正常显示。

五、问与答

1. 目前对 Sketch 的兼容性如何？

官方未给出完整的不兼容属性列表，目前已知不兼容 Symbols，以及部分未知属性不能完全还原（也可能是 Bug）。

2. 怎么申请内测资格？

访问 https://www.invisionapp.com/studio ，填写邮箱即可。

3. 是否支持中文或多语言？

暂时仅支持英文。

4. 是否支持 Windows？

即将支持（开发中）。

5. 软件是否收费？

未知，内测期间免费，官网也注明会永久免费（按 InVision 的套路，未来大概会在功能限制下免费吧，当然收费也是无可厚非的）。

六、在哪里下载Studio

好消息，我们发现即使没有获得 Early Access 邀请，只要是 InVision 注册用户，也是可以正常使用的，安装后登录即可。

关注「喜马拉雅XUED」公众号，回复「Studio」即可获取下载链接。

欢迎关注作者微信公众号：「喜马拉雅XUED」

「好神器远不止这些」

• 基础了解 |  《8分钟了解来自未来的 UI 设计工具：InVison Studio》
• 基础工具 |  《Adobe CC 2018全家桶全线更新！附官方试用版下载链接》
• 提高效率 | 《最佳助攻！25款轻巧实用的Sketch插件大合集》
• 迭代更新 |  《来收神器！UI设计师常用的版本控制工具有哪些？》
• 实时交互 | 《8个视觉稿设计工具，页面视觉和实时交互就靠它们》

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备： http://hao.uisdc.com