UI设计师需要了解的动效知识

  • A+
所属分类:经验思维

本文来源: 郗鉴翻译(公众号:西见) , 共 5654 字

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

动效是什么?

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

UI设计师需要了解的动效知识

该动效暗示了收件箱和邮件之间的层级结构

UI设计师需要了解的动效知识

该动效将菜单图标与操作结合在了一起

UI设计师需要了解的动效知识

该动效暗示了页卡和内容之间的层次结构

反馈与状态

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

UI设计师需要了解的动效知识该动效提示了键盘输入的操作,并告诉用户这个操作是否成功

用户教育

动效还可以指导第一次使用产品的用户应该如何操作,让用户在轻松的氛围下学习。好的动效可以让用户在几秒钟的时间里看懂产品的使用方法,这要比写生硬的图文说明好多了。

UI设计师需要了解的动效知识

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

角色动画

优秀的角色动画还可以为产品的交互增添个性和吸引力,让用户流连忘返。这也许就是我们在孩童时代就喜欢动画片的原因了吧。如果产品有吉祥物,就更需要我们来设计角色动画了。准备好为你的项目创建角色动画了吗?

UI设计师需要了解的动效知识

优秀的角色动效可以创造美好的第一印象

UI设计师需要了解的动效知识

动效的结构

我们把动效的结构分为:出场动画、入场动画和持续动画。页面中不需要运动的元素称为静态元素。元素的属性决定了动效的转换方式。我们在设计动效时一定要考虑每个元素的逻辑和属性,再据此分配不同的效果。

动效的连续性

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

补间 Tweening

补间的作用是补充元素在两种状态间转换时缺少的动作。例如,一个开关可以在屏幕上平滑移动,或者FAB可以通过补间变为新的页面或者页卡。补间只能应用于那些具有中间值的属性的变化,比如颜色。例如如果我们需要把红色变为蓝色,可以通过紫色补间的变化实现。补间不能应用于无法生成中间值或中间状态的元素,例如栅格设计中的列数必须是整数如1或2,因此不能介于它们之间生成补间。

UI设计师需要了解的动效知识

FAB通过补间进行了位置、大小、高度、颜色和圆角的变化变成了一个浮层。补间也可以增加背景中的半透明黑色图层

渐隐 Fading

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

溶解 Dissolve

溶解动画是在两个重叠的元素之间创建过渡的动画。例如下面演示中,前景元素进行淡入(显示)或出场动画(消失)后,显示其后面隐藏的的元素。

UI设计师需要了解的动效知识

一个元素消失以显示隐藏在其后面的另一个元素

交叉溶解 Cross-dissolve

交叉溶解动画涉及两个同时渐隐的元素:一个淡入另一个淡出,呈现交叉状态。注意:如果界面中有多个交叉溶解动画很可能会分散用户的注意力。

UI设计师需要了解的动效知识

虽然两个元素同时进行了交叉溶解动画,但在转换的一瞬间仍然可以同时看到背景以及两个元素。

渐隐穿透 Fade through

渐隐穿透是指是在另一个元素淡入前,该元素就已经完全淡出的效果。这种过渡可以应用于文本,图标和其他不完全重叠的元素。

UI设计师需要了解的动效知识

两个元素按顺序淡出,在任何时候都不会同时显示。

共享变形 Shared transformation

共享变形是在转换的时候使多个元素进行类似的变换以增强动画的连续性。

UI设计师需要了解的动效知识

速度

速度是动效中最重要的一环,好的速度调整可以使动效更加顺滑和流畅。在这里我们需要注意两个方面:一个是持续时间,就是动效整体所花费的时间;第二个是缓动,也就是元素运动的轨迹和方式。

方法

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

UI设计师需要了解的动效知识

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

持续时间

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

复杂程度

动效的持续时间要依据内容的复杂程度而定。如果内容不太复杂,那么动效的速度就应该快些;如果内容比较复杂,那么相应地动效持续时间应该长一些,给用户更多的时间以消化这些内容。

UI设计师需要了解的动效知识

这四个选择控件的动效持续时间为100毫秒

UI设计师需要了解的动效知识

对话框的动效

淡入时间:150ms 淡出时间:75ms

UI设计师需要了解的动效知识

形状的变形动效更加复杂,所以它们的动效持续时间应该更长

动效长度为200ms

UI设计师需要了解的动效知识

带有许多动效细节的图标动效持续时间应为500毫秒左右

退出和关闭动效

关闭、折叠元素的动效应该使用较短的时间,因为用户的注意力更多的集中在接下来的任务上,因此退出和折叠动效不能喧宾夺主,抢夺用户的注意力。

UI设计师需要了解的动效知识

抽屉式导航的打开动效大约250毫秒,关闭动效大约200毫秒

UI设计师需要了解的动效知识

该页面展开大约300毫秒,关闭大约250毫秒

小面积的动效

元素越大,为它设置的动效所花费的时间应当越长。这是考虑到用户需要理解界面元素而设定的。下面按钮面积比较小,所以运动速度很快。

UI设计师需要了解的动效知识

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

下面列出的底部菜单和纸片的动效涉及的面积相对较大,所以动效持续的时间长于上面的按钮。

UI设计师需要了解的动效知识

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

UI设计师需要了解的动效知识

纸片的展开时间:250毫秒 折叠时间:200ms

大面积的动效

运动元素的面积很大,为了让用户适应,动效的持续时间应当更长。

UI设计师需要了解的动效知识

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

UI设计师需要了解的动效知识

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

UI设计师需要了解的动效知识



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: