UI设计师的动效入门指南

课程简介:

今天分享的内容要学习动效设计,最重要的并不是用软件做得我们炫酷的技法,而是如何使用正确的运动规律做出生动的效果。有同学问我,怎么样才能把动效做得更加生动跟自然,我问他,你有基础吗?他说没有,我说那你做个球,然后把这个球放在画板居中的位置,假设是一个篮球好了,我们通过位置的移动让它掉落到地面,然后再回弹到空中,在这个过程中是十分僵硬的匀速运动,我们在它掉度的过程中加入一个加速度的曲线,在它弹起来的过程中加入一个减速度的曲线,现在看起来这个效果就生动了一些。
虽然运动规律正确了,但是又好像出现了信的逻辑问题,球掉落到地面所用的时间是1秒,弹起来的时间同样是1秒,然而整个球掉落下来的距离只有三个球直径的高度。篮球有一个通用的标准,直径约24厘米,三个球的身位加起来约0.7米,符合0.7米高度下的篮球回弹。应该用更短的时间才会让动画看起来自然且符合逻辑。
除了运动规律跟逻辑,动效设计还可以以一种夸张的表现手法,让球接触到地面的时候被挤压,弹到空中的时候被拉伸。如果球在运动的过程中再加入动态模糊,一般我们为了让动画更加自然,会给运动的元素打开运动模糊的开关,从而更大程度还原动画在物理世界中的真实感,有一些理论的支撑,才能让我们的动画设计看起来更有趣。
接下来我们就来了解一下动效设计中有哪些理论知识是在学习软件之前所必备的,这是我们系统课程里边的第一个章节,快速上手中的第一节课,了解动效设计中的理论跟运动规律是一节理论课程,因为在动效制作之前,你必须要了解为什么做动效,以及什么样的动效设计是好的设计。
首先我们要知道动效设计的意义是什么?拿平面设计中的LOGO动效举例子,这是我之前一个商业外包案例,一家做饮料的品牌,名字叫Mikodog,我为它的logo设计了LOGO动画甲方的诉求是由于静态的logo放在视频的开头跟结尾缺乏亮点,不够吸引人,于是想通过动画的形式来增加客户的记忆点,在我看到这只非常可爱的小果LOGO之后,我立马联想到了舔狗,我立马联想到了小狗舔舌头的特征,结合LOGO自身的路径形态,添加舌头的元素,再增加一下氛围,这个LOGO动画就制作完成了。
第一个意义,相比于静态稿拉开设计差异,比如我们在观察到这样一个静态插画的时候,很多人会觉得这很普通,我也能画出来,但是当它动起来之后,在表现形式上就存在核心的竞争力了,这也就是为什么现在越来越多的产品中都会加入动效设计来提升产品的品质感。
这是动效设计的第二个意义,提升产品品质,在提升产品品质的同时,还起到了调动情绪、渲染氛围的作用。
第三个意义是解释交互效果。比如我们看到这个动效中,点击反馈页面转场结合交互手势的演示,都让用户清晰地了解到操作的路径以及产品所演示的交互效果。

课程截图:


课程目录:

1.了解动效设计中的理论跟运动规律.mp4
2.动效设计工具ae的快速入门(上).mp4
3.动效设计工具ae的快速入门(下).mp4
4.动效中的节奏感练习.mp4
5.UI中常见的情感化动效.mp4
6.伪3d创意动画的制作与玩法.mp4
7.真3D动画的建模与应用.mp4
8.界面设计中那些常见的字符动画.mp4
9.动态波浪效果的举一反三.mp4
10.UI界面中3D卡片的交互案例.mp4
11.酷炫音频效果的多种表现手法.mp4
12.表达式的概念与应用方法.mp4
13.常用的高效率表达式.mp4
14.常用函数表达式.mp4
15.如何让动效设计落地实现.mp4
宣导片-一份为你准备的动效设计指南.mp4

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
编程与开发

不止教搭配的色彩商业实战课

2022-3-23 15:40:50

编程与开发

软件架构场景实战 22 讲

2022-3-24 16:29:01

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索