在开发产品时，设计团队并不轻松。尤其是在动效设计方面，它在设计流程中常常被当作事后才考虑的事情。
但是，用户痛点和利益相关方的担忧不会自行解决。这就是为什么在截止日期临近的情况下，你需要借助动效设计来打造良好的用户体验。
没有人比华纳兄弟探索公司的动效设计师 Mia Vidamour 更了解这一点。她是一个国际团队的一员，负责他们两个品牌产品。
在我们最近的网络研讨会上，Mia 告诉我们，她的工作位于产品设计与动效设计的交汇处，而正是在这个领域，她发现 ProtoPie 最有价值。继续阅读，了解她的团队如何使用我们的工具为他们最近的一个应用项目创建原型——最终成品与成功上线的产品几乎一模一样。
动效设计是设计流程中重要但常被忽视的工具
人们会自然地将社会意义赋予动态形状和动作。这表明，即使你无意让动效设计表达某种含义，最终用户仍然会据此解读意义。
基于这一点，华纳兄弟探索团队将动效设计作为以下方面的工具：
引导注意力到网站或应用中的对象和页面元素上。
帮助用户定位方向，无论是在网站还是应用中，或通过建立特定对象与页面元素之间的空间关系来实现。
解决复杂设计问题，因为动效可以创造强调并赋予含义。
品牌表达，因为品牌在他们的领域非常重要。因此，团队认为在开发新功能时，创建富有表现力、灵动且充满活力的动效设计来传达品牌非常关键。
然而，正如前面提到的，动效设计在设计流程中往往会被降低优先级。
那么，如何推广并倡导动效设计以证明其价值呢？
在华纳兄弟探索公司，他们的解决方案是尽早开始。如果能在设计流程早期就将动效设计确定为解决方案，这会比等到项目末期（时间线和发布日期都很紧张时）容易得多。
用动效设计打造优秀的 UX 产品
在他们最近的一个项目中，团队重新设计了 Cartoonito 应用——一个面向 2-5 岁儿童的节目板块。
该项目完全由动效驱动，并且高度依赖高保真原型来传达团队的交互式和创新性方法。
他们的挑战是为 2-5 岁儿童探索应用中的新内容发现方式。结合目标用户特征，他们将导航栏识别为一个特别的问题区域，原因在于：
并非所有 2-5 岁儿童都能阅读。
图标相当小。
整体导航界面需要更多视觉元素和交互功能，以鼓励用户在应用中探索和发现内容。
总体而言，该应用需要变得更以用户为中心，并在设计上更一致，从而让最终用户能够轻松、直观地找到优质内容。
在用户研究之后，团队决定他们需要：
通过限制触摸交互并在屏幕边缘设置大型导航箭头来简化 UI。
增加更多视觉元素，因为儿童比起文字更依赖感官反馈。
开发更多交互，因为儿童期望能够通过声音和动画与屏幕角色互动。
团队提出了两种方案，最终决定采用“旋转世界”概念：当你点击右箭头时，界面会旋转到新板块。结果是，界面对用户来说更清晰，也为后续添加更多插画与交互留出了更多空间。
然而，虽然从用户视角看新的导航系统更简单，但在产品设计和创新阶段，它有很多动态部分需要考虑。
例如，新导航系统有一个选中状态（纯色块），以及渐变过渡状态，使用户导航时能够实现平滑过渡。
它还包含多个图层，如导航覆盖层、静态分页元素、插画和标题、旋转动态元素、背景以及一个静态纯色元素。
这意味着团队需要一个更直观的成果交给项目中的利益相关方，让他们亲自感受其运作方式。
基本上，他们需要的是高保真原型，而这正是他们通过 ProtoPie 做到的。
观看以下视频，进一步了解华纳兄弟探索团队如何使用 ProtoPie。
华纳兄弟设计工作室如何在工作流程中使用 ProtoPie
借助 ProtoPie，Mia 的团队仅通过以下方式就能轻松创建复杂原型：
使用集成插件从 Figma 导入所有内容。
经过一些试错后，从零开始构建导航系统。
添加自定义的人物身体动画并放入原型中，以强化应用的交互元素。正如你在下图中看到的，每当点击右箭头时，世界会旋转。这让用户能够过渡到令人兴奋且沉浸式的板块。
尽管如此，在第一版迭代中仍有一些顾虑，因为需要点按两次才能进入实际内容。不过，由于这是一个用于直播电子游戏的应用，用户需要第一时间看到核心内容。
因此，团队回到了研发阶段。他们最终决定：
在顶部添加一个交互式菜单。
调整部分迭代方案。
重新摆放一些菜单元素。
将卡片放在屏幕底部，以鼓励用户点击它们，在应用中探索和发现更多内容。
这两个迭代都需要原型，因为它们虽然是简单的导航系统，但后台包含大量复杂部分。
创建原型对团队非常有价值，因为他们可以识别出可扩展性等问题。比如，如果他们在第一版迭代中添加更多内容，就需要调整滚动位置。因此，在项目最终演示中，他们加入了更多交互功能，以确保内容始终易于访问。
使用 ProtoPie 做这件事最棒的一点是 ProtoPie Player，它让他们无需开发就能把原型直接交到团队成员手中。使用此功能，你可以将原型分享给任何拥有链接的人。
由于他们是一个国际化团队，这意味着拉丁美洲的团队成员可以在手机上下载 ProtoPie Player，这一改变极大推动了概念的认可。
除了 ProtoPie Player，团队还发现另外三个功能特别有价值：
条件（Conditions）
变量交互
借助 LottieFiles 集成 实现高保真原型
LottieFiles 是一个 AfterEffects 插件，可让你将动画从 AfterEffects 导出为 .json 文件。
很多原型应用并不支持这一功能，但我们很高兴地说，ProtoPie 是其中的例外。
对华纳兄弟探索团队来说，这项功能非常有帮助，因为这意味着他们可以在交付给开发者之前先测试 .json 文件。
下图展示了华纳兄弟设计工作室如何在使用 ProtoPie 进行高保真原型制作时应用 LottieFiles。
你可以看到五个不同的 LottieFiles，包括两个循环播放的棕榈树和用于在交互点组合的彩纸效果。此外，每当你点击一个动画角色，它会从静止状态切换并做一个小翻转动作。
在 ProtoPie 中构建复杂交互
为了展示“旋转世界”概念的功能，他们需要在顶部 UI 图层向下滚动时，让插画图层也随之下移。
他们通过链式反应并将分页容器的滚动映射到世界图层偏移来实现这一交互。这创造了两个图层实时同时下移的视觉错觉。
通过同样的交互，你还可以加入滚动动画。每当滚动到一半位置时，会出现两个由滚动触发的按钮。
他们还希望筛选按钮仅在视频页面显示，这一点也通过条件功能实现了。
更简化的文档与交接阶段
在文档与交接阶段，ProtoPie 为华纳兄弟探索的动效设计团队节省了大量时间。
该原型有许多叠加交互，这会使导航变得困难。若使用 AfterEffects 交接其中一些元素，他们需要先计算每秒多少帧，再换算成毫秒。
而在 ProtoPie 中，这些都能在几秒钟内自动完成。
作为整体文档流程的一部分，设计团队会将所有内容上传到 Confluence，其中包括：
页面介绍
嵌入的 Figma 文件
Lottie 交互录屏
ProtoPie 原型
动画时间线及其他资源。
该页面作为所有内容的单一事实来源，并与 Jira 互相关联，作为产品经理、开发人员和质量分析师的参考点。团队认为这是记录交接的强大方式，而 ProtoPie 也很好地融入了他们的工作流程。
在成功交接后，重新设计的 Cartoonito 应用已于几个月前上线。
最终结果呢？利益相关方满意、用户满意，而且应用看起来与他们用 ProtoPie 制作的原型完全一致。
ProtoPie 让动效与交互设计变得简单
与我们联系，了解 ProtoPie 如何帮助你的设计团队在极短时间内创建高保真原型！
