AE动效设计课堂笔记

UI基础动效设计需要考虑的点:

①逻辑  ②空关系 ③层次感 ④架构


UI动效的三个特性:

功能性:动效对交互引导和了解系统状态及其重要

物理性:在制作动效的时候考虑到重力和惯性,速度和刚性,展现给用户的感觉就是自然,符合物理规则的,更助于快速形成用户的使用习惯。

趣味性:例如在制作加载动效时,增加一些有趣味性的动效,可以使用户在等待中不会缺乏耐心,增加产品和用户的粘性。

动效功能

基本目的:①加强体验舒适度  ②减弱不可避免的不舒适感  ③交互小细节增加产品质感

表现层级关系:展示层与层的关系,平级或者切换,让用户更加了解上,下页面的关联性。

与手势相结合:当用户手势操作,让界面的动态走向更符合手指的运动,从而让用户感觉到是自己再控制页面,而不是机械化的跳转。

愉快的提示功能:在某些需要注意提醒的时候能吸引用户的注意,又不会过于生硬,符合预期的出现(如:登入的密码提示)

额外增加界面的活力:在用户预期之外增加的惊喜,让用户感知到产品的生命力,(如卖萌,搞笑,可爱)

让等待变的更愉快:常出现在加载,刷新,发送等界面中,让等待贬得可视化。

情感设计:情感化设计增加用户体验

增加界面与界面衔接的延续感:界面的跳转不可避免,让本来两个独立的页面衔接起来可以显得更加好玩

去除用户不再需要的元素:随着用户的操作,隐藏一些用户不再需要的内容

动效应用场景

H5营销,趣味游戏:应用式体验帮助项目推进过稿表达直接,客户可直接下单

产品包装,简历包装:Demo展示,动态展示

水波反馈:卡片上的触点反馈,app banner切换,网格中选择确认

图标变换:通过图标变换暗示用户界面及功能的变化

元素转换:从圆形变为其他形状是注意对称性和空间关系(投影)



Apple设计理念 ,苹果公司总能给你惊喜,你期待苹果8么_腾讯视频

动效四大规则:①对用户手势的及时响应  ②暗示即将展示的界面或动作 ③反应元素间的层级和空间关系 ④界面切换的过度画面

MD动效设计当中,响应设计最长不应该超过400ms(0.4s),最短不应该少于150ms(0.15s)


UI动效 AE细节解说

介于接触AE也有些时间,常常遇到一些没有注意到的问题,我做了问题以及解决的方案

①在导出视频的时候我想要选择背景透明怎么办?

解:相比于在输出模块中更改参数来达到透明背景的目的,我觉得这个方法更为实用,

∴在保存渲染列队之前,选择你想要去除的背景--在右上角有一个“效果和预设”点击--“通道”--找到“32转换通道”将文字拖到画面中--在AE的左上角找到“从获取Alpha”点击小三角--“完全关闭”就可以变成透明图层啦!

当底部有图层的时候是起作用的

补充方法2:
首先选择导出添加到渲染列队——选择无损(如下图)

选择输出模块无损


通道选择:RGB+Alpha

然后选择渲染就大功告成啦!
最后给点温馨提示:在保存源文件和导出avi之前最好先建一个文件夹,如果是全部保存到桌面然后一个个在放到文件夹里,相信我,你会后悔的。

动效插件辅助

缓动插件:Flow

Flow脚本拥有一个简单的操作界面,能够自定义动画曲线的效果,而不需要触摸图形编辑器,包含25种关键帧曲线效果,可自定义修改编辑,好可自定义保存自己调整的预设。

【安装方法】

Win系统:复制 Flow 文件夹到以下路径:

C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\

然后运行一下Add Key.reg 点击是!

Mac系统:拷贝 Flow 文件夹到以下路径:

/资源库/Application Support/Adobe/CEP/extensions/

然后运行一下install-as-admin

最后打开AE软件,在【窗口】-【扩展】-【Flow】找到脚本使用

图形运动动画神器插件:Mition 2

可视化滑块调节关键帧的属性,例如缓入缓出等,不需要打开关键帧滑竿手动调节,同时可以指定中心点位置,而且包含多个常用表达式控制,方便快捷,节约大量时间。

下载方式:https://www.cgown.com/ae/ae-tutorials/14881.html

(由于暂时没能找到直接下载的安装包,在此链接高速下载需要付费,你可以选择普通下载,后期找到更便捷的下载链接一定附上)

动效网站推荐:cocoa China, uplabs, UImovement , TripFlow

2021年1.25更新
AE立体翻转如何实现?

单个图层课总直接选中操作,当遇到合成图的时候需要双击进去在单个图层进行编辑


比起单纯的旋转功能是不是要细致很多


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容