Logo 动画指南:何时动、怎么动、该砍什么

动画 logo 是基础设施,不是娱乐

logo 动画是静态标志的动态版本,它的任务不是惊艳众人,而是识别、过渡和加载。一旦你把它当成娱乐,就会做出在作品集里好看、在产品页上翻车的东西。

如今上线的大多数动画 logo 都太长、太电影化,而且是为一个生产环境里根本不存在的场景做的。做对的品牌交付的是一套动效系统:一小组动画模式,共享时序、共享缓动,并且有一个定帧,在不允许动效时,所有版本都能退回到这一帧。

每个品牌都需要的四种动效模式

加载、开场、循环和转场。大多数动画 logo 都属于这四种之一,而交付系统而不是一个主打片段的品牌,会用同一套动效语言覆盖全部四种。

每种模式都有自己的时长预算和渲染环境。运行在 React 应用里的加载动画必须支持 Lottie 且足够轻量。为产品发布视频开场的片头可以稍微戏剧化一点。在任何动画开始之前先定义好这四种模式,才能避免出现没人要的 12 秒电影级大片。

加载动画是主力干将

加载动画是用户看得最多的动画,它必须短、循环、渲染成本低,因为它跑在一个有比你的品牌更大问题的应用里。Stripe 的动画标志是经典参考:几何形状简单,循环不到两秒,在 24px 下也能用。Stripe 没人想靠它拿奖。它就是好用。

加载动画只需要一件事:在小尺寸下能看清。如果你的 logo 无法简化成几何标志或有力的字形,加载动画就是你发现这一点的地方。大多数在动画里小尺寸失效的 logo,在印刷里小尺寸也一样失效,真正的解法是修正标志本身。

控制在 2 秒以内。Lottie 文件控制在 50KB 以内。先在 24px 和 48px 下测试,再去测更大的尺寸。

开场是电影感版本,要克制使用

开场是你放在视频和产品发布上的三秒片头,也是唯一允许来点戏剧感的地方。Apple Music 的开场短音是个好参考:自信,卡在一个声音节点上,在你察觉它开始之前就结束了。

三秒是上限。如果你的开场超过这个时间,就是在为品牌消耗观众的耐心,这笔交易很亏。开场靠这几点赢得它的时长:干净地落在定帧上,如果品牌有声音就卡上声音节拍,并且不要求观众去解码任何东西。

循环是氛围式品牌

循环待在网页的角落或短片的结尾,它的任务是保持活力,同时不抢占注意力。Linear 的动画标志就是好例子:一个简单的旋转,配上恰当的缓动,看起来有生命力但不显得忙乱。Mailchimp 的字标弹跳循环有足够的个性,足以被读作品牌,又不会变成骚扰。

循环的失败模式是太有趣。每个周期都要求你对视的循环,十秒内就会让人厌烦。在有真实内容的页面上测试它。如果你的视线总是回到 logo 角落而不是内容上,这个循环就太强势了。

循环动画必须无缝。第零帧到最后一帧的衔接是大多数循环出问题的地方,而这种断裂在慢节奏的氛围循环里最明显,因为眼睛有时间注意到接缝。

转场是结缔组织

转场动画让 logo 在状态之间、场景之间或产品之间移动,最强的动效系统就生活在这里。Vercel 的三角形搭建和 Loom 的片头都接近转场:它们不用硬切,就把身份时刻和内容时刻连接起来。

转场也是最难设计的模式,因为它取决于所连接的对象。一个在深色产品界面和白色启动页之间有效的转场,在序列反过来时可能就失效。在宣布完成之前,要在两个方向和两种颜色模式下都设计转场。

大多数品牌从不做转场,而是依赖硬切。在产品复杂到硬切看起来像半成品之前,这都没问题。转场是动效系统成熟的标志。

在任何尺寸下都站得住的六种动画手法

显现、描绘、遮罩、骨骼、粒子和搭建。如今上线的每个动画 logo 都是这六种的某种组合,而大多数项目只需要两三种。

根据标志的几何形态来选手法,而不是根据作品集里什么看起来厉害。在实心字标上用描绘动画,看起来像渲染错误。在扁平几何标志上用骨骼,花的钱是产出的三倍。

显现动画挣得了它的登场

显现是最简单的手法:logo 进入并落定,全部手艺都在缓动曲线和它停下的那一刻。Slack 的显现是可靠的参考。标志淡入并缩放到位,用的是一条看起来有意为之而非默认的 ease-out 曲线。它在每种尺寸、每种场景下都有效,而且几乎不花什么成本。

显现的失败模式是使用线性缓动或默认 ease。默认 ease 曲线显得机械。带一点轻微回弹的自定义 ease-out 则显得有生命。差别只是两个贝塞尔控制点,却是一个看起来经过设计的显现和一个像从模板导出的显现之间的差别。

描绘动画展示构造

描绘动画按顺序勾出 logo 的笔画,它适合线条几何感强的标志,在实心填充的字标上则完蛋。这种手法展示的是标志如何制作,而这只有在标志由值得展示的笔画构成时才成立。

在描绘动画里,节奏比任何其他手法都重要。太快像故障。太慢像教程。最佳点是笔画让人感觉有目的而非表演的那个速度。

在给描绘动画下 brief 之前,先检查你的标志是有真实的笔画,还是基于填充形状构建的。填充形状可以用描边叠加来模拟,但结果通常看起来很假。如果标志全是实心填充,就改用遮罩。

遮罩动画是编辑式的做法

遮罩动画通过一个移动的光圈来显现 logo,对于无法描绘的字标,它是最干净的手法。光圈可以水平擦除、从中心展开或像光圈一样打开,无论标志最初怎么构建,效果都很干净。

遮罩动画与格式无关。它们在 Lottie、WebM 和视频里表现一样好,因为复杂度存在于遮罩形状的路径里,而不是标志的矢量结构里。这让它成为生产中最容易移植的手法。

失败模式是慢速擦除。一个用超过一秒才显现标志的遮罩,感觉像幻灯片转场。让光圈保持快速,把大部分个性预算交给缓动。

骨骼、粒子和搭建是重型手法

骨骼、粒子和搭建是需要专职动效艺术家的手法,只有当品牌有预算和使用场景时才值回成本。骨骼适用于角色标志或有多个关节部件的标志。粒子适用于大尺寸和高端品牌时刻。搭建适用于多元素组合,其装配顺序讲述一个品牌故事。

这三种都不属于加载动画。它们属于开场、品牌短片和产品发布序列。大多数过度设计的动画 logo 之所以存在,是因为客户在没有足够分量的使用场景来支撑的情况下,就提出了重型手法的 brief。

只有在加载和显现都跑通之后,才给重型手法编预算。这两种覆盖了 90% 的生产使用。重型手法是上面的一层,不是地基。

---

想要一个作为系统交付而不是单个主打片段的动效 ID?聘请 Brainy 来设计一套动画 logo 系统,以 Lottie、WebM 和 MP4 运行,带定帧锚点和动效艺术家真能照着做的节奏指南。

---

定帧是最重要的一帧

每个动画 logo 都必须落在一帧上,这一帧要能作为静态 logo 使用,它会被用进截图、缩略图和社交预览。一个落在定帧上不对的动画 logo,无论动效多干净,都只是半个 logo。

定帧也是在格式失效时能存活下来的那一帧。当 Lottie 加载不出来,当视频自动播放被拦截,当 GIF 在慢速网络下失败,用户看到的就是定帧。如果它静止时看起来是坏的,前面所有的动效都白费了。

在设计动画之前先设计定帧。动画应该抵达那一帧,而不是碰巧结束在上面。每个循环都应以它开始并以它结束。每个显现都应落定在它上面。每个开场都应收束于它。

节奏、缓动和时长是三个旋钮

节奏、缓动和时长,决定了一个动画感觉像品牌还是像演示。大多数糟糕的动画 logo 之所以糟糕,是因为这三者中有一个不对。

节奏是动画在最快时刻的移动速度。太快显得紧张。太慢显得自命不凡。正确的节奏匹配品牌的性格,而不是在 27 英寸显示器上看起来多厉害。

缓动是加速曲线。默认 ease 是偷懒的答案。使用自定义 ease-out 的品牌显得经过设计。使用弹簧缓动的品牌显得好玩。匹配缓动性格与品牌个性的方式,就像匹配字体与品牌声音一样。

时长是最难掌握的旋钮,因为每个人都想要更多时间。加载:2 秒以内。显现:1.5 秒以内。开场:3 秒以内。转场:1 秒以内。如果动画需要比这更多的时间来传达某些东西,说明标志自己干的活还不够。

格式与交付决定它能上线到哪里

只以 MP4 交付的动画 logo 只做了一半。真正重要的交付物是 Lottie、WebM、MP4,以及作为透明 PNG 的定帧主图。

定帧主图应该是 2x 的带透明度 PNG。当动画加载不出来时,每个工程师都会去找它,如果它不在交付包里,就会被从视频里截图,然后以压缩过的 JPEG 丢进去。别让这种事发生。

一页纸动效 brief

把这份 brief 交给动效艺术家,你会在两轮而不是七轮内拿到可用的动画。在第一次沟通之前把每个字段都填好。

---

动效 Brief:[品牌名称] 动画 Logo

---

能省下轮次的三件事:用真实的例子填写参考动画字段,用与描述想要的东西同样的具体程度来定义要避免的东西,并在构建任何一帧之前,以书面形式敲定定帧描述。

FAQ

logo 动画应该多长?

取决于模式。加载动画应在 2 秒内循环。显现应在 1.5 秒内落定。开场最长可到 3 秒。转场应在 1 秒内完成。最常见的错误是给所有模式下同一个时长的 brief,结果得到一个感觉像完整制作的 3 秒加载动画。

我需要 Lottie 文件,还是 MP4 就够了?

两个都需要。MP4 用于视频制作和社交。Lottie 用于应用和网页,在那里你需要透明背景、小文件体积和程序化控制。如果你的开发者在用 React、Next.js 或原生移动端构建任何东西,他们就需要 Lottie。只交付 MP4,说明这位动效艺术家以前没交付过生产级动画。

任何 logo 都能做动画吗,还是需要先重新设计?

有些 logo 动起来效果差,是因为它们本身设计得差,而动画会暴露静态版本藏起来的每一个结构弱点。带有精细细节、层叠渐变,或在小尺寸下没有强几何辨识度的 logo,会在每种动画手法里都跟你作对。如果你的 logo 需要在 24px 下作为加载动画使用,它首先需要简化为一个有力的单一标志。这是一个响应式 logo 系统的问题,在做动画之前先修好它,能让你免于花钱给错误的版本做动画。

一个好的动画 logo 要花多少钱?

由熟练的动效设计师制作 Lottie 加 WebM 的加载和显现:800 到 2,500 美元,取决于复杂度和轮次。包含所有格式和节奏指南的完整四模式系统:3,000 到 8,000 美元。涉及骨骼、粒子或声音搭配的则在此之上。如果有人给 logo 动画报价 150 美元,他们卖给你的就是一个把你的颜色填进去的模板。

动画 logo 应该与品牌声音时刻同步吗?

只有在你有声音品牌的情况下。如果你有明确的声音品牌识别,有品牌音效或短音,动画开场就应该与之同步。如果你还没有声音品牌,先为静音做动画。反正大多数品牌动画都在静音设备上播放,先为静音设计,意味着动画本身就能独立成立。

我不懂动效术语,怎么在 brief 里描述缓动曲线?

参考片段是最快的路径。找两三个感觉对的动画,把链接放进 brief。然后描述它们的共同点:「有弹性,有点俏皮」、「机械感,硬停」、「平滑而自信」。缓动的词汇是不精确的,参考片段则不然。如果想具体一点,就用 cubic-bezier 写法,并在发给艺术家之前按实际动画时长测试一下。

Lottie 文件是什么,为什么我的开发者想要它?

Lottie 是一种开源动画格式,把 After Effects 动画编码为 JSON。文件很小(通常 5-50KB),可缩放到任意分辨率而不损失画质,还能通过代码进行程序化控制:播放、暂停和拖动进度。它是应用和网页 logo 动画的标准,因为它是唯一能在一个包里同时处理透明度、可扩展性和交互的格式。

把动画 logo 当作系统,而不是资产

在动效上取胜的品牌,把动画 logo 当作有规则的系统,而不是单个主打文件。系统有四种模式、共享的动效语言、明确的定帧,以及覆盖每个生产环境的交付规格。单个主打文件是一个只在一种场景有效、在十种场景失败的作品集条目。

如果你的品牌识别规范里没有动效章节,那就是缺了这一节。规范你的品牌色板和字体的同样规则,也应该规范 logo 如何运动:明确的数值、有记录的理由,以及任何动效艺术家无需探索性沟通就能执行的规格。

建立系统。交付定帧。把缓动做对。剩下的就是生产。

---

想要一个作为系统交付的动效 ID?聘请 Brainy 来设计一套为生产而生的动画 logo 系统:Lottie、WebM、MP4、一个干净的定帧锚点,以及一份让动效艺术家真正有据可依的节奏指南。