很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
友情提示
本文信息量较大，建议在WIFI环境下阅读，土豪请忽略~
对如今的UX设计师来说，会点动效什么的基本已是常规操作了。作为UX设计师，动效可以辅助的产出可以涵盖界面交互动效、项目宣传MG动画、产品吉祥物表情包、年终汇报PPT等等。这些技能点虽然广，但是只需要掌握基础实用的几个点就足以辅助我们更好的包装输出。
在之前的文章项目1-2的设计总结提升里也简单介绍过交互动效存在的意义和基本类型介绍，这里我们来全面详聊一下~
1
关于动效分类
首先我们先区分几个动效的概念。
MG动画
MG动画（Motion Graphics），简单点来说就是图文动画的意思。MG动画的整体运用十分广泛，其中包括电影开头,电视开头,栏目包装,产品演示,广告节目等各个领域。
作为互联网设计师，我们可以使用简单的MG动画来进行APP展示：比如app store的video、官网video或者工作汇报中的的项目成果展示，总体我们可以把它划分在品牌设计的类别中。
表情包动图
如今的微信表情平台发展成了一个表情包行业，可以让设计师发布自己设计的表情包供微信用户使用，其中一部分表情包是带有动效的，即逐帧动画的产物，以小gif的格式呈现。
Ui交互动效
在用户体验界面设计中，因交互需求而发生的动效设计，例如：loading、转场、点击反馈等。现在越来越多专业化UX交互动效软件助力实现html在手机上的实时操作反馈，就仿佛你不用代码做了一个app出来。
2
关于做动效的软件
之前经常看到动效作品底下总会有童鞋在下问“大佬，哪个软件做的呀？”，这里来做个统一总结，以后这种问题就不用再去问别人了。
1.Adobe After Effects
大家最熟悉不过的AE，做UI动效最常见的软件。
优点：面向电影特效的软件，可以完成的动效种类与复杂程度可想而知，灵活配合阿逗比自家的ps、ai占尽方便，可提供Lottie动画库Jason文件
缺点：入门门槛高，功能繁杂，学习成本高
导出格式：mov视频文件。
2.Adobe Photoshop
嗯对，你没有看错，是你每天都要打开的阿逗比家ps，它也是可以做动效的。
优点：同样使用timeline设计动效，操作较简单
缺点：可完成的动效效果寥寥无几，适合用来完成逐帧动画（如表情包里的简单小gif）
导出格式：gif动图文件。
3.Hype 3
如果说AE是UX动效届的ps（功能繁杂且全面），那么Hype 3应该就是UX动效届的sketch（针对型强且易操作）。
优点：易上手、无需代码可以实现实时交互动效操作、原生界面支持中文，3.0版本后支持更多动画效果。
缺点：可完成动效效果有限。
导出格式：gif动图/视频/png/Html，pc、mobile实时操作。
4.Flinto/Principle
其实这2玩意差不太多，都是更简易版的Hype 3。
优点：操作简单的一如sketch，有sketch插件可以配合使用，效率高，无需代码可以实现实时交互动效操作
缺点：可完成动效效果比Hype 3还有限。
导出格式：视频mov，链接只能在手机上同步预览，可录屏。
5. Keynote
这个应该是设计师都知道的神器，一如宣传语“让你的演示文稿提神提气、出类拔萃“，比PPT好用一万倍。
优点：无脑操作，效果一流
缺点：仅有有效的过渡动效
导出格式：keynote文件
3
UI动效常用核心技能盘点
因为在座各位大部分都是UX设计师，所以以下着重介绍一下如何用AE实现几个核心UI动效技能点。
Skill Point 1：缓动
交互动效的初衷是为了给产品带来舒适的用户体验，那么从本质上每一个交互动效的过渡都应该遵从物理曲线与缓动原则，比如下拉的重力感、过场的缓入缓出，避免产品像机器般给用户带来生硬的感受。
AE应用
1. 选中关键帧---动画>关键帧辅助>缓动 | animation>keyframe assistant>easy ease （或点击关键帧右键>关键帧辅助>缓动）
2. 图形编辑器>使视图适应所有曲线>拖动端点调整曲线 | Graph Editor > Fit all graphs to view
看不清的话，可以点击看大图哦
Skill Point 2：遮罩
遮罩功能可以解决许多你想不到的动效问题，达到一个比如魔术化的效果，也是MG动画转场常用功能之一。简单理解来说，就是将动效分为2层（底层是展示图，顶层是遮罩），通过改变的遮罩大小，我们可以看到底层展示图的不同部分。
AE应用
1. 选中形状工具在固态层或合成的预合成 | solid 或者 Pre-compose上画一个形状（即完成该图层的遮罩mask）
2. 下拉遮罩属性即可调整遮罩路径、大小、羽化、透明度等数值
Skill Point 3：值变
工具型APP中常用的数值变化动效，可以灵活展现数字变化的过程，在MG动画中使用也是一种数据的震撼表现方式。
AE应用
1. 新建文本层并选中---效果>文本>数字 | Effect>texts>numbers
2. 参数设置
Skill Point 4：3D翻转
设置3D属性可以让物体拥有XY轴空间，立体化表达物体概念。
AE应用
1.打开图层3D图层属性 | 3D layer
2.设置XY轴属性
Skill Point 5：毛玻璃效果
iOS源生的毛玻璃效果在很多动效软件上都受到限制，当然AE是无所不能的。这里单独作为一个技能点来和大家分享还因为AE中毛玻璃效果的制作还会牵扯到一个关键点——“调节层”的使用，通过毛玻璃的应用大家应该可以举一反三出它的更多用法。
AE应用
1. 图层>新建>调节层 | layer>new>adjustment layer (注意该图层需要位于需要被模糊的图层与毛玻璃遮罩图层之间）
2. 选中调节层---效果>模糊与锐化>高斯模糊
3. 建立一个遮罩图层（遮罩形状大小调整为毛玻璃展现区域形状大小）
4. Ctrl+C复制遮罩图层路径>Ctrl+V粘贴到调整层
5. 按照需求调节遮罩图层的透明度属性即可看到毛玻璃效果咯
Skill Point 6：修剪路径（开放式）
UI动效中高频出现的路径描绘动效实现技能，从LOGO到图标都可以通过AI导入形状路径来完成路径描绘动效。这里只介绍比较实用的开放式修剪路径（即线条路径），封闭式修剪路径应用不多（即形状路径）。
AE应用
1. 形状图层>添加>修剪路径 | shape layer>add>Trim Paths
2. 设置结束、开始属性，完成路径动效
Skill Point 7：融合
图形的融合变换，有很多种做法，这里介绍效果最好的一种。
AE应用
1. 新建调节层---效果>快速模糊 | Effect>fast blur
效果>色阶 | Effect>levels
2. 参数调整
Skill Point 8：抖动
缓慢抖动是常在动态mockup中见到的效果，这里应用到“表达式”的使用，也是属于可以举一反三应用于多种地方的重要技能点。其中可以使用表达式的除了抖动效果，还有头尾相接的无限循环等。
AE应用
1. alt+需要抖动图层属性关键帧小秒表>在时间轴上出现的空间里写上wiggle(数值A，数值B)
2. 调整数值A（每秒震动次数）、B（运动范围像素值）达到自己想要的抖动效果（我一般用1,20达到一个缓动的效果）
Skill Point 9：水波纹
之前做手机清理类APP经常会涉及到的流量表达动效，虽然做起来不是很简单，但是效果非常好。这里应用的是“置换图”技能，大家同样可以使用“置换图”方法举一反三。
AE应用
1. 新建形状图层（命名为“波浪”）>效果>扭曲>置换图 | new shape layer>effect>distort>replacement map
2. 新建固态层>效果>无线电波 | new solid layer>effect>radio wave
3. 将2中的固态层合成预合成，命名为“置换图”（注意转移所有属性）
4. 将“置换图”预合成的开始点移到最左边---效果>快速模糊 | effect>fast blur
5. 点击”波浪“层的置换图属性，选择“置换图”预合成替换
6. 隐藏“置换图”预合成
题外话
写这篇动效总结文，主要是因为工作需要最近刚刚做了个动效视频，配合团队伙伴的设计立项宣讲效果灰常之好。感觉这确实是一种很出彩的包装和宣传自己思路的一种方式。
最近工作接收的信息量一直比较大，目前在接业务需求同时并行多个task，包括动态化组件平台的搭建和数据分析~不过虽然task多，但是在一种很讲究效率的状态下进行的，这一点很开心。
下一篇争取憋个大招，还请各位耐心等待。
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)