最强 UXD 设计工具 Invision Studio

最近才关注到这个软件,大概是后知后觉,简单学习了一下,在这里笔记主要内容,你可以把它当做快速入门。

UXD设计概况

UXD(User Experience Design)用户体验设计。主要包含用户界面设计UI(User Interface Design)交互设计ID(Interactive Design),广义上也包含部分产品设计Product Design

UXD是研究产品与人的关系的,一般的,不直接涉及市场和商业模式等议题。

UXD常用工具:

  1. 办公文档与数据分析类软件:Word、PPT、Excel…
  2. 绘图与图像处理软件:PS、Illustrator、Sketch、Figma…
  3. 交互动画设计软件:Principe、AfterEffects…
  4. 交互原型设计软件: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还提供了网页版本。

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都是动画师的概念。

作者:zhyuzh3d
链接:https://www.jianshu.com/p/86518b3bf4cc
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

InVision Studio 快速入门
https://www.bilibili.com/video/av95619591/