网页设计 » 交互设计 » 不要随便设计UI动效,请先明白这12项动效原理

不要随便设计UI动效,请先明白这12项动效原理

发表于: 交互设计. 评论
Sponsor

前言:有不少动效设计的初学者,他们刚开始做UI的动效设计基本都是很生硬,没有一种自然的感觉。他们做的动效往往以装饰性为主,仅仅如此的话,可能会损害产品的可用性。今天给大家介绍12项动效设计原理,这些都适合用于UX/UI设计项目中,是非常有用的运动原理。

动效对于数字产品的用户体验有着深远的影响,但如果界面元素没有表现出基本的动效设计原理,那么会损害产品的可用性。在用户界面中,动效不仅仅是一种视觉装饰,而是一种强大的力量,它可增强产品参与度并扩展设计交流的范围。

不要随便设计UI动效,请先明白这12项动效原理

我们的世界是运动着的。即便在静止的瞬间,叶子也会发抖,肺部也会扩张。在数字产品设计领域中,动效似乎是第二自然,是日常工作的扩展,可以毫不费力地加以利用。要是那是真的就好了。

只需问问第一次制作动画UI元素的人。数小时的努力只产出了业余的成果。把一张卡片滑到屏幕上这样简单的事情看起来都很尬。这是为什么?

从理论上讲,让UI元素移动是很容易。在预定路径上定义关键点,然后软件对间隙进行补间。而实际上,它不是那样工作的。工具和技术是必不可少的,但它们的力量来源于基本原理。如果要提高数字产品的可用性,则必须以适用于无数用例的不变行为规则为基础。

一、动效设计的起源

动效设计和UX的结合相对较新,而其根源是迪士尼。弗兰克·托马斯(Frank Thomas)和奥利·约翰斯顿(Ollie Johnston)是迪斯尼(Walt Disney)最受重视的动画师,也是匹诺曹(Pinnochio),小鹿斑比(Bambi)和狂想曲(Fantasia)等经典作品的重要贡献者。他们的12项动画基本原理在电影、电视和数字内容的动态图形中仍然具有影响力。

迪斯尼原理为了生动地讲故事,提炼出了身体物理运动的基本定律。它们赋予了画中的角色移动和情感,但它们不足以满足现代用户界面中的交互动效需求。

当代设计师试图弥补这一缺口。一个更具说服力的例子是由动画专家Jorge R. Canedo Estrada改编的迪士尼电影《动画设计的10项原则》(the 10 Principles of Motion Design)。不过如果要将这些整体应用到数字产品设计中,这些要点仍然需要转化。

不要随便设计UI动效,请先明白这12项动效原理

Jorge R. Canedo Estrada的运动设计10原理

围绕交互UI元素(以及它们对用户体验的重要性)重新定义运动原理,最雄心勃勃的尝试是Issara Willenskomer的《运动宣言》中的用户体验。它的深度令人吃惊,但并不能让人轻松阅读。

在建立UX动效的12条原则时,Willenskomer

  • 区分了动画设计和UI动效
  • 阐明了动效如何提高可用性
  • 解开了核心动效行为的内部运作方式

二、动效设计和用户体验:重要区别

在讲解动效设计原理之前,有必要重点说明一下与Willenskomer宣言中的动效的主要区别。

动效不仅仅是装饰

动效设计不是UI动画的代名词。这一点很关键,因为UI动画几乎总是被当作一种经过深思熟虑的装饰,而与UX无关(除了增加魅力)。动效不是装饰,它是行为,而行为只能帮助或阻碍用户体验。

两种互动类型:实时与非实时

动效设计涉及两个基本交互:实时和非实时。

  • 实时:当用户在屏幕上操作UI元素时,实时交互可提供即时反馈。换句话说,动效行为会立即响应用户输入。
  • 非实时:非实时交互发生在在用户输入之后,这意味着用户必须短暂暂停并观察所产生的运动行为,然后才能继续。

不要随便设计UI动效,请先明白这12项动效原理

实时交互: 动效行为立即响应用户的输入. (Stan Yakusevich)

不要随便设计UI动效,请先明白这12项动效原理

非实时交互: 在用户触发交互后,必须短暂暂停并观察运动行为。(Vitaly Rubtsov)

动效支持可用性

动效设计必须以四种不同的方式支持可用性:

  • 期望值:当用户与UI元素交互时,他们期望看到哪些运动行为?动效是符合预期还是引起迷惑?
  • 连续性:交互是否在整个用户体验中产生一致的运动行为?
  • 故事性:交互及其触发的动作行为,是否与满足用户意图的事件的逻辑进程相关联?
  • 关联性:UI元素的空间,美学和层次结构属性如何相互关联并影响用户的决策?动效如何影响存在的各种元素关系?

三、数字产品的12项动效原理

1. 缓动

缓动是模拟现实对象随时间加速和减速的方式。它适用于所有的UI动效元素。

缓动的对立面是直线运动。直线运动中的UI元素会立即从静止速度变为全速,从全速直接变为静止。这种行为在现实世界中不存在,对用户来说似乎停止了。

不要随便设计UI动效,请先明白这12项动效原理

卡片和对应的椅子移动很快,但他们受缓动影响,移动平滑而在受控中停止。 (Saptarshi Prakash)

2.偏移和延迟

当多个UI元素同时并快速移动时,用户倾向于将它们组合在一起,而忽略了每个元素可能具有其自身的功能。

偏移和延迟会在同时移动的UI元素之间创建层次结构,并传达它们相关但又不同的信息。元素的时间、速度和间距不是完全同步,而是交错排列,从而产生微妙的“一个接一个”的效果。

当用户切换页面时,偏移和延迟表明存在多个交互选项。

不要随便设计UI动效,请先明白这12项动效原理

比特币App一次显示了多个元素。 它们的出现略微有些错开,从而让用户感知这些元素是相关联但又截然不同。(Gapsy Studio)

3. 父级

父级将一个UI元素的属性链接到其他UI元素的属性。当父级元素中的属性更改时,子级元素的链接属性也会更改。所有元素属性可以相互链接。例如,父级元素的位置可以绑定子级元素的大小比例。当父级元素移动时,子级元素的大小会增加或减小。

父级会在UI元素之间创建关系,建立层次结构,并允许多个元素立即显示在用户面前。因此,父级在实时交互中使用时影响最大。

不要随便设计UI动效,请先明白这12项动效原理

这里,蓝色滑块的位置控制着背景遮罩的不透明度、灯泡周围的辉光效果以及光强度刻度的数值。(Ayoub Kada)

4. 转换

当一个UI元素变成另一个UI元素时,将发生转换。例如,下载按钮转换为进度条,并进一步转变为完成图标。

从用户体验的角度来看,转换是向用户展示其与目标相关的状态的有效方法(系统状态的可见性)。当UI元素显示从开始到结尾的过程时,这就特别有用(例如下载文件)。

不要随便设计UI动效,请先明白这12项动效原理

转换显示了下载的开始,过程和完成。 (Aaron Iker)

5. 值的变化

在数字界面中,值的表现形式(数字的,基于文本的或图形的表示)很丰富,经常出现在从银行App到个人日历再到网购站点的各个产品中。由于这些表现形式都与实际存在的数据相关,因此它们可能会发生变化。

值的变化传达了数据展示的动态性,并告知用户数据是交互式的,并且可能会受到一定程度的影响。当没有动效的出现数值,用户参与数据的意愿降低。

不要随便设计UI动效,请先明白这12项动效原理

动态引入值向用户显示他们有能力影响数据。(Taras Migulko)

6.遮罩

遮罩用于UI元素各部分的显示和隐藏。遮罩通过更改元素范围的形状和大小,保持元素本身的辨识度的同时,实现了功能的转变。由此,像照片和插图这样的详细视觉效果是理想选择。

从可用性的角度来看,设计师可以通过遮罩向用户显示他们正在进行一系列的交互。

不要随便设计UI动效,请先明白这12项动效原理

遮罩可用于从图像捕获,到上传到电商平台的过渡。(SELECTO)

7.叠加

在平面空间中,没有深度,UI元素只能沿X或Y轴移动。叠加会在UI的平面中产生前景/背景区别的错觉。通过模拟深度,叠加可以根据用户需要隐藏和显示元素。

使用叠加时,信息层次结构是重要的考虑因素。例如,用户在做笔记应用程序中应该首先看到的是他们的笔记列表。然后,叠加可用于为每个消息(如Delete或Archive)显示辅助选项。

不要随便设计UI动效,请先明白这12项动效原理

叠加允许用户快速归档或删除此笔记应用程序中的条目。(Karan Kapoor)

8.克隆

克隆是将UI元素拆分为其他元素的一种动效。这是突出显示重要信息或交互选项的明智方法。

当UI元素在界面中具体化时,它们需要一个清晰的原点来链接到屏幕上已经存在的元素。如果元素只是简单的放大或消失,那么用户会不太清楚页面中间的交互逻辑。

不要随便设计UI动效,请先明白这12项动效原理

用户可以放心地单击彩色圆圈,它们显然来源于“添加注释”图标。 (Ariuka)

9. 模糊

想象磨砂玻璃门。它需要交互才能打开,但是可以辨别另一端正在等待什么(在某种程度上)。

模糊处理的方式相同。它为用户提供了一个界面,该界面要求进行交互,同时显示要跟随的屏幕提示。常见的示例有:导航菜单,密码屏幕和文件夹/文件窗口。

不要随便设计UI动效,请先明白这12项动效原理

模糊处理为用户提供了重要的互动方式,同时使他们保持产品叙事的方向。 (Kyle Abarquez)

10. 视差

当两个(或多个)UI元素同时移动但速度不同时,将显示视差。再次强调,其目的是为了建立层次结构。

  • 交互式元素移动速度更快,并显示在前景中。
  • 非交互式元素移动速度变慢并退回到背景。

视差引导用户使用交互式UI元素,同时允许非交互式元素保留在屏幕上并保持设计统一性。

不要随便设计UI动效,请先明白这12项动效原理

使用视差时,最重要的交互式元素移动最快,而非交互式元素移动较慢并退回到背景。(Tubik)

11.维度

维度使UI元素似乎具有多个交互方面,就像物理世界中的对象一样。通过使元素看起来像是可折叠的,可翻转的,浮动的或具有逼真的深度属性而实现的。

作为一种叙事手段,维度意味着UI元素的不同侧面被链接在一起,并实现了无缝的屏幕过渡。

不要随便设计UI动效,请先明白这12项动效原理

维度意味着2D UI元素具有多个交互方面,就像物理世界中的对象一样。(Sang Nguyen)

12.移动式摄像机和缩放

移动式摄像机和缩放允许用户在空间上查看 UI元素,或增加元素比例以显示更多细节。

  • 移动式摄像机:发生在用户的角度更接近(或远离)UI元素时。想象一下,一个拿着照相机走到一朵花的人近距离拍摄。
  • 缩放:使用缩放时,用户的视角和UI元素保持固定,但是该元素在用户屏幕内的被放大(或缩小)。现在想象该人保持姿势并使用相机的变焦功能使花朵显得更大。

不要随便设计UI动效,请先明白这12项动效原理

移动式摄像机:用户的视点似乎越来越接近背景图像。(Yanosh)

不要随便设计UI动效,请先明白这12项动效原理

缩放:用户的视角不会更接近图像。而是图像的比例会增加。(Victor Aldabalde)

四、动效是一种沟通方式

交互体验需要各种轻快和微妙的动效形式。当坚持动效设计原则时,即使最基本的UI元素也成为人类复杂交流的媒介。如果忽略动效原理,动效就体现了自然界所没有的特征。再多的美学光彩也无法克服由此产生的笨拙。

动效设计与数字产品用户体验之间的关系正在迅速成熟。有原则的动效方法可以防止过度依赖趋势,工具和技术的短暂效用。更棒的是,它跨越了2D屏幕上元素的抽象运动与3D世界中对运动感知之间的鸿沟。

原链接:https://uxdesign.cc/a-guide-to-motion-design-principles-7f05f10ccd79
12项动画基本原理:http://frankandollie.com/PhysicalAnimation.html
Creating Usability with Motion: The UX in Motion Manifesto: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
译者:拾柒酱(zcool.com.cn/u/13687583)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }