实战案例！优酷首部「互动剧」背后的核心体验设计复盘

2020年初，优酷首部互动剧《当你醒来时》正式发布，并且会在未来6个月内陆续上线多款自制互动内容。

围绕优酷视频平台优势，整合内容生态与前沿互动技术，互动团队为用户打造「差异化」互动体验的C端设计，为内容服务商提供降本提效的生产力工具，协同构建设计中台化策略推进互动类作品面市。针对设计策略的思考与设计方法的实践有以下总结。

互动剧的前世：

首部互动电影《一个男人与他的房子》(Kinoautomat )于1967年在加拿大蒙特利尔世博会捷克馆放映。由于互动电影在实践性上的诸多困难，这种互动式电影的概念与形式被游戏借鉴并应用，逐渐演变为我们如今所熟知的游戏CG开场动画。

竞争的互动剧生态：

前有法国Quantic Dream公司出品的互动电影游戏《底特律：变人》，开售202天销量突破200万套；后有Netflix在2018年凭借互动剧《黑镜：潘达斯奈基》转化大量会员。自2019年年初，腾讯视频，爱奇艺，芒果TV先后开始尝试以H5衍生互动剧，影视互动游戏以及独立互动剧等各种搭售的盈利模式。

外部环境的时机成熟：

随着智能设备硬件素质的越发成熟，屏幕边界的折叠拓展，以及带宽将会彻底释放的5G技术，互动内容形式将迎来「井喷式」的生长。

定义「互动」

互动- 以交互性方式为观众打造具有更加复杂的多重身份体验

「互动」剧的内核是什么？互动是互相作用，互相影响，并产生一定的心理反应机制，而交互性是达成互动的手段与形式。

互动影视内容与传统影视内容最大的基因不同在于对观众身份特征的转化，由原来单一的被动接受者，变为主动介入电影叙事的创作者，对角色和剧中人物产生共情，在剧中完成身份的认同转换，或缓解对自我的不满，不同角色与情节为观众提供不一样的感官体验。

设计目标与方法

1. 设计目标

立体维度构建互动「三观」，高效易用的生产流程、差异化的多样互动体验、构建清晰的体验心智

制造观：构建低门槛的生产流程，高效的剧情搭建能力，易用的组件配置能力，帮助内容服务商打造互动剧集内容；

消费观：从0到1搭建互动体验链路并建立互动体验标准，形成差异化互动玩法；

心智观：内容分发场的心智构建，提升漏斗核心转化

2. 设计策略

解码剧情内容与互动玩法的对应策略

辅助影视内容剧情叙事的手法有镜头语言、拍摄手法及景别，每一项手段都是辅助及烘托故事矛盾性与角色情绪。互动玩法的设计同样依据剧情需要，归纳整理为三类互动形式，本质均为导向不同的剧情选择，但用户体感会有不同感受。

剧情互动：决策接下来的剧情，用户感知为塑造人物与引导故事发展；快捷操作（QTE）互动：帮助角色完成任务，用户感知为「玩家」视角操作剧中人物；体感互动：「亲身」参与完成剧情，用户感知与剧中人物完成体验合并；

解码交互性对影视内容叙事结构的影响

交互性对影视内容叙事结构的影响呈现三方面特征：叙事发展多线程、叙事视角多角色、影片结局多样化；团队在初期，经过对多部内容与剧情游戏的叙述结构进行分类总结，提炼出两大类形：环形网状结构与延伸树形结构。

再依据结构模型进行梳理通用性的视觉绘制规则，根据B端视频节点的对应策略+视觉绘制规则，最终向用户呈现可被理解的剧情地图，让用户明白此刻的选择会将故事走向引向哪条分支，回溯剧情，应该选取哪些节点去探索更多剧情。

B端生产C端体验的协同策略

B端为内容服务商提供降本提效的生产力工具，C端打造互动体验的全链路设计，协同构建设计中台化策略；C端提供结构化的设计方案，从互动玩法到互动页面，提炼为通用性互动组件与通用性框架页面，B端结构化功能，场景提供配置能力，换肤能力，包括服务性支撑，形成设计闭环。

3. 设计方法

搭建基础互动体验

根据体验地图的梳理，用户在进行互动内容消费时，会在内容与互动玩法间频繁交替，直至获得第一个结局，结局会有强引导让用户继续探索去发现更多结局与内容。其实促进用户多次复看才是互动业务的核心诉求，从收集感、成就感、好奇心等用户心理需求，剧情地图与成就体系布控多级触点，多点抓手引导用户进行复看消费，解锁剧情，这是互动链路打通的第一阶段。

第二阶段：易用的互动玩法，易理解的交互方式，操作性好且反馈清晰；适用的互动组件风格，能最大程度的兼容各内容类型及剧情，保证在内容人无视觉包装资源时，底层通用性方案可保证体验。

视觉框架

首先结合平台框架将视觉分为五个层级，在互动层，二级页层注重氛围渲染，加强引导标识；而体感层注重视觉反馈，轻量化视觉语言引导；

「触点」标准化设计 - 互动玩法

互动玩法的基础视觉标准，遵照优酷平台的设计规范，在布局与控件规格进行规范化设计。以玩法互动状态（引导 - 互动过程 - 反馈），布局，入场与出场动效，视觉元素四个维度进行标准化设计。同时将视觉分层，交互结构化，便于中台搭建；

「触点」链路引导

触点引导用户参与互动，链路引导用户重复互动与消费内容。通过对互动页面「剧情地图」、「结局组件」、「人物线索成就"页面的剧情抓手进行视觉包装，未解锁剧情、人物、线索及成就，对应不同的容器规格及状态提示，游戏化的视觉语言，对用户触点进行视觉引导。

4. 中台化

结合场景、功能，及风格化诉求建立互动玩法组件库，平衡定制化与通用性；建立剧情地图，人物，成就，线索页面的框架生成能力，皮肤配置能力。两大类型组件化，以提高业务效能为目标。

结构化定制能力

举例1：互动玩法剧情选择 - 通过结构化功能与场景，将多场景与多细分功能合为一个互动组件。

举例2: 互动玩法QTE及体感 - 解藕交互，在不改变操作与反馈状态的情况下进行视觉定制。

结构化生成能力

举例：剧情地图 — 为了提高效率赋能更多内容人制作的剧集作品，解码影视内容叙事结构，形成能适应所有剧本结构的通用型方案，但相较于定制开发的剧情地图，可以全览剧情结构，互动设计团队已经在筹备二期方案，可以通过视觉规则转化为代码展示逻辑，形成可全览的通用型方案，已申请专利保护。

规则：

• 分支线路只显示「第一节点」；
• 主线路不显示「未解锁」线路；
• 点击分支线路「第一节点」播放后，切换为主线路，原先主线路收缩为分支线路「第一节点」。

案例一：《当我醒来时》

2020年1月19日20：00优酷平台上线，互动设计团队结合剧情类型在「剧情选择」、「人物选择」、「剧情地图」打造差异化的互动设计。在「剧情地图」与"人物选择"的定制化设计方案，会沉淀视觉框架到中台形成通用性设计方案，复用到之后类似项目中。

案例二：《娜娜的一天》

预计在2月29日优酷平台上线，互动设计团队围绕体感技术能力，打造「语音互动」、「擦屏互动」、「实时好感反馈」及「失败结局」的互动设计，在同期市场是最先使用体感互动体验的

5. 链路化：生产链路的打造

互动玩法配置属性

上面我们介绍了剧情互动、快捷操作（QTE）互动、体感互动三个类型玩法，我们是如何在创作平台配置这些互动玩法组件的呢？

我们用剧情选择互动举一个简单的实例：

设想你在观看一段视频，主人公问我该吃苹果还是草莓？这时屏幕上出现了两个按钮，你选择了草莓，视频中主人公拿起草莓吃掉，若你选择苹果视频就是吃掉苹果。对应到设计实现，用户选择的背后是怎样的逻辑是怎样的呢？

它分为三个部分：

问题视频 + 选择 + 结果视频。针对选择我们面临三个问题。

• 选择的背景视频是什么？
• 选择的时间如何控制？
• 选择后视频如何衔接？

我们从基础层把问题简化，通过选择衔接最少需要两条视频，那么我们将「选择」附加在了前一条视频的末尾，赋予给「选择」一种时间属性，我们可以自主设定「选择」的时间。

为了无缝链接后面的视频，保证用户的观影体验的流畅性，我们设定一种可能，无论用户在第几秒作出选择，视频会继续播放，无缝衔接后面的视频，对于片方我们也需要提出一个视频剪辑规范，就是每一个选择视频的先后，内容都必须是连贯无卡顿的。

这样我们也很好的将玩法进行拓展，解决组件通用性问题。通过时间属性来解决剧情的表达需要。

就这样通过解决一个玩法串联一个用户操作，将它放在整部剧中，我们就会得到一整个网状或树状结构的剧情。

除了组件显示时间，我们找到所有组件的通用性原则，我们对所有玩法进行了信息分层，来达到灵活性配置的目的。

我们大致分为三个方面：

• 时间属性：组件在视频里出现的时间点以及显示多久等；
• 分支设置：组件通过操作会链接几个分支视频，目前平台支持链接四个分支。如果用户不选择剧情如何走向等；
• 视觉呈现：组件在用户面前的视觉表现是怎样的风格；

这样通过三个部分配置，满足了所有组件的需求及拓展性，未来我们还会针对视觉呈现，开放组件的皮肤管理功能，通过拓展组件皮肤来满足不同类型的剧情表现。

如何通过我们的平台进行互动剧搭建呢？

合作方到底是如何对内容进行互动创作？说到合作方，他们是我们创作互动剧的用户群体，我们先来看一个简单的入驻流程：

稳定的生产结构

合作方拥有的是拍摄好的视频素材，他们需要上传到生产平台中，然后进行玩法配置操作。我们目标很清晰就是要降低合作方的配置成本提高效能。所以我们要提供的是一个稳定操作链路及易配置互动玩法.我们根据清晰、易懂、易操作三个基本原则对B端生产平台进行刨析；

将信息架构分为下面几个构成：

架构的调整提高了用户的操做的效率，通过规范化指导手册用户可以顺利的完成所有的配置操作，但是在这个过程中还是会有一些用户不清楚功能的表达，针对我们用户的痛点我们分析了在生产时干扰效能的几个因素。其中对于文案话术理解成本偏高，所以针对这部分进行了进行了整理和规范。大大节约了用户的沟通成本。

规范化指导手册：互动指导手册

指导手册是向内容人介绍C端设计规范、B端配置方法的文档。帮助内容人快速上手生产互动组件明晰产研素材样式及数量，预估后期成本（配置成本/设计成本）；以及在线下峰会，成为宣传平台互动能力的引流物料。

5. 矩阵化：互动场的打造（频道/运营）

在一个新的品类下，需要思考「人+货+场」的分发场景，能够更好的触达用户。

用户：在新的内容模式下用户结构也在变化，95后的年轻用户的消费欲望和互动欲望更强。所以要更加细分用户，从年龄、性别、消费能力及文化水平上对用户进行分层。通过对真实用户场景的挖掘来满足不同的用户需求。

频道心智：我们将结构分为三部分：内容承接、历史、内容分发。

• 头部焦点区域，核心是承接入口进入到频道的内容，让用户在短时间内完成内容心智的匹配
• 历史区域针对回访用户快速消费
• 内容分发区域采用Feeds流没通过内容让用户沉浸浏览，快速转化；

精品化包装：如何通过更优质的内容质量，让那个产品心智能够准确的转达给用户？

我们将内容分为三个层级

内容图像化表现、内容看点及内容类型标签外化

生产链路的把控

为了提高上线后内容的展现品质，设计师必须深入到生产链路中，从整个内容生产环节预设可能发生的场景及所需要的内容。我们将内容拆分的三个层级对应到智能生产中，让海量的内容通过统一的模板输出有保证的素材；另外对于高定制及头部的内容，更加专业准确的定制内容呈现规范。

结语

优酷平台的互动剧才刚刚起步，设计团队在生产侧与产品侧不断进行尝试与探索，围绕影视内容打磨互动玩法与体验链路，我们会持续关注内容形态的变化与技术发展的趋势，探索更多的商业可能性。

欢迎关注「AlibabaDesign」的微信公众号：