动效设计原理:从卡通动画到UI动效
概要
Xavieryuan指出，UI设计通常基于静态页面，页面间通过跳转切换。在设计过程中，设计师往往更注重单页的视觉效果，而忽视了界面跳转的处理。这种未经处理的跳转缺乏足够的预期，容易让用户感到困惑。与之相反，卡通领域运用丰富的动画效果，使用户能够轻松理解各种动作，即使是夸张的动作也不例外。
尽管UI设计和卡通动效存在差异，卡通更侧重于娱乐，而用户界面是严谨的互动式工具，但我们仍可借鉴卡通动效的优点，将两者在情感和认知层面的优势相结合。
关键词：UI、动画效果、卡通
1. UI界面 VS 卡通
UI界面一般基于静态页面设计，无数个页面构成一个软件。通常，视觉设计师直接着手设计静态页面，很少考虑页面间的切换方式。由于用户对界面间的关联缺乏预期，常常会感到惊讶和困惑。当用户无法感知页面间的关系时，说明页面间的因果关系不够清晰，这会影响操作效率。在没有辅助解释的情况下，用户只能依靠经验去理解。
例如，在Windows系统中，若要打开“我的电脑”中的D盘，操作流程如下：
- 双击“计算机”图标；
- 图标扩展成一个窗口；
- 在窗口中选择D盘。
在这个过程中，第一步的元素是图标，第二步是扩展的窗口，界面跳转突然且直接，缺乏前后关联。对于初次使用Windows的用户来说，理解这样的界面跳转需要花费一定时间。
用户往往通过经验来克服这些问题，最初的使用体验通常较差，只有了解“机器的行为”后，才能与系统有效交互。尽管反复使用可以提高对界面的认知，但认知负担依然较重。比如，用户知道点击图标会打开窗口，但突然的变化仍会让他们迟疑。
相比之下，卡通动画擅长提供足够的信息，让观众理解动作的前后变化。动画中的角色不会突然消失或出现，形状变化自然。动画提供了必要的视觉线索，使用户更容易理解动作，而不像UI界面那样依赖经验，还将理解界面的责任推给用户。
从认知和情感角度看，将动画融入界面切换有诸多好处。动画能让用户持续思考任务，无需回忆之前的操作，减少视觉变化带来的惊吓和不安全感，有助于用户理解界面、提高使用效率，使界面体验更加愉快舒适。
2. 在UI界面中使用动画的几个方法
多年来，动画师们总结了许多动画设计方法。以下从拟物化、夸张和增强现实三个维度，介绍符合UI和动画设计原则的方法，并说明如何在UI设计中应用。本节提到的动画设计原则均来自Disney的《Animation: The Illusion of Life》。
2.1 拟物化
将UI中的元素视为真实、有重量的物体。在动画片中，人物和元素的运动就像在真实世界中一样，具有真实感。这种拟物感不仅是填充像素区域，更重要的是通过增加惯性来实现物件的运动。动画的诸多原则，如慢进慢出、跟随和弧形运动，都基于元素具有质量这一原则。
在UI界面中，将元素绘制为三维对象，使其独立于背景并拥有动作惯性十分重要。同时，性能优化也必不可少。为了营造流畅的移动效果，对象运动时的帧速率要足够高（动画达到每秒24帧时，人眼看到的是正常速度的运动）。性能下降可能导致移动延迟和卡顿，分散用户注意力，降低体验质量。
2.1.1 拟物化的方法一：运动模糊
拟物化和无卡顿是基本要求。当用户大幅移动对象时，由于视觉暂留效应，屏幕上可能会出现多个对象。动画设计师的经验法则是：当物体在两帧之间移动超过自身一半大小或更大时，加入运动模糊效果。运动模糊可以填补新旧位置的间隙，让眼睛更容易接受物体的移动。虽然涉及抗锯齿问题，但它是一种低成本的解决方案。
动画师常用的运动模糊方式有两种：一种是使用半透明条纹，像尾巴一样跟随在图标后，模拟现实物理作用，产生逼真效果；另一种是在单个帧中插入多个图像，如手臂快速摆动时，单个帧显示不同位置的多个手臂，可提高帧速率且更具说服力。
运动模糊表明，运动不仅仅是一系列静止图像的集合，它能给用户提供模糊线索，这种感知源于人类视觉系统的工作原理。卡通动画师常使用运动模糊来营造快速运动的幻觉。在App设计中，受手机尺寸限制，一般不会出现超远距离拖动，但在大屏幕电脑上可能会遇到此类问题。
2.1.2 拟物化的方法二：出现和消失
除了移动，元素无规则的出现和消失也会让用户困惑。在UI设计中，有移入、擦除和模糊消失三种方式展示元素的出现和消失效果，这些动作快速连续，能为用户提供必要的视觉线索。
2.2 夸张
通过“夸张现实”的手法，能让设计事半功倍。在迪斯尼的《白雪公主的小矮人》中，小矮人的形象和动作夸张，而白雪公主的比例更接近现实，显得相对平淡。每个小矮人都有与名字呼应的特征，通过夸张的表现，观众更容易记住他们。
在UI设计中，夸张手法可以突出被忽视的细节，让用户更容易理解某些对象，使界面更具吸引力。
2.2.1 夸张方法一：给用户足够的预期
在动作发生前，给用户一些提示，能让他们对即将发生的动作有心理准备，而不会感到惊讶。例如，在Tumblr中，鼠标移动到某一功能时，icon会跳动一下，提醒用户点击后会有变化。这种夸张技巧能帮助用户理解界面，解释或暗示界面间的继承关系，缺乏此类线索会增加用户理解界面的难度。
2.3 增强现实（Reinforcement）
所有动画技术都会增强某种现实效果。有些动画中，角色高速移动变成光线穿过屏幕，这种夸张效果经过精心处理，观众不会感到困惑，只会觉得超现实。本节探讨如何通过增强现实技术，改善卡通与观众、UI与使用者之间的关系。
2.3.1 增强现实方法一：缓进缓出
卡通人物移动时非常拟物化，动画师绘制动作常使用缓进缓出效果，即角色缓慢走出屏幕，接着快速移动，最后缓慢收尾。这种方式能让角色移动更有物理质量，使观看更舒适。缺乏缓进缓出效果，动画移动会显得很假，此类细节对动画质量影响很大。
2.3.2 增强现实方法二：弧形运动
相比于直线运动，对象沿弧形运动更具吸引力和活泼感。例如，Mac OS X中最小化窗口使用弧线效果，让界面更加活泼。
2.3.3 增强现实方法三：跟随运动
在现实世界中，主物体运动时，关联物体也会跟随运动。动画师将这一原理应用到动画中，让主体物停止后，其他部分细节仍可运动，如身体、衣服等，使动效更加极致。例如，在iOS中，移动app位置时，其他app会跟着位移。
构建动画假象需要注意细节，这些细节虽不影响整体世界观，但能让动画更生动、逼真，让故事更具说服力，使用户更容易参与其中。
3. 为什么使用动画
在UI设计中使用动画有两个重要原因。首先，卡通具有超越现实的艺术表达能力，能更有效地传达信息，而UI界面也需要清晰简洁的沟通方式。其次，卡通能创造虚拟世界，让观众沉浸其中。通过动画，UI能吸引用户，让他们专注于任务，而不是仅仅操作界面。
4. 使用UI动效的注意点
在UI界面中使用动效有益，但UI和卡通存在区别。卡通是被动介质，而UI是互动式的。界面动效应设计得让用户不易察觉（快速、引人入胜且干净利落），用户可能希望在前一个动画结束前进行下一个操作，此时应给予用户直接控制，同时遵循界面设计原则，利用动画技术提供支持。
卡通和UI的使用目标也不同，卡通用于娱乐，而UI用于完成工作。由于工作的严谨性，需排除漫画中的娱乐元素，但如果古怪的效果能帮助用户理解界面功能，则可以保留。例如，在软件首次打开时使用动画给用户惊喜，通过预期暗示操作，是可取的做法。
UI是完成任务的工具，动画应尽可能快，同时保持清晰。将动画作为时尚元素使用时，要通过快速减少用户执行和理解的时间。
5. 总结
在UI中使用动效具有以下优点：
- 动画让用户更容易理解界面间的关系，减轻认知负担。
- 消除屏幕跳变，避免用户吃惊和困惑，使体验更愉快。
- 将物理世界的运动应用到动画中，缩小用户与界面的距离，让用户更专注于任务而非理解界面。
动画的展示效果优于静态展示，能更直接地阐释界面。通过精心调整，动画可以让界面易于理解、富有魅力，使用体验更加愉快。