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

学习笔记

UI动效设计课堂笔记

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