一个没人定义的词
搜索这个词,结果之间互相矛盾。有些页面把它当成一种动画风格,有些当成一种看起来很快的静态 logo,还有一些讲的恰好是同名的那家公司。Logo 术语没有标准制定机构,所以这个词在使用中一路漂移,始终没被钉死,读者只能去猜眼前这个页面用的是哪个含义。
这个猜测值得有意识地做,因为三种含义通向三件不同的工作。其中一种是视频文件,一种是画稿,一种是同义词。在打开工具或向设计师下需求之前先搞清楚自己要哪一种,就能避免整个项目被做两遍。
下面是这三种含义各自是什么、分别产出什么,以及如何判断它是不是你要找的那一个。
人们说 motional logo 时指的三件事
带动画的 logo
这是实践中最常见的含义:品牌标识被动画化。静态 logo 保持原样不动,围绕它做一段短视频——一个入场、一次踩在节拍上的定格,以及一段足够读完品牌名的停留。产出是一个文件,而不是一张画稿。如果你需要的是用来开头 Reels、频道或产品页的东西,你要的就是这个含义,而这是动画工作,不是设计工作。
暗示运动的静态标识
第二种含义是一种设计属性,而不是一个文件。静态 logo 可以通过自身的几何形态暗示运动:倾斜的字标、带拖尾线条的标识、前倾的形状、围绕箭头或一道弧线构建的字首组合。屏幕上什么都没动,标识依然让人觉得快。当有人看着一张名片说这个 logo 很有动感时,用的就是这个含义。
logomotion 的另一种说法
第三种含义是词汇漂移。motional、motion、logomotion、logo motion——行业从未统一过,这个词被当成整个品类的宽松同义词来用。当它以这种意义出现时,背后的问题是那个通用的问题:怎么让我的标识动起来?两种情况下答案都是同一套流程。
静态版本:暗示速度的标识
暗示运动是一项有悠久历史的真实设计技法,在决定重画之前值得先了解,因为其中有些部分可以加到现有标识上,有些则不行。
速度标识、倾斜与拖尾线条
这套词汇量不大而且一致。倾斜(oblique)或意大利体处理让字形前倾,读起来像在行进——只要有字体存在,字体设计师就用斜度来表达动量,Google 的字体知识库是了解这一惯例如何形成的好去处。形状后面拖着的线条借用了速度和运动模糊的视觉语法。前倾的剪影、V 形箭头、藏在负空间里的箭头——它们做的是同一件事。限制在于这些都是绘制决策,所以它们存在于 logo 文件里,并且会改变品牌出现的每一个地方。
暗示运动的标识什么时候会翻车
失败模式是过度投入。倾斜过度的标识看起来不稳;必须出现在发票上的字标加了拖尾线条,看起来像装饰;藏在字首组合里的箭头在 16 像素下根本看不见。暗示运动也比多数品牌元素老化得更快,因为速度的视觉语言每十年就随广告变一次。给标识加倾斜,是关于一种临时审美的永久决定,这正是很多团队保持静态标识中性、把运动放到动画里的原因。
动画版本:让标识看起来在动的四个要素
如果你要的是动画版本,这门手艺比看上去要窄。四个决策几乎承担了全部结果,而其中三个是关于克制的。
入场决定方向
从左侧扫入的标识暗示行进;从自身中心放大出现的标识暗示抵达。两者都成立,但它们对品牌说了不同的事。错误在于完全没有方向的入场——一次平淡的淡入,看起来像幻灯片切换,而不是入场。
定格时略微过冲
精确停在最终尺寸的标识看起来机械。超过最终尺寸百分之几再回弹的标识看起来有弹性,而弹性正是手工动效和模板动效之间的主要区别。过冲必须很小。超过大约 5%,它就不再像定格,而开始像弹跳。
停留时间要够读完
至少半秒,在全尺寸、完全静止的状态下。运动吸引注意,静止产生识别,而一个从不停下来的揭示动画会被记住为“一段运动”而不是一个名字。这是片子超时后第一个被砍掉的东西,而它应该是最后一个。
画面切换要落在节拍上
把动画切在音乐的节拍标记上是结构,而不是装饰——观众不会有意识地注意到这种同步,但它的缺失会立刻被感觉为业余。格式在这里也重要:信息流用竖版 9:16,屏幕用 16:9,而YouTube 关于宽高比和分辨率的指南确认了 16:9 是桌面播放的标准,同时建议不要自己把黑边烧进文件,因为播放器在需要时会自己加内边距。
两种版本各自该用在哪里
两个版本不是竞争关系,大多数品牌都需要两者。带暗示运动的静态标识用在 logo 动不了的地方:应用图标和 favicon,倾斜在 16 像素下要么看得见、要么等于不存在;招牌、包装和印刷品,那里的资产是一张画稿;以及主 logo 组合本身,那里的几何形态必须经得起刺绣和蚀刻。
动画版本用在品牌被观看而不是被阅读的所有地方:频道片头、网站首屏、广告素材、活动现场屏幕和融资演示。有一个前提适用于所有这些场景——动画版本需要一个带真实 alpha 通道的源文件。透明的 SVG 或 PNG 带有这个通道;JPG 没有,而这个差异不是任何导出设置能修补的。MDN 的图像文件类型概述是关于哪些格式保留透明度、哪些会把它压平的实用参考。
在改动之前先审一遍你自己的标识
大多数团队已经有 logo 了,所以实际问题不是该做哪个版本,而是他们手上的标识能不能承受其中任何一种处理。这个审计大约十分钟,不用设计师就能给出答案。
在 16 像素下看剪影
把标识缩小到 favicon 的尺寸,看轮廓而不是细节。一个在这个尺寸下剪影仍然可辨识的标识能承受运动,因为运动主要是剪影——眼睛先读形状,再读字形。一个在 16 像素下变成灰色糊团的标识,动起来不会变好;它会变成一块会动的糊团,而暗示运动的处理和动画都会让这个问题更明显,而不是更隐蔽。
检查标识有没有可变形的余量
动画需要有松弛度的画稿。宽松的内部间距、圆润的端点、一个强形状和一两种颜色,都能给动画留出运动空间。字距紧密的字标、发丝级笔画、细的对角连接处,以及依赖精细细节的标识则完全没有——它们静止时已经处在可读性的极限,哪怕只拉伸几个百分点,读者就会丢掉品牌名。测试很快:在屏幕上把标识垂直压扁 10%,看它还读不读得出来。如果读不出来,动画版本就应该用简化变体,而不是主文件。
判断标识能否为动效做简化
动态变体是品牌系统里的常规组成部分,而不是一种妥协。它是同一个标识,内部细节减少、轮廓略微加粗、最小的文字被移除,为的是标识出现在 60 到 200 像素的屏幕上,而不是印刷尺寸上。已经保留了简化图标版本的品牌,这部分工作基本做完了。只有一个锁定组合的品牌,应该在动起来之前先做变体,因为把印刷文件做成动画,出来的效果就像印刷文件被挪来挪去。
这个审计同时也决定了你需要哪个版本。一个在 16 像素下可读、又有变形余量的标识,可以承受两种处理——暗示运动的重画和动画。一个剪影测试不合格但几何形态干净的标识,更适合只做动画,因为运动能赋予简单形状存在感,而不需要它改变自己的画法。
没有设计团队也能做出其中任一版本
静态版本是一项设计工作,没有捷径可绕:给标识加倾斜或拖尾线条,就意味着重画标识。不需要设计师就能完成的是动画版本,而浏览器路线已经把这件事变得真的很短。上传透明的 SVG 或 PNG,选几张背景帧,挑一段音乐,动画就会从你的文件生成,画面切换会自动落在音乐的节拍标记上。
创意决策仍然在你手里——画面的调性、音乐的节奏、标识在画面里的大小——而关键帧不在。用这种方式做出来的一段卡点的 logomotion,一次上传就能导出信息流用的 9:16 或屏幕用的 16:9(最高 4K),而它背后的设计原则值得在第一次导出前读一读,因为正是这些原则让生成的动画不至于看起来像生成的。整个流程都在浏览器编辑器里完成,不需要安装任何东西。
常见问题
motional logo 是一个正式的设计术语吗?
有人用,但它没有标准化。这个词既是 logo 动画的宽松同义词,也可以指一个暗示运动的静态标识,还可能是一家无关公司名称的一部分。把它当成搜索词而不是技术分类,并且在开始工作之前先确定你需要三种含义中的哪一种。
motional logo 和 logo 动画有什么区别?
Logo 动画是一个文件:一段标识的短视频,卡着音乐剪,导出用于特定的投放位置。motional logo 可以指这个,也可以指一个几何形态暗示速度的静态标识。这个区别很重要,因为一种是对 logo 本身的设计改动,另一种是围绕一个从未被改动过的 logo 做的视频。
logo 不做动画也能传达动感吗?
能,而且这是一种有意为之的技法,不是意外。斜度、拖尾线条、前倾剪影和负空间箭头都能在静止图像中暗示行进。代价是永久性:这些决策存在于 logo 文件里,随品牌出现在每一个地方,所以它们应该按品牌的十年、而不是按当前的营销活动来选择。
动画版本需要什么文件?
透明的 SVG 最理想,因为矢量边缘缩放到任何导出尺寸都不会变虚。带真实 alpha 通道的高分辨率 PNG 几乎同样好。JPG 是那个要避开的格式——它带着实心背景,所以标识会出现在一个可见的方框里,而每一帧都能看到这个方框。
动画应该多长?
社媒片头两到四秒,网站页头、频道片头或活动现场屏幕五到十秒。任何情况下,标识都应该在最后至少半秒内保持定格、完全清晰。时长由片子的投放位置决定,而不是由动画想展示多少来决定。
结论
这个词有歧义,而歧义只有在你让它替你挑活儿的时候才会变得昂贵。如果你需要的是一段标识的视频,静态 logo 完全不用改——上传透明文件,选好画面和音乐,一个会动的品牌标识在浏览器里就是几分钟的事。如果你想要的是一个站着不动也显得很快的标识,那是重画,它值得一位设计师和一个以十年为单位的决定,而不是一个周五下午。搞清楚你问的是这两个中的哪一个,就是这件事的全部。