UI动效设计课堂笔记

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

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

UI动效的三个特性:

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

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

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

动效功能

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

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

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

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

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

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

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

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

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

动效应用场景

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

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

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

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

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

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

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

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

UI动效 AE细节解说

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

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

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

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

动效插件辅助

缓动插件: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

学习笔记

相关推荐

做完1000页PPT,总结了一些美化设计的方法,超实用

阅读 635

华为新品PPT曝光!任正非的新武器,网友:这页的效果太炸裂了

阅读 2048

无助!80后领导让我把100页PPT重新统一风格?职场大神出招

阅读 340

这些比较爆炸PPT设计方法,好用又实用,太赞了!

阅读 210

要想从0到1搞定PPT封面设计,你需要掌握这4个思维,强烈推荐

阅读 215

你可能感兴趣的:(UI动效设计课堂笔记)