UE设计要点

=】动效和技术交接涉及的参数？

动效参数为：：

透明度：开发的透明度是0-1，0代表0%，1代表100%

X轴位移：对象在X轴上的位移

Y轴位移：对象在Y轴的位移

总时长：对象完成所有变化需要的时间 

注：开发用的时间单位是 ms

动效设计工具 档

】CodePen

CodePen网站，是面向前端设计人员和开发人员的社交开发环境。建立【 测试用例 】的模式，以学习和调试同时来寻找灵感。

 link：：codepen.io

体验：

：打开反应快

：要懂前端代码语言HCJ，通过编写交互代码来设计

：可交接代码，给开发

】onepagelove

 link：：  onepagelove.com

体验：：打开很慢，图片很难显示，要懂代码，操作不清晰。

】Tumult Hype 3

PC软件，用于制作的交互式Web页面 和 动画；实现各种动效，还可以直接导出Html5页面供PC和移动端，演示使用。

 link：：tumult.com/hype/

：用Hype 3制作动效时，主要关注 以下3种数据：：

-属性变化（位置、透明度、大小、颜色...）

-时间变化（开始时间、持续时间）

-缓动函数

：时间与AE的差异

时间，即是每一个元素的运动开始时间和运动持续时间。

不同于AE使用 [ 帧 ]，Hype 3直接使用 [ 时间 ]，可直接用，不需再计算转换。下图所示，一个动效设计中，可能会跟下面一样，有多个元素在动，于是你需要记录的是，每一个元素的运动开始时间和运动持续时间。

适合：

：用AE、Flash等动画视频工具，来做App动效视频（或GIF）演示的；

：用FrameJS、Origami、Form等工具，写代码来生成App可互动性动效演示的；

：用Axure、Justinmind搭建网站或APP演示的，特别是在响应式页面方面；

：用HTML5来实现各种互动动画、动效甚至游戏的设计师，却不会代码的；

好处：

：无需代码，像AE一样使用时间轴，来做互动的动画

：PC、手机、pad端都可以直接访问（以web的形式），也可导出视频或GIF；

：可交接代码，给开发

备注：

：试用14天，收费软件。

：设计操作逻辑较差

】easings

即缓动函数，是指定参数随时间的变化率。即动效元素物体的运动效果。

easings网站，展示不同的常见的 缓动函数 案例参考。

无论Web，iOS，Android都有现成的缓动函数库可以使用，还可直接调用代码。

link：：easings.net

体验：

：打开很快，图片显示快，要懂代码，易上手。

：可交接代码，给开发

】AEUX

AEUX，以前称为Sketch2AE；是 After Effects 和 Sketch 的一组插件，用于将图层传输到After Effects中来设计 UX 动效。

是Google 设计团队，在2016 年中期开始构建的一个名为 Sketch2AE 的内部工具；

本质上是第一个在不同应用中间 [传输] 图层信息的【文件导入器】 工具。

link：：aeux.io

体验：

：可交接代码，给开发

】Principle

功能与flinto类似，界面与sketch类似；它主要是做2个页面间过渡专场特效，元素切换，细节动效的工具。缺点就是不能做整套原型。

优点：与Sketch和Figma集成，可导入。

缺点：

：仅支持Mac系统；

：不支持Photoshop导入；

：收费软件，要注册码；

：不能交接代码给开发，只能查看交互数据。

】Flinto

是一款轻巧而全面的原型制作和UI动画工具；为应用程序和Web创建交互式和动画原型；能够快速实现各种滚动、转场、点击反馈效果，没有编程或时间表，尽量减少复杂性；手机和电脑端的预览都非常的流畅。

优点：与Sketch和Figma集成，可导入。

缺点：

：：仅支持Mac系统。

：：不支持Photoshop导入。

：：没有时间轴，无法创建复杂的效果

：：操作逻辑不清晰

：：：收费软件，要注册码

】keynote

Mac自带PPT，相当于windows的powerpoint，是个幻灯片软件；苹果的交互设计师都是用keynote做交互演示；熟练掌握这个软件，对目前app里的绝大多数动效都是可以做出来~，复杂一点的动效实现起来就有点不够；

为了省事省时，直接用它做简单demo给程序猿看，算快捷方便了。

备注：

：个人不习惯

】CINEMA 4D

即C4D，它是三维软件，C4D动效设计是很牛的，仅针对带维度的设计，用于UI只能以3D效果做动效设计。

体验：

：：简单易上手

：：不收费

：：每个新建文件，不受其他文件的容量影响；保障了新文件的设计操作很流畅。

：：需要第三方渲染器插件，来设计更多酷炫的场景。

】Adobe After Effects 

AE是功能最强大的UI动画工具之一，也是视觉、UI设计师心目中的行业标准；目前属于设计师学动效的首选。

不仅在动画方面上，在电影、电视、视频和网络的动态图形和视觉效果的合成方面也很出色。

备注：

：：对计算机的处理性能，存储空间有较高要求。高分辨率预览时，渲染速度比较慢。

：：Adobe产品，要收费

】Adobe Photoshop

ps用来作图和处理图像，还可做gif；没有AE之前，ui设计师们都是用ps做gif，用flash做demo；

备注：

：：Adobe产品，要收费

：：占内存，每个新文件无法轻量化，受其他文件存储容量限制。

UI 效率工具

】PxCook

即像素大厨。

link：： pxcook 

体验：

：：可团队协作；

：：标注对象的尺寸 和 切图，以及团队协作时可任意备注观点；

：：收费；有免费使用范围，只能创建一个项目，成员只能3个；新增项目或成员要收费，按月收费。

：：易上手，操作逻辑清晰。

：：支持Mac + win 

】design mirror

即设计镜。

link：：  Mirror

体验：

：：同网络下连接预览；

：：支持iOS + Android

：：易上手，操作逻辑清晰。

：：免费30天，可购买终身。

代耕