Twitch 頻道展示你標誌的地方，比幾乎任何一個其他平台都多，而且其中大多數都很小。聊天訊息旁的「直播中」徽章。目錄方格裡、和上百個其他縮圖競爭的頭像。沒人在直播時、停留在畫面上的離線橫幅。直播期間疊在遊戲畫面上、每隔幾秒就變一次顏色的角落浮層。以及開播畫面——那是唯一一個有足夠空間讓標誌真正動起來的介面。
這就是值得早早內化的那個限制：在 Twitch 上，動畫是例外，小小的靜態圖才是常態。這表示 Twitch 的標誌動畫，必須繞著一個「在其他地方都已經成立」的靜態幀來設計。把靜態做對，動畫就成了一個短而高價值的加分；跳過它，動畫就只會是疊在一個沒人讀得出來的標誌上的裝飾。
標誌到底出現在哪裡
把這些介面按它們給你的空間大小分開來看會有幫助，因為設計上的決定是直接從那裡來的。
目錄縮圖和離線橫幅是最大的靜態位置，而前者只在你開播時才出現。目錄是發現（被找到）發生的地方，所以標誌要和這個分類裡的每一個其他頻道競爭。
頭像出現在聊天裡、追蹤者清單中、以及 raid 通知旁邊。很小、反覆出現，而且往往是一個固定觀眾唯一會看到的版本。
角落浮層是唯一一個沒有固定尺寸的位置，因為它取決於你自己的場景設定。它也是最不友善的，因為它疊在會移動的遊戲畫面之上——一個浮層標誌必須能扛住任意變動的背景。
提示動畫、轉場和開播畫面，才是動態所在。這些都是為「一個有品牌味的瞬間」、而不是為「持久的身份」而建的介面，而它們正是一個動畫標誌證明自己價值的地方。
離線橫幅是最被忽略的介面
當頻道沒有在直播時，頁面依然存在，而訪客看到的是離線橫幅、加上頭像、再加上下方任何的資訊面板。對一個一週只播幾個晚上的頻道來說，那才是它大部分的生命。很大一部分的初次訪客，以及幾乎所有在錯誤時段從搜尋或分享連結抵達的人，第一次遇到的都是離線狀態。
有兩條規則能讓那個介面成立。第一，構圖必須在沒有動作的情況下就讀起來是完整的，因為上面沒有任何東西會動。第二，它必須在目錄尺寸下也成立，因為同一個素材常常會被重複用作觀眾在瀏覽方格裡看到的縮圖。
這裡實務上的失敗，是把一個為全寬頁面視圖做的橫幅，拿來當縮圖重複使用。一個填滿寬矩形的構圖，被塞進一張小卡片時會丢掉它最有特色的那些元素，而標誌和字標最後會搶那幾個看得見的像素。先做小的版本——這和任何 <a href="/logo-animation-templates/logo-video-maker">logo video maker</a> 匯出都適用的原則相同，而因為 Twitch 有太多位置都很小，這條原則在這裡更強。
做出一個被靜音觀看也撐得住的動畫
開播畫面和轉場場景自動播放環境音樂的頻率，比任何人預期的都高，而一個降落在頻道頁面上的觀眾，常常是用靜音狀態來的。Twitch 自己就是以靜音自動播放直播影片，而瀏覽器中自動播放媒體的行為，在 MDN 關於自動播放的說明文件 裡有詳細說明——重點是播放開始時沒有使用者手勢，所以聲音不能假設存在。
這產生了對一支直播標誌動畫來說，最有用的一個測試。把它靜音，從頭看到尾。如果沒有配樂時那些出場顯得隨便，那時間點就錯了，再怎麼做音訊也修不好。如果標誌在靜音時依然帶著意圖落下，那動畫就盡到了它的職責，而音樂變成了加分、而不是拐杖。
第二個測試是循環行為，而 Twitch 讓它異常重要。開播畫面會跑好幾分鐘，所以那裡的任何動畫，對單一觀眾都會循環數十次。一個看一次還 OK 的序列，在第15次重複時可能會變得討厭；而一個在第一次播放時看不出來的循環點硬切，會變成你在第十次時注意到的那個東西。
解法是讓循環無縫，而不是讓它變長。一個「定格之後、再溶解回自己的起始位置」的標誌，會在沒有可見接縫的情況下循環；而一個「從黑畫面展開、又回到黑畫面」的序列，則是每一次重啟都在宣告。如果你在開播畫面上只檢查一件事，就檢查循環點。
顏色、對比與浮層問題
一個浮層標誌疊在遊戲畫面之上。這表示它的背景就是遊戲正在算出的任何東西，不斷變化，有時明亮、有時近乎全黑。一個依賴「與可預測背景之間對比」的標誌，在這裡活不下去。
有三種做法行得通。
給浮層標誌它自己那塊獨立的背景——在符號後面放一個小小的實心或微成形底板。它會佔掉一點螢幕面積，但不管底下發生什麼，都能讓標誌讀得出來。
使用一個內部對比強的標誌，讓至少一個元素在任何背景下都依然可見。一個單色調的標誌，在直播過程中的某個時刻，會消失在跟它同色調的畫面裡。這不是假設；它在第一場直播就會發生。
直接把它移出動作區。大多數遊戲介面會把自己的狀態元素放在可預測的角落，而浮層標誌通常就該屬於它們留下的那些空間之一——這正是廣播圖像幾十年來使用的「安全區」慣例背後的相同邏輯。
這背後有一套有文獻依據的紀律。一個在標誌使用上牢不可破的原則是：不該用額外的陰影、邊框或外框去裝飾一個標誌——YouTube 的頻道品牌指南 對頭像和頻道美術陳述了同樣的規則，而它可以推廣出去：如果一個標誌需要邊框才看得見，那根本的對比問題就還沒被解決。有趣的是，浮層底板在那個意義上並不是裝飾——它是在解決一個可讀性問題，這正是為什麼它看起來是刻意的，而一個下拉陰影看起來像個錯誤。
對於把這一切保持簡單，也有一個有用的克制論點。Nielsen Norman Group 關於使用者介面動畫的研究 把「傳達狀態改變的動作」和「為了動而存在的動作」分開，並發現後者花掉注意力、卻什麼都不回報。一場直播的轉場傳達的是「內容即將開始」，這是一個真實的狀態改變。而一個會旋轉、彈跳、爆炸又重組的標誌，傳達的只有「有人很享受時間軸」而已。
你需要的尺寸，以及需要幾份
一個頻道實際需要的組合，比大家以為的小，而且其中大部分都來自同一張圖。
給頭像用的方形靜態圖，用平台接受的最大尺寸匯出，並確認在圓形裁切內依然清晰可讀。給離線橫幅和目錄縮圖用的寬靜態圖，要建構到「構圖在被縮小顯示時依然成立」。給限時動態、Shorts 和任何從直播剪出的短影音用的直式動畫。給開播畫面、轉場和提示用的寬螢幕動畫。再加上一張從動畫乾淨定格匯出的靜態幀，用於資訊面板和任何不能放動態的位置。
對於動畫匯出來說，分辨率和比例都很重要。YouTube 關於影片比例與分辨率的指南 記載了 9:16 直式、1:1 方形和 16:9 寬螢幕，並建議直式影片用 1080 × 1920，而 Twitch 的剪輯和 Shorts 也是同樣的格式。三種都從同一個來源匯出，能讓進場時間點在它們之間完全一致——這很重要，因為一場直播轉場和它成对的短影音，常常是被接連著看的。
能避免重做動畫的製作順序
下面的序列，是為了把尷尬的決定擺在昂貴工作之前、而不是之後。
一、把圖稿匯出成 SVG，或匯出成可用最大尺寸的透明 PNG，並在深色背景上確認透明度。
二、做好方形頭像裁切，並以真實的聊天尺寸檢視。這是最小的位置，也是約束其他一切的那個。
三、設計寬橫幅的構圖，讓它在被當成小縮圖顯示時依然成立，並用那個尺寸、而不是全寬來檢查。
四、在做動畫之前，先決定浮層的位置和它的底板，因為底板會改變標誌所處的那個框。
五、把動畫版本做成「一秒到達、配上乾淨定格」，再為開播畫面加上一個無縫循環。
六、匯出三種比例再加一張靜態圖，並在它實際會出現的每個尺寸下、以靜音測試這支動畫。
如果你想看同一套序列套用在不同平台上，我們對 <a href="/blog/youtube-animated-logo">YouTube 的動畫標誌</a> 的拆解更詳細地涵蓋了寬螢幕的案例，而 <a href="/blog/video-logo">影片標誌必須做哪些不同的事</a> 則涵蓋了適用於任何頻道的底層設計改變。
最常出什麼問題
五個反覆出現的失敗，全都可以避免。
標誌在聊天裡讀不出來。聊天用的頭像很小，而標誌是為頻道頁面設計的。解法是像上面說的，先做最小的裁切。
浮層在明亮的遊戲畫面下消失。一個單色調的標誌總會在某個畫面下消失。在做動畫之前，先用底板，或在設計上就把對比做出來。
開播畫面有看得見的循環接縫。觀眾在一場直播裡會把那個循環看數十次。去修循環點，而不是去修長度。
動畫只有在有聲音時才成立。把它靜音檢查，因為你相當比例的觀眾就是這樣抵達的。
橫幅在全寬時很美，當成縮圖卻讀不出來。先做小的構圖，再讓寬版本跟著來。
常見問題
動畫標誌在 Twitch 頻道上放在哪裡？
開播畫面、轉場、提示動畫，以及（如果它支援影片的話）離線橫幅。那些都是為一個有品牌味的瞬間而建的介面。頭像、聊天徽章和角落浮層幾乎永遠是靜態的，所以動畫版本應該被當成「加法」、而不是「替代」。
Twitch 的標誌動畫應該是什麼尺寸？
直式位置用 9:16、1080 × 1920 匯出，開播畫面和轉場用 16:9，兩者都從同一個來源匯出，這樣時間點才會一致。靜態的頭像和橫幅是各有要求的獨立匯出，而且兩者都應該用它們實際顯示的尺寸、而不是全寬來檢查。
標誌動畫需要聲音嗎？
把它設計成沒有聲音也成立。一個抵達頻道頁面的觀眾，常常是靜音的，所以視覺序列必須自己就站得住。把音訊當成「給那些有開聲音的觀眾的加分」，而不是讓時間點去依賴它。
我要怎麼讓浮層標誌在直播中不消失？
要嘛在符號後面給它一塊獨立的底板，要嘛做出足夠的內部對比，讓至少一個元素在任何背景下都保持可見。一個疊在遊戲畫面上的單色調標誌，在直播過程中的某個時刻一定會消失，而一個下拉陰影救不了它。
Twitch 頻道需要一個和主品牌分開的標誌嗎？
通常不需要分開的設計，但需要一組分開的匯出。頻道需要一個能活過圓形頭像、小目錄縮圖、角落浮層和寬螢幕開播畫面的標誌。只要先做最小的那個，一張圖就能服務這四者。
重點整理
像一個陌生人那樣打開你的頻道——在錯誤的時段、在它離線時、用一個大約手機大小的瀏覽器視窗。你看到的，就是大多數人看到的。如果標誌在那裡清晰可讀，而橫幅在縮圖尺寸時依然讀得出來，那你就有基礎了，而動畫只是疊在上面的一個短而便宜的加分。如果讀不出來，那無論多少動態，都救不了一個在它被顯示最多的那個尺寸上已經輸掉的標誌。