拿到了最酷设计工具InVision Studio内测资格，你关心的都在这里

2018.04.17 18：00 原创首发于博客  mysdes.com

本文紧接上一篇博文  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的套路，未来大概会在功能限制下免费吧，当然收费也是无可厚非的）。

 

 

-以上