赞助商
立即赞助

用一篇文章,帮你掌握基础实用的动效技能

UI设计3年前 (2021)更新 流光
4.6K 0 0

对今的 UX 设计师来说,点动效基本已是常规操作了。作为 UX 设计师,动效可以辅助出可以涵盖界交互动效、项目宣传 MG动画、品祥物表情、年终汇报 PPT 等等。这些技能虽然广,是需要掌握基础实用几个足以辅助我们更好装输出。

一、动效分类

首先我们先区分几个动效概念。

1. MG动画

MG动画(Motion Graphics),简单来说是图文动画意思。MG动画体运用十分广泛,其括电影开头、电视开头、栏目装、品演示、广告节目等各个领域。

为互联网设计师,我们以使用简单的 MG动画来进行 APP 展示:比 app store 的 video、官网 video 或者工汇报中的项目成果展示,总我们以把它划分在品牌设计的类别中。

2. 表情包动图

今的微信表情平台展成一个表情包行业,以让设计师自己设计的表情包供微信用户使用,其中一部分表情包是带有动效的,即逐帧动画的产物,以小 gif 的式呈现。

3. UI 交互动效

在用户验界面设计中,因互需求而生的动效设计,例如:loading、转场、击反馈等。

现在越来越业化 UX 互动效软件助力现 html 在手机上的时操反馈,就仿佛你不用代码做一个 app 出来。

二、做动效的软件

之前经常看到动效品评论里总有同学在问「大佬,哪个软件做的呀?」,里来做个统一总结。

1. Adobe After Effects

用一篇文章,帮你掌握基础实用的动效技能

大家最熟悉不过 AE,做 UI 动效最常见软件。

优点:面向电影特效的软件,以完成的动效种类与复程度想而,灵活合 Adobe 自家的 ps、ai,提供 Lottie 动画库 Jason 文件。

缺点:入门门槛高,功能繁杂,学习本高。

导出格式:mov 视频文件。

2. Adobe Photoshop

用一篇文章,帮你掌握基础实用的动效技能

每天都打 Adobe 家的 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 文件。

三、UI 动效常用核心技能盘点

为在座各位大部分都是 UX 设计师,所以以下着介绍下,如何用 AE 实现几个核心 UI 动效技能。

Skill Point 1:缓动

用一篇文章,帮你掌握基础实用的动效技能

交互效的初衷是为了给产带来舒适的户体验,那么从本质上每一个交互效的过渡都应该遵从物曲线与缓原则,如:拉的重感、过场的缓入缓,避免产像机器般给户带来生硬的感受。

AE应

  • 选中关键帧——动画>关键帧辅>缓动 | animation>keyframe assistant>easy ease (或点击关键帧右键>关键帧辅>缓动);
  • 图形编辑器>使视图适应所有曲线>拖动端点调整曲线 | Graph Editor > Fit all graphs to view。

用一篇文章,帮你掌握基础实用的动效技能

Skill Point 2:遮罩

用一篇文章,帮你掌握基础实用的动效技能

遮罩功可解决许多你想到的效问题,达到一个如魔术的效果,是 MG画转场功之一。简单来说,就是将效分为2层(层是展示图,顶层是遮罩),通过改变的遮罩大小,我们可看到层展示图的同分。

AE应

  • 选中形状具固态层或合的预合 | solid 或者 Pre-compose 画一形状(即完该图层的遮罩 mask);
  • 下拉遮罩属性即可调整遮罩路径、大、羽化、透度等数值。

用一篇文章,帮你掌握基础实用的动效技能

Skill Point 3:值变

用一篇文章,帮你掌握基础实用的动效技能

工具 APP 中的数值变效,可灵展现数字变的过程,在 MG画中使是一种数据的震撼表现方式。

AE应

  • 新建文本层并选中——效果>文本>数字 | Effect>texts>numbers;
  • 参数置。

用一篇文章,帮你掌握基础实用的动效技能

Skill Point 4:3D翻转

用一篇文章,帮你掌握基础实用的动效技能

设置3D属性可物体拥有 XY轴空间,立体表达物体概念。

AE应

  • 打图层3D图层属性 | 3D layer;
  • 置 XY轴属性。

用一篇文章,帮你掌握基础实用的动效技能

Skill Point 5:毛玻璃效果

用一篇文章,帮你掌握基础实用的动效技能

iOS 源生的毛玻璃效果在很多效软件上都受到限制,当然 AE 是无的。这里单独作为一个技点来和大分享,还因为 AE 中毛玻璃效果的制作还会牵扯到一个键点——「调节层」的使,通过毛玻璃的应大应该可举一反它的更多法。

AE应

  • 图层>新建>调节层 | layer>new>adjustment layer (注意该图层需于需被模糊的图层与毛玻璃遮罩图层之间);
  • 选中调节层——效果>模糊锐化>高斯模糊;
  • 建立一个遮罩图层(遮罩形状大小调整为毛玻璃展现区域形状大小);
  • Ctrl+C 复制遮罩图层路径>Ctrl+V 粘贴到调层;
  • 按照需求节遮罩图的透明度属即看到毛玻璃效果。

用一篇文章,帮你掌握基础实用的动效技能

Skill Point 6:修剪路径(开放式)

用一篇文章,帮你掌握基础实用的动效技能

UI 动效中高频出的径描绘动效实技能,从 LOGO 到图标都可以通过 AI 导入形状径完径描绘动效。这里只介绍比较实用的式修剪径(即线条径),封闭式修剪径应用不多(即形状径)。

AE应用

  • 形状图层>添加>剪路径 | shape layer>add>Trim Paths;
  • 设置结束、开始属,完成路径动效。

用一篇文章,帮你掌握基础实用的动效技能

Skill Point 7:融合

用一篇文章,帮你掌握基础实用的动效技能

图形的融合变换,很多种法,这里介绍效果好的一种。

AE应用

  • 新调节层——效>快速模糊 | Effect>fast blur。效>色阶 | Effect>levels;
  • 参数整。

用一篇文章,帮你掌握基础实用的动效技能

Skill Point 8:抖动

用一篇文章,帮你掌握基础实用的动效技能

缓慢抖动常动态 mockup 中见到的效果,这里应用到「表达式」的使用,也属于可以举一反三应用于多种方的重技能点。其中可以使用表达式的除了抖动效果,还尾相接的无限循环。

AE应用

  • alt+需要抖动图层属性关键帧小秒表>在时轴上出现空里写上 wiggle(数值A,数值B);
  • 整数值A(每秒震动次数)、B(运动范围像素值)达到自己想要的抖动效果(我一般用1,20达到一个缓动的效果)。

用一篇文章,帮你掌握基础实用的动效技能

Skill Point 9:水波纹

用一篇文章,帮你掌握基础实用的动效技能

之手机清理类 APP 常会涉及到的流表达动效,虽然起不很简单,但效果非常好。

这应用的是「置换图」能,大家同可以使用「置换图」方法举一反三。

AE应用

  • 新建形状图(命名为「波浪」)>效果>扭曲>置换图 | new shape layer>effect>distort>replacement map;
  • 新建固态层>效果>无线电波 | new solid layer>effect>radio wave;
  • 将2中的固层成预成,命名为「置换图」(注转移所有属性);
  • 将「置换图」预合成的开始点移到最左边——效果>快速模糊 | effect>fast blur;
  • 击「波浪」层换图属性,选择「换图」预合成替换;
  • 隐藏「置换图」预合成。

用一篇文章,帮你掌握基础实用的动效技能

用一篇文章,帮你掌握基础实用的动效技能

欢迎关注作者公众号:「Nana的计锦囊」

用一篇文章,帮你掌握基础实用的动效技能

图片素材作者:Thunder Rockets

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在《用户体验的要素》一本书中,Jesse James Garrett 将用户体验分为了五个层级,战略层,范围层,结构层,框架层,表现层。 ...
App设计
近年来,「设计规范」逐渐被「设计体系」或「设计语言」的概念重塑。基于一套架构严谨、规则统一的体系框架,产品表现层面的...
一致性原则
MG 全称是 Motion Graphic(动态图形),是一种现在非常流行的动画分支。它更像是介于平面设计与动画片之间的一种产物。动态...
MG动效
王M争:用户在使用产品过程中,难免会犯错。一个好的产品可以降低用户犯错的概率,并且提升错误被解决的效率。通俗点说就是帮...
容错性
最近在做迭代改版设计,在这期间遇到了很多问题,其中一个就是我在上篇文章《「瞬间之美」读书笔记:Web界面设计如何让用户心...
一致性原则
图标的分类和风格有很多种,而设计图标的时候,如何才能抓住用户的眼球,设计出自己满意的图标呢? 欢迎关注译者的微信公...
ICON
学完这边文章之后,任何复杂的造型应该都能绘制出来,学会绘制造型是设计的第一步,也是基础。 一、分析Yoga Style Yoga 全名...
logo造型
用户测试其实相当于在收集用户对某一个功能,或流程的行为反馈数据以及满意度指标数据,但很多时候你的用户测试是无效的,那...
可用性测试