ui设计动画效果-腾讯最好的文章！很多实用的UI界面动画设计指南

概括

xavieryuan：UI基于静态页面设计，通过跳转切换页面。 在设计过程中，设计师非常重视单页面的视觉效果，却往往忽略了界面跳转的处理。 这些未处理的跳转并不能提供足够的期望，因此用户在使用它们时常常感到困惑。 相比之下，在卡通领域，由于使用了足够的动画效果，用户可以很容易地理解一个动作，即使是一个夸张的动作。

尽管UI设计和卡通动画之间存在差异：卡通更注重娱乐，而用户界面是严肃的交互工具。 但我们仍然可以借鉴卡通动画的优点，从情感和认知层面将两者的优势结合起来。

关键词：UI、动画效果、卡通。

1.UI界面VS卡通

众所周知，UI界面一般都是基于静态页面来设计的——无数的页面组成了一个软件。 通常，视觉设计师开始直接设计静态页面，很少考虑如何在它们之间切换。 由于用户并不期望界面之间存在连接，因此他们常常会感到惊讶。 用户很难理解界面之间发生了什么。

（我们的应用程序是由很多页面组成的。由于用户对界面之间的关系没有期望，所以他们常常感到害怕或困惑。图片来自：）

当用户无法感知页面之间的关系时，就意味着页面之间的因果关系还不够清晰。 用户了解页面之间的关系至关重要，这直接关系到操作效率。 在没有辅助解释的情况下，用户只能通过体验来理解。 这是一次非常令人沮丧的经历。

例如，在Windows中，如果我们的任务是在“我的电脑”中打开D盘，则流程如下：

1.双击“计算机”图标；

2. 图标展开为窗口；

3. 在窗口中选择驱动器D。

在这种情况下，第一个步骤元素是图标，第二个步骤元素是展开的窗口。 界面之间的跳转非常突然和直接，没有任何上下文。 如果用户是第一次使用Windows，这样的界面跳转需要一段时间才能理解。

（在Windows中，图标和窗口之间的跳转非常直接，这会让初次使用Windows的用户感到困惑）

用户常常通过经验来克服这些问题。 最初的几次经历是最糟糕的； 最终用户学习“机器的行为”，以便与其有效地交互。 尽管通过重复使用可以提高对这些界面的认知表情包设计，但认知负荷仍然很重。 例如，用户知道点击一个图标会打开一个窗口，但突然的变化（突然从图标变成窗口）也会导致用户犹豫。

动画片中的动画效果非常擅长为观众提供足够的信息来理解。 动画中的一些令人费解的行为不会让用户感到困惑； 动画人物不会突然消失和出现； 当形状发生变化时，动画非常自然。

动画提供了必要的视觉线索来了解动作前后发生的情况。 与 UI 不同，它不像 UI 那样需要大量的认知，并且严重依赖于经验，并且还将理解界面的责任放在了用户身上。 动画利用真实的动作来表现物体的变形，更容易理解。

从认知和情感的角度来看，将动画融入到界面切换中都是有益的。 通过解释系统，动画允许用户继续思考任务，而不必回忆以前的操作。 由于没有突然的视觉变化，动画可以减少用户对 UI 界面感到惊讶的机会，从而减少不安全感。 因此，使用动画不仅可以帮助用户理解界面，还可以提高使用效率。 这也使得界面的体验更加愉快和舒适。

2、UI界面使用动画的几种方式

多年来，动画师们发展了许多动画设计方法。 这里我们选取一些与UI和动画都一致的设计原则，展示如何将它们应用到UI设计中。

我们从拟物化、夸张化和增强现实三个维度来讨论。 本节提到的所有动画设计原则均来自迪士尼的《动画：生命的幻象》。

2.1 拟物化

将 UI 中的元素视为真实、有重量的对象。 在动画片中，人物和元素是真实的、有重量的物体。 每次他们走来走去，都感觉就像生活在现实世界中，感觉非常真实。 这种准客观的感觉并不只是填充一个像素区域那么简单。 这些物体的运动是通过增加惯性来实现的。 动画的所有原理，比如慢进慢出、跟随、弧线运动，以及后面所有的讨论都是基于这个原理，它们都是有质量的物体。

（所有元素都是有重量的物体。这是一切运动的基础。图片来自：）

将UI界面中的元素变成与背景不同的独立对象并赋予它们运动惯性是非常重要的。 在UI界面中，元素应该被绘制为三维对象，以便用户可以连续稳定地操作它们。

仅仅对元素进行拟物化是不够的，还需要性能优化。 为了保持运动的错觉，物体运动时帧率必须足够高（当动画达到每秒24帧时，人眼看到正常速度运动）。 由于性能下降，可能会出现移动延迟，从而导致滞后。 这样一来，用户很容易分心，体验也会受到影响。

2.1.1 拟物化方法一：运动模糊

拟物化、无卡顿只是最基本的需求。 如果用户大幅移动对象，例如从屏幕左侧穿过到右侧。 由于视觉停留效应，用户将在屏幕上看到两个以上的对象。 将两个瞬态物体呈现给眼睛也称为视觉暂留效应。

动画设计者在面对此问题时使用一条经验法则：如果对象在任意两帧之间移动超过对象本身大小的一半（或更多），请添加运动模糊效果。 使用运动模糊来填充新旧位置之间的间隙，使物体的运动更容易被眼睛接受。 虽然抗锯齿存在问题，但运动模糊确实是一种低成本的解决方案。

（在Windows中，可以将鼠标指针设置为运动模糊，使用户更容易跟踪鼠标指针）

动画师发现可以使用两种不同的运动模糊方法。 最简单的是使用半透明条纹。 该条纹像尾巴一样跟随图标，使用透明条纹来模拟现实物理并产生非常逼真的效果。 另一种方法是在单个帧中插入多个图像。 例如，当手臂快速来回摆动时，单个帧会显示多个手臂，每个手臂出现在不同的位置。 这种技术可以有效提高帧率，而且非常有说服力。

（运动模糊的全帧效果可以通过每帧显示多条垂直线来增加帧数）

运动模糊效果表明运动不仅仅是静止图像的集合。 它会给用户一个模糊的线索。 这种感知来自于人类视觉系统的工作原理。 卡通动画师经常使用运动模糊，即使是运动模糊的粗略渲染也足以产生快速运动的错觉。 在App设计中，由于手机尺寸的限制，一般不会出现超长距离拖动的情况，但在大屏电脑上就会遇到这个问题。

2.1.2 拟物化方法二：出现和消失

除了移动之外，元素的不规则出现和消失也会导致用户困惑。 在UI设计中，消失效果的表现有三种方式：移入、擦除、模糊消失。 它们的动作快速而连续，为用户提供了必要的视觉线索来了解正在发生的事情。

（动画效果从左到右分别是移入、擦除、模糊消失）

2.2 夸张

通过“夸大现实”的方法，设计往往可以达到事半功倍的效果。 经过夸张处理的动画片显得更加真实。

例如，迪士尼的《白雪公主的小矮人》中的小矮人就非常不真实：他们的脸和身体都很大，动作也大而夸张。 相比之下，只有白雪公主的比例是真实的。 她看起来更像是一个真人而不是一个侏儒。 因此ui设计动画效果，白雪公主这个人物因为更接近现实而被渲染成一个比较平淡的人物。 白雪公主是用来搭配小矮人的。 矮人实际上看起来更现实。 这种夸张的手法更加凸显了动画本身。 这个原理说明ui设计动画效果，无论是身体特征、动作特征，还是肢体特征，某些方面都可以加强，使之更加突出。

这样观众就可以更好地理解这些特征和动作。 例如，小矮人和白雪公主都有一个经常与他们的名字相呼应的特征（缓慢、脾气暴躁、打喷嚏）。 这些特征是如此强烈，以至于即使没有名字作为额外的线索，人们也可以通过每个矮人夸张的身体特征、动作和行为来记住某个角色。

（白雪公主被渲染成一个相对平淡的角色，因为她更接近现实。白雪公主被用来搭配矮人。每个矮人都有一个特征，往往与他们的名字有关（缓慢，脾气暴躁，打喷嚏））相互呼应，而白雪公主的特征并不明显。 图片来自：）

因此，夸张的表现手法可以突出某些被忽视的细节。 在动画片中，动画师可以通过夸大细节来吸引更多的注意力。 也许这些细节原本是很难察觉的。

就像卡通一样，UI界面必须让用户理解，并在必要时突出一些细节。 利用夸张的手法让UI界面中的某些对象更容易理解、更“真实”，从而使UI界面更具吸引力。

（在图片社区项目中，我们对通知使用了动画效果，由于通知入口是一个细节，所以当没有通知时，只保留一个图标（上图），并不能吸引用户的注意力。当有新消息时来了（下图），用动画来吸引用户的注意力。）

2.2.1 夸张方法一：给用户足够的期待

在动作发生之前给观众一些提示是个好主意。 好好行动，不要对发生的事情感到惊讶。

（在Tumblr中，当鼠标移动到某个功能时，图标会跳转，提醒用户点击后会有变化）

诸如期望之类的夸张技术可以使界面更容易让用户理解。 他们不断地向用户解释或暗示接口之间的继承关系。 如果没有这些线索，用户将很难理解这些界面。

2.3 增强现实（强化）

所有动画技术都增强了某种现实感。 有些会非常极端——比如在一些动画中，角色高速移动，变成一条光线，快速穿过屏幕。 事实上，这是一种非常隐蔽的做法。 观众不会认为这些影响被夸大了。 他们只是感觉超现实。 这些夸张的效果都经过精心处理，以免观众被迷惑。 本节讨论如何使用增强现实技术来架起动画片和观众之间的关系，或者UI和用户之间的关系。

2.3.1 增强现实方法一：慢入慢出

如上所述，卡通人物移动时非常拟物化。 然而，这个动作并不像在纸上画一些等角字符那么简单。 动画师在绘制动作时经常使用缓入和缓出效果：角色慢慢走出屏幕，然后做出快速动作，最后完成的动作非常缓慢。 这种方法有助于让角色在移动时看起来更加真实。 此外，在某个快速动作之前会出现缓入和缓出效果，使观看更加舒适。 如果没有它，动画中的运动会感觉很假，并且缓入和缓出等细节效果会极大地影响动画的质量。

（使用了ease-in和ease-out效果后，界面感觉舒服多了。图片来自：）

2.3.2 增强现实方法二：圆弧运动

还有一个原理也经常运行在人们的潜意识里，那就是弧线运动。 与直线运动相比，当物体沿弧线运动时，它们是间接运动。 类似于动画片中的人物。 弧形路径的运动给人一种更有吸引力和活泼的感觉，而直线运动则更简单。

（在Mac OS X中，最小化窗口使用弧线使其更加生动）

2.3.3 增强现实方法三：跟随运动

增强现实的最后一种方法是跟随运动。 在现实世界中，当主要物体移动时，与之相关的物体也会跟随移动。 动画师在动画中使用这种观察结果。 当动画中的主要对象停止时，其他细节仍然可以移动。 包括身体、衣服以及一些局部动作的处理，使其动态效果更加极致。

（在iOS中，移动应用位置是典型的跟随运动效果。当应用插入新位置时，其他应用位置也会跟随位移）

构建幻象是一件非常脆弱的事情。 有些动画的细节对最终效果影响很大。 这些动画效果虽然没有在漫画中使用，但实际上并不会破坏整体的世界观。 但添加这些效果会让动画更加生动逼真。 其结果是故事更有说服力，更容易让人理解，也更容易让用户参与。

3.为什么要使用动画？

为什么要在 UI 中使用动画？ 动画有两个特征解释了它在 UI 设计中的价值。

首先，因为动画片具有艺术性，所以具有超越现实的能力。 这种能力可以更有效地传达信息。 UI界面也要求沟通清晰、清晰、简洁。

其次，卡通创造了一个很容易让观众沉浸其中的虚拟世界，通过这种方式，UI也可以变得有吸引力。 通过动画，充分吸引用户进入他们的世界。 然后让他们的注意力完全投入到工作中。 让用户感觉不是在操作一个界面，而是让他们更直接地访问任务。

4.使用UI动画时的注意点

在UI界面中使用动画是有好处的。 但UI并不是卡通的。 它们之间最重要的区别之一是卡通是一种被动媒介，而用户界面是交互式的。 界面中的动画应该设计成让用户感知不到状态（足够快、足够吸引、足够干净。让用户无意识地意识到这一点）。 用户可能希望在上一个动画结束之前执行下一个操作。 在这些情况下，应给予用户最直接的控制权。 但界面设计的原则还是应该得到动画技术的支持。

卡通和用户界面之间的另一个区别是它们的使用目标：卡通是为了纯粹的享受和娱乐，而用户界面是用来完成工作。 由于作品的严谨性，漫画中的娱乐成分需要排除。 卡通往往是怪异和愚蠢的，如果怪异足​​以让用户理解用户界面的功能，那么怪异就可以保留。 例如，当用户第一次打开软件时，可以使用动画给他们带来惊喜。 通过预期来建议用户动作，希望通过该动作给用户一些惊喜。

UI 是用于完成任务的工具，动画应该尽可能快，同时保持清晰度。 例如，当使用动画作为时尚元素时，动画必须很快，以减少用户执行和理解的时间。

5. 总结

在UI中使用动效有以下优点：

-因为动画使用户更容易理解界面之间的关系ip形象，因此减少了大量的认知负担。

– 消除屏幕上的跳转，减少用户对界面的意外和困惑，让体验更加愉快。

– 在动画中使用物理世界的运动缩短了用户和界面之间的差距，使用户能够更多地专注于任务而不是理解界面。

动画显示效果远远超过静态显示，甚至比静态显示更直接地说明界面。 动画不必很慢或分散注意力。 通过仔细调整，动画可以使界面易于理解且有吸引力。 同时使用体验也是令人愉悦的。

参考：

【动效神器Hype零基础入门教程系列】

先说一下这个软件的强大功能，并附上简单的教程！

“素描神助攻！” 无代码动画工具 Hype3 入门教程”

中国台湾设计师请你用Hype制作原型过场动画！

“无码动画神器！” 手把手教你使用HYPE3制作APP原型的基本过场动画（附神器）》

美雅姐教你如何使用Hype制作Path菜单动画！

“比AE还方便！” 教你如何使用HYPE无代码制作PATH扇区菜单动画》