沉浸式体验中的界面转场动画研究

黄馨仪

（武汉传媒学院，湖北武汉 430000）

古语有云：天下之至柔，驰骋天下之至坚。无有入无间。无形的力量能够穿透没有空隙的东西。当指尖在界面间流转切换，有效的转场动画能于无意间将信息连接自如，并且在信息反馈的方寸之间流露柔和的“语气”，使用户感到轻松愉悦，仿佛在与自然沟通相处，以用户为中心的动画转场体验可以从视觉体验、认知体验和操作体验3个方面入手，寻找方案。转场的视觉元素运动关系，转场的逻辑层级空间编排，转场操作跟手的物理引擎设计，都是沉浸式转场动画效果的影响因素和重要条件。

1.沉浸式体验概述

“自我消失了。时间飞逝。每一个动作、动作和思想都不可避免地跟随前一个动作，就像演奏爵士乐一样。你的整个人都参与其中，并且最大限度地利用了你的技能。”Mihaly Csikszentmihalyi在与《连线》杂志接受采访时说。

"The ego falls away. Time flies. Every action,movement, and thought follows inevitably from the previous one, like playing jazz. Your whole being is involved, and you're using your skills to the utmost."Csikszentmihalyi said in an interview with Wired magazine.

1.1 沉浸理论概述

沉浸理论源于心流理论[1]。它是由美国著名心理学家Mihaly Csikszentmihalyi于1975年首次提出的一种主观且暂时性的情感体验[2]。沉浸体验其实就是一种将个人精神力完全投入到某项活动中的感觉，达到一种忘我的状态，而且伴随着心流产生的同时，会有高度的兴奋感和充实感。这种体验感能使人持续性地投入、参与到活动之中并在互动的过程中产生愉悦之感。Csikszentmihalyi指出沉浸理论的两个关键因素：只有当挑战与技能两者趋于平衡时，才能产生沉浸式的体验[1]。交互设计中，沉浸式体验所产生的这种积极心理感受与情绪体验，不仅能有效地提升操作效率，而且能丰富交互形态[1]。

1.2 沉浸体验的评价模型

Csikszentmihalyi进一步地研究了任务活动中挑战与技能间的关系，提出了沉浸模型[2]。虽然挑战与技能的关系进一步演化了沉浸模型，但是两者并不是其唯一的影响因素[1]。Csikszentmihalyi在其后续的研究中，提出了沉浸体验产生的九个特征因素，而Novak和Hoff man等人将这九大特征归结为条件、体验和结果等3类因素[3-4]。其中，条件因素是形成沉浸体验的视觉要素，也是设计阶段能够控制的变量之一；而体验和结果因素则是形成沉浸体验的思维认知和操作体验要素，也是衡量设计体验结果的重要变量之一。因此，以沉浸理论为基础，结合沉浸体验量表（FSS)[5]与用户体验要素，从信息感知的角度出发，以感知评价模型为标准，基于沉浸体验的转场设计评价模型为转场设计构建一个可行的方案。

2.沉浸式转场视觉元素

转场是由交互行为引起的界面变化，分析界面视觉元素在过程中的意义，定义其在转场中所在的类型，并将它们进行分类，因为视觉元素所属的类别会影响它们使用怎样的转场方式，同时也将决定用什么类型的曲线和时长。

进场元素指的是：转场中新出现的元素，一般是结果界面上的构成元素。出场元素指的是：转场中消失的元素，一般是上一界面中的构成元素。持续元素指的是：转场中持续存在的元素，可以是元素在布局上的变化，也可以是某种连续性的动画效果，整个过程无中断。静止元素指的是：转场中无任何变化的元素[6]。如图1所示。

图1 共享搜索框元素的动画转换

2.1 共享元素转场

共享元素一般是转场前后持续存在的界面元素，即上文提到的持续元素，是在转场发生后希望用户关注到的焦点元素，它增强了转场的连续感[6]。

焦点元素的运用为视觉搜索提供有效线索，可降低视觉加工负荷，从而更快地在新页面中寻找到目标元素。目标元素的运动时长由350ms可以缩减到200ms左右，能快速的到达目标信息点，同时又能引导视觉焦点、建立视觉线索、减少视觉突变、提升认知流畅。针对运营类APP，由目标元素引导用户视觉动线，可提升用户对运营广告的聚焦时间，可能提升用户在页面的留存时间，直接转化为商业价值。

2.2 非元素共享转场

与共享元素转场相比非元素共享转场则不完全需要元素共享来完成流畅的转场效果，而是通过共享容器、共享动势、淡入淡出的方式达到舒适的体验效果。如图2所示。

图2 实现多模态沉浸式空间交互体验

当一组元素在过渡时包含明确的边界，可使用容器来让转换过程有连续感。容器通过大小、高度、圆角等属性进行补间过渡转换，容器内的元素通过淡入淡出或共享元素的手法进行过渡[6]。

共享动势是在无中间属性或元素共享的情况下，无法通过补间变化来实现柔和过渡，需要提取出可用的共享转换属性，来实现前后的平滑过渡。常用的共享运动属性有位移、缩放、旋转等，即共享动势[6]。

淡入淡出是通过透明度变化来实现过渡转场，适用于无中间属性的组件或元素之间进行过渡变化。包括单项淡入淡出和交叉淡入淡出[6]。

3.沉浸式界面动画编排

3.1 平等互动

层级关系由系统架构和应用架构定义，它确定了转场动效的交互目的。不同的转场设计会传递不同的交互层级隐喻，不合理的动效编排会让用户误解，从而导致用户主观感受下降，沉浸体验感较差。在设计转场动效时，首先要理解应用之间和页面元素之间的架构关系，再运用合适的设计手法完成动效设计表达。

平等交互意味着所有对象的外观都遵循一个特定的规则。转场后的页面或元素与当前的在同一层级上[6]。应用场景包括编辑操作、页签切换、横竖屏转场等。

3.2 从属互动

从属交互意味着我们有一个中心对象吸引所有用户的注意力，所有其他元素都从属于它。这种类型的动画给人一种秩序感，更能吸引主要内容。上下层级转场后的页面或元素与当前的存在上下层级关系。应用场景包括上下级页面切换、解锁操作、搜索转场等[6]。比如应用内的父子转场，两个界面通过左右切换明确了层级关系；又比如应用退出到桌面图标，清晰地展示了应用所在的位置。

不难看出，界面转场动效的设计需要把握逻辑思维的连贯性，结合交互内容的层级关系，理清动效连接各界面的组合顺序和种类，帮助用户轻松地理解和掌握使用过程的环节和方法，达到沉浸式体验的效果。

4.沉浸式物理引擎手势

人与界面的交互是大脑与机械程序相互合作的过程，认知的陌生、操作的生硬都会给用户的使用进程带来阻塞和困难。构建物理引擎设计可以很好地将人与界面的交互通过弹性、加速度、重量、阻尼等一系列模拟自然感知的丰富物理引擎参数设置，打造人与自然的交互体验感。转场动画的设计也少不了物理引擎的设计和参与，使转场动画在操作体验上更自然更贴近人的认知习惯。

我们在转场的过程中通常会使用到捏合手势进行放大缩小操作、拖拽手势进行内容返回操作、翻页手势进行各模块翻页操作、点击手势进行图标或卡片类操作、滑动手势进行各模块列表类的操作。手部动势与界面动势分别为大脑与机械程序传递着各种各样的信息。它们互相学习，界面动势也在不断模拟大脑的认知习惯使机械程序的信息传递更有温度。

5.结语

沉浸式体验中的界面动画转场效果是从视觉流畅性、逻辑关联性和操作可控性这3个部分进行探讨和梳理。不仅仅体现在交互动画的流畅性，更是与人的视觉习惯、认知心理、自然规律、操作习惯相结合的综合探索。