InVison Studio 一款类似于蓝湖的设计软件 2018-05-14

?xml version="1.0" encoding="UTF-8"?

今天上手了解了一下Invison studio，是被他的宣传“响应式设计快速搞定”所吸引的，研究了一早上也算整清楚了，它包括了所有蓝湖现有的功能，所以平时如果只是设计+设计评审+简单页面交互+开发交互，那么蓝湖完全可以实现，就不用再放弃蓝湖使用InVison Studio了。

如果上面的情况不能满足你的平实工作，如果你不仅仅是视觉设计师，那么，InVison Studio可能有能帮到你的地方。

1.页面布局响应式设计：你可以将你的sketch中制作的一倍图直接倒入到InVison Studio中，直接开始你的设计响应式，你需要调整有所页面元素在响应式页面中的对齐方式，InVison Studio提供了以下几种：

第一种表示：Maintain top／bottom／left / right offset from parent container when resizing 当上一级的控件尺寸改变时，保持上／下／左／右偏移

第二种表示：Maintain horizontal center offset from parent container when resizing当上一级控件尺寸改变时，元素始终保持水平居中显示

第三种表示：Maintain vertical center offset from parent container when resizing当上一级控件尺寸改变时，元素始终保持竖直居中显示

举例一. 原尺寸和随意改变后尺寸元素变化情况对比如下图所示：

原尺寸

页面变宽后尺寸

顺利实现了响应式布局

不足：不能完全达到前端程序员书写的响应式，比如，当页面宽度到达多少宽度后，页面元素换行，元素之间的间距不变。

2.内置默认动效比较多，且常用

常用的动效有以下几种可以选择：

设置转场动画方法：将转场触发元素选中后点击工具栏闪电按钮，如图所示：

将转场页面用箭头拉选，之后页面出现下图属性栏：

又兴趣的伙伴们可以下载下来试着用用，了解一下，后附下载链接。

在这个属性面板里面，我们可以设置，触发效果，触发效果有以下几种：

触发效果

我们还可以设置运动Motion，学过AE的同学应该不会陌生，他就是运动设置，我们可以调整duration和delay属性，来调整转场动画效果，如果想要调整页面中每个元素的转场效果，你还需要在时间轴上进行调整，时间轴建下图：

时间轴界面

补充一下：InVison Studio是目前为止，世界上设计工具中，最强大的一款设计工具，它主要应用于移送端，web端，ipad端的保真，原型图设计，转场动画设计。

官方说InVison Studio是完全免费不限系统的设计软件，但是，目前只有 Mac 版，所以windows的小伙伴，我只有mac的安装包，不过应该不久就可以不限系统啦！

参考链接：https://zhuanlan.zhihu.com/p/30284789

https://www.invisionapp.com/studio

软件下载包链接：密码:q5fh