【软件】最强UXD设计工具Invision Studio
最近才关注到这个软件，大概是后知后觉，简单学习了一下，在这里笔记主要内容，你可以把它当做快速入门。
UXD设计概况
UXD（User Experience Design）用户体验设计。主要包含用户界面设计UI（User Interface Design）和交互设计ID（Interactive Design），广义上也包含部分产品设计Product Design。
UXD是研究产品与人的关系的，一般的，不直接涉及市场和商业模式等议题。
UXD常用工具：
- 办公文档与数据分析类软件：Word、PPT、Excel...
- 绘图与图像处理软件：PS、Illustrator、Sketch、Figma...
- 交互动画设计软件：Principe、AfterEffects...
- 交互原型设计软件：Axure、Invision、Adobe XD、Flinto、在线墨刀、Flash...
其中AE和Flash基本上已经属于被淘汰的工具了；Sketch和Figma也能够实现简单页面跳转的交互原型，只有在复杂情况才需要专门的交互工具；上面最后两条的区别在于Principe和AE一般只适合输出个别页面交互的小动画视频，而Axure、Invision等则更善于输出整个APP的可交互演示产品。
UXD设计工具的一大问题就是很多软件只能运行在MacOS苹果系统下，没有Windows版本，比如Sketch、Principe、Flinto。这种情况正在逐渐改变，但可能需要两三年或更久。这种改变并不是说Sketch这些家伙会发善心而开发window版本，而是说一些新的（或老的）跨平台软件将提供这些苹果死忠同样的功能，比如跨平台的Figma几乎可以说是Sketch的翻版，而且Figma还提供了网页版本。
Principe在交互动画制作方面一直是独领风骚，无可替代，然而我最近试用Invision之后发觉，免费的Invision Studio几乎是Sketch和Principe的结合体，完全可以胜任Principe的动画制作功能。
实际上Axure由于其丑陋的界面和复杂的操作导致在最近几年饱受设计师诟病，正在从设计师的主要工具链中消失或被边缘化，Invision绝对是个具有前瞻性的选择。
Invision官方下载和教程
快速上手
工作界面如下：
工作界面
内容管理
左侧竖向是内容管理，所有的页面Page、画板Artboard、组Group（容器Container）、图层Layer都在这里。
可以进行增删改名。
鼠标浮上去会显示眼睛，可以隐藏；按Alt键眼睛变成锁头，可以锁定。
快键Ctrl+G成组；Ctrl+R重命名，经常连用。
点击画板的名称右键可以Set Artboard As Home，可以在中间画布上改变画板大小。
创建工具
中间区域顶部左上角有一个加号，所有可以创建的内容都在这里，包括画板A、矩形R、圆角矩形U、椭圆O、文字T。
画布区
中间主要工作区。
按Alt键复制，可以复制整个画板。
Ctrl+滚轮放缩。
快捷Ctrl+1匹配显示全部，Ctrl+2匹配显示所选。
Ctrl+L显示竖向分栏参考，更多设置选择画板之后在监视面板修改。
监视面板
右侧竖向区域，根据在画布上选择的内容不同会改变。
所选内容的绝大部分可以调整的参数都在这里，包括尺寸位置、叠加模式、透明、填充、边框、阴影以及交互动作。
尺寸大小的输入框中右击可以切换百分比percent或者像素px。
右上角的大头针可以将元素锁定不滚动，点击画板然后在preview中设置滚动方向。
中间的十字格可以多订对齐，中间的小十字也可以点击。
Fill填充颜色点击色块可以改为渐变，支持透明。
填充、边框、交互等等，添加之后右键可以删除，复制之后右键会自动粘贴。
对齐工具
右侧监视面板顶部。
如果只选择一个图层则自动和画板对齐。
布尔工具
剪刀是切除形状线条的。
绘制的图形点击Edit Path按钮进入编辑模式。
多个形状可以进行布尔运算，形成Combined Shape组，运算顺序是在左侧图层列表中从下向上依次进行。
蒙版和旋转
蒙版与布尔运算相似，都是基于图层组的。
组内最底层的形状可以对以上全部图层进行裁切。
利用大头针钉住图片，蒙版滚动时就会实现背景保持效果。
交互工具
快捷键C，即顶部的闪电图标。
Preset是常规的转场动画，比如左划入，右划出等。
Motion是自动补间模式，对比A画板和目标B画板中各个图层的组及名称，相同名称即自动生成过渡动画，点击Edit Timeline可以打开详细窗口编辑。
确认之后这个交互会出现在对应元素的监视面板底部，可以删除复制和粘贴。
Trigger跟踪点击可以改为鼠标、触摸、键盘和计时，利用计时可以实现自动动画（选整个画板C）。
组件
选择某些图层或组，点击这个六边形打包成为可以重复使用的组件。
点击组件，然后右上角会出现Edit master按钮，点击进入编辑组件。
单独在图层中编辑组件并不影响其他实例，这些编辑称之为Override。
右键Reset Override可以还原成为组件原来的样子。
预览
点击右上角播放按钮启动预览。
预览窗口的齿轮中包含很多设置。
点击方框图标打开二维码，需要在手机上安装Invision APP，然后和电脑连入同一个wifi，用APP扫码就能预览效果。
汇总
- 页面、画板、组（容器）、图层。
- 交互设置快捷C，设置后出现在监视面板底部。
- 过场动画可以自动也可以手工，基于同名补间原则。
- 蒙版基于图层顺序，最底下的是裁切形状。
- 矢量布尔基于图层顺序，编辑工具不是很强大，还是要PS或AI。
- 图层不仅可以透明，而且叠加方式很好用。
- 渐变填充属于颜色填充的一种，点色块出现。
- 没有背景模糊（毛玻璃）效果。
- 组件可以单独编辑部分属性，称之为Override。
- 手机扫码预览好像很慢。
Invision主要是替代Principe的动画交互功能，也可以替代Sketch的部分功能，整体上相当于易用版的Axure，但设计理念完全不同，Sketch做交互动画还是程序员的思维，Invision和Principe都是动画师的概念。
进这里点赞，助力申请简书【人工智能通识】小岛ヾ(≧∇≦感謝≧∇≦)ノ
欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】
每个人的智能新时代
如果您发现文章错误，请不吝留言指正；
如果您觉得有用，请点喜欢；
如果您觉得很有用，欢迎转载~
END
