Twitch 频道展示你标志的位置，比几乎任何其他平台都多，而且其中大部分都很小。聊天消息旁的直播徽标。目录网格里的头像，要和其他上百个缩略图竞争。没人开播时停留的离线横幅。直播时叠在角落的浮层，压在不断变换颜色的游戏画面上。还有开播画面，那是唯一有足够空间让标志真正动起来的界面。
这是值得尽早内化的约束：在 Twitch 上，动画是例外，而微小的静态图才是常态。这意味着 Twitch 动态 logo 必须围绕一个在别处已经成立的静态帧来设计。静态做对了，动画就成了一种简短、高价值的附加。跳过它，动画就只是叠在一个没人读得清的标志上的装饰。
标志究竟出现在哪里
把这些界面按它们给你的空间大小分开来看会很有帮助，因为设计决定直接由此而来。
目录缩略图和离线横幅是最大的静态位置，而前者只在你直播时出现。目录是发现发生的地方，所以标志要和该品类里的每一个其他频道竞争。
头像出现在聊天里、关注列表中、以及 raid 通知旁。小、重复，而且常常是老观众唯一看到的版本。
浮层角落是唯一没有固定尺寸的位置，因为它取决于你自己的场景布置。它也是最不友好的，因为它压在不断移动的画面上——一个浮层标志必须能扛住任意变化的背景。
提示、转场和开播画面，是动效栖息的地方。这些界面是为「品牌时刻」而非「持续身份」而建的，也正是在这里，动态标志才值得存在。
离线横幅是最被忽略的界面
当频道不在直播时，页面依然存在，访客看到的是离线横幅、头像，以及下方任何面板。对于一个每周只在几个晚上开播的频道，那才是它大部分时间的样子。大量首次访客，以及几乎全部那些在错误时间从搜索或分享链接抵达的人，最先遇见的都是离线状态。
两条规则让这个界面成立。第一，构图必须在没有动效时也显得完整，因为它上面没有任何东西在动。第二，它必须在目录尺寸下也成立，因为同一个素材经常被复用作访客在浏览网格里看到的缩略图。
这里实际的失败，是把为整页宽度视图而建的横幅，复用作缩略图。一个填满宽矩形的构图，被塞进小卡片时会丢掉最具辨识度的元素，标志和字标最终为了几颗可见像素而互相争抢。先做小版本——这和任何 <a href="/logo-animation-templates/logo-video-maker">logo 视频制作工具</a> 的导出是同一个原则，而在这里更有分量，因为那么多 Twitch 位置都很小。
做出一个静音观看也成立的动画
开播画面和转场场景自动播放环境音乐的频率，比任何人以为的都高，而落在某个频道页面的观众，常常是在静音状态。Twitch 自己就以静音方式自动播放直播视频，关于浏览器中自动播放媒体的行为，MDN 关于自播放的文档 讲得很清楚——简言之，播放无需用户手势即可开始，所以声音不可假定存在。
这引出对直播 logo 动画最有用的一次测试：静音，完整看一遍。如果去掉配乐后入场显得随意，那节奏就错了，再怎么调音频也修不好。如果标志在静音下依然带着意图落定，那动画就尽职了，音乐成了锦上添花而非拐杖。
第二个测试是循环行为，而 Twitch 让它格外重要。开播画面会播放数分钟，所以那里的任何动画对单个观众都会循环几十遍。一段第一次看还不错的顺序，到了第十五遍可能变得惹人烦；而第一次通过时看不见的循环点硬切，到第十遍就成了你注意到的事。
修法是让循环无缝，而非让循环变长。一个定格后溶解回自身起始位置的标志，能在没有可见接缝的情况下循环；而一段从黑场开始、又回到黑场的序列，会把每一次重启动告示出来。如果在开播画面上你只查一件事，那就查循环点。
颜色、对比度与浮层难题
一个浮层标志压在游戏画面上。这意味着它的背景就是游戏正在渲染的东西，持续变化，时而明亮，时而近乎全黑。一个依赖与可预测背景之间对比的标志，在这里活不下去。
有三种做法可行。
给浮层标志一个自带的、封闭的背景——在符号背后放一块小面积的纯色或略带形状的底板。它占用一点屏幕空间，却让标志无论底下发生什么都能被读清。
使用一个内部对比强烈的标志，这样至少有一个元素能在任何背景下保持可见。一个单色调的标志，在某一刻总会消失在与它同色调的画面里。这不是假设——它会在第一场直播就发生。
把它彻底移出操作区。大多数游戏界面把自己的状态元素放在可预测的角落，而浮层标志通常该待在它们留出的某一片空白里，这也正是广播电视图形几十年来一直沿用的安全区逻辑。
这背后有一套有据可查的准则。标志使用上一条公认的原则是：不应给 logo 添加阴影、边框或外框作为装饰——YouTube 的频道品牌指南 对头像和频道美术也立下了同样规则，而且它可以推广：如果一个标志需要边框才看得见，那底层的对比问题就没有被解决。有趣的是，浮层底板在那个意义上不算装饰——它是在解决一个可读性问题，这也正是它读起来「有意为之」，而投影读起来「是个错误」的原因。
关于把这一切保持简单，还有一个有用的克制论点。 Nielsen Norman Group 关于界面动画的研究 把「传达状态变化的运动」和「为运动而存在的运动」区分开来，并指出第二类消耗注意力却毫无回报。一场直播转场传达的是「内容即将开始」，那是一个真实的状态变化。一个旋转、弹跳、炸开又重组的标志，传达的只有「有人很享受时间轴」而已。
你需要的尺寸，以及每种需要几次
一个频道实际需要的组合，比人们以为的小，而且其中大部分都来自同一幅画法。
用于头像的方形静态图，以平台接受的最大尺寸导出，并确认在圆形裁切内清晰可读。用于离线横幅和目录缩略图的宽幅静态图，要构造成能扛住被缩小显示的模样。用于快拍、短视频以及从直播切出的短片的竖版动画。用于开播画面、转场和提示的宽屏动画。还有一张从动画干净定格处导出的静态帧，用于面板和任何无法容纳动效的位置。
动画导出方面，分辨率和画面比例都重要。 YouTube 关于画面比例与分辨率的指南 记录了 9:16 竖版、1:1 方形和 16:9 宽屏，并建议竖版视频用 1080×1920；Twitch 的短视频和剪辑也落在同样的格式里。三者从同一源文件导出，能保证入场时长在它们之间完全一致——这很重要，因为一场直播转场和它配对的短片，常常被接连观看。
一套能避免重做动画的制作顺序
下面这个顺序，是为了把棘手的决定摆在昂贵工作之前，而非之后。
第一，把美术稿导出为 SVG，或导出为可用最大尺寸的透明 PNG，并在深色背景上确认透明度。
第二，做方形头像裁切，并以真实的聊天尺寸查看。这是最小的位置，也约束着其余一切。
第三，设计宽幅横幅的构图，让它被当作小缩略图展示时依然成立，并按那个尺寸而非整宽来检查。
第四，在制作动画之前，先确定浮层位置及其底板，因为底板会改变标志所处的画框。
第五，把动画版做成「一秒入场加干净定格」，再为开播画面加上一段无缝循环。
第六，导出三种比例外加一张静态图，并在它实际出现的每个尺寸下，静音测试这段动画。
如果你想看同一套顺序用在不同平台上，我们对 <a href="/blog/youtube-animated-logo">YouTube 的动态 logo</a> 的拆解更详细地讲了宽屏情形，而 <a href="/blog/video-logo">视频 logo 必须做出的不同之处</a> 则讲清了适用于任何频道的基础设计改动。
最常出错的地方
五种反复出现的失败，全部可避免。
标志在聊天里读不清。聊天头像很小，而标志是按频道页设计的。解决办法是先做最小的裁切，如上所述。
浮层在明亮的游戏画面上消失。一个单色调的标志，总会在某个时刻消失在某段画面上。在制作动画之前，先用一块底板，或在内部做足对比。
开播画面有可见的循环接缝。观众在一个场次里要坐看那个循环几十遍。修循环点，而不是修长度。
动画只有有声时才成立。请静音检查它，因为你的观众里有一大批正是这样抵达的。
横幅在整宽时很美，做成缩略图却读不清。先做小的构图，再让宽版跟进。
常见问题
动态 logo 在 Twitch 频道上放在哪里？
开播画面、转场、提示，以及（若支持视频）离线横幅。这些是专为品牌时刻而建的界面。头像、聊天徽标和浮层角落几乎总是静态的，所以动态版应当被当作补充，而非替代。
Twitch 的 logo 动画应该多大？
竖版位置导出 9:16、1080×1920，开播画面和转场导出 16:9，两者都来自同一源文件，以保证时长一致。静态头像和横幅是各自独立的导出，有各自的要求，两者都应按它们实际显示的尺寸检查，而非整宽。
logo 动画需要有声音吗？
设计成没有声音也能成立。落在频道页面的观众常常静音，所以视觉序列必须自己站得住。把音频当作给那些有声观众的增强，而不是让节奏依赖它。
怎么阻止浮层标志在直播里消失？
要么在符号背后给它一块封闭的底板，要么在内部做足对比，让至少一个元素能在任何背景下保持可见。一个叠在游戏画面上、单色调的标志，总会在某次直播的某个时刻消失，而投影修不了它。
Twitch 频道需要一套独立于主品牌的 logo 吗？
通常不需要一套独立的设计，但需要一组独立的导出。频道需要一个能扛住圆形头像、小型目录缩略图、浮层角落和宽屏开播画面的标志。只要最小的那一个先做，一幅画法就能服务全部四个。
总结
以一个陌生人的方式打开你的频道——在错误的钟点、离线时、在一个大约手机大小的浏览器窗口里。你看到的，就是大多数人看到的。如果标志在那里清晰可读，而横幅在缩略图尺寸下依然成立，你就有了地基，动画只是其上一段简短、廉价的附加。如果做不到，再多的动效也救不回一个在它最常出现的尺寸上就已经输掉的标志。