基于用户情感化体验的App动效设计研究

朱洁皓

（江苏商贸职业学院，江苏 南通 226011）

界面中的动效设计使界面展示信息时更加易于理解，展示内容更清晰，能及时地与用户进行交流并作出响应，好的动效设计能使用户在操作界面时逻辑更清晰，使用更便捷，随着人们情感体验精神需求的不断提升，App 设计中对用户情感的关注也逐渐成为设计优良的评价标准，人们对动效设计的情感化体验也展开了设计与研究。

1 App 动效的设计

1.1 动效设计

动效设计是一种以画面为载体，将资讯输入到界面设计中的一种重要的视觉表达方式。动效设计在图形设计的基础上，添加了时间的概念，按照一定的物理法则，给使用者提供信息，让用户可以看到自己的动作，可以对用户的行为做出反应，清楚地说明界面设计中的互动行为的起始和终止[1]。动效设计的研究和实践也在注重对用户体验的产品优化，动态效果能够在静止的网页上引起用户的注意，更加清晰和有力地传递信息。

1.2 情感化设计

情感设计是由唐纳德·诺曼在《设计心理学》一书中提出的。情感化设计分为本能层、行为层、反思层三个层次。随着人们生活水平的提高，用户对各类产品的要求已不仅仅是功能的满足，越来越多的用户在满足功能的基础上，提出视觉美观，个性化的本能层要求；操作逻辑清晰，产品易用的行为层要求；情感关怀、产生共鸣、价值感认同，留下深刻印象的反思层要求[2]。随着设计心理学的兴起，人们越来越注重对用户的情感体验，因此情感设计也得到了广泛的重视，将人们的目光从功能满足转向了人性关怀，使其更贴近使用者。在图像效果方面，情绪设计也是非常重要的，充满感情的动态效果能为使用者带来更好的使用体验，为用户提供了一个清晰的界面和愉快的使用体验，从而达到视觉美观，逻辑引导清晰，反馈及时易懂等基本需求，提高使用愉悦感。

1.3 交互动态效果的运用

传统信息的传播是单向的，静态的，随着技术和网络的发展，越来越多的交互功能被实现，信息的传播实现了差异化，不同的用户根据需要可以与产品之间进行交互，选择需要的信息来进行展示，突出了信息传递的准确性。交互需要在实现视觉设计时，更多地顾及使用者的感受与需要，改变了传统的视觉传播方式，即用户在单向接受静态信息时，根据使用者的习惯及视觉体验，让用户有一种身临其境的感觉。交互带个用户的信息精准度，与用户交流中的情感依赖与共鸣，这是静态的视觉展示无法实现的，为了使产品与用户之间的黏性增加，使用户与产品之间产生更多的共鸣，在实现产品基础功能的前提下，深入研究和提升交互动态效果的运用是必要的。

2 情感化体验在动效设计中的应用分析

2.1 动态效果的基本要素

在完成静态界面添加动态效果时，必须先掌握最基础的可视化参数。动效设计的中心思想是通过恰当的动画，在合适的时机，以合适的速度来传达观念和讯息。动效的设计应该主要围绕元素位移、缩放、不透明度变化、旋转等基本属性来进行设计。当基本的运动规则被确定后，再通过调整特定的属性来达到精炼的效果。

在动态效果设计中，动态效果响应的时间，和动态效果的触发点是需要根据产品进行设计的。首先动作效果必须有某种含义，在一些重要的场合，达到反馈、传递信息、引导任务、集中注意力的目的。不能随意地堆叠，甚至是照搬模板。动态效果比使用者的动作要慢一些，有一些反应的时间，便于使用者掌握使用的节拍。下一步是将预设值与启动值之间的间隔时间控制在最佳值。太短的动态效果不但没有传递出足够的讯息，而且一闪而过让使用者无法看清，引起误解。动态效果的响应时间太久或等待的时候显示比较单调，会让用户失去耐心，放弃等待。在动态效果上，不同层次的函数在视觉上要有显著的差别，同样的动作和效果，用时间来营造有序和一致性，增加可读性。在动态的作用下，元素的变形，比如挤压和拉伸，都是模仿物理的。在虚拟世界中引入了现实的物理法则，模拟了重力、摩擦力和惯性对运动目标的变形，能提高活动性。自然中没有任何一种物质是均匀的，也不会有什么东西会突然停下来，因此，很多界面的移动、翻页，都需要设置动态曲线。

2.2 动态效果的视觉冲击性与功能性特征

以用户体验为宗旨，分析使用者的操作习惯、用户的喜好，软件的使用情况和整个过程的架构，在进行动态效果设计时，力求利用元素、色彩、流畅的动态效果来创造舒适的效果，做好可视化的指导。这些信息是按照等级顺序排列的，每个单元的布局可以有明显的主次关系，有了视觉上的突出，让使用者知道哪些地方值得注意，这是一个值得探索的地方。再进一步发掘出合适的动态植入时机，为用户添加一些有创造性的点子。

视觉上的震撼与功能的结合并不矛盾，并且是一种包含的关系，并且在视觉经验中也包括了功能的展示，也是一种提升体验的方式。动态效果设计能清楚地向使用者展示App 的运行过程，例如点击一个图标就可以完成网页的跳跃，它会不断地变小，然后变大，这是一个准备。若动作幅度较大，则会有较小的反弹。位移的改变不是一条直线，但在动态效果设计中，遵循自然法则和逻辑，除非那些法则有特别的含义被破坏。

2.3 利用动态效果提升用户体验的原则性

动效发生在使用者的动作之后，作出回应，具有自我解释力，它能缓解使用者的耐心和焦躁，让使用者有一种安全感和互动的感觉。动态效用表现在转场过渡和资讯层次上，能让使用者理清思路，更好地了解整体和局部的关系，让新的消息和界面不会突然地冒出来。至于下一层会有什么，前馈效应具有强烈的提示作用，为将要发生的事情做好准备，提高使用效率和便利性，优化操作体验。

良好的动态效果能够将不同的功能区分开来，也可以把没有规则的数据整理起来，通过软件界面架构的连接，加强逻辑关系，提高认识的有效性，方便使用者在交互过程中不出戏，准确的查找需要的资料。对点击后的反应进行及时的反馈，能够消除使用者的焦躁感，减少负担，最大限度地减少信息转换间隙所造成的焦虑和困惑，提高使用的便利性。要善于运用减法的强弱，删除不必要的，让它更适合于核心功能，协助用户使用、理解和记忆，拥有最佳的操作体验[3]。举个例子，在加载过程中，增加了动态功能，导致了时间感的扭曲，通过加载动画的视觉效果，使观众有一种等待时间不长的感觉，从而降低了耐心的消磨，加强互动的体验。

3 常见动效的情感表达方法

3.1 转场动效

转场动效应用在页面的切换和功能的转换，有不少应用在页面切换时没有动效，是直接的跳转，在用户观看时，会有卡顿的感觉，显得比较生硬，界面缺少友好性；在页面切换中加入一些动效可以使页面看起来更加流畅，提升观看的舒适度，同时，应用一些不同的动效，也能帮助用户理清应用页面的层级关系。例如，在很多应用中，进入应用会用由小到大的动效，退出则用由大到小的动效；进入某项功能的子层级，常用向左滑动的动效，退回上一层级常用向右滑动的动效；动效的加入能使用户的操作逻辑更清晰。

转场动效的设计中，需要使用“缓动”来让动效的表达更符合实际的情况和用户的期望，在生活中，动作的转换一定不是匀速的运动，常会出现加速或减速的变化，在动效的设计时，要根据实际的应用场景，选择缓动的变化曲线，以符合应用的场景。

3.2 展示动效

展示动效应用在需要重点展示的信息中，通过一些动态效果的添加，帮助用户理解信息内容，并获得信息中的情感。例如，在天气App 中，常会见到根据不同的天气状态，会有不同的展示动效，以更加直观地提示用户天气的变化，在观看信息时，能通过动效直接的获取，节省阅读的时间，也提升了产品的易用性。但由于设备屏幕的尺寸有限，在需要展示较多信息的时候，还可以通过缩放、翻转、折叠化等动效，来对信息进行更为丰富的展示，动过动效的添加，可以将信息以渐进的方式进行展示，提升用户认识的同时，也能表达出信息之间的层级关系，帮助用户理解信息逻辑，提升使用体验。

在展示动效的设计中，常使用“堆叠”的方法来进行信息的分层展示，体现出信息间的连续性与逻辑关系，在“堆叠”切换的过程中，运用缩放、模糊效果，模拟生活中近大远小、近实远虚的透视效果。常用“维度变化”的方法体现信息的翻转和折叠，当新的信息产生或消失时，运用维度变化，做出翻转、折叠的效果，展示出信息的叙事、连续性和逻辑关系。

3.3 引导动效

引导动效的应用往往是希望引起用户的注意力，根据一般视觉注意的规律，人眼总是会先注意到运动的元素，通过抓取用户注意，引导用户点击，进入到目标场景。例如，很多App 的导航中都会有“+”按钮，点击常会出现更多选项，在出现的过程中根据产品使用合适的动效，能给用户带来清晰的思路，快速找到需要点击的按钮。

在引导动效中，常使用“镜头平移与缩放”的方法，对界面元素进行展示，并保持过程的连续性和空间变化，这种动效可以暗示观察者视角的变化，也可以暗示静止的视角下对象改变位置。通过连续性和叙述来支持可用性，帮助用户在界面对象和目的地之间无缝转换。还可以结合“维度变化”来引导更多的空间，更直观地向用户传达与当前信息相关联的上一层与地下一层的内容，帮助用户更好的搭建产品逻辑结构。

3.4 加载动效

加载动效应用在由于网络原因或数据流量较大时，不能及时呈现内容时，有一定等待时间，在等待的同时，运用动效，让用户了解加载的进度，同时缓解等待时的焦躁、无聊等负面情绪，以提升产品的体验感。

在加载动效的设计中，常用“变形”的方法，当加载进程结束时，可以进行形态的变化，以提示对象效用发生的变化，以创建连续的产品叙事流程，变形是提升可用性动效中最明显和最具穿透力的。“值变”的方法也时在加载动效中常用的方法，运用数值的变化来提示加载的进度，在实际的设计案例中，数值的变化可以用一些与产品相关的动态图形来展示，例如旅行类产品中运用奔跑的小人；饮品点单产品中运用逐渐注满水的杯子等，提升用户对产品的印象，提升亲和力，增进个性化的情感。

3.5 反馈动效

反馈动效运用在当用户与产品产生点击、滑动、缩放、拖拽等交互时，产生的视觉或听觉或触觉的动态反馈，以向用户反馈交互的结果，帮助客户了解交互过程中所处的状态，给用户带来安全感，让用户清楚地了解目前处在什么状态，当前发生了什么事情。例如在众多产品的密码输入页面，用绿色代表安全性高或登录成功，红色代表安全性低或错误，很多时候还会加入音效或震动，通过多种感知来反馈当前的状态，以及时的提示用户交互操作的状态。在生活中如果去按下按钮，你能感受到按下时的力度和按钮的阻力，但这些是在点击屏幕的时候所无法接收到的反馈，所以就需要通过一些视觉、听觉或触觉的方式来及时将交互的结果反馈给用户[4]。

在反馈动效中，常会用到“生成”的方法，这种动画能展示出通过操作而发生的新的事件，以及前后事件之间的关系。“生成”可以引导用户从交互前的信息转向交互后的信息，反馈信息之间的关系，提示进一步的操作，增强用户信任度，提升产品安全感。

通过以上常见动效的情感表达方法，可以帮助我们在动效设计中更为准确地表达情感，提升产品的人性化体验，增强客户的黏度。在实际案例的设计中，可以根据不同产品的具体情况，进行各种表达方法的组合，来衍生出各类复杂并变化丰富的动效，提升产品可用性，提升情感体验。

4 结语

随着设计对情感化的重视，App 的情感设计也在逐步提升，而在App 界面中，动效是最容易引起用户注意，并与用户产生交流最多的因素。本文通过对App 动效的分析和情感化设计的研究，总结常见动效的情感表达方法，希望能给App 动效设计提供一定的参考。但App 的种类形式多样，针对不同产品的情感化设计研究还需再进一步深入。