时间: 2021-07-30 10:17:14 人气: 12 评论: 0
对如今的UX设计师来说,**点动效什么的基本已是常规操作了。作为UX设计师,动效可以辅助的产出可以涵盖界面交互动效、项目宣传MG动画、产品吉祥物表情包、年终汇报PPT等等。这些技能点虽然广,但是只需要掌握基础实用的几个点就足以辅助我们更好的包装输出。
在之前的文章项目1-2的设计总结提升里也简单介绍过,交互动效存在的意义和基本类型介绍,这里我们来全面详聊一下~
首先我们先区分几个动效的概念。
MG动画(Motion Graphics),简单点来说就是图文动画的意思。MG动画的整体运用十分广泛,其中包括电影开头、电视开头、栏目包装、产品演示、广告节目等各个领域。
作为互联网设计师,我们可以使用简单的MG动画来进行APP展示:比如:app store的video、官网video或者工作汇报中的的项目成果展示,总体我们可以把它划分在品牌设计的类别中。
如今的微信表情平台发展成了一个表情包行业,可以让设计师发布自己设计的表情包供微信用户使用,其中一部分表情包是带有动效的,即逐帧动画的产物,以小gif的格式呈现。
在用户体验界面设计中,因交互需求而发生的动效设计,例如:loading、转场、点击反馈等。
现在越来越多专业化UX交互动效软件助力实现html在手机上的实时操作反馈,就仿佛你不用代码做了一个app出来。
之前经常看到动效作品底下总**有童鞋在下问“大佬,哪个软件做的呀?”,这里来做个统一总结,以后这种问题就不用再去问别人了。
大家最熟悉不过的AE,做UI动效最常见的软件。
嗯对,你没有看错,是你每天都要打开的阿逗比家ps,它也是可以做动效的。
如果说AE是UX动效届的ps(功能繁杂且全面),那么Hype 3应该就是UX动效届的sketch(针对型强且易操作)。
其实这2玩意差不太多,都是更简易版的Hype 3。
这个应该是设计师都知道的神器,一如宣传语“让你的演示文稿提神提气、出类拔萃“,比PPT好用一万倍。
因为在座各位大部分都是UX设计师,所以以下着重介绍一下:如何用AE实现几个核心UI动效技能点?
交互动效的初衷是为了给产品带来舒适的用户体验,那么从本质上每一个交互动效的过渡都应该遵从物理曲线与缓动原则,比如:下拉的重力感、过场的缓入缓出,避免产品像机器般给用户带来生硬的感受。
AE应用
看不清的话,可以点击看大图哦
遮罩功能可以解决许多你想不到的动效问题,达到一个比如魔术化的效果,也是MG动画转场常用功能之一。简单理解来说,就是将动效分为2层(底层是展示图,顶层是遮罩),通过改变的遮罩大小,我们可以看到底层展示图的不同部分。
AE应用
工具型APP中常用的数值变化动效,可以灵活展现数字变化的过程,在MG动画中使用也是一种数据的震撼表现方式。
AE应用
设置3D属性可以让物体拥有XY轴空间,立体化表达物体概念。
AE应用
iOS源生的毛玻璃效果在很多动效软件上都受到限制,当然AE是无所不能的。这里单独作为一个技能点来和大家分享还因为AE中毛玻璃效果的制作还**牵扯到一个关键点——“调节层”的使用,通过毛玻璃的应用大家应该可以举一反三出它的更多用法。
AE应用
UI动效中高频出现的路径描绘动效实现技能,从LOGO到图标都可以通过AI导入形状路径来完成路径描绘动效。这里只介绍比较实用的开放式修剪路径(即线条路径),封闭式修剪路径应用不多(即形状路径)。
AE应用
图形的融合变换,有很多种做法,这里介绍效果最好的一种。
AE应用
缓慢抖动是常在动态mockup中见到的效果,这里应用到“表达式”的使用,也是属于可以举一反三应用于多种地方的重要技能点。其中可以使用表达式的除了抖动效果,还有头尾相接的无限循环等。
AE应用
之前做手机清理类APP经常**涉及到的流量表达动效,虽然做起来不是很简单,但是效果非常好。
这里应用的是“置换图”技能,大家同样可以使用“置换图”方法举一反三。
AE应用
写这篇动效总结文,主要是因为工作需要最近刚刚做了个动效视频,配合团队伙伴的设计立项宣讲效果灰常之好,感觉这确实是一种很出彩的包装和宣传自己思路的一种方式。
最近工作接收的信息量一直比较大,目前在接业务需求同时并行多个task,包括动态化组件平台的搭建和数据分析~
不过虽然task多,但是在一种很讲究效率的状态下进行的,这一点很开心。
下一篇争取憋个大招,还请各位耐心等待。
本文由 @NaNa 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自 Pexels,基于 CC0 协议