恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI动效教程freestyle(一)——吆吆吆,先别急着做酷
0.0°
2017-09-04 原创文章 教程 举报 3445 35 122 4

掌握必要理论是做好动效的前提,没有理论支撑的动效是不符合物理世界的运动规律的,酷炫但然并卵,所以新手要先了解动效理论

如今扁平化设计已近占据设计风格主流,想要在种类繁多、设计风格同质化严重的APP市场脱颖而出的话,就需要运用动效设计进行用户体验的进一步提升,当然我们不是肤浅的为了动效而动效。一个好的产品都是7分交互3分视觉,而动效是依附于交互存在的,是为交互服务的,产品中的动效是为了提高交互效率,提升用户体验的,而且未来动效设计也是设计潮流与趋势。(讲话言简意赅,字数多了你们读的也烦,如果针对某一点有问题,可以私聊)

对于新手我们如何学习呢?Image title

一、如何学习——多看(APP案例、网站、书籍)

学习动效很重要的一点是要多看,多收集一些案例,看的多了想法就有了,

尤其学习设计,很多优秀案例其实就在我们身边,平时玩APP遇到好的动效可以收集一下(手机自带录屏的话更好),

推荐一款专门录制GIF的软件——LICEcap ,MAC电脑端录制手机屏幕的一款软件(最后有文件包下载)

推荐的网站:

1、beyondkinetic.com

2、mvsm.com

3、motionographer.com

4、cubstudio.com

推荐的书籍:Image title

《原动画基础教程动画人的生存手册》

《点石成金》

《交互设计精髓》


二、掌握最基础的动效理论

掌握必要理论是做动效的前提,之前看网络上很多新手学了几天AE就做了很多酷炫、装范儿的动效,这种没有理论支撑的动效是不符合物理世界的运动规律的,牛逼但然并卵,所以新手要先了解动效理论


动效其实来源于动画设计,动画设计历史就久远了,动画界最牛叉的迪斯尼团队根据多年的工作经验,总结了这八个要素,满足这些,可以让我们的动画更有趣、逼真、提高效率、更......(反正就是好,听大师的没错),一句话总结,动画不等于动效,但是动效一定符合动画规律


1、时间间距(动画要掌握好节奏)——时间不仅影响一个观众对于物体运动速度的感知,同时也影响观众对于运动物体重量的感知Image title

2、缓入缓出——真实的世界中不存在匀速直线运动物体,所以物体运动的速度变化曲线肯定不能一直是条直线Image title

3、预备动作(预备动作时间长——速度之后变快;预备动作时间短——速度之后变慢)Image title

4、动作跟随(模拟现实)Image title

5、挤压和拉伸(注意保持对象体积不变)物体快速运动产生型变,可以让观众感受到物体的材质,夸张物体的运动速度Image title

6、夸张手法,夸大物理世界的运动规律,给观众更冲击直观的感受Image title

7、二次动作——强化主动作

Image title


8、连续打帧和对应打帧——精确把握时间

补充:跟多规律请观察自然世界


三、用什么软件制作动效呢?

还是那句话,软件只是工具,重要的是想法和眼界,主流经典软件是AE,在动效界的地位就像PS一样,当然还有Principle(轻量化、速度快)、Flinto、Hype3、pixate,Image title


四、关于AE动效的几个快捷键和常用的功能


1、显示/隐藏辅助对象——cmd+shif+H

2、solo模式:单独显示图层

3、B键和N键可以控制预览区域

4、单独调出关键帧:P(位置)T(透明度)S(缩放)

5,调出第二个关键帧:SHIF+P/T/S

5、缓入缓从(Fn+F9)

6、“整理文件”功能的运用

如果我们将项目文件从一台电脑拷贝到另一台电脑,在另一台电脑上打开发现项目中的很多文件都丢失了,这个是因为我们在拷贝的时候没有一起把项目文件中用到的素材一同拷贝上,这个功能正是解决这个问题,帮你把项目文件和素材一起整理到一个文件夹(最后弹出选项一定选择“全部”)Image titleImage title


五、动效的注意事项


1、同类型文件可以同时选中一起打帧

2、做动效帧速率不得低于25帧,大多数我们都用到30帧

3、AE中矢量图层基于路径起作用,也就是所AE是图层作用是由下到上,这一点与PS恰恰相反(so路径图层一般在最下方)

4、关于中心点,分清楚视觉中心点与物理中心点,在做动画时要用视觉中心点,而不是物理中心点Image title

5、关于速度曲线(正向操作,先快后慢,负向操作,反之)

正向操作就是确定、添加等等功能,负向操作比如删除、移除、忽略等等

6.动效中,同类型物体运动规律应该一致

7、时间反向关键帧的作用


六、关于工作交接:

1、向产品经理展示设计稿时用视频或者GIF,给开发时给他连续的静帧(l)

2、如何导出静帧


案例分析

1、这是我做的一个案例,运用了撕纸效果和Z轴,撕纸在AE很简单的一个特效,当然在开发中这种效果显然开发成本太高,我只是作为练习,另外我运用了Z轴,让后面的图层沉下去,展现了层级关系Image title

2、运用了动作跟随和预备动作Image title

3、这个案例运用了挤压和拉伸Image title

你的点赞是我不断更新的动力Image title

更新:2017-09-04

下载
收藏

35人已收藏

麦子小姐

只愿你历尽千帆, 归来贼特么有钱。

  • 8

    作品

  • 85

    粉丝

  • 14

    关注

  • 咪咕卡通形象设计
  • 动效练习
  • 咪咕爱看REDESIGN
  • 三步打造扁平颗粒感插画
相关标签
UI设计教程

    猜你喜欢

      2017-09-04 原创文章 教程 举报 3445 35 122 4

      UI动效教程freestyle(一)——吆吆吆,先别急着做酷

      0.0°

      你确定要举报UI动效教程freestyle(一)——吆吆吆,先别急着做酷

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      122
      35
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录