视觉注意机制视角下的动效设计探析

文/贾轩（广东工业大学）

一、动效设计概念

动效设计源于影视动画中的视觉语言，将静态图形图像加入时间轴的概念，呈现动态的视觉效果。在平面设计领域，称之为动态图形设 计（Motion Graphic Design）[1]。随着智能手机的出现，设计师和用户对于体验的重视逐渐提高，动态效果被越来越多的应用到手机界面中，在界面的信息引导、交互反馈以及品牌风格上提升用户体验。

动效设计的历史伴随着交互设计的发展。在20 世纪60 年代，随着计算机的发展，交互设计首先以人机交互的形式出现。1984 年，Bill Moggridge 将软件与用户界面设计结合，提出了“交互设计”的概念。随后在 Bill Verplank 的帮助下更名为“交互设计”。同年，苹果公司发布的 Macintosh 中出现动效，但由于技术问题，使用的场景十分有限[2]。迪士尼动画《The illusion of life：Disney animation》中提出了动画的12 个原则，包括：挤压与拉升、预备动作、表演与呈像方式、连贯动作法与关键动作法、跟随动作与重叠动作、渐快与减慢、弧形运动轨迹、附属动作、时间控制、夸张、吸引力、深度、平衡及重量感。通过这些基础原则表现物理世界的自然状态，在时间维度的基础上通过视觉的变化体现动画的艺术感，激发人的情绪感受，对动效设计影响深远。随着移动应用设备的性能不断提升，好的动效可以让用户在意识不到的情况下顺畅完成任务，伴随UI 出现，动效设计逐渐发展起来。

二、动效的属性特征

动态图形源于基础的视觉图形根据时间进行属性变化，以此呈现出不同时间的视觉效果。由于图形的属性不同，相互组合达到的视觉效果成千上万，再结合时间的维度，动态效果也千变万化，呈现出不同的视觉效果。但所有复杂的变化都可以归纳为位置、形状、空间、色彩这几种基本图形属性的变化。总体来说，动态效果需要不断创新，省去多余冗杂的图形变化，使界面简洁明了，避免因动效元素带来的视觉信息的负载加深用户理解和认知的负担。也需要易于操作，交互上及时反馈。同时应具有吸引力，动效设计需要打动人心，凸显品牌。

（1）位置是最基本的动效属性，在信息界面中划分成 X 轴、Y 轴以及 Z 轴坐标，通过运动前位置到运动后的位置进行逐帧播放以达到视觉上的位置移动效果。X 轴以及 Y轴的变化是二维平面位移，当增加Z 轴后，就构建了数字界面中的空间深度。不同层级页面切换时左右滑动、交互控件的上下滑动等动效样式，都暗示了产品层级结构以及空间结构，让用户在使用过程中能够清晰的知道自己所处的位置，不会在使用过程中迷失。

（2）形状的变化包括了大小缩放、不规则变化，主要表现在图形本身的运动中，从无到有再到无的过程，通常应用在界面元素出场和退场的动效中，用于吸引用户注意力等。但不管是何种变化方式，都需要符合产品所传达给用户的品牌气质，完整、统一、和谐的动效才能够提升用户体验，直观的传递信息。

（3）色彩变化指的是画面中运动图形颜色和透明度的变化，色彩的变化能够快速引起用户的注意，在一些复杂系统中，色彩的变化通过快速告知用户任务进程或状态的变化。例如控件按钮的普通状态和点击态在色彩上会有变化，用户在点击某个按钮后，所选按钮颜色改变以反馈用户实时状态 。

（4）速度属性是指各个图形属性在变化过程中的变化速度。主要可归纳为减速、匀速、加速三种运动速率。速率样式常使用减速或加速来表现图形变化的视觉节奏以及变化效率，非匀速的速率也更加符合自然界的运动规律，恰当和谐的速度能够提升用户对产品在页面切换、图形变化过程中的流畅感提升用户体验。

三、动效的作用

（一）引导注意

在漫长的生物进化过程中，人眼对动态的事物具有天生的敏感度。视觉注意机制作为注意机制的一种，是指个体在外界刺激中快速屏蔽和过滤掉其他刺激信息，选择最重要和最有用的视觉信息的过程，以帮助自己完成当前任务目标[3]。注意的选择能够减少大脑对外部复杂环境的大量信息进行加工，转而节约大脑资源，只对少量有用和目标信息进行认知加工。有研究者认为，视觉选择性注意按照是否发生外显的眼动（注视方向的改变），可分为外源性注意和内源性注意。个体通过理解个人意愿和需求进行自上而下的注意驱动，获取完成任务所需要的外在信息。而外源性注意指客观刺激吸引注意，当有显著刺激特征的信息从其他刺激物中凸显出来时，注意会被该刺激信息所吸引，这也反映出注意的被动性和易变性。在数字界面中通过动态的视觉信息元素优先吸引用户注意力，利用动画效果来吸引人的眼球，达到将使用者的注意力引导至用户需要关注的地方，可以大大降低了用户的学习成本和搜索成本，增加用户的视觉搜索效率。

（二）减少认知负荷

在《认知心理学》一书中指出，中枢能量理论认为，注意是人能够用来执行任务的数量有限的能量或者资源[4]。决定注意的关键取决于资源分配方案，本身也受到几个因素的制约：受制于唤醒的刺激因素进行加工所需要的能量、个体当时的主观意愿和对完成目标任务需要能量的评价。其中，唤醒的刺激因素也取决于认知主体对刺激的选择，当客观刺激是人感兴趣或能够解决需求的信息、困难度较高的任务操作等，都会引起较长时间的注意和思考。用户在进行任务的过程中，会分配注意资源对信息进行搜索，当目标信息越难找用户搜寻的时间就越长，注意资源消耗的就越多。通过将静态的元素转换成动态的信息，提高注意唤醒的刺激能量，用户能够更加快速的注意识别信息并完成任务，也就减少了完成任务所需要的能量，对注意搜索资源消耗就越少。

认知负荷可划分为内在认知负荷、外在认知负荷和相关认知负荷三种类型。内在认知负荷是指由本身信息内容所导致的个体理解困难，例如 B 端产品对非行业用户而言，本身的领域知识就构成了学习困难。另外信息的呈现方式以及用户对信息的解码也会造成认知负荷。当认知负荷干扰了信息的解码和自动化时，就会产生外在认知负荷。而外在认知负荷的降低，早期成为了交互设计重点关注的目标。相关认知负荷是指当个体完成目标任务有剩余的工作记忆资源时，这部分资源会投入到对交互规则的理解和认知构建上，方便未来能够快速识别记忆新的信息内容。对于外在认知负荷，就涉及用户对产品信息结构以及视觉信息解码过程中所产生的理解成本。结构层动效通过页面跳转的位移变化，表现出产品各个页面之间的位置关系以及空间层级关系。页面左右滑动、上下滑动暗示了产品页面结构的信息逻辑。在页面跳转的任务节点上，也应该引导用户理解信息，尽量的减轻对信息理解的内在认知负荷，而用户对于理解任务以及信息呈现方式所消耗的外在认知负荷，则应该尽可能地降低。动效设计应该促使用户理解、完成对认知图示构建，将认知资源主要集中在对任务内容的分配上，逐渐从对任务的控制加工转向自动加工。

动效由文本、图形、声音、影像等信息要素组成，这些信息通过人的视觉和听觉感官通道进入。以视知觉为例，视知觉分为两个阶段，视知觉早期，视觉信息被视网膜的感光细胞获取，投像到视网膜上形成短暂停留，视知觉晚期，是对图像进行识别，将图像的特征进行提取和分析，对应到视觉心理模型中，与已有的认知图式进行匹配，将新的信息已有的认知结构进行整合。

（三）唤醒积极情绪

积极情绪是指正向情绪。许多学者针对积极情绪给出过具体详细的描述，如罗素提出“当事情进展顺利时，你产生的那种想要微笑的好的感受就是积极情绪”[5]。Fredrickson 认为“积极情绪是对个人有意义的事情的独特即时反应，是一种暂时的愉悦”[6]。动效设计根据作用可以划分为引导性动效、反馈性动效和提示性动效。引导型动效在界面中通过显著的视觉刺激快速获取用户注意，指导用户完成任务。反馈型动效则是在用户与产品交互过程中的每一次点击、滑动等操作后快速给予相应的反馈，让用户得知操作结果。提示型动效则是在进程中给用户相关信息的提示，例如，加载动效通过富有节奏律动的视觉画面安抚用户因等待而产生的焦虑感，减少用户对于等待时间的时距感知。所有的动效时长都不宜过于漫长或短暂，过于漫长则会让用户对产品失去耐心，太过短暂会让用户产生无趣的视觉感。通过有效的动效引导、反馈和提示，告知用户在任务过程中的进程以及状态，帮助用户快速且顺利的完成任务，让用户产生需求被及时响应、被满足认知，从而产生积极情绪。

（四）增加任务效率

动效通过正面情绪的唤醒能够增强用户注意，促进认知加工，对工作记忆也有不同程度的影响。研究表明，注意加工会影响情绪加工[7]。情绪刺激会促使更多注意投入到刺激中，从而占据信息知觉上的优先地位。它们无论作为知觉目标还是提示线索，都能增强注意，促进认知加工。已有研究显示，情绪信息的愉悦度(valence)和唤醒度(arousal) 对认知过程具有调节作用，同时，个体的情绪状态也会影响注意分配，注意分配也对情绪的产生和调节发挥着作用。尽管有许多研究报道，情绪加工可以自动进行。

多媒体学习认知-情感理论指出，个体的认知过程和情感是不可分割、相互影响的，积极正向的情感、动机可以驱使个体投入更多的工作记忆资源来进行信息加工，反之则会起到阻碍作用[8]。这也就意味着，动效所引发的积极情绪能够帮助用户理解和认知产品，在完成任务的过程中，也能够投入足够的工作记忆资源来完成目标，提升用户体验。另一方面，Johnson 等人通过隐性注意朝向任务研究了积极情绪注意灵活性的关系。研究发现，具有积极情绪的被试比有中性情绪和消极情绪的被试的注意灵活性更强，能够更快的从提示刺激物转移到目标刺激物上，也就说明，积极情绪能够促进注意转移，帮助自身更快的从非目标线索上解脱，提高搜索效率。

四、动效设计原则

（一）动效设计的功能性

动效需要体现产品结构以及交互方式，具有解释交互的能力。产品的信息结构中，不同页面之间的关系需要通过动效的位移表现出的空间以及位置，暗示用户页面层级关系，让用户对当前页面所处的整个产品页面结构的位置有所感知，减少用户对产品结构理解的认知负荷，传达操作的可用性和预期结果，保证用户在使用过程中不会迷失。用户通过点击、滑动等操作与系统发生交互时，通过动态图形将操作与视觉连接，为用户进行引导、反馈和提示，建立了交互的连贯性，完善交互链路。

（二）动效设计的重点性

动态的信息天然能够快速从静态的刺激信息中突出，吸引用户注意。但界面中的动效设计需要克制，应该衡量好页面信息层级，将最重要的信息进行动态效果突出，方便用户快速寻找。并且，动效吸引注意力，也应该与注意力相关联，在用户交互或者视线关注点发生，贴合用户任务和场景目标。不符合用户目标的动效只会干扰用户任务，迫使用户产生无效的注意转移，降低效率。

（三）动效设计的情感化

动效及时反馈也能够激发用户在完成任务后的积极情绪。用户在完成任务后，能够快速反馈任务状态，提高产品的流畅感和操作感，提升用户体验。并且通过有趣生动的动态效果，能够减少用户等待的焦虑感，减少用户的时距感知，缓解负面情绪。

（四）动效设计的一致性

动效涉及产品的结构层、框架层和表现层，同属于交互和视觉的设计范畴，并非独立的内容存在，因此也需要保持交互规范和视觉语言的一致性。首先，需要符合行业的一致性，即需要遵从行业中其他竞品已有基础动效设计的惯例，尊重用户已经养成的操作习惯和认知，避免用户了解新的动效方式而导致的认知成本增加。其次，遵循产品内部的动效一致性，相同的交互内容、相同的信息结果，也应该适用一致的动效样式，一方面可以减少用户认知相同属性信息的理解成本，另一方面，也可以减少对产品内部动效样式种类的记忆成本，就研发而言，也减少了开发成本。最后，要契合产品品牌调性，与品牌所传达给用户的产品气质保持一致。

五、总结

本文重点从动效的定义与发展历史、动效属性维度、动效的作用几个方面进行分析。结合认知心理学中的视觉注意机制、认知负荷理论以及积极心理学中的积极情绪等，对动效的作用进行拆分，动效能够引导注意、减少认知负荷、唤醒积极情绪并提升任务效率。提出动效设计需突出功能性、重点性与情感化，希望能为动效设计实践提供新的理论依据和设计思路。