交互视频中的动效设计研究

姚琼 李戈

摘要：交互视频打破了传统视频单一的交互方式，将视频剧情和用户互动相融合。本文提出交互视频中动效的设计方法，从而丰富并提升交互视频的用户体验。分析了动效设计的设计原则和技巧以及动效设计在交互视频中的运用与价值，并提出了交互视频现有的问题。动效设计的功能性、物理性、情感性这3个设计策略能提升交互视频的用户体验，赋予整个产品活力。动效设计能够让交互视频更自然、流畅，同时也能让交互视频与用户的交互到达“润物细无声”的境界。

关键词：交互视频 动效设计 用户体验 情感化设计 交互影视剧 交互影像游戏

中图分类号：J04 文献标识码：A文章编号：1003-0069（2023）13-0136-03

Abstract：Interactive video breaks the traditional single interaction method of video and integrates video plots with user interaction. This paper proposed the design method of motion design in interactive video so as to enrich and improve the user experience of interactive video.This paper analyzed the design principles and techniques of motion design and the application and value of motion design in interactive video. In addition，this paper also put forward the existing problems of interactive video. The functional，physical，affective design strategies of motion design can improve the user experience of interactive video and engender vitality to the whole product. Motion design can make interactive video more natural and smooth，and at the same time make the interaction between interactive video and user reach the realm of "smooth and silent".

Keywords：Interactive video Motion design User experience Emotional design Interactive TV series Interactive video game

引言

随着媒体融合和传播技術的发展，用户获取信息途径的变化以及审美的提升，在人机交互的流畅性和沉浸式上提出了更高的要求，信息传递已经从图形文字转向动画视频形式。然而以往的传统视频单一的输出模式已经无法满足用户的需求，用户不仅要观看视频，也希望成为参与者，能代入其中亲历故事。由此交互视频（Interactive Video，简称“IV”）应运而生。交互视频的结构打破了传统视频单向线性的设置，用户可以代入其中成为主角，参与剧中的环境，并决定剧情走向，促使用户可以开启“上帝视角”解锁多种结局，极大地增强了用户的参与感和沉浸感。在未来的发展过程中，交互视频将会为人们日常生活、工作及学习提供便利。

由于交互视频叙事以分叉式结构呈现出来，故事情节犹如树状分支，因此在交互视频中，通过设计符合视频剧情的动效设计，不仅能够为用户厘清故事的逻辑和脉络，提供便捷的浏览路径以提高用户的时间成本，使其拥有流畅的用户体验感，赋予整个产品活力。

一、动效设计的类型与作用

动效设计的英文是Motion Design，是运动图形设计（Motion Graphic Design）的简称，也称为动态设计。运动图形设计遵循平面设计和视听语言的双重标准，通过视频或动画来创作成动态影像的艺术形式[1]。通过给元素添加动画效果，如：位移、隐藏渐现、光圈、缩放等来引导用户，让交互反馈更强有生命力。随着互联网发展趋于成熟，动效设计在数字产品的应用已经变成标配，动效设计可以说无处不在，从早期在PC端中出现，逐渐发展到移动端以及如今的交互视频中，动效已经成为用户界面（user interface，UI）中最常见的设计元素[2]。在手持移动端，由于界面内容较为丰富，用户手势操作复杂，动效设计主要承担着帮助用户理解页面层级，产品架构逻辑的任务；而在PC端的游戏中，动效往往追求炫酷逼真的特效，能够让用户获得沉浸式的体验和真切及时的动作反馈。

动效设计作为连接用户和产品之间的桥梁，对于用户体验是十分重要的，它改变了传统静态界面中生硬的交互方式，拉近了用户与产品之间的距离。动效赋能产品的价值和静态界面的贡献是分不开的，两者是相辅相成的。而不同种类的动效样式也是相互作用，相互支持，一个产品中的动效由多种类型相叠加才能给用户带来更流畅的体验。

（一）交互层次的动效设计

优秀的动效设计能够明确界面元素之间的层级、空间关系，传递给用户界面的内容，引起用户的注意力，同时提供给用户操作后的视觉反馈，为下一步交互行为做准备，这是动效的功能性作用。将界面之间、界面内各个元素通过特定的动作相衔接过渡，帮助用户理解界面间的变化和层级关系，在界面切换的时候给用户一个心理预期，告诉用户元素的变化，从而第一时间能够吸引用户的视觉，引导用户的视觉流向，帮助用户更好地理解产品。这类动效能够指引用户进行下一步操作，自然而然地聚焦用户视线，降低其余要素的视觉干扰，并且在用户进行某些操作行为之后告知用户状态，通过变化视觉元素的形式来传达。交互层次的动效又可称为功能性动效，能够提升用户对界面的感知，使其更全面流畅地使用产品。

（二）视觉层次的动效设计

视觉设计可以通过元素的色调、形状，界面整体的构图、排版来还原物理世界的真实感。在我们日常生活中，物体的运动都是遵循相应的物理定律，而人对于界面元素的理解，都是基于对客观世界的固有认知，因此无论是界面元素的运动速率还是元素的材质属性，都应当从特定的现实条件出发，界面的动效设计应当具有紧密逻辑的关联性，是符合真实、自然的动效，才能营造氛围，带来沉浸式体验。视觉层次的动效会考虑元素运动的速率、元素的形变和色变都能符合常理，使得用户无意识对应物理规律。比如悬疑题材中模拟血迹的元素设计以及科幻题材中高科技玻璃质感的元素设计。这类动效又可称为物理性动效，能够让用户自然而然地理解元素所代表的含义，减少用户认知成本，增强代入感和操作感，即使是第一次使用产品，也能让用户轻松的体验产品，沉浸其中。

（三）情感层次的动效设计

情感化的动效设计一般是在满足基本的交互功能和视觉效果的动效设计的前提下，加入一些有趣的动画，增进用户与产品之间互动的友好、愉悦程度，满足用户的情感体验。在满足动效的可用性下，这类具有情感化的动效能够给用户带来惊喜。在以用户为中心的设计被提出来以后，情感化设计也开始被强调，产品团队逐渐重视用户和产品之间的情感共鸣，消除现有状况和用户期望之间存在的差距，以提供更好的体验[3]。随着互联网的快速发展，数字产品中有较多应用趣味性的动效，无论是移动端还是网页端都非常注重产品的情感化设计。情感理论学者Carroll Izard提出“情感是注意力和感知力的驱动”。人们对事物的认知赋予的情感符号越接近的条件下，可以激发人类的某种情感，也可以获得更好的情感体验[4]。现在较为常见的情感化动效设计，主要是突出视觉重点和核心理念，利用动效讲故事，是界面的静态元素延伸，利用动态设计让界面散发情感，同时突显个性化。

二、交互视频的现状及问题

与传统视频相比，交互视频的制作需要考虑更多方面，如剧情内容是否适合互动、互动的时间、互动的方式、技术是否可以实现等。技术限制问题是学术界公认存在的较大阻碍，由于交互视频极大程度依附于平台技术，不同平台支持的互动技术也不同，因此限制了交互视频的平台使用。除技术上所存在的问题之外，交互视频目前还在内容、交互方面存在较多问题。

（一）内容缺乏逻辑性，流畅度欠佳。

交互视频的剧情内容表达上具有较高要求，而现在较多的交互视频忽视了内容的逻辑性，视频内容的主线和支线缺乏关联性，一些多线性结局的存在毫无意义，影响了剧情之间的流畅度。即使在视频中进行了分支的选择，后续故事情节也不会受影响，可以说不存在关联性。对于用户来说，视频内容节点交互频率的高低会直接影响用户的体验，一些强迫用户进行交互的行为，会让剧情和互动存在严重割裂。如B站许多以个人形式创作的交互视频，常见的互动功能主要表现为点击会话，即观众在预设的剧情节点选择不同选项，触发相应剧情。这种方式虽然给予用户一定的自主选择权，但其植入过程十分生硬，破坏了整体剧集的流畅感，违背了互动初衷[5]。

（二）交互效果单一，用户体验不佳。

目前的交互视频交互形式机械，用户和视频之间的互动效果单一，对于用户操作后的反馈缺乏设计，影响了用户对于产品的操纵感，交互效果应该丰富、新颖才能更好地推动交互视频剧情的发展。许多的操作节点只是为了“点击”而出现，却缺少了给用户的反馈结果，忽略了用户体验的意义。不仅如此，目前互动电影的角色扮演非常单一。比如电影《黑镜：潘达斯奈基》中，观众只能扮演男主角史蒂芬。这就造成了观众重复观影的动力不足，互动的维度呈现出扁平化的样态[6]。

（三）交互动效同质化严重，缺乏个性化，趣味性欠佳。

交互视频有多种类型，比如交互影视剧、交互短视频、交互影像游戏等，不同的类型业务侧重点也是不同的，一个交互视频的动效必然是贴合产品本身的属性。但是现在无论是哪种类型的交互视频，其动效设计都非常接近，并没有根据本身业务特定的动效需求去执行，以至于产品的动效设计毫无新颖，给用户带来的沉浸感微乎其微，甚至严重造成了用户的使用流畅。可以说目前的交互视频更多的只是完成了基本的功能性和视觉性，但是缺乏趣味性，未能和用户产生情感共鸣。近年来“游戏影视化”与“叙事游戏化”成为学术界的焦点议题，随着“影游互动”的理论发展和实践探索[7]，涌现出了《夜班》《底特律：变人》《隐形守护者》等互动叙事游戏，这些交互视频的个性化、情感化表现方式，能够给交互视频提供活力和生命力。但是优秀的交互视频较少，在动效运用这一方面还是缺乏具有鲜明特色的产品。

三、动效设计在交互视频中的设计策略

在交互视频中，为了让叙事更多样，用户更能参与，通过运用动效设计让产品呈现更多样和丰富的用户体验。为了让动效设计更好地发挥作用，可以从三个层面进行探索：功能层面的设计、物理层面的设计、情感层面的设计。

（一）功能层面的设计主要从产品的功能和交互出发，通过设计符合用户预期和给用户带来良好交互体验的动效来提升产品的可用性。功能性的動效解决了产品界面功能上的问题，能够让用户更容易理解产品，也能帮助设计师更好地表达产品语义。

1.注重逻辑合理，传达合理有效的信息

动效最基本的作用是过渡状态，主要通过特定的动作来表明界面中元素之间的某些关系，如包含关系、前后关系和位置关系，这些都属于界面逻辑关系的连接。当界面发生响应时，动效的存在能够解释界面之间元素的关系，帮助用户理解状态的改变，从而提升产品的易用性。比如，在交互式电影游戏中给用户展现剧情发展组织树时，可以通过动态过程解释剧情之间递进关系：一个新剧情解锁之后，可以设计动效将上一个剧情和本次解锁的剧情相连接。虽然没有这个动态过程，两者之间的关系也可以被看到，但是通过这种动态过程是对“剧情解锁”的最佳隐喻，因此这个动效设计是必不可缺的。

2.及时给予反馈，增强用户的操纵感

用户在使用产品的时候是十分期望获得交互响应的，这能够让用户觉得一切都尽在掌握，因此可以通过设计引导类的动效给用户帮助或功能操作使用的提示等让用户明白和理解当前的状态和预期操作。比如，在《底特律：变人》中常常会出现扫描的图标动效来引导用户进行线索寻找，通过扫描动画来引出结果信息的显示。另外，也可以设计反馈类动效告知用户状态，通过变化的元素来告知用户操作后的反馈，最常见的有鼠标经过、点击某一元素的色变、形变。界面的静态元素是无法承担交互操作的，只有通过用户操作的界面的时间点上产生变化，才能准确地给用户传达操作结果。在用户没有反馈的界面会被认为无法响应，用户便会认为该应用出现了问题，从而影响体验。因此，在一些相对安静的界面中，可以加入一些动态循环动画，避免用户认为画面处于无响应状态。比如在交互式电影游戏中的主界面设计，可以加入动态画面，一旦用户长时间没有进行操作，也依然能感受到游戏还在运行。用户在进行游戏操作时的每一步都是有目的的，它的每一步都会导致一个结果，为了让用户了解自己操作的每一步所产生的结果，界面要随时与用户保持互动并反馈[8]，及时有效的交互反馈是形成优秀用户体验的重要元素之一[9]。

（二）物理层面的动效，主要是遵从人体感官的设计，在这个层面的设计主要是为了符合用户的认知，同时也要符合产品的整体风格。动效是整个产品的用户体验的一部分，设计出发点是为了好用和易于理解，最终效果应当有助于提升界面的沉浸感。

1.遵循物理规律，提升产品沉浸体验

这类动效相对于基本的功能性动效，最为主要的是以静态视觉效果为基础的延伸，动态元素的动作和节奏要吻合产品的视觉风格，此外从视觉、听觉、触觉出发，遵循现实世界的物理规律进行设计。当用户进入到交互视频的剧情中，用户会很自觉地将自己代入到视频的剧情情境之中，这是来自用户对现实认知的一种映射。这种情境由视频剧情的世界观和价值观、视频界面元素等综合要素营造的。在交互视频中，创造一个虚拟的情境，需要通过动效设计来构建一种逻辑，界面中的所有元素，在用户操作的过程中发生的所有动态行为，就是在创造一个环境。元素的出现顺序、时间间隔、持续时间等都会影响动效的最终效果。比如卡通类型的交互视频，用户多以儿童为主，可以用到弹动的动效，弹动的动作更能表现生动活泼；在科技风格的交互视频，较多闪动、切变的动效，这些动态设计也是人们对高科技类事物特有的印象；在现代的交互视频中，多出现轻快、时尚的动效，因为这类动效所传递的是简约、快节奏的特点。除此之外，在交互游戏影像中的天气场景下的动效，可以结合雨天、晴天等天气状态模拟设计，在动效设计中加入拟物化的设计，也是还原现实世界中的情景。人类的美学是基于我们生活的真实世界，如果以力学、动力学、光学原理为设计依据，那么设计一个优秀的产品会变得简单。

（三）情感层面的设计，是在满足功能性和物理性的基础上来提升用户的情感需求，无论是理性情感还是感性情感，都是能够增加产品愉悦，唤起和用户的情感共鸣，从而提升亲切感，增加用户留存。此外，还可以通过个性化设计，加强人性关怀，让用户感到自己的独特之处，从而提升用户体验。

1.满足目标用户的情感需求，唤起情感共鸣

动效设计的更深层次是能够强化用户的共情心理。因为人类不仅有理性思维，还有感性思维，通过对界面动态元素强烈的表达，让用户获得情感体验，和用户建立联系。通过动态元素的形式，将用户的一些熟悉的经历在产品中进行还原或者进行叙述表达，来唤醒用户脑海中的记忆，从而使产品中的动效和用户的生活相融合。可以在交互视频的首页、空白页、进度条、加载页、弹窗出现、按钮状态等界面中加入情感化设计，让用户在使用产品时产生情绪。比如，在交互视频中一个结局完结时的弹窗提示，可以说需要丰富的动效去增强表现，可以设计一个动态的故事主角的小人物做一些动作的动效来告诉用户此时结局完结的提示，给用户具有趣味性的反馈，这样的设计利用剧情人物的形象来告诉用户反馈内容，将用户和产品联系起来。另外，还可以通过场景的还原设计，来烘托氛围，产生情感融合，比如在一些特定节日时，在页面中加入与节日相关的设计元素，通过动态的表达来引起用户的共鸣。对交互视频界面适当的趣味设计与视觉刺激会给产品界面以及产品本身增色不少，但情感化设计不要过于强硬，不应使情感化信息侵占过多界面区域，扰乱用户正常使用产品的信息接受[10]。动效设计有自己的规律，不应对所有元素都进行个性鲜明的设计，用点缀的方式即可，起到画龙点睛的作用。

2.强化个性设计，关怀用户体验

基于用户个性化需求的差异性和发展变化的特征，设计师需要在满足人们共性需求和当前需求的同时，为其个性化需求的满足提供解决方法，给用户在使用过程中预留一定的设计空间，让用户在空间中思考，允许其根据不同的使用情境重组设计。这不仅可以让用户在实际使用过程中慢慢认识和明确自身需求，还能有助于激发用户意识到自身的潜意识需要[11]。随着互联网的发展和数据挖掘能力的提升，我们对用户的理解变得愈加深刻，设计视角逐渐从群体转向关注个体，将动效设计和个性化形式结合起来，在设计时对角色内容、用户标识、用户个人偏好进行更加有针对性的设计，为用户定制体验，个性化元素能够和用户建立交流，从而吸引用户。比如可以在动效设计中加入用户的基本信息：用户名、头像、个性签名等，将这一系列的设计元素和产品动效相结合，让用户感到自己是独特的，从而具有更加关怀、愉悦的体验。动效设计也是需要具有包容性和友好性，用户对产品的情感体验是提升产品竞争力的关键[12]，这也增加了产品的附加值。

结语

动效设计作为交互视频提升用户体验的主要方式之一，能帮助交互视频营造更深入的情境，提升用户的沉浸感。如今，二维的动效设计在数字产品中已经较为常见，而加入三维的立体元素，能让平淡的页面更加生动，让用户在虚擬世界感受现实世界的真实。随着技术的发展，动态AR在视频运用上越来越广泛，人脸识别跟随动效这类真实场景也集成到设计中。交互视频与VR的结合，动效在VR虚拟世界以虚拟三维的形式呈现，使得用户处于三维感知的环境中，以更加自然的三维交互方式进行。传统的交互由于设备屏幕的限制，用户只能感知屏幕之中的世界，未来交互视频与VR的结合，能让用户在沉浸感上得到了前所未有的体验。

基金项目：2019年度浙江省文物保护科技项目《基于泛交互的西湖文化数字体验产品开发与设计》。

参考文献

[1]杨旺功.论动效设计在用户界面设计中的应用与维度分析[J].艺术与设计（理论），2016，2（05）：47-49.

[2]徐千尧，徐迎庆.智能手机动效设计研究[J].计算机辅助设计与图形学学报，2020，32（07）：1095-1100.

[3]韩然，杨华，路放.用户体验设计在移动互联时代下的应用研究[J].设计，2015（08）：116-118.

[4]曹仿桔，吴琼.文化遗产数字化中的信息与交互设计I—以中I国传统I村落数I字博物I馆为例[J].设计，2021，34（22）：107-109.

[5]倪泰乐，陈应双，吴金龙.从观众到玩家：论互动视频的演化路径[J].传媒，2021（07）：56-58.

[6]李晗，孙婷.“竞赛”与“再现”——媒介进化论视角下的互动电影研究[J].北京电影学院学报，2020（03）：32-38.

[7]赵瑜.叙事与沉浸：Bilibili“互动短视频”的交互类型与用户体验[J].西南民族大学学报（人文社会科学版），2021，42（02）：129-134.

[8]杜桂丹.手机游戏中人机界面交互设计的优化方向研究[J].包装工程，2018，39（04）：245-250.

[9]高玉娇，覃京燕，王晓慧.手机游戏行业官方网站设计方法探讨[J].包装工程，2015，36（24）：48-51+56.

[10]陈越红，王烁尧.UI设计中的视觉心理认知与情感化设计分析[J].艺术设计研究，2021（02）：74-79.

[11]鲁美杰，谢军.基于用户个性化需求的设计方法研究[J].艺术与设计（理论），2013，2（04）：29-30.

[12]高小汶，胡伟峰.基于情感体验的移动应用动效设计研究[J].设计，2022，35（04）：100-102.