你是否曾想过，在你常用的外卖应用里，从发现餐厅到送达上门之间经历了多少交互？其中有些看起来很简单，但即便是最基础的动效设计，也需要投入大量努力与团队协作——最终目标都是打造既可靠又愉悦的应用用户体验。
这在Wolt（这款广受欢迎的芬兰外卖应用，已被 DoorDash 收购）尤为如此。该公司于 2014 年在赫尔辛基成立，目标是把城市装进你的手机并送到你的门口。而在ProtoPie中，Wolt 设计团队找到了一个工具，能够轻松将他们最先进的创意落地。
在我们最新的网络研讨会中，Wolt 的动效设计师Samu Rintala分享了他的见解，讲述其团队如何在外卖应用设计工作流中使用原型设计。你可以观看下方回放，或者如果你更喜欢阅读，也可以继续往下看。
太长不看版（TL;DR）
认识 Wolt 设计团队
Wolt 的产品动效设计
产品动效设计意味着“沟通”
产品动效设计意味着“导航”
产品动效设计意味着“个性”
Wolt 应用中的动效设计示例
Wolt 设计师如何协作，打造顺畅的外卖应用设计工作流
Wolt 如何向开发者进行交付
Wolt 设计团队为何使用 ProtoPie
ProtoPie 中用于动效设计的工具
使用 ProtoPie 的动效设计应用场景
Wolt 未来如何使用 ProtoPie
认识 Wolt 设计团队
Wolt 的设计团队由 40+ 名成员组成，包括产品设计师、内容设计师、UX 文案、本地化专家、基准测试专家、用户研究员，以及——最后但同样重要的——两位动效设计师，其中就包括 Samu。
该设计团队服务于六大核心群体，为公司面向消费者、商家、骑手、生鲜、B2B 和工作的应用提供设计支持。
Samu 说明，他们的大部分工作发生在面向消费者的应用中。尽管如此，在动效设计方面，他们始终以同等重视程度对待所有群体。确保所有 Wolt 平台体验一致，是他们使命中的关键部分。
Wolt 的产品动效设计
产品动效设计通常可定义为：在数字产品或界面中应用动画、过渡和视觉效果，以增强用户体验并传达信息。它强调创建有目的且富有吸引力的运动与交互，从而引导用户、提供反馈、传达层级关系，并为产品带来生命力与动态感。产品动效设计的目标是提升可用性、取悦用户并高效传递信息，最终优化整体用户界面与用户旅程。
那么，Wolt 是如何定义产品动效设计的？
人们有时会用 UX 动效或交互设计等不同名称来指代产品动效设计，但它们之间还是存在一些差异。
Wolt 设计团队用三个关键因素定义产品动效设计：沟通、导航和个性。
Wolt 设计师对产品动效设计的定义。
接下来我们详细看看这意味着什么。
产品动效设计意味着“沟通”
1. 产品动效设计作为反馈非常重要。
Samu 解释说，他对这件事的感受就像是在和一个完全没有回应、没有任何确认的人对话，你无法判断对方是否在认真倾听。这种缺乏反馈的体验并不愉快。
反馈很重要，它能表明某件事正在发生并持续推进。想象一下一个对任何触控都没有反应的应用界面——至少可以说，这会让人很困惑，对吧？
2. 它能增强清晰度与编排。
Samu 强调，动效的作用是提升应用的清晰度，而不是削弱它。在他看来，动效的首要功能是帮助用户理解并掌握应用中正在发生的操作与事件。
3. 它能教育用户。
“教育”也是 Wolt 产品动效设计的关键方面。他们使用动效引导用户浏览应用界面，展示如何高效使用导航。
4. 它会影响感知延迟。
Samu 说：“好的动效设计可以在感知上‘欺骗’用户。比如在加载中，或者需要等待某些内容加载时，一个简单的加载动画就能营造出更快的体验错觉。”
产品动效设计意味着“导航”
1. 它能提升空间感知。
空间感知是产品动效设计中的关键要素。用户需要清楚知道自己在应用中的位置、如何到达这里，以及将来如何返回或再次访问相关页面。
2. 它能在正确的时间抓住用户注意力。
这也与“教育用户”有关，即告诉用户当前发生了什么，例如通过警告提示，或者提醒用户需要向订单中添加某项内容才能完成下单。
3. 它能降低认知负荷。
Samu 表示：“总体来说，这些步骤都能降低用户的认知负荷。”
产品动效设计意味着“个性”
1. 它让应用个性保持一致。
正如动作是一个人个性的重要组成部分，动效设计也会塑造应用整体个性。
在 Wolt，设计团队强调应用 UX 一致性的重要性。通过遵循既定原则与规范，他们确保应用动效在不同页面与交互中都具有可识别性。
Samu 说：“一致性总是让人安心，因为你知道当你进行某个操作时，应用会如何表现。”
2. 它带来安心感。
最终，Wolt 做产品动效设计的目标，是为用户提供安心感。
Samu 解释道：“当你感到安心、享受过程，并且清楚自己在哪、在做什么时，愉悦感就会作为整体体验自然出现。”
Wolt 应用中的动效设计示例
下面我们来看看 Wolt 的设计师如何在 Wolt 应用中使用动效。
我们先从过渡动画开始——Wolt 应用中有不少这类动画——然后再看一些更细节的设计。
1. 滚动过渡
Wolt 应用中的滚动过渡。
Samu 解释说，这类过渡需要大量编排工作，正如前面所说。这是因为涉及元素众多，而且要求标题出现、其他内容淡出等时机都必须精确。要实现这一点，就需要仔细规划层级关系，并确保动画素材在恰当时刻可用。
2. 状态变化过渡
下方是组件内一个简单的状态变化过渡示例。
Wolt 应用中的状态变化过渡。
3. 快速选择器
Samu 说：“对我们来说，小细节是大事情。我一直认为神性藏在细节里，所以这些细节叠加起来，对整体体验影响很大，绝对值得投入。”
这是一个小但非常重要的交互示例：当用户把生鲜商品加入购物车时，手指下方的数字会有跳动动画。
一个小而重要的交互示例：用户每次将商品加入购物车时，商品数量都会有动画效果。
Samu 补充：“如果你不真正拿着手机亲手测试，这些点你是不会注意到的。”
4. 箭头出现动画
Samu 解释道：“这里可以看到其余分类。箭头会从侧边以非常流畅的动效出现。”
又一个说明小细节如何让用户体验更顺滑的例子。
5. 基础图片容器
Samu 说：“即使在这个非常基础的图片容器里，我们也想加入一些小细节，比如进度指示器。”
一切都在细节之中。
6. 插画
Samu 强调应用中大量插画的重要性，认为它们既有很高价值，也具有良好的视觉美感。通常这些插画用于向用户传达特定信息。即使是错误提示，由于加入了吸引人的插画，也更容易被用户接受。
插画是 Wolt 应用 UI 的重要组成部分。
Samu 说：“其中一些甚至不在面向消费者的应用里。我们的商家端和骑手端也有很多这类插画。我们希望所有内容看起来都很棒，因此我们的各款应用里都有很多优秀的动效。”
Wolt 设计师如何协作，打造顺畅的外卖应用设计工作流
下图展示了在 Wolt 的应用原型设计工作流中，设计师、工程师和其他相关方之间如何反复沟通与协作。
Wolt 的跨团队协作。
除了动效之外，Wolt 的设计师还会在项目各阶段帮助团队成员塑造用户流程、界面设计和页面过渡。
Samu 解释说，作为动效设计师，他们的角色位于中间，希望在转化流程的各个阶段提供帮助。他们更倾向于尽早参与项目，因为这样能提供最大程度的支持。早期介入也有助于与团队就未来如何有效整合动效进行更充分讨论，因为可用于协同规划和策略制定的时间更多。
他补充道：“当然，我们任何时候都能帮忙，但最佳做法始终是先完成整体设计并在工程开始前启动动效设计，因为有时确实需要修改代码才能让它真正实现。”
最后一步，也是他们职责中最重要的部分之一，就是交付。
Wolt 如何向开发者进行交付
Wolt 设计师在交付流程上有一套定制方法，包括：
预览视频链接，展示目标动效。 这能帮助开发者理解期望结果，并核对时间线上应该发生什么。
动效设计师联系方式。共享联系方式可在实现阶段促进设计师与开发者的开放沟通，尤其当某些设计在代码实现上存在难度时。
颜色编码的 UI 元素。 时间线中包含匹配的颜色代码、交互名称，以及缓动、时长、延迟等 UI 元素与属性。
交付也是 ProtoPie 发挥作用的阶段之一，它通过交互录制提供了原生交付方式。
Wolt 的交付流程。
虽然 Samu 认可 ProtoPie 交付功能的强大能力，但他们更倾向于将动效文档与设计放在单独页面，以确保未来易于访问。尽管如此，Samu 提到他们仍频繁使用交互录制，因为它显著加快了将录制交互复制粘贴到 Figma 文件中的过程。
他进一步解释：“我不需要来回反复检查数值，只要快速复制粘贴，然后基于我们自己的动效组件构建 Figma 交互处理即可。”
Wolt 设计团队为何选择 ProtoPie
Samu 说：“基本上，我们主要用 ProtoPie 做动效设计。对我来说，它是 Figma 之外的首选工具，我几乎只用 ProtoPie。”
Samu 告诉我们，自从他在 Wolt 工作以来就一直使用 ProtoPie。对于有动效、原型设计或开发编程基础经验的人来说，上手非常容易，这对理解 ProtoPie 的高级功能很有帮助（虽然开始使用并不必须掌握这些高级功能）。
Samu 说：“总体而言，我非常非常推荐把 ProtoPie 用于产品动效。它提供了大量动效可能性，让你能轻松做出很多效果。我觉得即便是小规模测试它也同样好用。”
尽管 Samu 过去使用过其他动效设计工具，但以下两点是他偏好 ProtoPie 的原因：
原生测试。 对应用产品动效设计而言，必须用真实手机测试，因为仅靠鼠标和键盘无法获得正确体感。用手机检查时序与交互非常重要。
流程整洁。 你可以在单个场景内完成很多内容，而不必布置大量连接导致界面混乱。
ProtoPie 中的动效设计工具
这些是 Wolt 设计团队在 ProtoPie 中进行动效设计时依赖的功能。
Wolt 设计师使用的 ProtoPie 核心功能。
1. 公式（Formulas）
Samu 说：“公式基本上就像代码里的函数，你可以在 ProtoPie 里使用。我们常把它与条件判断和变量结合使用：用某种公式计算并存入变量，把它作为条件，再传给另一个变量。”
他补充道：“这类在 ProtoPie 里的正向循环收益很大，因此你也可以在动效上做很多自动化，从而真实感受到它是如何运作的。”
2. Chain 和 Range 触发器
Samu 说：“Chain 和 Range 触发器是我最喜欢的功能之一。通过链式连接，或者基于几个数值做处理，你可以用一个简单触发器完成很多动效。”
3. 组件
他告诉我们，发送与接收触发器也非常适合实现原型中不同组件之间的通信，从而在主场景中无缝触发各种动作。
4. 实时键盘（Live Keyboards）
Samu 说：“实时键盘对原型设计非常好用，省时且更真实。比如你在手机上测试并聚焦某个文本输入框时，它会真正打开手机自带键盘。这很有帮助，因为你不需要再用不可交互的假元素来模拟。”
5. Lottie 文件
Samu 说：“当然，ProtoPie 可以播放 Lottie 文件，这对我们的插画和时序帮助很大。”
6. ProtoPie 的 Figma 插件
他说：“Figma 集成是必需的。没有它几乎什么都做不了。”
使用 ProtoPie 的动效设计场景
接下来我们看看 Samu 使用 ProtoPie 为 Wolt 应用 UX 制作的一些设计示例，展示如何用相对简单的元素轻松做出惊艳效果。
1. 使用 Chain 触发器制作蠕虫式动画
使用 Chain 触发器制作的蠕虫式动画。
Samu 说：“这个小蠕虫实际上是用一个 Chain 触发器做出来的。它连接到这个图片容器的滚动偏移量。”
他告诉我们，一旦系统搭建好，就很容易传达给开发者。在这个项目中，他仅依靠交互配方作为交付测试，结果效果非常好。
2. 借助 Lottie 支持的动画
借助 Lottie 支持的动画。
Samu 解释，用静态图片格式来卡动画时间会很困难。ProtoPie 对 Lottie 文件的支持可实现精准时序，从而在场景间实现顺滑过渡和交互。
他说：“在这里，我可以拿到 Lottie 的时间点，并把它作为跳转到下一场景前的条件。所以如果没有这种原生支持，这类事情就不可能做到。”
3. 搭配 Lottie 支持的 Range 触发器
Samu 也强调了 Range 触发器与 LottieFiles 支持结合使用的优势。
他说：“在做这类动效测试时，它能提供更好的上下文。因为这里的 Range 触发器实际上连接到了这个进度条。所以当进度到达末端时，Range 触发器会识别为完成，然后触发其余所有动效。我认为这能为这类时刻提供正确语境，也就是说，在真正动画发生前，你需要完成与真实用户相近的操作量。”
4. 借助 Figma 集成制作高保真应用原型
通过将设计从 Figma 导出到 ProtoPie 进行高保真原型设计，Samu 展示了他如何快速把静态页面变成原型，其观感几乎与最终外卖应用 UX 一样。
借助实时键盘和 Lottie 等动态元素，他也能进一步提升原型保真度与对用户体验的整体理解。
5. 地图交互
在 ProtoPie 中创建的逼真地图交互。
只需少量触发器，Samu 就展示了 ProtoPie 如何在手机上实现真实感地图交互，让原型更接近真实产品。
6. 触发器与组件
组件在 Samu 的设计流程中扮演重要角色。通过在组件内利用触发器，他创建了可复用交互，其他人也能通过 ProtoPie 的交互库轻松获取并集成。
他建议，使用组件是一个能大幅节省时间的机会。他进一步解释，小组件的省时收益更容易直观看到，而随着逐步组装，累计节省的时间会非常可观。因此他强烈建议采用这种方式。
7. 快速迭代
Samu 用一个来自网页界面的简单示例说明，在 ProtoPie 中迭代和测试有多快。
他解释道：“我做了这个下拉菜单，完成后我只需轻松复制几份，就能和开发讨论边界情况，比如这个动画可扩展到什么程度，以及内容更多时偏移量如何表现。”
8. ProtoPie 的屏外（Off-screen）功能
ProtoPie 一个常被忽视的创意用法是屏外功能，Samu 将其称为“应用里非常强大的部分”。
ProtoPie 的创意使用场景。
他解释：“这个现在在屏幕上做动画的灰色矩形，通常会在屏幕外。但在这个原型里，我需要它来实现 plus 和 minus 按钮的自然超时效果。”
通过展示如何对屏幕外元素做动画，他说明了该功能在创建自然超时与淡出效果方面的实用性。
9. 简单的脉冲圆点
即使是脉冲圆点这样的小动画，Samu 也会选择把内容从 Figma 导出后在 ProtoPie 中制作——仅仅因为他喜欢在 ProtoPie 里做动画。他也很看重在一个应用中即可访问所有设计元素的便利性。
Wolt 未来如何使用 ProtoPie
Wolt 未来如何使用 ProtoPie。
目前，Wolt 将 ProtoPie 用于动效设计，但设计师们对未来让团队其他成员也使用它有很多令人兴奋的计划。
Samu 告诉我们，他们打算为所有设计师建立包含交互库的设计系统，从而在未来（甚至在早期探索阶段）扩展高保真原型与测试的可能性。
Samu 说：“这类测试实际上更能证明我们是否走在正确方向上。我觉得这对我们非常面向未来，因为我们目前仍在使用产品中相当基础的部分，而我非常喜欢它还具备语音交互这类可能性——这些很可能在未来用得上。”
最后他表示：“一旦有更多设计师加入，我们在 ProtoPie 里的工作也会更多，这样我们就能做更多高保真原型，甚至用户测试——而这些现在在 ProtoPie 中也已经可以实现了。”
通过 ProtoPie，走上从简单到高级的应用原型设计之路
ProtoPie 为 Wolt 以及其他数千家公司设计师提供了一个轻松实现创意的方式，覆盖从构思到测试的全过程。加入他们，立即免费试用 ProtoPie！
