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文件再绘制出来。

相关问题推荐

  • 回答 195

    你好:关于需要学习几个月能找工作,我的理解和建议如下:1. 首先要确认自身是否有相关的专业积累?因为UI只是设计者手中的工具,它是内在设计思想有效的表达途径。学习软件很容易,但只是掌握工具的运用是远远不够的。2. 如果有相关专业的知识积累,那么工具...

  • 回答 166

    哈哈哈哈  看你是想成多少资产的富婆喽能担起富婆这个称号起码要过百吧UI设计的平均工资是挺高的月入过万不是梦但是在现在这个高消费的社会环境下光靠这个还不够毕竟你一年不吃不喝才12万你可以做UI多赞些钱,然后再做副业...

  • UE和UI是一样的吗2020-11-23 15:33
    回答 98

    UI是英文User Interface的缩写。翻译成中文就是:用户界面,也称人机界面。是指用户和某些系统进行交互方法的集合,这些系统不单单指电脑程序,还包括某种特定的机器,设备,复杂的工具等。UE是英文User Experience的缩写,翻译成中文就是用户体验。是指用户...

  • 回答 8

    不麻烦 首先把这个部分解组 快捷键是 CTRL+SHIFT+G 然后点这个区域 如果点到不需要的元素 就CTRL+3 锁定隐藏,然后再继续点 点到只剩下需要的元素, 把元素弄出来 然后 CTRL+SHIFT+3 显示锁定隐藏,把没用元素删除就可以了。 如果直接点到了需要的元素 同样CT...

  • UI要学多久2020-08-10 19:00
    回答 95
    已采纳

    学会到就业的程度 一般时间为4个月左右,120天时间。 这里说的4个月时间,并不是所有人都是4个月可以学会的, 和学习方法,学习用心程度,学习时间都有关。 如果用错误的学习方法,学4个月是不可能学会的。...

  • 回答 86
    已采纳

    对于UI设计来说,更加看重的是个人的设计能力和理念,以及操作能力,和男女的性别没有太大的关系。

  • 回答 76
    已采纳

    靠谱肯定都靠谱的,就看你自己的兴趣爱好,发展前景都很好,大前端是一种网站搭建,小程序开发等用户端口开发的技术,UI设计就是纯纯的设计师岗位,将设计思维和理念融入到产品运营的每一个交互环节中...

  • 什么叫交互性?2020-04-23 11:40
    回答 6

    其实生活中也有交互性,比如两个人之间的聊天沟通,带有双方的互动都叫做交互。互联网中的交互更多体现在任何互联网设备之间的使用和反馈。

  • 回答 2

    1、初步调查  前期调研对于LOGO设计非常重要。具体周期看项目规模和预算。免费提供logo设计建议和各行业logo设计参考案例。一般情况下,这个时间大约是3天,我们会详细了解企业,对竞争对手的企业logo进行调查分析,这样可以更准确的控制方向,避免logo设计...

  • 回答 1

       永远不要忘记调研  好的设计总是从调研开始。品牌创建需要你预先考虑到所有的细节。  创建品牌、设计LOGO之前需要进行广泛的调研。考虑到在这个过程中你需要对环境和背景中所有的细节都有所掌控,在预算上就一定要留下足够的余地。  此外,你的解...

  • 回答 1

     一、具象表现形式:  具象表现是忠实于客观物象的自然形态,对客观物象采用经过高度概括与提炼的具象图形进行设计的一种表现形式。它具有鲜明的形象特征,是对现实对象的浓缩与精炼、概括与简化,突出和夸张其本质因素。标志设计的形态不可能像绘画的形式...

  • 回答 1

    1.设计应在详尽明了设计对象的使用目的、适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行。2.设计须充分考虑其实现的可行性,针对其应用形式、材料和制作条件采取相应的设计手段。同时还要顾及应用于其它视觉传播方式(如印刷、广告、映像...

  • 回答 1

    Looka Smashinglogo Freelogodesign Hatchful 

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

  • 回答 1

      Naldzgraphics这个网站据说是个人创办的网站,上面所有的内容都是站主本人在日常中通过手机整理上传的。不过就算如此,网站还是收集了大量的平面设计素材。  Brandsof theWorld是世界知名LOGO资源库网站。上面收录了海量的世界知名Logo图标,而且还提供EP...

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

没有解决我的问题,去提问