UI动画流畅性体验的快与慢

黄馨仪 武汉传媒学院

流畅并不能单纯的与速度快或时间短画等号。从字面上讲，流畅在《汉典》中的释义是灵活而通行无阻；快而清晰。在《剑桥牛津词典》中的释义是平滑无中断；轻松而快。根据以上对文字的解释，流畅的确和快有着联系，但倘若快而不清晰，快而不能轻松自如，流畅便无从谈起，反而成了负担。因此，UI动画流畅性体验的意义，不是一味的快，而是在快与慢的动画流转之间找到平衡舒适的体验，易于理解和使用的幸福感。

一、思维与认知流畅

人脑中的两大系统在《快思慢想》一书中，被定义为系统 1和系统 2，是由心理学家 Keith Stanovich 和 Richard West率先提出的术语，又在诺贝尔奖得主丹尼尔·卡尼曼的《快思慢想》一书中得到详尽推理和广泛传播。在无意识的系统里，运转的速度会非常快，是低能耗自发且控制熟练的行动；有意识的系统里，运转的速度缓慢，是受控地高能耗的有反应的行动。而这两个系统它们各有各的能力、上限和功能[1]，只要处于清醒的状态，系统一和系统二都很活跃，且分工井然有序[2]。

（一）放松的思维认知

系统一是无意识的思维模式，可以毫不费力就能产生印象和感觉，是自动化的运作[1]。在没有车辆的道路上开车、判断一个声音来源的位置，阅读一则广告信息上的标题，回答简单的数学算术题等，都是认知放松状态下的工作范围。它的另一个功能是根据给出的直观数据，评估当时的情况，决定是否需要更多系统二的协助，它会在容易与困难之间做选择，当事情没有必要转移注意力，或投入更多的精力时，就不会调出系统二来支援，当认知感到事情不那么顺畅，有阻碍时，就会消耗系统二来保持事情的持续进行。认知放松的过程与多种输入和输出活动的网络相结合。卡尼曼用几个例子说明了这一点：当一个句子印刷清晰，被多次重复，或已深植于脑海，人就可以在认知放松的状态下，顺畅的解读出来。在心情好时听一个人说活，人会感到认知放松。相反，当你在读印刷不清楚，颜色浅淡的说明书，或句子冗长、用语复杂，或心情不好，甚至在皱眉时，人会感到认知紧张的状态[3]。

放松的思维认知来自于熟悉感、真实感、良好感和不费力的自在感。系统一的自动运作可以产生放松的构想模式，但是只有慢一点的系统二可以一步一步的建构思想[1]。

（二）紧张的思维认知

系统二是有意识的思维模式通常动用到注意力去做费力的心智活动，包括复杂的计算、选择和专注力的主观经验[1]。例如在告诉别人电话号码时，寻找棕色眼睛的少女，填写个人信息表格，朗读一篇文言文片段，在拥堵的马路上行驶，这些都需要大脑持续的努力，然而注意力是有限的，如果超出预算，就会感到困难或无能为力，认知紧张是受到目前费力程度和未被满足的需求两者的影响。因此，当一件事情被初步判断不那么容易时，系统二就会开始运作，消耗注意力，思维趋于紧张状态，当问题得到解决，系统二又会回到舒适的底费力模式中，随时等待召唤。系统一则继续在轻松的思维模式中占据主导，达到思维认知的平衡。

轻松的思维模式和紧张的思维模式交替运行，协同工作达到认知的流畅。

二、动画的发展特征

（一）浑厚的动作审美

在一些传统的动画理论中，以人体的形体大小为中间基准，越是造型巨大的形体角色，其动作就应当越缓慢越沉重，其动作给人以一种“拖”着动的感觉；而越是形体小巧的角色，其动作应当越发快速敏捷[4]。在皮克斯的动画片中，就有很多这样的例子。《超人总动员》里的超人特工鲍勃，《功夫熊猫》里的大熊猫阿宝，《娜扎之魔童降世》里的龙王，《疯狂动物城》里牛警官的动作都是根据这样的模式设定的，虽然动作笨重迟缓，但也正是这样的设定突显了动作的浑厚有力，武艺高强。《狮子王》是这一动作美学的代表作之一，其角色动作连贯流畅精细，无论是狮子们的奔跑、跳跃、捕食，还是嬉戏、打斗、对话都力求让每一个动作清晰可见，还原自然的效果。虽然略显拖沓，但观众们的视线一直被生动活泼的动画镜头深深的吸引（见图1）。

图1 动画影片《功夫熊猫》中的角色运动镜头

（二）敏捷的动作审美

在另一些传统的动画理论中，动作有着别样的魅力。它不以角色体型、力量大小为依据，而是用了超现实的速度与爆发力作为动作的制作手法，再借助环境与特效的烘托来体现能量与力的巨大影响。这样的动作干脆利落，追求敏捷与速度，创造了新的动作风格。其动画风格受武侠文化传统和武术文化的影响，将“静如处子，动如脱兔。不动如山，疾如林，徐如风”的精髓表现得淋漓尽致。动画片《大闹天宫》里斩妖除魔的孙悟空、《奥特曼》里大战怪兽的战队精英，还有《飞天女警》《天元突破红莲之眼》《千与千寻》《大鱼海棠》等都是运用这样的动作审美来进行角色诠释的，它们都减少了中间动作的连贯时间，简化动作的准备环节，但却在配音、环境、特效的配合下，让观众们体验到法力无边，热血沸腾的视觉画面。

无论是浑厚的动作审美还是敏捷的动作审美都有其各自的特点和魅力，人们会根据各自的偏好选择不同风格。短促风与滞慢风都遵循动画片的流畅之美，它们与人的认知思维相契合（见图2）。

图2 动画影片《大闹天宫》中的孙悟空运动镜头

三、UI动效设计原理

在UI动效的设计中，有不少相关的研究原理被借鉴和参考，其中最为著名的经典之作要属《迪士尼的十二动画基本原理》，早期作为表现角色动作真实、生动的动画法则被广泛传播，而后也因为互联网人工智能交互时代的到来被UI动效设计者们摘录参照，特别是其中的“缓入缓出”“时间节奏”原理在动效设计的实践中发挥着作用。它倡导物体运动需要时间来加速和减速，并且阻尼曲线逼真的动画必须准确地对动作计时，以产生令人信服的结果。由此看来，《迪士尼的十二动画基本原理》中对于运动的描述以“缓”为主，考虑真实性的体验。基于这一点，Google的前交互设计师总结出了《UX在运动中的十二原理》，他的结论同样指出缓动和延迟运动需要基于一定的时长。

Google公司在Android系统中的设计是以材料设计Material Design为设计理念，其中提到缓动是一种元素的自然力起作用的方式运动技术，即联想到自然界中的运动，并确定了具体的时间参数，如：标准缓动为300ms、重点缓动为650ms[5]。Apple的人机界面准则中的动画使人与屏幕上的内容之间建立了视觉联系：提供了状态、提供反馈、增强直接感和帮助用户可视化其动作的结果。它们使用一致的动画，例如熟悉，流畅的平滑过渡、设备方向的流畅变化以及基于物理的滚动[6]。Microsoft Fluent Design中同样提到了基于真实物理世界的运动效果，为UI动画设计者们提供了宝贵的理论原理支撑。

近年来，国内一些开发平台在不断的实践中，如雨后春笋般推出了自己的动效设计原理和规范，逐渐成熟起来。Ant Motion是从Ant design中提炼出来的动效语言。内容包括自然、高效、克制的动画效果。并依据移动的距离的长短和面积大小，具体制定了四种缓动曲线：ease in out、ease out、ease in、linear，及四种时间参数：100ms、160ms、220ms、280ms[7]。和上文中的制造商相比，这样的动效对时间的设定要求更短速度更快。另一个国内开发平台Zan design 的动效设计方向和路线也基本与之一致。

不难看出，UI动效的设计原理中有的主张自然“缓”，也有的偏向高效“快”。而无论是“快”还是“缓”，它们都是流畅体验的一种表现，不能割裂哪一方来评判是“快”好还是“缓”好，只是偏好不同。

四、人因流畅性体验

（一）流畅性与主观感知

从主观感知的角度来看，流畅性不是认知操作本身，而是与认知操作相关的轻松感，“时间错觉”中提到了这一概念，即时间知觉的错误，变慢、变快、停止或倒退等时间错觉会受到事件、情绪、感觉通道、年龄等诸多因素的影响。也就是人对加工信息难易程度的主观体验快慢取决于认知熟练度，人对认知较为熟练的信息会产生更快的体验，人对认知较为生疏的信息或是和经验不符的信息就会产生停止或更慢的体验。人的认知熟练的信息来源于所处的自然环境，越符合自然环境的体验，人越能快速的感知，反之则不容易感知，就会有缓慢的错觉。比如在手机页面中有动效的转场虽然客观时间比无动效的转场长，但主观上可以使用户加快反应、理解页面内容的速度。因此，无动效的切换页面看似节省了时间，实则给用户的认知加载时间增加，流畅性体验主观感知更迟缓。从而可知，流畅性与主观感知的快慢成正比。

（二）流畅性与时间规律

流畅性不是单纯的运动快或运动慢，在人因的研究中，可以找到人对于时间体验的规律。丹尼尔·卡尼曼提出：人对体验的记忆的决定因素分别是高峰时和结束时的感觉。他做了一个有趣的实验，分别使用线性的运动方式；开始快，结束缓慢的运动方式；开始缓慢，结束快的运动方式以及无规律的运动方式，在相同时间里完成同一个进度条的播放，并搜集观看者对于进度条播放快慢的体验结果。结果表明，大多数人认为开始缓慢，结束快速的进度条感觉速度是在更快的推进。

快与慢的运动是UI流畅性动效的研究内容之一。快，不一定要通过缩短时间来实现，慢，也不一定是增加时间来实现，而是探索如何运用时间规律来调整运动的速度，使界面中跳转的动画更符合人的认知心理、审美习惯、自然规律，从而达到流畅的体验。它可以是一种个性的选择，没有唯一的标准。

综上所述，UI动画流畅性体验的快与慢不仅仅体现在与时间的角逐，更是与人的认知心理、审美习惯、自然规律相结合的综合探索。