初次制作 UI 动效

April 4, 2018

起因其实是InVision家的全新设计工具InVision Studio正在进行「抢先体验（Early Access）」的活动，而受到邀请的申请者可以提早尝鲜（可以在官网进行申请）。许多早早拿到了资格的设计师已经用起动手制作出了许多优秀的作品。就在前天，我终于也收到了邀请参与体验的邮件，于是便产生了用InVision Studio临摹两张作品的想法。因为是第一次制作动效所以决定先从比较简单的开始做起，于是选择了一张音乐播放器的作品进行临摹（🔗原作品链接）。

然而最后没有用InVision Studio成功做出来，只好投奔了Sketch + Principle的组合。先放最终成果：

制作过程

总用时在五小时左右。一开始先尝试用InVision Studio做，包括上手、摸索的时间用了 2.5 小时，最后卡在了歌曲信息界面移出来之后进度条和光碟保持一段时间线性移动的过程。思考了许久都不知道该怎么实现界面先移出、进度条和光碟再线性移动的先后次序，加上光碟的放大和旋转，这些似乎都无法在一步中完成。后尝试分开两步，即歌曲信息界面移出为一个界面，然后光碟的角度变化和进度条长度变化为下一个界面。但中间仍会出现明显停顿需要第二次触发。

于是谋变。实际上在InVision Studio中时间线的展现方式非常不直观，某些交互体验还不完善，再加上最近正在学习Principle，经过师父的指点后便琢磨着使用Sketch + Principle的组合来尝试实现。

从在Sketch中制作基本组件，到Principle中基本完成交互流程，到最后动画的细微调整，整个过程用了 2.5 个小时。有了InVision Studio中探索的经验，在Principle中构建起来速度就快了很多，一个小时四十五分钟基本成形。有了Principle中的“Auto”功能，在InVision Studio中所遇到的难点也迎刃而解，虽然与原作品还是有差距，但也算是实现了。最后又花了四十五分钟修缮一些细节，优化过渡效果等。

存在不足

该次临摹成果与原作品中仍存在以下三点差距，可以进行提升：

在InVision Studio中实现。原作者仅使用了目前版本的InVision Studio制作该动画，因进一步思考如何做到。
光碟先放大继而线性旋转的动效。目前在Principle里实现的方式还有缺陷，因为跨越两个Artboard所以仍然存在停顿，而在原作品中从光碟放大到自动旋转是不存在停顿的。
按下播放键之后由「播放」图标转变为「暂停」图标的动效。在原作品中「暂停」图标的两道方块由外向内（或是有内向外）渐变淡出的效果，在Principle中即使参数一致的情况下无论怎样调试时间线都无法将两道方块设置出一样的动画，只好妥协另寻他解。

Key Takeaway

本次练习的主要收获：

使用Sketch + Principle组合时，需提前将所有组件在Sketch中制作好再导入至Principle，因为比较难以预估导入时会出现什么错误和（导入Principle后矢量图形都会flatten成bitmap），应提早调整。这次练习中光碟的阴影就是中途才发现遗漏，尝试在Principle中实现未果，只好从Sketch里制作导入，发生了一些动效上的细微紊乱，增加了时间成本（实际上可以直接从Sketch里复制粘贴到Principle，反之则不行）。
了解了动效制作中如「关键帧」等基本概念以及“Ease in”，“Ease out”等基本动效。
目前接触的InVision Studio和Principle这两个工具都是通过识别同一名字的组件在两个画板中的不同形式/状态来实现动效，因此保持画板和组件的命名一致性是关键。
通过将起始或终点画板中一个组件的透明度调整为百分之百（在Principle中需要把Alpha值调整为 0）实现Fade in/out的效果。

题外话：说说InVision Studio

使用InVision Studio做了一次练手后，也对其功能有了初步了解。

在制作高保真设计稿这一层面上可以说与Sketch保持了高度的一致，除了界面有些微的差别外，功能以及快捷键都如出一辙，常用Sketch的人用起来基本没有学习曲线。但其又比Sketch的野心更大，融合了高保真设计稿、原型制作以及初步动效制作这三大UI设计中的核心功能。Sketch可以制作设计稿，最新的 49 中也能在screens之间进行简单联动，但对于动效暂时还手足无策；Principle虽然可以包揽初步动效的设计，但无法制作高保真设计稿，且对于有着大量screens的一个App进行各个界面间的快速联动也并不友好。InVision Studio则取其精华，同时吸纳了Sketch和Principle的长处。

当然，目前的InVision Studio这三方面的功能都还存在较多欠缺，成熟度和开放度都远不及Sketch等前辈们，但确实是一个未来充满希望的产品，可以说是真正all in one的次世代设计工具了。