展示，而非讲述。
这种经典的写作技巧不仅适用于小说作者，也同样适用于设计。在设计流程的某个阶段，你需要制作一个高保真原型——也就是在外观和功能上都尽可能接近最终产品的原型。这样你就能向开发人员和客户展示（而不只是口头说明）产品将呈现的样子和使用体验，让他们不必依赖猜测。
理想情况下，用户应当能够像使用最终产品一样与高保真原型交互。这意味着他们可以点击、悬停或触发某些操作。换句话说，你的高保真原型应当是可交互的。
但仅靠静态资源很难传达交互性。这正是动画——尤其是 Lottie 动画——发挥作用的地方。
什么是 Lottie 动画？
Lottie 动画是一种基于 JSON 的文件格式，几乎可用于任何场景，包括 Web 和移动平台。Lottie 动画同样具有交互性、体积轻量，并且可无损放大或缩小。
最棒的是？你不必从零开始制作。LottieFiles 提供了数千个免费且可自定义的动画，你可以在原型和最终产品中使用。
为什么在原型中使用 Lottie 动画？
如果你在为 Web 或移动端进行设计，你的产品很可能会包含动画，用于响应用户交互或提升用户参与度。在原型中加入动画，意味着开发人员和客户会准确了解你期望它们在最终产品中的呈现方式。开发人员也更容易理解如何实现这些动画，因为他们可以直接参考你的原型——而不是尝试解读书面或口头描述。
使用 Lottie 动画，你将获得两大优势：
可定制——即使你对动效设计一无所知，也可以将 Lottie 动画定制得仿佛专为你的品牌或视觉风格打造。你可以使用 LottieFiles 的 Color Palette 功能轻松自定义颜色；如果你需要对颜色、速度、帧率、尺寸等进行更精细控制，还可以使用免费的 Lottie Editor。
交付更轻松——使用 Lottie，交付动画和交付静态资源一样简单。由于 Lottie 动画是基于 JSON 的格式，你只需为每个动画交付一个资源文件。它们可以通过适用于 Web、iOS 和 Android 的 Lottie 库 来实现。你的开发人员无需从零编写代码。
如何在 ProtoPie 中添加 Lottie 动画
好消息是，ProtoPie 原生支持 Lottie 动画。要导入 Lottie 动画，只需将文件拖放到 ProtoPie 中。或者，你也可以点击 Insert > Layers > Lottie。观看
了解更多在 ProtoPie 中添加和使用 Lottie 动画的方法。
熟悉如何添加 Lottie 动画后，来看看你可以在原型中使用它们的五种方式。
1. 加载动画
加载速度慢会直接影响你的营收。根据 Google 的数据，移动网站加载时间每延迟 1 秒，转化率最多可能下降 20%。
解决方案是什么？除了优化网站以加快加载速度之外，你还可以展示加载动画——例如加载转圈动画或骨架屏——来吸引用户注意。在页面加载前，或用户发起操作并期待反馈之后显示它们。这些动画会让你的网站感觉更快或响应更灵敏，即使实际上并没有提升网站性能。
Lottie 文件格式非常适合加载动画，因为它非常轻量。这意味着无论在原型中，还是在实际网站或 App 中，它都能快速加载——而不是增加加载时间。
借助 ProtoPie，在原型中设置加载动画很容易。只需设置一个 Jump Response，让其在一定延迟后跳转到下一个场景。在这段延迟期间播放你的 Lottie 动画，即可模拟加载动画。
2. 品牌动画
对于设计师来说，动画是让品牌更令人难忘的机会——毕竟，与静态图像相比，动态画面更容易被记住。
一个简单的实现方式是，用品牌动画替换通用加载动画。展示你的 Logo 动画版本，在加载动画中使用品牌色，或展示品牌吉祥物。例如，如果你用过热门语言学习应用 Duolingo，你一定记得它标志性的绿色猫头鹰。Duolingo 使用 Lottie 动画在加载和完成页面展示其吉祥物。
没有动效设计团队帮你制作定制品牌动画？不用担心。你可以轻松自定义免费的 Lottie 动画，使其匹配品牌色。你甚至可以拿品牌 Logo 的 SVG 版本，使用 SVG to Lottie 工具 立即为其添加动画。
3. 悬停动画
有些元素（如按钮和图标）会在悬停时播放动画。这通常有两个作用：
传达可交互性——当你悬停在这些元素上并看到它们做出动画反馈时，你就会知道它们可点击。这有助于引导用户点击或与设计进行交互。
提升用户参与度——你是否曾仅仅因为想看按钮或图标会有什么反馈而去悬停？当它开始动画时，你可能会被吸引去点击！这类悬停动画在行动号召按钮中尤其有用，因为更多互动通常意味着更多营收。
让 Lottie 在悬停时播放动画非常简单。在 ProtoPie 中，可使用 Mouse Over 和 Mouse Out 触发器进行设置。你的团队也会欣赏它在开发实现上的便捷性，因为他们只需在 HTML 代码中添加 ‘hover’ 值。
4. 微交互中的视觉反馈
动画可以向用户传达一次交互是否成功（或失败）。例如，当你给一条 Twitter 推文“点赞”时，心形图标会变红，并伴随一阵彩纸爆炸效果。再比如电商 App：当你将商品加入购物车时，空购物车图标可能会动画变为已装满的购物车。
除了表明某个操作已经发生，这些动画还会在用户与网站交互时带来一些愉悦的小瞬间。
要在原型中设置这些效果，可在 ProtoPie 中使用 Tap 触发器来触发 Lottie 动画播放。
5. 滚动动画
无论你如何看待 Apple 产品，都很难否认它们的落地页非常出色。它们拥有有力的文案、精美的视觉效果，以及出色的产品叙事方式。
但其中有一点尤其突出——滚动动画的使用。看看这个 iPad Pro 落地页：当你向下滚动页面时，动画和产品图片会滑入或滑出视野。
想在设计中使用滚动动画吗？它们可以让网站或 App 更具交互性、更吸引人，最重要的是：更令人难忘。在设计这类效果时，最好将其纳入原型，因为否则开发人员或客户可能很难想象它们应有的样子。
在 ProtoPie 中，你可以使用 Chain、Detect 或 Range 触发器，以编程方式控制 Lottie 动画播放。在开发端，使用 Lottie 实现滚动动画也很简单，只需在 JavaScript 中启用 ‘scroll’ 模式。
想进一步了解 Lottie？
我们希望以上示例能激发你在原型中尝试 Lottie 动画。要了解更多 Lottie 内容，请查看 LottieFiles 的免费教程和课程。或者，直接从探索我们库中成千上万的免费动画开始。那就开始吧——挑选你喜欢的动画，进行自定义，打造精美原型。
