交互界面动效的情感化设计研究

刘 洋 （江南大学 214122）

交互界面动效的情感化设计研究

刘 洋 （江南大学 214122）

基于情感化设计理论，研究交互界面中动效的运用，优化用户体验。以唐纳德•A•诺曼情感化理论的三个水平层次：本能层、行为层和反思层为指导，提出动效在相应情感层次中的设计方法。以情感化设计理论指导的动效设计可以增强用户与界面的情感互动，提升用户体验。

动效；情感化；交互界面；用户体验

交互界面动效指的是用户与终端显示界面交互过程中，界面呈现出的动态效果，包含以交互逻辑为基础的动效和从图形动画衍生到界面中的细节动效。“情感化设计”一词由认知心理学家唐纳德•A•诺曼提出，是具有哲学意味的广义研究理论，以情感化设计三层次理论为指导，分析动效的设计方法，把情感融入到动效设计中，使用户在与界面的互动过程中产生正面的情感，提升用户体验。

一、情感化设计的概念与内涵

《情感化设计》中，作者唐纳德•A•诺曼表述人们对产品的情感加工是通过大脑的活动水平由低到高分为本能、行为和反思三个层次。本能水平是大脑的自动预先设置层，产生的情感是无意识的，此时物理特征（视觉、触觉、听觉）是主要的，本能水平的设计对应产品的外形；行为水平对应支配日常行为的脑活动，核心在于使用物品时的情感体验，行为水平的设计指的是产品的使用乐趣和效率；反思水平的情感是认知的最高水平，是有意识的脑的思考，通过对产品的思考和理解获得个人情感体验。优秀的反思水平设计，用户往往能从拥有、展示和使用产品的体验中建立自我形象、引起个人满足感和勾起回忆。

二、本能水平层动效的情感化设计方法

在交互界面动效传达给用户的过程中，本能水平中能产生即刻情感效果的视觉因素处在支配地位。设计原则是通过UI元素的形态变化和元素间不同维度的对比，使用户能时刻关注到视觉焦点并引导视线流。要注意的是适度添加动效，不能打扰用户在获取内容时的注意力，营造连贯流畅的视线流。

位移、旋转、缩放、渐变是UI元素最基础的形态变化属性，人眼会快速捕捉到运动的物体，元素的形态变化直接影响用户对视觉焦点（注视点）的捕捉。视线流是用户持续关注内容后留下的一串视觉焦点的流向。通过元素间时间、空间、色彩、形态、质感维度的差异对比，可以轻松吸引用户的注意力到界面希望展示的内容上。时间维度有动静、持续时间、时机的对比；空间有幅度、路径的对比；色彩有色相、明暗、饱和度的对比；形态有具象、大小的对比；质感有肌理、光泽、透明度的对比。通过对比可以表现运动过程中元素间的关系和内容的逻辑层级。

三、行为水平层动效的情感化设计方法

在本能层的视觉因素起主导作用之后，用户的意识会转向关注功能易用性，这就是行为层上讲的效用。根据诺曼教授提出的优秀行为水平设计的四个方面：功能性、物理感觉、易懂性和可用性总结出动效设计原则应遵循功能性、物理性、反馈性、隐喻性和一致性。

功能性。动画最基础的需求，为实现一定的目的服务。动效有展示层级、传达状态、提示信息等多种功能。设计师需要根据用户使用体验的反馈，谨慎添加动效，任何形式的动效首先是要有用的，能达到一定目的的。比如在ios的解锁密码界面，输错密码后摇晃的动画瞬间就能传达出错误的意思。

物理性。让用户有一种视觉上的运动真实感。基于牛顿三大运动定律，对现实生活中常见的重力、摩擦力、弹力、惯性总结提炼，即使在抽象的界面中也可以使动画看上去更真实自然。在设计某一元素或物体的动效前，应研究现实世界与之相匹配物体的运动原理，契合用户对力的认知经验。

反馈性。为用户的操作提供及时明确的响应。反馈动效需要在合适的时机引起用户注意，按发生时机不同分为过程反馈和结果反馈。过程反馈告知当前操作状态，比如在语音搜索时声波扩散的效果会传达出正在接收信息的反馈。结果反馈的响应要迅速且精确，过长的动画让人感觉响应迟钝，过短的动画又难以理解变化逻辑。在经常使用的功能上不要添加复杂或长动画，会增加用户等待时间，影响运行流畅度。

隐喻性。用熟悉的动作形式为用户提供操作预期。隐喻的作用是在人们用语言思考所感知的物质世界和精神世界时，能从原先互不相关的不同事物、概念和语言表达中发现相似点，建立想象极其丰富的联系。所以利用用户的经验和认知，模拟现实世界中物体产生的动作，为虚拟的动画效果找到真实的参照，可以简单快速理解操作或内容，使隐喻顺理成章。例如微信阅读的翻页动效就是模拟现实中书本翻页的动作。

一致性。在整个系统或应用中采用统一和谐的动态效果，令交互体验统一。在设计之前，需要给全局动效定义一个概念，并结合功能模块或场景的划分，定义动效是否出现和出现方式，以便在后期不断变化中保持外观或感觉上的一致。例如Android是基于纸质的概念，而华为使用磁铁的概念统一动效的运动方式。

四、反思水平层动效的情感化设计方法

反思层是意识的最高水平，在本能层和行为层后对使用者产生影响。用户选择产品不仅因为漂亮和易用，更高层次是因为它带来的愉悦感、满足感和自我认同感。设计原则是通过再现场景和契合品牌特性或诉求，引起用户情感共鸣。

用户在使用产品或体验服务时，会通过自身的社会经验来理解形成个人体验，用动效再现场景的方式，唤醒用户先前的个人体验，引导用户在动画效果和现实生活中产生关联，在回忆中引起用户同产品的情感共鸣。动效强化界面拟物可以产生移情作用，在绝大部分用户心里，这些拟物往往关联了某些情愫、联想或回忆。例如2016年天猫国际圣诞节的活动页面，以从页面顶部飘下的雪花为动画元素，营造人记忆中圣诞节下雪的场景，唤醒用户回忆引起共鸣。

用户根据自身的喜好、兴趣、身份匹配品牌传达出的生活理念和价值观，获取认同感和归属感。直击消费者的心理需求，不但能拉动消费，更能使消费者长久地保留对品牌的良好印象5。加入契合品牌特性和诉求的独特、有趣、有新意的动效，已经成为品牌营销的新趋势，目前很多品牌都在刷新或加载状态添加了增强品牌识别度的有趣动画。例如美团外卖的刷新动画，结合品牌袋鼠的形象，把腿做成飞奔的动画，有趣的传达了美团外卖配送迅速的品牌诉求。

五、结语

目前各种终端设备都在使用动效优化界面体验，在设计动效时，应综合考虑本能、行为和反思这三种水平对动效设计的要求。本能层通过UI元素形态变化和元素间维度变化来捕捉视觉焦点和引导视线流；行为层遵循功能性、物理性、反馈性、隐喻性和一致性的设计原则，增强产品可用性；反思层通过再现场景和契合品牌特性，使用户产生情感共鸣。尽管不同终端界面的交互方式有所差异，但巧妙的结合情感化的设计方法创造动效形式，探索用户与界面情感上的沟通，从而不断提升用户体验。

[1]唐纳德•A•诺曼.情感化设计[M].北京：电子工业出版社，2005.

[2]傅小贞，胡甲超，郑元拢.移动设计[M].北京：电子工业出版社，2013.

[3] 胡壮麟. 认知隐喻学[M]. 北京:北京大学出版社,2004.

[4]周睿.启动时态界面中动效的交互设计研究[J].包装工程，2015，08：83-86

[5]李雪山，聂书法.品牌广告的情感设计[J].装饰，2006，09：109-110