UI界面中的动效都是AE实现的吗

2021-03-04 19:41发布

13条回答

前段时间Airbnb开源的Lottie完美解决这个问题, 就是在AE中设计完成你的动画后,通过bodymoving插件导出记录动画信息的JSON文件,然后开发人员使用 Lottie动画库读取JSON文件再绘制出来。

桥豆麻袋
3楼 · 2021-03-05 09:16

AE动效demo纯展示用,使用灵活,能做一些纯概念类的展示稿;

flash可制作含有交互的高保真动效demo,不过想要制作符合实际项目的动效交互体验demo需要掌握as脚本语言,还有一个缺点时flash在Mac端的兼容性不是很友好,可酌情选择;
再来说说QC,Quartz Composer是强大的动画合成软件,在Apple10.4的开发软件包中自带,最近很多国内UI设计师也在对它进行尝试,很多国内设计师理解为不需要任何程序基础以及编码能力就可以做出非常复杂的动画,当然,这点我不否定,但是QC其实际意义是制作出界面UI工程给开发人员直接使用,如果没有一点代码基础经过一番折腾确实可以实现一些有趣的效果,但是输出产物杂乱,开发人员根本无法使用,这就完全失去了它的意义,目前看到国内大部分使用QC的设计师都是为了炫技而已,并无多大意义,因为QC相对于前两者的学习成本是较高的,如果你只是想去炫技,那么不做推荐;
再来说两个比较实用的无代码实现交互动效的工具,一个就是hype3,是一个有时间轴操作的HTML5生成工具,可以通过简单的动画设置然后配合工具自带的交互事件制作出可交互的实用demo;
最后一个就是强烈需要推荐的,最近刚被谷歌收购的还热乎的pixate,这是一个专门只做交互原型的工具,经过不断的更新与创新,现在已经被谷歌收为旗下,这个工具操作简单,内含一些常用的交互事件,用户只需要通过简单的拖拽与设置,便可配合移动端APP实现动效demo实时预览


kitidog2016
4楼 · 2021-03-05 09:57

动效对UI设计很重要没错,会是肯定要会的,但是需要会到什么程度,这个主要看项目需求个人兴趣

在这个各种原型工具盛行的时代,大部分设计师是没必要非得学AE的。绝大多数设计稿对动效的要求只是一些比较简单的页面切换和过渡动画,这些通过原型工具可以很轻松地做到。Pixate, Framer, Form, Principle, Origami, Flinto, Proto.io, Keynote 等等,随便选一个适合自己的就好。

就我个人来讲,一个特别简单的过渡动画演示我会用Keynote —— 容易上手,简单的动画很轻松能完成,但是太过简单,可自定义的东西很少。
在页面多、交互要求高(比如做用户测试)的时候,我会用Framer —— 可以直接导入Sketch设计稿并且随时更新,以CoffeeScript(JavaScript变种)为基准所以功能非常强大,甚至能连上公司的API。但上手复杂,而且特别简单的动效实现起来效率不高。
如果你看见代码就头疼那么Pixate或者Principle也是不错的选择,可自定义的东西很多却又不用写代码。

注意我不是想说AE没有用。如果你要做很复杂的动画(比如logo动画啦,很酷炫的翻转扭曲滚动弹跳啦之类的),目前仍然没有比AE更好用的软件。但是对于普通的UI过渡来讲,用专门针对UI设计的原型工具来实现,效率远远高于针对影视特效设计的AE。


怎么判断你需不需要用到AE呢?最简单的办法就是去看看市面上这些原型工具的效果演示,看这个程度的动效是不是足够应对你的设计项目(相信对大部分人来讲都足够了):
Framer: Framer - Gallery,还有一个Framer Code
Pixate: Demos | Pixate
Principle: principledemos.tumblr.com
Form: relativewave.com/form/e (这个必须下载下来才能看)
Proto.io: proto.io/en/demos/
Origami: Origami — Examples

如果这些都不够,你想要做比如这样的(Android Marshmallow Boot Sequence by Will Frohn)、这样的(dribbble.com/shots/1692),或者是这样的(Sparks by Adrien Joulie),那么还是乖乖地去学AE吧。不是说用原型工具一定做不出来,只是如果你有那个时间研究怎么用原型工具实现这些,那还不如直接去学AE来得快... (鄙厂还有用Google Slides做图标和动效的大牛呢)


我之前提到学到什么程度也要看个人兴趣。UX这行有很多方面可以钻研,用户调研、产品、交互、视觉设计、动态设计、前端开发等,全部精通是不太可能的。我们在学习上要有取舍,如果你喜欢折腾细微的动画表达,那么就深入研究它、并且学好AE,如果你对别的方面更感兴趣,那么动效这块点到为止即可,把时间花在你更喜欢的地方。不要每个方面都只学个一知半解就好。


最后,虽然这篇主要讲的是工具,但如果你是个新手设计师,一定要记住:
学习动效最重要的是了解怎么利用适当的动态效果让你的产品用起来更流畅 易懂 有趣、让用户理解不同页面和不同元素之间的关系、以及正确地引导用户的注意力。

先学会这些,才有资本谈用什么软件。设计软件只是一个把你脑海中的设计具现为视觉展示的工具而已,学会使用动效软件不代表学会了动效设计。


大冬瓜
5楼 · 2021-03-05 13:41

常用的是AE,有些简单的功能可以用ps实现

开心羊
6楼 · 2021-03-05 14:48

这个不一定,需要根据项目和前端那边能实现的效果为主,很多时候AE的动效前端不一定能实现

mark狼叔
7楼 · 2021-03-05 15:31

AE动效是上线项目之前作为纯展示用的,成本低,能统一团队对交互逻辑的认知,但不是所有动效都是ae实现的,也可以用其他动效软件制作。ae并不是唯一。

不一定,有一些简单的动效PS就可以,现在AI软件也能做动效了,软件进化还是蛮强大的

熊晓燕
9楼 · 2021-03-05 16:47

前段时间Airbnb开源的Lottie完美解决这个问题, 就是在AE中设计完成你的动画后,通过bodymoving插件导出记录动画信息的JSON文件,然后开发人员使用 Lottie动画库读取JSON文件再绘制出来。