一個沒有人定義過的詞
搜尋這個詞,你會得到彼此矛盾的結果。有些頁面把它當成一種動畫風格,有些當成一種看起來很快的靜態標誌,還有一些其實是在講一家剛好同名的公司。標誌詞彙沒有任何標準機構,所以這個詞在從來沒有被明確定義的情況下就流通開來,讀者只能自己猜眼前的頁面用的是哪一種意思。
這個猜測應該有意識地去做,因為三種意思會導向三種完全不同的工作。其中一種是影片檔,一種是繪圖,一種只是同義詞。在打開工具或向設計師提案之前先知道自己要的是哪一種,可以讓整個專案不必被做兩次。
以下是這三種意思各自所指為何、各自產出什麼,以及如何判斷它是不是你正在找的那一個。
「動態標誌」的三種意思
加上動態的標誌
這是實務上最常見的意思:把品牌標記做成動畫。靜態標誌完全維持原樣,只是在它周圍做出一支短影片——一個進場動作、踩在重拍上的收尾,以及一段長到足以讀出品牌名的停留。產出是一個檔案,而不是一張圖。如果你需要的是用來開場 Reels、頻道或產品頁的東西,那你要的就是這一種,而工作是動畫而不是設計。
暗示動態的靜態標記
第二種意思是設計屬性,而不是檔案。靜態標誌可以透過自身的幾何暗示運動:傾斜的字標、帶有拖尾線條的標記、向前傾的形狀、圍繞箭頭或 swoosh 線條構成的字母組合。螢幕上什麼都沒動,但這個標記讀起來依然很快。當有人看著一張名片說某個標誌感覺很有動感時,指的就是這一種。
作為 logomotion 的簡稱
第三種意思是詞彙漂移。motional、motion、logomotion、logo motion——業界從來沒有統一定案,這個詞就被當成整個類別的鬆散同義詞使用。當它以這種意思出現時,背後的問題其實就是那個籠統的問題:我要怎麼讓我的標記動起來?不論是哪一種說法,答案都是同一套流程。
靜態版本:暗示速度的標記
暗示動態是一套歷史悠久的真實設計技法,在委託重畫之前值得先了解,因為其中有些可以加在既有的標記上,有些則不行。
速度感標記、傾斜與拖尾線條
這套詞彙很小,而且用法一致。斜體或傾斜處理會讓字母向前傾,讀起來像是在移動——只要有字體排印,排印設計師就用傾斜來表達動能,而Google 的字型知識庫是觀察這項慣例如何演進的好去處。形狀後方的拖尾線條借用了速度與動態模糊的視覺語法;向前傾的剪影、V 形箭頭、藏在負空間裡的箭頭,做的都是同一件事。限制在於:這些都屬於繪圖決策,所以它們存在於標誌檔裡,一旦改動,品牌出現的每一個地方都會跟著改變。
當暗示動態的標記弄巧成拙
失敗模式是過度投入。傾斜過頭的標記讀起來像不穩固;必須放在發票上的字標加了拖尾線條,讀起來像裝飾;藏在字母組合裡的箭頭,在十六像素下看不見。暗示動態也比多數品牌元素老化得更快,因為速度的視覺語言會隨著每個十年的廣告而改變。替標記加上傾斜,是用一個永久性決策去對應一種暫時性美學,這也是為什麼許多團隊選擇讓靜態標記維持中性,把動作放到動畫裡。
動畫版本:讓標記讀起來在動的四件事
如果你要的是動畫版本,其中的技藝比看起來的狹窄。四個決策幾乎決定全部成果,而其中三個是關於節制。
進場動作帶有方向性
從左側掃入的標記暗示移動;從自身中心放大的標記暗示抵達。兩者都成立,但各自傳達了不同的品牌個性。常見的錯誤是完全沒有方向的進場——單純的淡入,讀起來像投影片轉場,而不是進場。
收尾時略微超過
精準停在最終尺寸的標記讀起來很機械。超過最終尺寸幾個百分比再回彈的標記讀起來有彈性,而彈性正是手工動態與範本動態之間最主要的差別。超過的幅度必須很小;超過約百分之五,它就不再讀作收尾,而開始讀作彈跳。
停留要長到能讀
至少半秒,以完整尺寸、完全靜止的狀態停留。動態吸引注意,靜止產生識別;一支從頭到尾都在動的揭示影片,會被記成「有個東西在動」,而不是被記成一個名字。當影片長度過長時,這是第一個被砍掉的東西,而它應該是最後一個。
換框落在重拍上
把動畫對上音樂的重拍標記是結構而不是裝飾——觀眾不會有意識地注意到這個同步,但一旦缺少,立刻就會被感覺為業餘。格式在這裡也同樣重要:動態牆用直式 9:16,螢幕用 16:9,而 YouTube 關於長寬比與解析度的指引確認了 16:9 是桌面播放的標準,同時建議不要自行把黑邊壓進檔案裡,因為播放器在需要時會自己加上留白。
兩種版本各自適用的地方
這兩種版本並不互相競爭,而多數品牌兩者都需要。帶有暗示動態的靜態標記,適用的是標誌無法動起來的地方:應用程式圖示與網站小圖示,傾斜在十六像素下要嘛讀得出來、要嘛完全讀不出來;招牌、包裝與印刷品,因為那裡的素材是一張圖;以及主要的標誌組合本身,因為那裡的幾何必須撐得住刺繡與蝕刻。
動畫版本適用於品牌被「觀看」而不是被「閱讀」的所有地方:頻道開場、網站主視覺、廣告素材、活動螢幕與提案簡報。但有一個前提適用於全部——動畫版本需要擁有真正 alpha 通道的原始檔。透明的 SVG 或 PNG 帶有 alpha,JPG 沒有,而這個差異不是任何匯出設定能夠修補的。MDN 的圖片檔案類型總覽,是關於哪些格式保留透明、哪些會把它壓平的有用參考。
在改動任何東西之前,先檢視你自己的標記
多數團隊已經有一個標誌,所以實際的問題不是該委託哪一種版本,而是手上這個標記能不能承受其中任何一種處理。這份檢視大約十分鐘,而且不需要設計師就能回答。
用十六像素看剪影
把標記縮到網站小圖示的大小,然後看輪廓而不是看細節。一個在那個尺寸下剪影仍然可辨識的標記就能撐得住動畫,因為動畫主要就是剪影——眼睛先讀形狀,其次才讀字母。一個在十六像素下糊成灰色一團的標記,動起來並不會變好;它會變成一個會動的糊團,而暗示動態的處理與動畫兩者都只會讓這個問題更明顯,而不是更不明顯。
檢查標記有沒有變形的空間
動畫需要圖形裡留有餘裕。寬鬆的內部間距、圓潤的筆畫末端、單一而強烈的形狀、一到兩種顏色,都能讓動畫有地方可以動。字距緊密的字標、極細筆畫、纖細的斜接與仰賴精細細節的標記則完全沒有餘裕——它們靜止時就已經在可讀性的邊緣,拉伸幾個百分比就會讓讀者失去那個名字。測試很快:在螢幕上把標記垂直壓扁百分之十,看它是否仍然讀得出來。如果讀不出來,動畫版本就應該使用簡化後的變體,而不是主要檔案。
決定標記能否為了動畫而簡化
動態變體是品牌系統裡正常的一部分,而不是妥協。它是同一個標記,只是內部細節減少、輪廓略微加重、最小的文字移除,專為標記只會出現在 60 到 200 像素而非印刷尺寸的螢幕所繪製。已經保有一版簡化圖示版本的品牌,多半已經做完了這份工作。只擁有單一鎖死組合的品牌,則應該在製作動畫之前先做出這個變體,因為把印刷檔做成動畫,結果看起來就正好是把印刷檔拿去移動而已。
這份檢視同時也決定你需要哪一種版本。一個在十六像素下讀得出來、又有變形空間的標記,可以承受兩種處理——暗示動態的重畫與動畫。一個沒通過剪影測試但幾何乾淨的標記,則更適合只做動畫,因為動態能在不要求這個形狀改變自身的情況下,給一個簡單的形狀存在感。
在沒有設計團隊的情況下做出任何一種版本
靜態版本是設計工作,這部分沒有捷徑:替標記加上傾斜或拖尾線條,就等於重畫標記。不需要設計師就能做到的是動畫版本,而瀏覽器路線已經讓它變成一件確實很短的工作。上傳透明的 SVG 或 PNG,選幾張背景影格,挑一首音樂,動畫就會從你的檔案生成,並自動把換框放在音樂的重拍標記上。
創意決策仍然在你手上——影格的氛圍、音樂的速度、標記在畫面裡的大小——關鍵影格則不在。對拍同步的 logomotion用這種方式製作,單次上傳就能匯出動態牆用的 9:16,或螢幕用的 16:9 最高 4K;而它背後的設計原則值得在第一次匯出之前先讀過,因為那正是讓生成出來的動畫看起來不像生成出來的關鍵。整個流程都在瀏覽器編輯器裡完成,不必安裝任何東西。
常見問題
動態標誌是一個正式的設計術語嗎?
有人使用,但它並未標準化。這個詞可以是 logo animation 的鬆散同義詞,可以是對一個暗示動作的靜態標記的描述,也可以是一家無關公司名稱的一部分。把它當成搜尋詞而不是技術分類,並在開始工作之前先決定你需要的是三種意思中的哪一種。
動態標誌與標誌動畫有什麼差別?
標誌動畫是一個檔案:一支對上音樂、為特定版位匯出的標記短片。動態標誌可以指那件事,也可以指一個幾何暗示速度的靜態標記。這個區別很重要,因為其中一種是對標誌本身的設計改動,另一種是圍繞一個完全沒有被更動的標誌所製作的影片。
標誌在沒有做成動畫的情況下,也能暗示動態嗎?
可以,而且這是一項刻意的技法,不是意外。傾斜、拖尾線條、向前傾的剪影與負空間箭頭,都能在靜態影像中暗示移動。代價是永久性:這些決策存在於標誌檔裡,會跟著品牌出現在每一個地方,所以它們應該是為了品牌的十年而選,而不是為了眼前這一檔活動。
動畫版本需要什麼檔案?
透明的 SVG 最理想,因為向量邊緣可以縮放到任何匯出尺寸而不失真。帶有真正 alpha 通道的高解析度 PNG 幾乎一樣好。JPG 是應該避免的一種——它帶有不透明背景,所以標記會包在一個看得見的方框裡,而那個方框會出現在每一格畫面中。
動畫應該跑多久?
社群開場二到四秒;網站頁首、頻道開場或活動螢幕則五到十秒。不論長度為何,標記都應該在至少最後半秒維持定位完成、完全清晰可辨。長度是由影片要在哪裡播放決定的,而不是由動畫想表現多少決定的。
總結
這個詞是有歧義的,而這份歧義只有在你讓它替你決定要做什麼工作時才會變得昂貴。如果你需要的是一支屬於你的標記的影片,靜態標誌完全不必改變——上傳透明檔案,選好影格與音樂,一個會動的品牌標記在瀏覽器裡就是幾分鐘的事。如果你想要的是一個靜止時就很有速度感的標記,那是重畫,而且它值得一位設計師與一個以十年為單位的決定,而不是一個星期五下午。弄清楚你問的究竟是哪一個,就是這整件事的全部。