赞助商
立即赞助

超全面!写给设计师的动效知识库

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

Motion Graphic 也称 Mg 或者 Mograh,通常翻译动效或者动态图形。

超全面!写给设计师的动效知识库

动效是什么?

Motion Graphic 称为 Mg 或者 Mograh,通翻译为动效设计或者动态图形。它已经成为 UI 设计师不或缺的技能之一。动效的目的是告诉用户元素之间的关系以及哪是点击的、哪是不点击的元素。还暗示界面将出现什么内容等等功能。在情感化设计理论中,动效是能够拉近用户与产品之间距离的设计手段。优的动效为常见的互增加很趣味,让品牌更加深人心。Material Design 的动效规范非常适合我们学习动效识,但由机翻不准确和示例式等问题给中国设计师学习带来一困扰。为此,我用一个月时间去消化并翻译为准确的业词汇,并结合我自身的动效经验内容,为大家总结篇动效识,希望对大家学习动效有所裨益。在我们开始之前,让我们先来看一优的动效吧:

超全面!写给设计师的动效知识库

△ 该动效暗示收件箱和邮件之间的级结构

超全面!写给设计师的动效知识库

△ 该动效将菜单图标与操结合在一

超全面!写给设计师的动效知识库

△ 该动效暗示页卡和内容之间的次结构

1. 反馈与状态

动效设计除具有暗示级结构的功能,也以说明操的状态或是对操进行反馈。扁平化设计是 UI 设计的主流趋势,其缺点就是无法传递给用户够的情感,生动的动效刚以弥补一点。设想一下,每点击一个按钮,它就像果冻或者是塑料一样产生反馈,是不是特别有趣呢?

超全面!写给设计师的动效知识库

△ 该动效提示键盘输的操,并告诉用户个操是否成功

超全面!写给设计师的动效知识库

△ 该动效暗示内容正在加载,并即将出现

2. 用户教育

动效还以指导一次使用产品的用户应该何操,让用户在轻松的氛围下学习。的动效以让用户在几秒钟的时间里看懂产品的使用方法,要比生硬的图文说明。

超全面!写给设计师的动效知识库

△ 该动效提示何滑动手势来完成锁操

超全面!写给设计师的动效知识库

△ 该动效提示所选项目的位置

3. 角动画

优的角动画还以为产品的互增添个和吸引力,让用户流连忘返。也许就是我们在孩时代就喜欢动画的原因吧。果产品有吉祥物,就更需要我们来设计角动画。准备为你的项目创建角动画吗?

超全面!写给设计师的动效知识库

△ 优的角动效以创造美的一印象

超全面!写给设计师的动效知识库

△ 角动画以为错误提示增加趣味

动效的结构

超全面!写给设计师的动效知识库

把动效的结构为:出动画、入动画和持续动画。页面中不需要运动的素称为静素。素的属性决定了动效的转换方式。在计动效一定要考虑每个素的逻辑和属性,再据此配不同的效果。

超全面!写给设计师的动效知识库

  • 导航图标常驻元素的动画
  • 标题使用出场动画淡出效退出屏幕
  • 操作选项使用入动画进入屏幕
  • 更菜单样的静态元素没有动效

1. 动效连续性

动效设计以运动元素吸引着用户注意力。我们应该设计前后关系明确动效。我们可以使用以下技术表动效连续性:渐变、渐隐、共享变形。

2. 补 Tweening

补作用是补充元素在两状态转换时缺少动作。例如,个开关可以在屏幕上平滑移动,或者 FAB 可以过补变为新页或者页卡。补能应用于那些具有值属性变化,比如颜色。例如我们需要把红色变为蓝色,可以过紫色补变化实现。补不能应用于法生成值或状态元素,例如栅格设计列数必须是数,如 1 或 2,此不能介于它们生成补。

超全面!写给设计师的动效知识库

FAB 过补进了位、大小、高度、颜色和圆变化变成了个浮层。补也可以增加背景半透明黑色图层。

3. 渐隐 Fading

渐隐动画是过利用元素透明度变换来设计补。即使需要补两个元素属性不具有状态,我们也可以过渐隐动画创造平滑过渡。比如个图片可以过逐渐降低透明度露出另个图像法来转换到另个图像。

4. 溶解 Dissolve

溶解动画是在两个叠元素创过渡动画。例如下演示,前景元素进淡入(显示)或出场动画(消失)后,显示其后隐藏元素。

超全面!写给设计师的动效知识库

△ 个元素消失以显示隐藏在其后另个元素

5. 交溶解 Cross-dissolve

交溶解动画涉及两个时渐隐元素:个淡入另个淡出,呈现交状态。注意:如界有多个交溶解动画很可能会分散用户注意力。

超全面!写给设计师的动效知识库

△ 虽然两个元素时进了交溶解动画,在转换瞬仍然可以时看到背景以及两个元素

6. 渐隐穿透 Fade through

渐隐穿透是指是在另个元素淡入前,该元素已经完全淡出效。这过渡可以应用于文本,图标和其他不完全叠元素。

超全面!写给设计师的动效知识库

△ 两个元素按序淡出,在任何时候都不会时显示

7. 共享变形 Shared transformation

共享变形是在转换时候使多个元素进类似变换以增强动画连续性。例如下 FAB 突然出现了两个不图标切换,这会让用户不知所措。共享变形使两个图标在出现时都进旋转,此这个动画效不再突兀,变更加易于理解。

超全面!写给设计师的动效知识库

△ ①FAB图标切换太过突然;②在转换时进了平滑切换

速度

超全面!写给设计师的动效知识库

速度动效中重的一环,好的速度调整可以使动效加顺滑流畅。这里我们需注意两方面:一持续时间,就动效整体所花费的时间;第二缓动,也就元素运动的轨迹方式。

1. 方法

合理的动效速度可以让用户注意到应该注意的置元素。我们设动效时,应当避免太突兀让用户措手不及的同时,尽缩短动效的时间。

超全面!写给设计师的动效知识库

△ 确的方式:页面切换时,动效应该迅速且易于理解

超全面!写给设计师的动效知识库

△ 错误的方式:页面跳转太慢了,浪费了很多时间

2. 持续时间

无论动画的风格如何,过渡都不应该过或者过慢。选择确的持续时间缓动可以让动效变得流畅清晰。

3. 复杂程度

动效的持续时间依据内的复杂程度。如果内不太复杂,那么动效的速度就应该些;如果内比较复杂,那么相应动效持续时间应该一些,给用户多的时间以消化这些内。

超全面!写给设计师的动效知识库

△ 这四选择控件的动效持续时间100毫秒

超全面!写给设计师的动效知识库

△ 对话框的动效,淡入时间:150ms 淡出时间:75ms

超全面!写给设计师的动效知识库

△ 形状的变形动效加复杂,所以它们的动效持续时间应该,动效度200ms

超全面!写给设计师的动效知识库

△ 许多动效细节的图标动效持续时间应500毫秒左右

4. 退出关闭动效

关闭、折叠元素的动效应该使用较短的时间,因用户的注意力多的集中接下的任务,因此退出折叠动效不能喧宾夺主,抢夺用户的注意力。

超全面!写给设计师的动效知识库

△ 抽屉式导航的打动效约250毫秒,关闭动效约200毫秒

超全面!写给设计师的动效知识库

△ 该页面展约300毫秒,关闭约250毫秒

5. 小面积的动效

元素越,它设置的动效所花费的时间应当越。这考虑到用户需理解界面元素设的。下面按钮面积比较小,所以运动速度很。

超全面!写给设计师的动效知识库

△ 按钮切换动画的时间100毫秒

下列出底部菜单和纸片动效涉及积相较大,所以动效持续时长于上按钮。

超全面!写给设计师的动效知识库

△ 底部菜单展开时:250毫秒 折叠时:200毫秒

超全面!写给设计师的动效知识库

△ 纸片展开时:250毫秒 折叠时:200ms

6. 大积动效

运动元素积很大,为了让用户适应,动效持续时应更长。

超全面!写给设计师的动效知识库

△ 卡片展开动效时:300毫秒 折叠时:250毫秒

超全面!写给设计师的动效知识库

△ 持久表展开:300毫秒折叠:250ms

缓动 Easing

超全面!写给设计师的动效知识库

缓动一种调整动画速率的方式,它可以让元素的运动具速度的变化,不匀速行。实世界中,运动不会立即始或停止,元素运动中都会加速减速。这由于初中时我们学过的加速度、空气阻力、重力、万引力因素引起的。加入了缓动的动效十分自然,看起就真实世界中的运动一样。

超全面!写给设计师的动效知识库

△ 加入缓动的运动看起十分僵硬机械

超全面!写给设计师的动效知识库

△ 确的方式:使用缓动让多元素同时行加速减速。这些元素同运动的,产了统一的感觉

超全面!写给设计师的动效知识库

△ 错误的方式:避免把应该减速的元素行加速运动,会产杂乱无章的感觉

1. 缓动的类型

不同软件里的缓动类型命千差万别,比如 Adobe After Effects  Princple 动效软件里,对缓动的命就不尽相同。但根据我的人验,我们可以把缓动分主三种形式:缓入(先后慢)、缓出(先慢后)、缓动(先慢再再慢)。

2. 缓动 Standard easing

缓动可以用任何动效的始结束部分。缓动强调了该元素的运动,以吸引用户的注意力。下图的实例中两缓动,分别该元素的入场出场缓动。 AE 中默认缓动的速度图表先慢再再慢,当然我们可以通过速度图表编辑器改变运动的曲线,速度图表编辑器中,通常 X  Y 两坐标轴:Y轴置(或速度);X轴时间。

超全面!写给设计师的动效知识库

△ 应用了缓动的动效,y轴表示置,x轴表示时间

3. 缓入 Decelerate easing

应用缓入效果的元素,它的运动速度会先再慢,就受到了阻力。好一辆汽车慢慢停了下,好停到了用户待用户车一样。

超全面!写给设计师的动效知识库

△ 使用了缓入的动效。 y轴表示置,x轴表示时间

4. 缓出 Accelerate easing

元素退出屏幕时可以使用缓出,它的运动速度先慢再的,让用户感觉到很「爽」。仿佛元素坐了一辆汽车,慢慢加速离了界面。

超全面!写给设计师的动效知识库

△ 使用了缓出的动效。 y轴表示置,x轴表示时间

动效需要「编舞」

超全面!写给设计师的动效知识库

人的视觉注意往往一次只注一个效。而手容易犯的问题是在一个时间入了多个效,户的眼睛知道要跟踪哪个,成了效逻辑的混淆。我们要像指导一个芭蕾舞团一样,界面上多个效的场顺序和各自要占的时间。在前面的篇幅中我们了解到了效占的时间受到元素的逻辑重要性、占据界面的面积等因素的影响,那么分配给各个效的时间就全看我们的「编舞」了。

1. 简单的「编舞」

简单的编舞适合逻辑系简单的元素。如页卡伸展的效,先使了缓入拉面的信息,然后进行了 FAB 和背景颜色的反转。户解到它是从哪里来的,并且感知变前后页面的同逻辑系。

超全面!写给设计师的动效知识库

△ 页卡的效

2. 复杂的「编舞」

复杂的容转换需要更复杂的「编舞」,如查看联系人列表中的详细信息这个效,可将过渡分为两分来成:第一是顶导航区域的变换,第二是面从某个联系人单元扩展成整个页面的变换。我们把将每个元素的效分为类:入场画(incoming),场画(outgoing),持续画(persistent)和静态(static)。

超全面!写给设计师的动效知识库

入场画元素在90毫秒成,场画元素在210毫秒成。在入场画、场画和持续画中都使了缓的效果。

变形

超全面!写给设计师的动效知识库

1. 简的变形

简的变形是通过补间的方式使某个控件从一个状转换另一个状。

超全面!写给设计师的动效知识库

△ 这个简的变形使开关组件从左向右移动并且从渐变紫色来切换它的状

2. 复杂的变形

涉及复杂的版式变换的动效,可以使用共同转换的方式来创造滑的过渡。界面中的素可以作为一个共同进行变化。以为位的变化多是使用淡出等动效方式来计的,这的变化容易让用户理解。

超全面!写给设计师的动效知识库

△ 正确的方式:尽量减少独立运动的素数。在一些一素运动的同,整体的淡入淡出吸引了用户主要的注力,并且让用户觉界面的续性。

超全面!写给设计师的动效知识库

△ 错误的方式:不要在一个动效中把许多素关在一起。每个独立的素都会争夺用户的注力,会使用户心。

超全面!写给设计师的动效知识库

△ 错误的方式:界面素动效跳跃,让用户无法集中注力

3. 使用动画容器层进行过渡

制作动效,可以通过一个包含着多素的容器层进行变换,在变换的候素保持内部的宽高比例,慢慢放大。

超全面!写给设计师的动效知识库

△ 为容器层的外沿置动效,内部素全部等比例缩放,没有裁剪

4. 没有容器层的过渡

当一组素没有确的边界,也没有容器层,可以使用共享转换创建滑的过渡动画。例如 FAB 动画内部图标的动效,虽然外轮廓的容器层没有动画,但是内部动画同可以创造续。

超全面!写给设计师的动效知识库

△ 该动效的FAB图标使用了顺针的旋转过渡

超全面!写给设计师的动效知识库

△ 入和出通过左侧的标签引导而出

5. 使用焦点素

焦点素是动效中最吸引用户注力的素,也是补间中最重要的素。

超全面!写给设计师的动效知识库

△ 该动效中的标题和图像都是焦点素,在折叠和展开的动效一直保持可见

自定义动画

超全面!写给设计师的动效知识库

Material Design 鼓励我们自定义符合品风格和品调性动效。我们可以过速度、位移、动效序、独特图标和插图来定制动效。其实国内很多品都已经这么做了,比如站酷、QQ 等品 Tabbar 图标动效常符合自身品和调性,让过目不忘。

超全面!写给设计师的动效知识库

△ 正确:①OWL品使用了可爱卡动画来设计动效;②独特晃动动效

超全面!写给设计师的动效知识库

△ 误:不要视品风格和调性乱用动效。该动效案例,品调性比较严肃,是动效相比下太有趣和活泼了。

1. 情感连接

自定义动效在用户使用过程创了品和用户情感连接。

超全面!写给设计师的动效知识库

△ 奖励用户执任务动画可以创愉悦感

2. 频率

添加自定义动效时,我们需要考虑动画频率。系统图标动画可以设计常精细,时要避免过于频繁动画分散了用户注意力。

超全面!写给设计师的动效知识库

△ 正确:动画图标为底部导航添色不少

超全面!写给设计师的动效知识库

△ 误:频繁使用品图标动画会阻碍用户操作

  速度

1. 缓动

缓动用于多数的过渡动效,比如顶部导航或底部导航的出入场动效。

超全面!写给设计师的动效知识库

△ 缓动合很多界面的切换

2. 强调型缓动

强调型缓动一般加动效的后,用以强调某元素的重性。

超全面!写给设计师的动效知识库

△ 界面返回后,强调型缓动强调了页面从哪里展的

超全面!写给设计师的动效知识库

△ 强调型缓动可以给人轻松优的感受

超全面!写给设计师的动效知识库

△ 与一般性缓动相比,强调型缓动的加速度,停止时加缓慢

3. 持续时间

缩短动画的持续时间可以让它感觉胆,延动画的持续时间可以表达轻松的氛围。如果持续时间 400ms 以,一般性缓动可能表不,这些况下考虑使用强调性缓动。表达特氛围,可以对默认持续时间行小幅调整。将默认从 300 毫秒增加到 350 毫秒表示松的效果,将其缩短到 250 毫秒则使其加胆。同时应当避免对默认持续时间行幅调整。减缓这过渡到 550 毫秒可能太慢了,加速到 115 毫秒可能会让人震惊。

  运动

超全面!写给设计师的动效知识库

当元素变换时,它的轨迹称为路径。默认情况,路径是线性的。如果一个元素需要改变大小或对角线移,则路径可使直线或弧线的路径。

1. 直线 Linear motion

直线就是简单的,适合大多数的过渡效果。这种作极会分散户的注意。

超全面!写给设计师的动效知识库

△ 正确的方式:该效的页卡直线的方式折叠和展开

超全面!写给设计师的动效知识库

△ 注意:该效中有一个大的对角线,与他元素的要上或左右协调

2. 弧线 Arc motion

弧线是模仿自然的一种效设计,它们适于对界面进行大幅调整的效。弧线可在水平和垂直两个方向上进行。

超全面!写给设计师的动效知识库

△ 正确的方式:该效中元素在转换成卡片设计过程中应了弧线的方式

3. 弹 Overshoot

弹是指元素在时超应该停止位置的画,就好像这个元素被很大推而跑过了头一样。这样的效可户感觉有趣和充满质感。

超全面!写给设计师的动效知识库

△ 正确的方式:弹人感觉到一种自然的感

4. 晃 Oscillation

晃是非吸引户注意的,在一个手势操作之后,使元素进行晃会人感觉到效的质感,人觉得有趣。

超全面!写给设计师的动效知识库

△ 正确的方式:使晃来创有趣的格

5. 伸展 Stretch

伸展是指元素在快速时会发生形变,多于开和滑。这种变来源于现实中的柔软物体,因此有伸展画的元素会人感觉到柔软。

超全面!写给设计师的动效知识库

△ 拉伸效果为指示器增添了有趣的细节

超全面!写给设计师的动效知识库

△ 该效的时针在摆时有弧形的伸展效

6. 视差滚 Parallax

视差滚是指 z 轴上多层元素进行速统一的滚。这种统一暗示了它们海拔的同,从而户感知到 z 轴的存在。

超全面!写给设计师的动效知识库

△ 视差滚为界面增了深感

超全面!写给设计师的动效知识库

△ 视差滚可暗示信息的Z轴系

  排序

超全面!写给设计师的动效知识库

1. 间偏移 Temporal offset

在素进行不同的动效,可以使用间偏移突出某一个素。

超全面!写给设计师的动效知识库

△ 该动效需要100ms 来让FAB变大,有助于突出FAB

2. 摇晃 Stagger

摇晃指的是按顺序将间偏移应用于一组素,如列表中。摇晃创造了一种简的效果,可以使用户将注力集中在每个列表上。

超全面!写给设计师的动效知识库

△ 使用摇晃为重要的素添加润色

超全面!写给设计师的动效知识库

△ 优秀的摇晃动效

图标和插画

给图标、插图和产品图标加入动效可以为用户体验增添喜悦和趣味性。

1. 系统图标

系统图标的动效可以计出妙的运动细化。它有助于给用户完美的用户体验。

超全面!写给设计师的动效知识库

△ 这些图标动画为细节增添了俏皮

超全面!写给设计师的动效知识库

△ Owl中图标动效反映了其产品的调性

2. 产品图标

产品图标的动画给用户一种温暖和关怀的觉。

超全面!写给设计师的动效知识库

△ 这个钻造型的产品图标动效含有3D旋转的效果

超全面!写给设计师的动效知识库

△ 该动效中的产品图标有线条和动的丰变化,非常有趣

超全面!写给设计师的动效知识库

△ 该动画中鸟的运动更加为造型增添了趣味

超全面!写给设计师的动效知识库

△ 该动画让用户知了产品的调性

3. 插图

插图的动效可以给用户创造惊喜的觉。国内的互网计都会为产品绘制一些插图,如果这些插图会动,那更会让用户觉惊喜和愉悦了。

超全面!写给设计师的动效知识库

△ 当产品发生错误和外,在错误提示中可以使用插图的动效增添趣味

超全面!写给设计师的动效知识库

△ 插图动画可以引导用户做下一步的操作

4. 适应的动画

屏幕的转向、窗的缩放等改变会引起界面的变化,在这可以加入适应的动画。

超全面!写给设计师的动效知识库

△ 网页中不同尺寸图片切换的变换

相关资料

  • MD动效部分原文:https://material.io/design/motion/understanding-motion.html
  • 国优秀动效收网站:https://uimovement.com/
  • 动效素周期表:http://foxcodex.html.xdomain.jp/

欢迎关注作者微信公众号:「西见」

超全面!写给设计师的动效知识库

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

相关文章

MG 全称是 Motion Graphic(动态图形),是一种现在非常流行的动画分支。它更像是介于平面设计与动画片之间的一种产物。动态...
MG动效
阿里作为中国互联网企业的标杆,不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业,在各个专业领域,给专业人员...
UI动效
编者按:百日挑战是一个很火的活动,旨在通过坚持每日练习提高自己的设计能力。但在过程中很多人会因为没有计划,或者思维枯...
动效设计
动效设计,是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫,到逐渐理解了动效对于提升用...
Lottie
如何在一个快速发展的领域不断成长?这可能是每个设计师都需要思考的问题。了解新的设计趋势,学习新的设计技术,磨练手艺,...
动效设计
作为2019年第一个爆款刷屏 H5 项目,「网易云音乐2018年度听歌报告」除了走心的文案、精美的页面,也包含了不少有意思的动效...
UI动效
UI和设计这一行似乎越来越难混了:进要懂手绘,退要明交互,以往一个界面的事情,如今都不够了。上一屏到下一屏之间的变化,...
AE
在无限的信息体量和有限的用户浏览范围之间求得平衡,让用户看到全部创作中他最想看到的那一面。 在B端产品的设计过程中,我...
B端产品