上手亲测！资深交互设计师推荐的6大必备神器（附教程）

编者按：不想在错误的软件上花功夫？花五分钟看完这篇！今天推荐的这6款交互设计工具全是经过@敖厂长UX 上手研究过的，优缺点都总结出来了，看完相信同学们就有答案了。

1.  After Effects

你想在短时间内制作复杂演示效果。 请使用AE，曲线/锚点等使用MOTION V2脚本进行快速调整（在曲线界面中 鼠标拖动选择关键帧-->拖动脚本上的滑块-->对比缓动曲线 获得你想要的曲线效果，比其他脚本好用的在于曲线你可以进行自定义，表达式也好修改-->不会改的话学点JS咯），你熟练AE的话能很快得到比较好的效果。AE缺点就是不可交互+精准度很难控制，当然有一个点就是，你想要什么效果 AE都能实现。但是程序上能不能实现就难说啦。

2. PIXATE，图层类交互原型软件

最近被GOOGLE购买了，然后免费了（说实话GOOGLE 可以说是产品杀手，进去的产品。。。我不敢苟同楼上们的那些说法）。

优点：可交互，共享性强，有团队讨论以及回复模块（此处有点像justinmind）【有windows版本】，对GOOGLE MATERIAL DESIGN的支持比较好，MD相关预设会越来越多哦。

具体参见：

• 《WINDOW党福利！这才是适合设计师的免费动效神器PIXATE》
• 《WINDOWS设计师也可以用！免费动效神器PIXATE初级教程（一）》

缺点：图层类软件你们都懂得，用AE做可交互已经很烦了，更何况再加上一个交互模块，而且没有时间线啊。

用Pixate烦人的一点是，我是用750*1334做的，然后导进去发现，这货是按照375*667啊，而且不能直接从sketch粘贴，能别这么麻烦么。

Form和origami都是支持粘贴的。还有 动画预设较少。不过GOOGLE是动画狂，他们肯定会加预设的啊哈哈。听说以后版本会支持code export，观望中。

3. FRAMER STUDIO.

其实我并不想推荐，不过作为写得起前端扛得起大旗的交互大神必用咯。

优点：你想干什么 就能干什么。而且分享起来特别简单，所以有很多案例，我们可以直接把代码拷过来用。关于这个你们可以去FRMAER的facebook群组看看就知道啦。基于coffeescript开发的你还能导入Sketch、PS文件。很方便。能够精确控制每一个图层的属性。毕竟人家是强大的JS，你还想怎样。

缺点：你是视觉，你是交互，你大学/培训班 研究过JS么。如果不会，请略过。

如果你会JS而且你写代码的速度很快，那恭喜，这绝对好用。其实说白了 就是套代码模板。

4. FORM

节点类软件。如果用过nuke的人 ，那就很熟悉咯，被GOOGLE买了。

优点：节点类软件，原型的可维护性强。GOOGLE的孩子，MD设计规范里的那些动画预设它最新版本里包括了。而且还有好多MD相关的PATCH了。还出了IOS SDK，用来创建自定义PATCH什么的，这块学的其实是QC...准备跟开发快速融合..以后可能能够导出MD 的android代码呢，期待期待。

缺点：不能在电脑上预览。肾六坏了还得跟同事借！还有就是支持从Sketch里粘贴了，结果不支持Retina，我用750 1334做的，结果发现Form是375 *667啊。我都得缩放成0.5才能继续。吓死朕了。还有就是不能共享啊。IOS工程师都是我们的大爷，你这样还要给他装FORM，会把他气shi的！

5.  ORIGAMI+QC

目前比较好用的节点类软件，FACEBOOK的天才们出的。

优点：可导出有一定使用价值的代码。 可维护性强。可在设备+电脑上都能预览。现在靠谱点的就这个啦。用的人也相对多些。你可以直接从SKETCH粘帖过来。不过只有在使用POP ANIMATION 的PATCH时才可导出代码哦。不过开发那边真的能用这些代码。关于和开发沟通这个下面再写吧 。

缺点：有一些BUG不忍直视。

不能分享：有时给你的IOS工程师装了QC也没卵用。为什么？因为QC绝对烧死CPU+吃内存啊。就算你把FPS调到最低，如果图层够多够复杂，会把工程师电脑卡死的。XCODE都死了工程师怎么活嘛。还有就是目前功能上缺陷比较多（比如Swipe不能选择具体方向等，可以用自定义的PATCH进行定义，但是初级人员就用不了啊），有时你需要各种综合各种条件各种patch才能获得一个简单的效果。

关于ORIGAMI和开发的结合问题 ：

1、ORIGAMI只能够导出POP animation PATCH相关的代码（CLASSIC ANIMATION和BOUNCY ANIMATION都是不能的哦--听说下个版本会有），代码里面的位移（POSITION TRANSITION）信息都是绝对位置，所以适配上你和开发需要进一步讨论解决方案。我的建议是 QC中的定位系统严格统一为TOP LEFT或CENTER等。这个对适配问题很重要，如果你的外部GROUP的定位用的CENTER，而里面图层用的各种各样的其他参考坐标系，那么你导出的位移信息基本没卵用了。

2、如果有DELAY的话，请把DELAY放在POP ANIMATION PATCH的前面，如果不放在前面，代码导出的主要属性变化部分是空的（这应该是个BUG啊）。听说下个版本会导出delay的数值。

现在是我把DELAY用文档形式给开发，开发自己输入。还有一些循环动画也是不可导出的，这些也是以文档形式给的（其实就是让IOS哥哥坐在我旁边，用我的另一个显示给他看效果，一个显示器看我的QC工程直接沟通了，并没有用什么卵文档。如果你是大公司，流程化嘛肯定需要咯）。

3、你的ANCHOR POINT就算是TOP LEFT，图层旋转是不会绕他的左上角旋转的。不过缩放是会缩放的。这个很坑啊。还有代码导出并没有导出ANCHOR POINT信息。

不过解决方案有的。但是都很麻烦。就是AE中的空白层类似的概念，留空切图。

4、很给力的东东叫PAINTCODE. 可以直接把SKETCH粘贴的图层转为代码。并且PAINTCODE的官方提供了能够和ORIGAMI结合的PATCH，稍微研究一下（研究一两个小时，看看PAINTCODE的那个APPLE WATCH教程），就能够从PAINTCODE里解决ORIGAMI的一些鸡肋的问题。

从安装到实战教程：

• 《设计师新宠！交互神器ORIGAMI》
• 《设计利器抢先看！QUARTZ COMPOSER+ORIGAMI 2.0介绍及教程》
• 《动效神器第二波！ORIGAMI五分钟零基础入门秘籍》

6. HYPE 3 PRO. 

人家是做HTML5的啦。不过，如果你不会用Framer，那可以用这个，这个还有时间线，不过我喜欢从SKECTH里直接粘贴过来，然而Hype不支持粘贴过来，直接PASS了。不过做HTML界面确实很给力啊。简直就是神器。不过用来做原型的人还是少数咯。

有夸FORM的，有夸AE的。作为MOTION DESINGER 还是最爱AE。

但从交互设计师的角度，关于哪个更好用，哪个淘汰，关我鸟事，哪个好用时用哪个。从目前看，ORIGAMI还是不错的。不过这些软件更新够慢的。全都有问题的时候，只能选自己爱用的好了。NOODLE我没提是因为它的BUG太多，还不足以有资格跟上面这些竞争。

• 《Sketch神助攻！无代码做动效神器Hype3入门教程》
• 《无代码动效神器！教你用HYPE3做APP原型的基础过场（附神器）》
• 《比AE还方便！教你用HYPE无代码制作PATH扇形菜单动画》

【动效设计全攻略】

必要的思考：
《80%是没必要的！动效该潜移默化OR引人注目？》

靠谱的总结：
《涨姿势！动效设计如何从四个维度吸引你的注意力？》

真实的案例：
《引导有门道！YEP!教你用动效阐释APP运作机制》

原文地址：zhihu
作者：@敖厂长UX

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量101万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com