【软件】最强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都是动画师的概念。


进这里点赞,助力申请简书【人工智能通识】小岛ヾ(≧∇≦感謝≧∇≦)ノ
欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】


每个人的智能新时代

如果您发现文章错误,请不吝留言指正;
如果您觉得有用,请点喜欢;
如果您觉得很有用,欢迎转载~


END

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,809评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,189评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,290评论 0 359
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,399评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,425评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,116评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,710评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,629评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,155评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,261评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,399评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,068评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,758评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,252评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,381评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,747评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,402评论 2 358

推荐阅读更多精彩内容