火星网校
动效设计原理：从卡通动画到UI动效
发布时间：2018-11-17 19:57:24
UI是基于静态页面来设计页面之间的跳转切换的，在设计过程中设计师很重视单页的视觉效果，却经常忽略了对界面跳转的处理，这些未经处理的跳转由于没有提供足够的预期，所以用户在使用时经常会觉得困惑。与此相反，在卡通领域由于使用了足够的动画效果，用户可以非常容易的理解某个动作，即使夸张的动作也没问题。
尽管UI设计和卡通动效之间存在差异：卡通更侧重于娱乐，而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点，从情感和认知层面上将两者的优势相结合。
1、UI界面VS卡通
大家都知道UI界面一般都是基于静态页面来设计，它由无数个页面组成一个软件。通常情况下，视觉设计师直接开始设计静态页面，几乎不考虑它们之间是如何切换。由于用户对界面之间的关联没有预期，所以他们经常会受到惊吓，用户苦思冥想就是想了解界面之间到底发生了什么？
（我们的App都是由很多页面组成的，由于用户对界面之间的关联没有预期，所以经常会受到惊吓或者感到困惑）
当用户感知不到页面之间的关系时，就说明页面之间的因果关系不够清晰。让用户理解页面之间的关系是至关重要的，这直接关系到操作效率。在没有辅助解释的情况下，用户只能通过经验去理解，这是一个非常有挫折感的体验。
举例来说：在Windows中如果我们的任务是：打开“我的电脑”中的D盘，流程是这样的：1、双击“计算机”图标；2、图标扩展成一个窗口；3、在窗口中选择D盘。
在这种情况下，第一步的元素是图标，第二步元素是扩展的窗口。界面之间的跳转是非常突然和直接的，而且没有前后关联，如果用户第一次使用Windows，这样的界面跳转是需要理解一阵子的。
（在Windows中，图标和窗口之间的跳转十分直接，如果第一次使用Windows会让用户很困惑）
用户往往通过经验来克服这些问题，前几次的体验是最糟糕的，最终用户学习了“机器的行为”才能有效地与它进行交互。尽管这些界面的认知可以通过反复使用来提高，但认知负担依然沉重，例如：用户知道点击图标将打开一个窗口，但是突然的变化（突然从图标变成窗口）也会让用户迟疑。
卡通中的动画效果非常擅长于提供足够的信息让观众理解。动画中一些令人费解的行为没有让用户感到困惑，动画人物并不会突然消失、突然出现，动画在发生形状变化时非常自然。动画提供了必要的视觉线索，让人理解某个动作前后发生了什么，不像UI一样认知沉重并非常依赖经验，且还将理解界面的责任归咎于用户。动画利用真实的动作来展示对象变形，让人更加容易理解。
从认知和情感两个角度来说，将动画融入到界面切换中是有好处的。通过对系统的解释，动画允许用户持续的思考一个任务而无需回想之前的操作，由于没有突然的视觉变化，动画降低了用户被UI界面吓到的机会，从而减少了不安全感。因此使用动画不仅有助于用户理解界面提高使用效率，而且还使界面的体验更愉快更舒适。
2、在UI界面中使用动画的几个方法
多年来动画师们已经研究出了很多动画设计的方法，这里选择一些同时符合UI和动画的设计原则，来展示如何在UI设计中的应用。下面我们从3个维度来讨论，分别是：拟物化、夸张和增强现实。
（1）拟物化
把UI中的元素当作真实的、有重量的物体。在动画片中人物和元素都是真实的、有重量的物体，他们每次走动都好像是生活在真实世界中一样，这种感觉非常真实。这种拟物感不仅仅是填充一个像素区域那么简单，这些物件的运动是通过增加惯性来实现的。动画的所有的原则，例如：慢进慢出、跟随、和弧形运动、其随后所有的讨论都是基于这个原则，他们是有质量的物体。
（所有元素是有重量的物体，这是所有的运动基础）
把UI界面中的元素变成独立的是区别于背景的物体，并让其拥有动作惯性是非常重要的。在UI界面中元素应该被绘制为一个在三维中的对象，用户可以连续并稳定的操作他们，光是把一个元素拟物化还远远不够，性能优化也是必须的。为了保持移动的假象，对象在运动时帧速率必须够高（当动画达到每秒24帧时，人眼看到是正常速度的运动）。由于性能下降可能导致移动延迟，从而造成卡顿的现象，这样用户容易分心体验就会折损。
拟物化的方法一：运动模糊
拟物化和无卡顿只是最基本的需求。如果用户大幅移动一个对象，例如：从屏幕左侧跨越到右侧。由于视觉停留效应，用户在屏幕上会看到2个以上的对象，眼睛呈现两个短暂对象也被称为视觉暂留效应。动画设计师面临这个问题时使用了一个经验法则：如果一个物体移动超过物体本身一半的大小（或者更大）的任何两帧之间，加入运动模糊效果，使用运动模糊填补新旧位置之间的间隙，让眼睛更能接受物体的移动。虽然涉及到抗锯齿的问题，但运动模糊确实是一个低成本的解决方案。
（在Windows中，鼠标指针可以设置成运动模糊，方便用户去追踪鼠标指针）
动画师发现有两种不同的运动模糊方式可以使用，最简单的就是使用半透明的条纹。这种条纹就像尾巴一样跟随在图标后，使用透明条纹来模拟现实的物理作用并产生非常逼真的效果。另一方式是在单个帧中插入多个图像，例如：手臂迅速来回摆动时单个帧显示多个手臂，每个手臂在不同的位置呈现，这种技术可以有效提高帧速率，并且很有说服力。
（运动模糊的全部帧效果，可以通过每帧展示多个竖线来达到提高帧数的效果）
运动模糊的效果表明：运动不仅是一系列的静止图像的集合，它会给用户一个模糊的线索，这种感知来源于人的视觉系统的工作原理。卡通动画师经常使用运动模糊，即使只是粗略进行运动模糊的渲染，也足以打造一种快速运动的幻觉。在App设计中由于手机尺寸的限制，一般不会出现超远距离的拖动，但是在大屏幕的电脑上就会遇到这个问题。
拟物化的方法二：出现和消失
除了移动，元素无规则的出现和消失也会造成用户困惑。在UI设计中有三种方式展示了出现消失的效果：移入、擦除和模糊消失。他们的动作是快而连续的，给用户必要的视觉线索来理解发生了什么。
（从左到右动效依次是移入、擦除和模糊消失）
（2）夸张
通过“夸张现实”的手法往往可以让设计达到事倍功半的效果，经过夸张手法处理的卡通表现的更现实。
例如：在迪斯尼的《白雪公主的小矮人》中，小矮人是非常不写实的：他们的脸和身体都很大，他们的动作大而夸张。相比之下，只有白雪公主的比例是逼真的，相比于矮人，她更像一个真实的人。所以白雪公主这个角色，却因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的，矮人反而看起来更逼真，这种夸张的方式更加的突出了动画本身。这样的原理说明，无论是物理特征、动作特征或四肢特征，可以通过强化某些方面让其更显著。
通过这种方式观众可以更好的去理解这些特征和动作。例如：每个小矮人和白雪公主都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的。这些特征非常强烈，即使没有这个名字作为一个额外的线索，人们也能通过每个矮人的身体特征、动作和行为等夸张行为来记住某个角色。
（白雪公主因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的，每个小矮人都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的，而白雪公主则特征不明显。）
所以夸张的表现手法可以突出某些受到忽视的细节，在卡通中动画师可以通过夸大某个细节来引起更多的注意力，可能这些细节原本很难被察觉。
和卡通一样，UI界面必须让用户理解并在必要时突出一些细节，采用夸张的方式，使UI界面中的某些对象可以更容易理解、更加“现实”，从而使UI界面更吸引人。
（在图片社区项目中，我们对通知使用了动效。因为通知入口属于细节，在没有通知时只保留一个icon（上图），不吸引用户注意，当有新消息来时（下图），用动效来吸引用户注意）
夸张方法一：给用户足够的预期
在动作发生之前最好给观众一些提示，当动作发生时观众已经准备好，而不必对所发生的动作所惊讶。
（Tumblr中，当鼠标移动到某一功能时，icon会跳动一下，提醒用户点击之后会有变化）
像类似预期一样的的夸张技巧，它们可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系，如果没有这样的线索，用户会非常难以理解这些界面。
（3）增强现实（Reinforcement）
所有的动画技术都会增强某个现实，有些会非常极端，就像在某些动画中角色高速移动会变成了一道光线，快速的穿过屏幕。实际上这是非常隐蔽的手法，观众不会感知到这些效果很夸张，他们只是感觉超现实。这些夸张的效果已经被精心处理，所以观众不会被这些夸张效果所困惑。本节就是探讨通过增强现实技术来弥补卡通与观众之间的关系，亦或者UI与使用者之间的关系。
增强现实方法一：缓进缓出
如前文描述，当卡通人物移动时是非常拟物化的。然而这种移动并不是简单的在纸上画一些等距的角色，动画师在绘制动作时经常使用缓进缓出效果：角色缓慢的走出屏幕，接着一个快速的动作，最后的收尾动作很缓慢。这种方式有助于让角色在移动中看起来更有物理质量。此外，缓进缓出效果出现在某一个快速动作之前，有助于观看时更加舒适。如果没有它动画中的移动会感觉很假，类似缓进缓出这种细节效果可以极大的影响一个动画的质量。
（使用缓进缓出的效果后，界面感觉更加舒适）
增强现实方法二：弧形运动
另一个原理也是经常运行在人的潜意识中，那就是弧形运动。相比于直线运动，对象沿着弧形运动时他们是非直接式运动，类似于卡通中的角色。圆弧路径的运动给人一种更吸引人、更活泼的感觉，而直线运动则比较简单。
（Mac OS X中，最小化窗口使用了弧线显得更加活泼）
增强现实方法三：跟随运动
增强现实的最后一个方法是跟随运动。在现实世界中当主物体发成运动时，与其关联的物体会做出跟随运动。动画师们将这种观察使用在动画中，当动画中的主体物停止后，其他部分细节依然可以运动。包括了身体、衣服和一些局部的动作处理，让其动效变的更加极致。
（iOS中移动App位置是典型的跟随运动效果，当App插入一个新位置时，其他app位置跟着位移）
构建一个假象是一件非常脆弱的事，一些动画的细节对最后的效果影响会非常大。虽然这些动画效果如果不在卡通中使用，其实并不会破坏整体的世界观，但是加入这些效果会让动画更生动、更逼真，最终可以让故事更容易被说服，人们也更容易理解，也更容易让用户参与其中。
3、为什么使用动画
为什么要在UI中使用动画？动画有2个特点可以解释其在UI设计中的价值：
首先，由于卡通是艺术性的，他们有超越现实的能力，这个能力可以更有效的传达信息。UI界面同样也需要明确、清晰、简洁的沟通。
其次，卡通创造了一个虚拟的世界，它非常容易让观众沉浸其中。通过此方法UI也能变的引人入胜，通过动画充分吸引用户来到它们的世界，然后让他们的注意力可以完全投入到工作中去。
让用户不要觉得他们在操作一个界面，而让他们更直接的触达任务。
4、使用UI动效的注意点
在UI界面中使用动效是有益的，但是UI并不是卡通，它们之间最重要的一个区别是：卡通是一种被动介质，而用户界面是互动式的。界面中的动效应该设计成不让用户感知到的状态（足够快、足够引人入胜、足够干净利落，使用户无意识的认识到这一点），用户可能希望在前一个动画结束之前就进行下一个操作，在这些情况下应该给予用户最直接的控制，但是界面设计的原则仍应该利用动画技术来支持。
卡通和UI的另一个区别是他们的使用目标：卡通纯粹是享受和娱乐，而用户界面是用来完成工作的。由于工作的严谨性，需要排除漫画中的娱乐元素。卡通往往古怪且愚蠢，如果这种古怪足以让用户理解用户界面的功能，那这种古怪则可以保留。例如：动画可以用在第一次打开软件时给用户一个惊喜。通过预期暗示用户操作，通过这个动作给用户一些惊喜是可取的。UI是用来完成任务的工具，动画应该尽可能的快，同时也保持其清晰度。例如：把动画当作一个时尚元素使用时，动画必须要快，通过快来减少用户执行和理解的时间。
5、总结
在UI中使用动效有以下几个优点：
（1）由于动画让用户更容易理解界面之间的关系，所以减轻了很多认知负担。
（2）通过消除屏幕上的跳变，使界面不让用户吃惊并费解，从而让体验更加愉快。
（3）将物理世界的运动用在动画中缩短了用户和界面之间的鸿沟，让用户更专注于任务而不是理解界面。
动画展示效果远远超过了静态展示，甚至比静态展示更直接的阐释了界面；动画并不一定是缓慢的，或者会分散用户注意力的东西。通过悉心调整，动画可以让界面是可理解的、有魅力的，同时使用起来的体验是愉快的。
分享
上一篇 2011年网页设计趋势全面分析
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
-
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！
增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
-
在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
-
今天，我们聊聊皮克斯的《头脑特工队》系列
-
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？
中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......
-
近日，中央广播电视总台《2025年春节联欢晚会》发布官方吉祥物形象“巳（sì）升升”，祝福全球华人在新的一年如意康宁、好事连连。
