美文网首页软件技巧
【软件】最强UXD设计工具Invision Studio

【软件】最强UXD设计工具Invision Studio

作者: zhyuzh3d | 来源:发表于2019-10-15 13:04 被阅读0次

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

    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

    相关文章

      网友评论

        本文标题:【软件】最强UXD设计工具Invision Studio

        本文链接:https://www.haomeiwen.com/subject/jwnjmctx.html