1、如何选择合适的App动效设计工具
引用篇最近站酷上看到的文章，觉得讲得不错，原文地址：如何准确的向工程师传达动效设计？|UE|原创/自译教程|TCWison
随着软件与终端的发展，如今的用户体验设计中动效的作用正变得越发重要，也有越来越多的设计师开始尝试让自己的作品“动”起来。但在实际工作中，相信大家常会有这样的疑问：怎样才能将自己精心设计的动态效果，准确的传达给工程师，避免实现的偏差呢？下面我想根据自己的经验，抛砖引玉，和大家聊一下这个话题。
试想一下，在一个沉静的的夜晚，你正为一个界面的过渡动画而苦思冥想，突然一道灵感之光穿越你的脑海，完美的方案浮现眼前。此刻你最想做的，恐怕不是翻阅开发文档研究实现原理，“老子得立刻把它表现出来。”
没错，我们是设计师，设计师要做的是可视化。对于动效来说，凭空描述永远是隔靴搔痒，将自己心中的设计最快速的可视化，是实现的第一步。
一、准确展示：视频Demo
视频Demo是个不错的开始，一段可以反复播放并在大部分设备上均可观看的视频，是让别人快速理解自己想法的最佳媒介。制作视频Demo，本人最常用的工具是After Effects。AE对于动效的控制与表现能力，至今无人能出其右，是我心目中最佳的概念设计工具。
除视频外，AE的另一个优势是，它输出的PNG序列帧素材可以直接应用到一些PC甚至移动端的软件中，作为实现效果。
二、操作体验：交互原型
视频Demo的局限是无法交互，而很大一部分动效都是在用户与界面交互时触发的。这部分动效的启动时机，与手势的关系，仅靠视频Demo就无法100%准确的传达了。这时，如果能有一个可交互的原型，很多问题就会迎刃而解。
对于可交互的原型（Prototype），网上已经有很多文章在讨论，制作工具也五花八门（Flash、Adobe Edge、Quartz Composer、Keynote、Framer、Pixate、Form...），我们该如何选择呢？对于这个问题，我主要看两个点：1、制作好的原型是否便于多人分享。2、是否可以直接输出可用于开发的参数。
基于这两点，我个人的第一个选择是Flash。
由于Apple的原因，Flash如今的境况可算是江河日下。但作为一个动效原型工具，它却有一些独特的优势。
优势1：可以直接导入AE生成的序列帧素材。
对于我这种以AE作为动效设计起始的人来说，这点太重要了。它意味着无需任何重复劳动，只需要在Flash中添加一些基于AS3.0的交互代码，就可以完成原型的制作，并保证自己最初的设计思路在原型阶段不打折扣的实现。
优势2：可以导出.apk或.ipa的安装包，共享给任何有手机的人。
由于本人的工作经常需要异地沟通，原型的可传递性就是个很关键的需求了（总不能把电脑快递过去给人家看吧...）。Flash的打包发布功能，这时就派上了用场。做好的原型通过Air for Android打包一个apk文件，邮件发过去安装在对方手机上，轻松又愉快。
另外一些可关注的工具，还有Pixate和Form，它们都可以通过共享工程文件的方式远程传递，还能通过官方App将原型投射在手机上实时预览，缺点是只能做一些基础的效果，创新一点儿的就搞不定了，不过他们都在不断地迭代更新，尤其是后者，刚被Google收购，未来说不定会有快速的发展。
我个人的第二个工具选择，是Framer Studio。当我把制作好的原型拿给工程师看的时候，经常被问到这样一个问题：“能不能把源码给我们看一下？”这时气氛通常会比较尴尬，因为Flash也好Form也罢，它们制作的原型只能起到演示的作用，而无法直接生成对开发有帮助的代码。此时，除了报班现学Android或iOS开发外，还有没有别的办法呢？答案是：“有！” Framer Studio给了我们一线曙光。
Framer Studio是一个纯编程实现的原型制作工具，有很强的动效实现能力，它的语言是基于Javas cript衍生出的Coffees cript。虽然语法与Android\iOS有不小的区别，但仅就动效这块，很多逻辑是可以共通的。
当然，它的学习成本也会高一些，不过当你拿着一段Framer的源码给工程师看的话，当中的一些动画参数和实现逻辑，多少能给到他们些实际的帮助，所以付出和回报还是成正比的。关于运用Framer的流程，Twitter的设计师分享了他们的经验，大家可以看下这篇文章：《Twitter视频功能设计流程全程剖析》
另外，如果你专注于iOS平台，也可以直接尝试一下Origami，这是个由Facebook团队开发的原型工具，通过链接节点式的操作，无需自己写代码，在它最新的更新中，已经支持导出可供iOS和Android使用的代码，这篇文章做了介：《Introcing Origami Live》
三、协助开发：参数文档
有了视频Demo，有了交互原型，相信工程师们已经理解你要做什么了，那他们是否就可以愉快的把动效实现了呢？答案是：不一定。一些简单的动效，工程师或许可以凭经验搞定。如果你的动效设计很复杂，涉及众多的参数与速率变化，那仅凭你的描述与工程师肉眼的感觉，恐怕要出偏差。这时，就需要参数文档的帮助了。
想要自己的设计能被精确的实现，就一定要对实现的原理有所了解。根据实现原理，把对应的参数精确的写出来，这就是参数文档。对于动效来说，基本参数无非这三类：
1、动画的起始时间、持续时间（ration\ offset）
2、变化的属性（rotation\ position\ scale\ alpha）
3、运动速率（interpolator）
iOS与Android各自的程序语法不太相同，大家可以去官网翻看一下它们的开发者文档，了解两者在动效实现上大概的语法格式，然后对应着把这些参数标好，传递给工程师，他们就真正可以愉快的开发了。
当然，开发过程中少不了和工程师的不断沟通（一些如像素位置、不同机型屏幕比例的细节，包括可能出现的误差），换位思考，不能丢给他文档或demo之后做甩手掌柜，那也是不负责任的表现。
总结：
简单的说，要想准确传达自己的设计可以分三步。
第一步：要快速可视化。
你可以选择任何用的顺手的工具，把自己的想法快速准确的呈现出来，就已经是成功的一半。
第二步：最大限度的还原使用场景。
如果是PC端，就在电脑上演示。如果是移动端，就在手机上演示。如果可操作，那最好做可交互的原型，当然，是在时间成本允许的条件下。
第三步：把设计参数化，尽可能减少让工程师凭感觉开发的情况。
相信我，如果你不希望工程师凭感觉调UI颜色，那么动效同理。一份精确的文档，是你专业性的体现。
最后我想提醒一下，本文提到了很多工具，而工具似乎有能让人着迷的魔力。所以请注意了，千万不要在追求工具的过程中迷失了设计的本源。电影《夜行者》里有一句台词：“想赢彩票的话，你得先赚够买彩票的钱。”同样，我们是设计师，想要工程师实现出酷炫的动效，你得先把它酷炫的设计出来。抓住一切机会提升自己的设计能力吧！那才是你最宝贵的东西。
2、这种音乐动效是用什么软件做的,或者哪里可以找到现成的谢谢.
使用AE制作，全称Adobe After Effects，是一款可以制作3D立体特效的软件，网上搜索可以找到AE模板，直接套入即可回
只看静止画答面看不出是怎样的特效，如果是简单起伏可以先用PS制图，然后用PR制作，PR全称adobe premiere，是一款剪辑软件
以上软件全部需要电脑操作哦
3、UI动效用什么软件做
动效设计软件有哪些？
看到这里可能你最想要知道的就是哪些软件可以做动效？
目前市面上确实蛮多的，丝路教育小编建议学好一个，够用就好。学多而不精其实就是浪费时间！
1.Adobe After Effects
AE这个软件我想都该知道~火得一塌糊涂，如果我没猜错的话，它目前属于设计师学动效的首选。
它的特点就是强大且牛逼。基本上要的功能都有~UI动效制作其实只是用到了这个软件很小的一部分功能而已~要知道很多美国大片都是通过它来进行后期合成制作的~ 配合PS和AI等自家软件来说，更是得心应手啊~dribbble上炒鸡多的大神都是用这个软件在show哦~毕竟这个软件做demo那是拧〔犇逼的~
但是有些效果程序猿不见得能够帮你实现出来哦~ 因为实际的项目产品受太多的制约啦~木有那么多程序猿会没事给你做动效的！
2.Adobe Photoshop
可能很多人都认为ps只用来作图和处理图像的，并不知道ps可以做gif~然而当AE没有火起来的时候，我们这些老ui设计师们都是用ps做gif，用flash做demo（过去我们只需要做PC桌面的动效）。如果我没记错的话，ps从cs6之后开始进一步加强了动效的模块，现在的版本能够实现很多相对复杂的动效哦~
而笔者喜欢用ps来制作简单的表情动画，逐帧动画用得居多
3.Adobe Flash
Flash可以说是过去的王者，也是由于时代的发展原因，现在基本被淘汰了，这里不多做解释，具体可以百度哦。（据说特别耗费cpu和占用内存，软件里面有都爆卡~不淘汰才怪）现在很多很low的网页游戏还在用这种技术~
4.Pixate
这个软件被大牛Google收购了~然而它被Google收购一年后：Pixate Studio宣布却于10月31号被停止更新了~凄凄惨惨戚戚。简单说下它的优缺点：
Pixate是图层类交互原型软件。优点：可交互，共享性强，和Sketch结合相对高，同时对Google Material Design的支持比较好，有许多MD相关预设。Pixate的缺点是没有时间线，层级管理不是很明确，图层一多就会非常的繁杂。
5.Origami
这个软件可以用一句话来形容：超强大的高难度原型工具。
要是没点代码知识做压惊~~建议远处观望就好~
6.Hype 3
hype 3也算是火了一小段时间的~号称无代码动效神器，像AE一样使用时间轴就做可互动的动画。PC、手机、pad端都可以直接访问（以web的形式），也可以导出视频或者GIF。3.0版还有物理特性和弹性曲线，可以发挥更强大的动画效果。对中国人来讲，它原生支持中文这一点也非常棒！配合sketch效果也是杠杠的·~~
7.Flinto
界面跟Sketch很像，如果会用sketch那么上手很快。能够快速实现各种滚动、转场、点击反馈效果。手机和电脑端的预览都非常的流畅。貌似现在用的人不少。
8.Principle
这个软件的和上面的flinto有点类似~界面和sketch类似，同时配合sketch也是非常方便。它主要是做 2 个页面间过渡专场特效，元素切换，细节动效的工具。优点很明显，效率高，质感好，缺点就是不能做整套原型。
9.CINEMA 4D
说到C4D或者大家第一反应是它是三维软件啊~没错！但是它做起动效来也是帅破天际的。
10.keynote
keynote相当于windows的powerpoint，是个幻灯片软件。但是！或许你并不知道，据说苹果的交互设计师都是用keynote做交互演示的......只要能够熟练掌握这个软件，目前app里的绝大多数动效都是可以做出来的~但是相对复杂一点的动效实现起来就有点不够.......但是已经很屌了好吧~~笔者经常为了省事直接都是用它做个简单demo给程序猿看的。快捷方便啊~要知道时间就是金钱啊！
好啦~由于丝路小编也并不是全部了解目前市面上的动效软件，按照自己的理解基本上一些相对主流的动效制作软件就是上面这些，如有漏或者不对的地方还请见谅~
4、PC 端有哪些优秀的动效制作软件
AE AE AE
5、ui动效设计用什么软件
PS AI主要是作页面的内容设计，要做动态的 就要用到AE软件，亲要是没软件，我可以提供，望采纳！
6、如何把AE的动效DEMO准确表达给软件工程师
首先介绍最重要的两个概念：
动画（Animation）
某个界面控件在一段时间内的变化即产生动画。产生动画的维度可以是它的形状、位置、大小、颜色、透明度等，抑或是它们的叠加。
过渡（Transition）
那这个控件在两个状态之间是如何变化的呢？定义这个变化的概念即是过渡。不同的过渡曲线会产生截然不同的效果。通常被提到的有ease in、ease out、bounce等，当然Axure也提供这些效果。以位置为例，一个矩形由下至上移动300px，不同的运动曲线所对应的动效之间有非常明显的区别。
<img src="https://pic1.mg.com/_b.jpg" data-rawwidth="620" data-rawheight="453" class="origin_image zh-lightbox-thumb" width="620" data-original="https://pic1.mg.com/_r.jpg">Source：缓动函数速查表 点击链接可比对不同运动曲线产生的效果差异
过渡曲线可以通过数学公式精确表达出来，通常使用贝塞尔曲线（bezier），是不是有点耳熟？对，Photoshop里的钢笔工具靠的就是它。
由于Android系统自带动画的运动曲线在5.0之前基本接近线性（linear），给人的直观感受非常僵硬。而2013年中发布的iOS7大幅优化了动效的过渡曲线，尤其是上下级界面左右切换时的缓动效果令人印象深刻。所以我在Android某个项目的Demo中模拟了iOS动效的Transiton，并且完整的由工程师实现出来，那是一次非常畅快的合作。那么问题来了，如何向工程师准确描述动效？
向工程师给出准确的动效描述
通过上面的两个概念可以知道，3个参数即可准确描述动效：控件变化的维度、变化的时间、过渡曲线公式。
7、像这种带动效的音乐视频是怎么做出来的？用那一款软件可以？
使用AE制作，全称Adobe After Effects，是一款可以制作3D立体特效的软件，网上搜索可以找到AE模板，专直接套入即可
只看静止画属面看不出是怎样的特效，如果是简单起伏可以先用PS制图，然后用PR制作，PR全称adobe premiere，是一款剪辑软件
以上软件全部需要电脑操作哦
8、UI动效图是用什么软件做的
motion Graphics基本上都是用AE做的。
也有用FL的，不多！
9、app 动效是用什么软件设计的
1. app动效的外在美
一段动效首先需要是生动且有趣的，不仅要有好看的外观还要有流畅的体验。要做到这点，需要赋予动效以生命力，具体有如下几种方法：
1.1 模拟惯性
现实中物体的运动是有惯性的，比如公交车突然刹车时乘客会突然往前一倒。仔细观察下面3段动效，图像在变化（放大、缩小和翻转）的末端都会“超出”一点再立即“反弹”回来，如此的处理方法使得整个动效充满活力，显得生动有趣。
1.2 模拟重力
与惯性一样，重力也是现实中存在的现象，所有物体在无向上的支持力的情况下都会下坠，比如倾倒垃圾。一般app删除卡片的动效就是横向滑动直至消失，但是下面这段动效却加入了重力效应。即卡片在横向滑动的同时也在翻转并下坠，就像现实中往垃圾桶中倾倒垃圾一样。在使得整个动效生动有趣的同时也便于用户理解操作含义。
1.3 均匀变速
一个优秀的动效肯定不会是匀速运动的，匀速运动的物体显得生硬和死板，就像机器人一样。要想让一个图像运动的有活力，就需要对其运动的速度进行“设计”。仔细观察下图所示动效，虽然界面中不同元素的运动速度不尽相同，但其运动均遵循一定的原则，其中之一就是均匀变速，切记“急起”。就是说界面元素在运动时的初始速度要为0，以匀加速开始运动，而在运动结束阶段往往是可以急停的。
1.4 碎片化运动
使一款应用变得个性十足的一个好方法就是给它加上炫酷的动效，而使一个动效炫酷的常用方法就是碎片化运动。简单说就是把界面中的图像拆解成一个个碎片，然后让它们进行不同步的运动，利用时间间隔和变速产生炫酷的效果。就如下面一则动效，图像中的不同元素有节奏的呈现，利用时间差来制造效果。
2. app动效的内在美
真正优秀的动效不是只有漂亮外表的花瓶，还得具备优化交互和提升体验的作用。下面总结了3个动效的“内在美”，分别为引导、简化和增强反馈。
2.1 引导
图形界面本是难懂且抽象的，增强引导是降低软件操作难度和提升用户体验的好方法。
2.1.1 动态聚焦
通过动态化的处理引导用户聚焦界面的关键部位，以使体验更加的流畅。青蛙能够快速捕捉移动中的物体，人眼也具有相似特征，运动中的物体总能引起下意识的关注。如下图所示动效，屏幕上方的数字不是直接显示一个数值，而是从0迅速递增到该数值，特意表现一个动态的效果，目的就是为了吸引用户的目光，起到聚焦的作用。国内的支付宝钱包APP也利用了此类特效。
2.1.2 示意过渡
过渡动效就是给界面的变化加上流畅的过渡，目的是引导用户理解到底发生了什么，而不会使其不知所措。如下图所示动效，添加卡片的过程进行了生动的模拟，让用户很轻易地理解发生了什么。试想一下，如果该页面没有滑动效果，而是直接生硬的跳转，是不是差劲很多？
2.1.3 空间转场
转场动效是被设计师所普遍重视的一种特效，它的作用也是引导用户，让用户更好地理解页面跳转，知道自己身在何方。下图所示一则动效就是一个漂亮的转场动效，为了避免两个页面之间的跳转过于生硬，利用动效填补上了页面跳转的中间过程，使得体验更加流畅和自然。
2.2 简化
有时优秀的设计就是出色的简化。简化界面信息和交互层级可以降低操作难度和提升用户体验。
2.2.1 隐藏二级操作项
利用动效可以使界面中的部分信息隐藏，当进行某些操作后隐藏的内容会动态展开，从而达到简化初始界面的目的，使界面简洁大气。
2.2.2 按钮动效化
使按钮动效化能够让界面重要信息动态浮现在同一按钮上，使得用户的目光紧紧盯着按钮，弱化了页面跳转带来的干扰，使体验更加流畅。
2.3 增强反馈
软件的反馈对于体验的提高来讲至关重要，增强反馈可以起到更好的提示作用，使体验过程更加轻松和愉悦。抖动是增强反馈的方法之一，用动效反馈替代图形文字的静态提示，更加自然和引人注目。下图所示动效出自苹果的Pages软件，当进入编辑态后待编辑对象进入不断的抖动状态，起到很好的引导作用。
3. 总结
动效化显然已成为移动互联网产品的新趋势，如何设计出有趣且吸引人的动效已成为设计师们的新课题。不同的产品适合不同类型的动效，有些产品适合炫酷的动效，有些则不适合。切记不要把动效设计成华而不实的花架子，而应该将其视为提升用户体验的新方法。
10、APP中一些简单的加载动效是如何实现的？需要用什么软件去做
Ps、Flash、Ae都可以，用在交互动效中flash就可以AE是纯粹的视觉特效软件虽然定位是影视专后期，属但是网页也有使用，作为UI设计师用AE只能说你很新潮很厉害，AE也有自己基于JavaScript语言的表达式来实现高级动画控制，目前来看AE现在用的最多的领域是CG、多媒体行业的领域。
Flash给大多数人的印象，这是一个矢量动画软件，但是容易忽略的一点就是动画并非是Flash的全部，它并不像AE一样纯粹的构建视觉特效它还可以做游戏、做网站开发，能做很多东西一个明显的特征就是“交互性”，比如玩游戏就是一种交互。
作为UI设计师flash用于做动效就可以，毕竟AE做出来的东西更适合看。