浅议动效设计在APP中的交互应用方式

李月怡

（云南师范大学美术学院，云南 昆明 650000）

1 动效设计的概念

动效设计的英文是Motion Design，是运动图形设计（Motion Graphic Design）的简称，也称为动态设计。运动图形设计遵循平面设计和视听语言的双重标准，通过视频或动画来创作成动态影像的艺术形式。严格意义上讲，运动图形设计是动效设计的一个分支，而它具有众多的艺术表现形式和作品，所以这两者的概念逐渐趋同。下文所谈的动效设计即动态设计，或运动图形设计，不做细微区分。

2 动效的作用

手机移动应用动效指的是用户在 与移动设备交互过程中移动应用用户界面呈现出的动态效果。

2.1 提升用户体验

设计师若只追求静态像素的完美呈现，而忽略动态过程的合理表达，会导致用户不能在视觉上觉察元素的连续变化，进而很难对新旧状态的更替有清晰的感知。

通过「时间点」和「空间幅度」的设计为用户建立运动的可信度，即视觉上的真实感，当用户意识到这个动作是合理的，才能更加清晰愉悦地使用产品。

2.2 增添产品气质

未添加动效的产品，会带给人一种死气沉沉的感觉，所有内容平铺直叙、毫无生机，即使界面设计的很美观，也会缺乏一种灵动细腻的气质。如果把产品比作成美女，那么界面视觉就是美女的颜值，交互动效就是美女的肢体语言。合理的动效能将更立体、更富有关联性的信息传递出去，提高产品的“表达能力”，增加亲和力和趣味性，也利于品牌的建立。并且优秀的动效能够加强用户与产品的情感传递，增加用户对产品的友好度。

2.3 打造核心竞争力

在 UI 设计行业已经趋于饱和、并且产品设计流程逐渐实现体系化和模块化的今天，设计师如果只会利用组件重复性地“拼凑”页面而无更多的价值产出，被替代的可能性将会增大。在日常工作之余，若要为公司和团队输出更多的价值，动效设计能力便是交互、视觉设计师的必备技能与核心竞争力之一。

3 动效的交互应用方式

3.1 符合主题的视觉元素

动效设计需要使用恰当的视觉元素，一方面让元素能与APP功能主旨相吻合，另一方面也使之契合该界面的时态。动效的相对面积和动效持续时间的选择必须根据预期功能、预期用户体验的影响的具体情况决定。这类动效最重要的是让用户感到毫无负担又如沐春风，也就是不要夺人眼球，悄无声息的顺应用户行为，引导用户需求。在设计中要考虑系统兼容和资源占用、动态速度的节奏、仿生性or现实重现问题。例如加载过程时间长时，可以设计有趣的加载动画，缓解用户等待的焦虑。“饿了吗”APP加载界面使用了快速旋转的时钟转盘，匹配该应用为外卖功能主旨的同时，该动效用于短时加载的间隙，让用户明确当前状况。

3.2 自然、合理的运动形式

一个优秀的动效必须要自然、符合物理世界的事物运动规律。这是因为物理世界里的物体是拥有质量的，给它们作用力，它们就会移动。由于阻力的存在，几乎所有的物理运动都有着加速度运动，即人们肉眼所见到的缓入缓出。如果虚拟世界里的动画突然开始、停止或突兀地转变方向，会让用户产生不适的感觉，所以在进行动效设计运动形式要蕴含操作逻辑和动作序列，而不是一味地追求某 一动效图像运动的与众不同。在信息层级方面，由于在物理世界中， 物体存在近大远小原则，所以在界面元素也可以通过动效来呈现整个系统的信息的前后位置，展现信息的空间层次感。在转场过渡的时候，由于人脑灰质会对动态事物（如：移动、形变、色变等）保持敏感。在界面中加入一些平滑舒适的过渡效果，能帮助用户理解界面前后变化的逻辑关系。

3.3 及时、有效的操作反馈

无论是点击、长按、拖拽、滑动等交互行为，都应该得到系统的即时反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，为用户带来安全感。譬如在一些应用中，如果密码输入错误之后，界面会震动并且弹出红色的提示性文字，这就造成一种紧张感，促使用户在输入密码时谨慎、认真。等待性特征意味着该交互不具备指令效应，但可以形成操作效果，即充分使用动效将看似被动的局面转化为让人觉得这一时间段是有价值的。

3.4 情感化设计

好的设计往往是以小见大的，在细节处彰显情怀。好的体验也是由每一个细微的感受构成的。功能吸引用户使用你的产品，细节设计塑造产品的差异化，将你的用户留下。通过场景的营造，动效让用户的操作变得轻松自然，动效还可与产品定位或公司文化相一致，唤起用户情感潜在的反应，诸如回忆、联想、感悟等。例如“网易云音乐”的音乐播放界面动效，界面视觉元素唱片模仿上世纪七八十年代的唱片机，金属质感的唱臂被形象地展示出来，增强场景的真实感，强化沉浸体验，十分有情怀。从而更易引发用户的情感共鸣，增加用户对产品的友好度。

4 结语

在互联网时代，UI和网页中使用动效已经成为大趋势。这往往导致越来越多的应用为了动效而设计，而背离了动效设计的初衷。设计师 Pasquale D’Silva 在2013年的 Web Direction South 上曾这样说过：好的动效是隐形的。这就要求我们在动效的使用的过程中，就需要更加小心谨慎，确保设计目标不会被其干扰。恰到好处的拿捏产品中需要设计动效的位置、方式，不仅要掌握传统的动画理论，更需要对产品的目标，功能要求有着深入理解以及理性的对控件及界面从用户的角度进行划分。