这个大厂转投Rive背后有哪些思考？

本文翻译自：https://blog.duolingo.com/world-character-visemes/。文末附有转译的视频精彩！！

译者按：

我一直认为Duolingo可以说是体验设计的顶流😂，界面生动有趣、具有游戏性。这个完全由她的产品定位决定的。 最近Duolingo 的设计师分享了如何运用唇形同步动画技术赋予角色生命力，通过 Rive 状态机和自研语音技术，实现高效规模化的拟人动态效果。项目将用户沉浸感和情感共鸣提升至新高度，让角色成为学习伙伴。Rive 的灵活性解决了多平台兼容与文件大小优化问题，同时保持高动画质量，为个性化教学体验、品牌强化与复杂问题规模化处理树立标杆。这是一场设计、技术与用户体验的跨界融合，彰显情感化互动设计的巨大潜能。

让 Duolingo 角色栩栩如生：唇形同步动画

在为每个角色打造专属配音后（链接），我们开始思考如何让他们更具活力——不仅仅是停留在待机动画。我们希望我们的角色能够成为学习者生动活泼、引人入胜的学习伙伴！

首先：这需要大量的口型动画！

我们教授 40 多种语言，涵盖 100 多门课程，每门课程包含数千个句子和练习。手动为我们十个世界角色制作唇形动画是完全不可能的。我们需要一个可扩展的方案，能够应对每个角色所有可能的口型组合，使其与语音完美同步，同时保持文件大小足够小，以便在 Android、iOS 和 Web 平台流畅运行。此外，我们还希望确保动画质量在此过程中丝毫不受影响！

我们认为答案可能在于游戏引擎的替代方案——能够帮助我们将有限的素材转化为几乎无限的组合。于是我们发现了 Rive！

什么是 Rive？

Rive 是一款基于 Web 的工具，用于制作实时交互式动画和设计，类似于游戏引擎。它似乎解决了我们的许多问题：文件大小紧凑，可以巧妙地与 Duolingo 的应用程序架构集成，动画师与工程师之间的交接也十分顺畅。

但最吸引我们的是 Rive 的状态机：一种将动画（“状态”）连接在一起的逻辑可视化表示。这意味着我们可以通过编程控制调用哪些动画状态、如何调用它们以及它们如何转换和混合。状态机强大的系统使这个项目得以大规模实施。我们知道 Rive 是实现唇形同步的完美工具！

Rive 内部一览！

语音技术的魔力

为了制作口型动画，我们需要深入了解语音的细节。我们用于文本转语音的解决方案并不能提供正在发音的内容及其时间——但我们拥有一个丰富的语音技术生态系统，专为语言学习而打造。为了创建精准的动画，我们先生成语音，然后通过我们内部的语音识别和发音模型运行它，并获取每个单词和 音素（语音的最小单位）的时间。每个音素都被映射到我们根据语言特征设计的一组视觉表示或 视位 上。

利用这些功能，我们构建了一个“工厂”来生成课程内容所需的所有视位时间。当然，我们还需要确保其准确性，并将信息传递到正确的位置。我们构建了工具和流程，不仅可以生成素材，还可以在需要时对其进行审核和修正。

设计世界的口型

在开始动画制作之前，我们必须确保准确地表示与特定声音对应的口型。

角色视位图示例

我们必须以忠实于 Duolingo 美学的方式设计每个口型。更重要的是，每个角色都需要自己的一套形状来对应每个视位，以体现他们独特的个性。设计过程中最关键的部分是确保视位设计在动画化时看起来自然流畅。

有些角色的探索过程比其他角色更复杂，但我们最终为每个角色设计了 20 多个口型！

设计指南确定后，我们就可以开始制作动画了。我们为每个角色在课程中的一般姿势创建了一个动画状态，同时也为角色的嘴巴创建了单独的状态。设置好所有动画状态后，剩下的唯一步骤就是将这些动画插入 Rive 的状态机，并将它们与我们之前标注的口型输入结合起来。

角色动画状态机工作原理图

视位状态机中口型混合方式图。这里只展示了 4 个口型，但即使有 20 多个形状，逻辑也是相同的。这些状态必须与角色动画的状态同时运行！

状态机设置完成后，将其从 Rive 导出到单个运行时文件，然后交给工程师，以便他们将动画集成到应用程序中！

组合在一起

当需要显示挑战时，我们会检索音频和时间信息，然后使用时间信息来触发与音频同步的动画状态机。这将数据传输保持在最低限度——远小于发送一段短视频——并让我们实时响应用户的操作。当你点击一个单词时，角色会说出并动画化该单词；如果你在它说完之前完成了练习，角色会及时停止说话。我们还可以显示空闲动作，例如点头、眨眼和眉毛移动。最后，根据挑战的结果——无论你做对还是做错——我们都可以进入最终状态，显示角色对你的回答的反应！

动画和技术在 Duolingo 的未来

Duolingo 致力于 测试一切，这些口型也不例外。这个项目是一个有趣的实验，旨在使学习体验更具吸引力，并有机会将新软件和技术应用于生产流程。能够看到哪些技术可以帮助我们克服技术挑战，以便我们能够继续为应用程序制作或完善其他令人愉悦的功能，这真是令人鼓舞！

更多 AI 辅助设计和设计灵感趋势，请关注公众号（设计小站）：sjxz00。