app动效设计

Ⅰ UI设计：如何使用PS时间轴制作APP界面动效

首先，得看你在什么平台什么机型上面展示，现在移动端很杂，具体要做什么机型的然内后在网络那个平台机型图标容尺寸，就可以了。 做练习的话一般大家通常会按照苹果最新机型做，你可以找找苹果的尺寸顺便找下手机素材，展示的时候放到手机里面展示效...

Ⅱ 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给程序猿看的。快捷方便啊~要知道时间就是金钱啊！
好啦~由于丝路小编也并不是全部了解目前市面上的动效软件，按照自己的理解基本上一些相对主流的动效制作软件就是上面这些，如有漏或者不对的地方还请见谅~

Ⅲ 设计师设计出来的app动效程序员如何去做

想要说服人，最好先理解对方吧。
实现一个牛B的功能在研发眼里会比反复调试一个UI界面要更内有成就感的多。而且容可能研发也真心觉得这个UI视觉并不好看，所以更加不愿意合作。
所以遇到一个愿意认真仔细调试UI的研发人员，请主动给他们32个赞。

首先你得让研发人员清晰的认识到按照你说的这样做对让产品本身有什么好处？这个得靠你的沟通能力了。我的建议是不要等到需要上需求了才跟研发人员说这个怎么怎么好，功夫在线下。平时就该多拿一些别人的产品里比较好的设计给研发看看，勾起他们的兴趣，让他们心里认可好UI的价值。
另外就是不要把自己放在一个下命令的角色位置，多尝试跟研发人员多沟通，不同的动效和视觉在研发时的麻烦程度也是不一样的。听听研发人员的意见，不要强制只能按照你想的来。

总之，多理解，多沟通。都不容易

Ⅳ 如何开发android app 动效

1、APP动效的外在美

一段动效首先需要是生动且有趣的，不仅要有好看的外观还要有流畅的体验。要做到这点，需要赋予动效以生命力，具体有如下几种方法：

1.1模拟惯性

现实中物体的运动是有惯性的，比如公交车突然刹车时乘客会突然往前一倒。

1.2模拟重力

与惯性一样，重力也是现实中存在的现象，所有物体在无向上的支持力的情况下都会下坠，比如倾倒垃圾。一般APP删除卡片的动效就是横向滑动直至消失， 但是下面这段动效却加入了重力效应。即卡片在横向滑动的同时也在翻转并下坠，就像现实中往垃圾桶中倾倒垃圾一样。在使得整个动效生动有趣的同时也便于用户理解操作含义。

1.3均匀变速

一个优秀的动效肯定不会是匀速运动的，匀速运动的物体显得生硬和死板，就像机器人一样。要想让一个图像运动的有活力，就需要对其运动的速度进行“设计”。

1.4碎片化运动

使一款应用变得个性十足的一个好方法就是给它加上炫酷的动效，而使一个动效炫酷的常用方法就是碎片化运动。简单说就是把界面中的图像拆解成一个个碎 片，然后让它们进行不同步的运动，利用时间间隔和变速产生炫酷的效果。

2、APP动效的内在美

真正优秀的动效不是只有漂亮外表的花瓶，还得具备优化交互和提升体验的作用。

2.1引导

图形界面本是难懂且抽象的，增强引导是降低软件操作难度和提升用户体验的好方法。

2.1.1动态聚焦

通过动态化的处理引导用户聚焦界面的关键部位，以使体验更加的流畅。青蛙能够快速捕捉移动中的物体，人眼也具有相似特征，运动中的物体总能引起下意识 的关注。

2.1.2示意过渡

过渡动效就是给界面的变化加上流畅的过渡，目的是引导用户理解到底发生了什么，而不会使其不知所措。

2.1.3空间转场

转场动效是被设计师所普遍重视的一种特效，它的作用也是引导用户，让用户更好地理解页面跳转，知道自己身在何方。

2.2简化

有时优秀的设计就是出色的简化。简化界面信息和交互层级可以降低操作难度和提升用户体验。

2.2.1隐藏二级操作项

利用动效可以使界面中的部分信息隐藏，当进行某些操作后隐藏的内容会动态展开，从而达到简化初始界面的目的，使界面简洁大气。

2.2.2 按钮动效化

使按钮动效化能够让界面重要信息动态浮现在同一按钮上，使得用户的目光紧紧盯着按钮，弱化了页面跳转带来的干扰，使体验更加流畅。

2.3增强反馈

软件的反馈对于体验的提高来讲至关重要，增强反馈可以起到更好的提示作用，使体验过程更加轻松和愉悦。抖动是增强反馈的方法之一，用动效反馈替代图形 文字的静态提示，更加自然和引人注目。

Ⅳ AE做出来的app动效怎么在实际app中实现

Ps、Flash、Ae都可以，用在交互动效中flash就可以AE是纯粹的视觉特效软件虽然定位是影视后期专，但是网页也有使属用，作为UI设计师用AE只能说你很新潮很厉害，AE也有自己基于JavaScript语言的表达式来实现高级动画控制，目前来看AE现在用的最多的领域是CG、多媒体行业的领域。 Flash给大多数人的印象，这是一个矢量动画软件，但是容易忽略的一点就是动画并非是Flash的全部，它并不像AE一样纯粹的构建视觉特效它还可以做游戏、做网站开发，能做很多东西一个明显的特征就是“交互性”，比如玩游戏就是一种交互。 作为UI设计师flash用于做动效就可以，毕竟AE做出来的东西更适合看。

Ⅵ 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. 总结
动效化显然已成为移动互联网产品的新趋势，如何设计出有趣且吸引人的动效已成为设计师们的新课题。不同的产品适合不同类型的动效，有些产品适合炫酷的动效，有些则不适合。切记不要把动效设计成华而不实的花架子，而应该将其视为提升用户体验的新方法。

Ⅶ 如何选择合适的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颜色，那么动效同理。一份精确的文档，是你专业性的体现。
最后我想提醒一下，本文提到了很多工具，而工具似乎有能让人着迷的魔力。所以请注意了，千万不要在追求工具的过程中迷失了设计的本源。电影《夜行者》里有一句台词：“想赢彩票的话，你得先赚够买彩票的钱。”同样，我们是设计师，想要工程师实现出酷炫的动效，你得先把它酷炫的设计出来。抓住一切机会提升自己的设计能力吧！那才是你最宝贵的东西。

Ⅷ APP中一些简单的加载动效是如何实现的需要用什么软件去做

Ps、Flash、Ae都可以，用在交互动效中flash就可以AE是纯粹的视觉特效软件虽然定版位是影视后期，权但是网页也有使用，作为UI设计师用AE只能说你很新潮很厉害，AE也有自己基于JavaScript语言的表达式来实现高级动画控制，目前来看AE现在用的最多的领域是CG、多媒体行业的领域。
Flash给大多数人的印象，这是一个矢量动画软件，但是容易忽略的一点就是动画并非是Flash的全部，它并不像AE一样纯粹的构建视觉特效它还可以做游戏、做网站开发，能做很多东西一个明显的特征就是“交互性”，比如玩游戏就是一种交互。
作为UI设计师flash用于做动效就可以，毕竟AE做出来的东西更适合看。

Ⅸ Web，App中添加动效设计有哪些优点

曾近某高级产品经理指导工作中一再的强调要炫酷炫酷，动效交互不能少。于是苦逼兮兮地内在原容型上加各种交互。但是最终做出来的成品很差强人意。用户体验糟糕，炫酷的效果大打折扣。吸取了如此教训，那一起来看看动效炫酷的效果应该如何做吧~
没有用户请求就不会产生交互当你关闭一个标签时，它就会从屏幕上消失：简单地说，这给了用户一个即时的反馈动作(这个视觉效果对我们来说非常重要)。深入地说，动作让人类感受到了现实生活中的行为。动画让界面变得鲜活，带给用户真实的响应感觉。

Ⅹ 国外漂亮的APP 动效UI设计有哪些

目前在国内UI还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。版我们经常看到一些权招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。 但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。《转UI网》很看好这个行业。