具有交互行為的動態字體

動態字體從電影片頭開始

動態字體的源起和電影的出現有著非常密切的 聯繫。從默片時代開始，它們之間就已經默契地 關聯在一起。1906年，動畫電影《一張滑稽面孔 的幽默姿態》(Humorous Phases of Funny Faces) 開頭就出現了20秒的動態字體，由詹姆斯·斯圖 爾特·布萊克頓(J. Stuart Blackton)逐幀把字體分步驟地繪畫出來，這是動態字體的早期先 驅。1920年，德國表現主義開山之作、恐怖電影 先驅《卡里加里博士的小屋》(Das Kabinett des Doktor Caligari)的電影片頭，綠色的背影光線襯 托著畸形的排版、古老的拼寫、過多的下劃線和 感嘆號，並把短語通過字體設計融入到電影鏡 頭中，毫無疑問，這是片頭設計（同時是動態字 體設計）的一個轉捩點。可以說，動態字體是電 影發展的一個附屬品，它的出現是為電影服務 的，是為了讓還沒有聲音的動態影像能夠被理 解，甚至幫助營造相應的氛圍。1954年，平面設 計大師索爾·巴斯(Saul Bass)為電影《卡門·瓊斯》 (Carmen Jones)創作電影片頭，巴斯認為片頭設 計是電影的延伸，能夠強調電影的故事情節。 1955年他為奧托·普雷明格(Otto Preminger)的電 影《金臂人》（The Man With The Golden Arm） 設計片頭和海報，在設計中，他運用非常簡練的 抽象平面設計手法，使用扭曲、脫節的圖像來傳 達電影里的故事，他的意圖是利用動態字體和 圖形來創造一種情緒，傳達「電影里吸毒者生 活的扭曲、撕裂，斷續和脫節。」1958年，他為希 區柯克的經典電影《眩暈》(Vertigo)設計片頭。 美國電影導演馬丁斯科塞斯(Martin Scorsese) 稱其為「電影中的迷你電影」，因為他的設計簡 約有力，完美地展示了電影故事的風格。該片頭 還使用了約翰·惠特尼 (John Whitney) 利用計算 機技術製作的具有開創性的螺旋形圖案，似乎 預示著未來動態字體圖案化的苗頭。1959年， 巴斯再為希區柯克的電影《西北偏北》(North by Northwest)設計片頭中使用了透視線作為網 格，利用帶有傾斜的字體帶出主題，最後利用 這些線引出高角度拍攝的紐約摩天大樓外牆。 索爾·巴斯一生為50多部電影製作片頭，所運用 的扁平化的視覺風格充滿隱喻，嚴謹的字體應用、摒棄冗餘的裝飾、陰影和花紋、重視動態文字的構成方式等特點為當今的動態字體設計提供了易於理解和操作的經典範例。

>《金臂人》片頭，1955

從網絡GIF動圖到Flash生成

時間來到20世紀90年代，網際網路飛速發展，對圖像傳播的需求與日俱增，要求也跟以往截然不同。1987年，GIF(Graphic Interchange Format)格式在眾多存儲文件格式中突出重圍，成為網際網路上 使用最為普遍的文件格式之一。GIF不僅能把圖 片文件壓縮到很小，從而方便在網際網路上傳輸； 同時，其具有的信息抓取能力和重複循環效果也令大部分的GIF動圖被廣泛應用在網站的廣告上來吸引用戶的注意力。雖然GIF動圖只是早期網 絡傳播的文件格式之一，也受到256種顏色的限 制缺少真實世界還原度，但它確實成為網際網路初 時代的一種標記, 有GIF運動(GIF 「Movement」) 之稱。GIF運動給平面設計帶來了嶄新的形態和 設計語言，在GIF用於廣告的過程中，設計師和網際網路上的用戶都發現了GIF本身蘊含的其他特質，比如由其效果帶來的一些趣味。它沒有視頻 那麼流暢，但它的重複性是「魔性」的；它的畫質 也不那樣完美，但觀看者卻能在最短時間內看 到畫面想要表達的核心內容。

> yugopsite

從某種程度上來說，GIF已經是一種可以動態 表現的圖片格式了，但它還不能交互，只能單方 面信息輸出，這是它的一個弊端。為了彌補這 一弊端，1996年，Macromedia軟體公司推出了 FLASH（2005年被Adobe公司收購）。FLASH在 2000-2007之間的網際網路上非常流行。它把網站 「動畫化」「可交互」「遊戲化」「生成化」的設 想在短短的幾年間變成了現實。在網絡上，設計 師可以利用FLASH來表達彈性、空間和時間的 多重概念。喬舒華·戴維斯(Joshua Davis) 創建的 praystation.com和中村勇吾(Yugo Nakamura)創建 的yugop.com是FLASH初代的先鋒者。他們的實 驗性網站影響了一代年青設計師對動態字體設 計師的認可和理解。從這一時期開始，動態字體 設計不再只是「動」的單項輸出，更可以與用戶 產生交互，更可以通過代碼生成意想不到的隨 機效果。對於動態字體設計來講，GIF和FLASH 雖然只是一個可利用的格式和工具，但正在因 為這樣的格式和工具的出現，助力動態字體設 計在網絡世界中的連鎖發展。網際網路是現實世界 的快進鍵，不久，HTML5就利用在跨平台和安 全技術方面的優勢，取代了FLASH。Adobe公司 宣布停止對FLASH的支持。2020年12月31日，無 法扭轉局面的FLASH最終退出網際網路的舞台。

> Typojanchi可變字體展示截屏

橫屏豎屏的轉變

從傳統來講，人們對螢幕比例的第一印象是橫 向，無論是傳統電視的4:3或高畫質電視的16:9, 又 或者是電腦螢幕，都在固化人們對橫屏的依 賴。但在2007年1月9日，這一習慣被打破了，喬布斯在美國舊金山發布iPhone3智慧型手機，豎屏強勢進入人們的生活。隨著智慧型手機逐漸成為生活的必需品，人們對智慧型手機的依賴遠遠超 過了其他形式的螢幕。無論是訊息資訊、娛樂、 出行或社交，智慧型手機都以博大的胸懷容納進 來，螢幕的邊界感日益消失，人們迅速習慣了豎 屏帶來的觀看體驗。豎屏也成為當代動態設計 的重要標準。誠然，橫屏或寬屏會帶給人們戲 劇性的感觀，但有別於橫屏，豎屏也有其傳統 的根源，正好契合了傳統平面海報的比例特點， 主體前置，可以使構圖更加聚集。同時，豎屏更 偏重與人的互動，因為豎屏的構圖關係更容易 使觀者產生一對一的交流感，從而使其更加具 有交互優勢。豎屏也使手持更加方便，符合人體 工學，體量的關係，也沒有太強的沉浸感，更適 合碎片化場景下的使用。豎屏的流行更直接地 影響了動態字體設計的傳達方式，很多設計師開始直接通過動態或編程的方式進行適合豎屏 的海報設計，生成的海報更加便於在社交媒體 上的推廣宣傳。手機螢幕的靈活性遠不僅只有 包容性一項，自由的橫屏豎屏轉換也是它無往 不利的資本，設計師也必須隨之轉變，不斷推出 可變設計，以適應螢幕的快速發展。從2020年 開始，突如其來的全球疫情，加速了各種形態的 網絡活動，動態海報的發展也隨之更加活躍，動 態字體的形態也更加多樣。

> Amsteldok可變字體

可變字體(Opentype Variable Fonts) 將會是動態字體的未來

可變字體是字體格式OpenType在1.8版規範中引 入的擴展規範，由蘋果、微軟、Google和Adobe 聯合開發，2016年9月14日正式發布。支持這一規 范的電腦字體可以儲存輪廓變化數據，在初始 字形輪廓的基礎上自動生成豐富的變化造型， 使用戶可以自由調整文字的外觀。可變字體是單獨的一款字體，但可以表現為多種形態的字體： 全部的字寬和字重變化、幾何傾斜甚至義大利 體，都可以被囊括在一個高性能、小體積的字 體文件中。可變字體為設計師打開了一扇新的大 門，引入了更有趣、更動態的字體設計，大大增 強了動態畫面的表達力和豐富性。

> 姜宛妤《點火櫻桃，照一架，荼蘼如雪》，2021

從一個角度看，可變字體也是一種「靜態」的 動態字體，它的變是可動的，但它最終的呈現 卻是靜態的。從根本上說，它的出現是GIF、 FLASH、HTML5發展的延伸。字體設計師可 以完全掌控他們要得到的軸和軸的變化範圍， 甚至定義新的軸。設計師也可以修改並選擇任 何其他的軸，比如上升部和下降部的高度、文 本層級甚至襯線形狀。可能性幾乎是無限的。 2018年，英國的Fontsmith公司和其荷蘭代理機 構 VBAT 通過可變字體格式所帶來的創新方 法，為阿姆斯特丹的 WPP 新園區設計了一個響 應式的徽標，它會隨著人們的互動和時間的推 移而產生變化。當人在空間中移動時，字母的造 型也會變動。徽標的形狀會隨著人們的不同姿 勢而變化；配色也會根據白天和黑夜的不同而 發生微妙的改變——所有這些都反映了建築物 的創意概念，以及空間中那些「呼吸」的創意。 Amsteldok 字母形成了一個可變形態的徽標字體，通過熱成像相機響應用戶的交互而產生流 動的效果，從而為現實世界營造出更為真實，更身臨其境的神奇體驗。2019年，韓國國際字體雙年展Typojanchi的可變字體展示中提出「可變 字體的可能性是無窮無盡的，任何可能的控制 器都可以實現字體的不同外觀，並為其設置動畫。可以是網站上的滑動模塊、動態加載中的數據、攝像機或其他傳感器，這使得它們非常適合信息和動態圖形。」可以說，可變字體的自由度讓設計能更有表現力，同時它的影響也會反射回人們的生活，幫助改變人們的閱讀體驗。相對可變字體，傳統的螢幕閱讀體驗是單一的, 設計 師的選擇是有限的，在網站加載不同字體是漫長的等待。可變字體將重塑螢幕閱讀，能夠根據語言設置組合和分行等功能，還能夠根據屏 幕大小開啟和關閉斷行，甚至可以在最小的螢幕 上調整字寬，以便在不減小字體大小的情況下使每行顯示更多的字符，如此一來就可以使閱 讀體驗更具個性，更加流暢和舒適。

> 王繼瑾《符紋之生機》，2022

具有交互行為的動態字體

事實上，在FLASH技術開始之前，動態字體的 交互模式就已經出現了。20世紀90年代，時任麻 省理工學院媒體實驗室教授的前田約翰(John Maeda)就用Classic MacOS 設計出了一系列交 互動態字體作品《The Reactive Square（1993）》 《Flying Letter（1994）》《12 o』clocks（1996）》 《Tap, Type, Write（1998）》《Mirror, Mirror （1999）》(未出版) 。這是五本帶有軟盤或光碟 的書籍，它的設計直接用程序代碼生成，對當今 動態字體的設計產生了深遠的影響。 《The Reactive Square》改編自卡齊米爾·馬列 維奇 (Kazimir Malevich) 的畫作 Black Square (1915)，前田約翰用數位技術生成畫作的動態和 運動, 在聲音與形態間建立關聯，不同聲音可以 產生不同的動態圖形。他在尋求一種可能性，那 就是用計算機技術實現觀者與圖像的交互。觀 看《The Reactive Square》時無需操作滑鼠或鍵 盤，只需對著麥克風講話，圖形就會做出反應並 做出回應，從而產生不同的變化。《Flying Letter （1994）》是利用滑鼠和螢幕上的文字進行互動， 滑鼠與螢幕上的響應字母區域相連，文字跟隨 滑鼠滑動。在《Tap, Type, Write（1998）》中，鍵盤 被當成琴鍵，從而增加打字的趣味性，這是幫助 人們擺脫電腦輸入枯燥性的一種嘗試。總的來 說，這些作品捕捉到了一種現象，那就是隨著計 算機的廣泛應用，人們的角色也發生了重要的變 化。每一項新技術的興起，都對設計師提出相應 的挑戰。設計師必須要保持清醒的頭腦，用戶不再是視覺信息的被動消費者，而是會通過動態網 站構建自己的內容。時至今日，我們已經習慣通 過網站和各種內容進行交互，我們可能已經對繁 復的動態效果有所抗拒，更需要有效地使用動態字體和用戶至上的交互方式來展示內容。

> 王愷《字通神性 合力疊生》，2022

當下動態字體設計的技術門檻已經降低，設計師可以利用開源的代碼完成可交互式的動態文 字設計；電腦運算能力的提高，也讓各種複雜的 動態效果在短時間內就能完成。但是動態字體設計的服務對象依然是內容，動態字體設計在 螢幕世界中的角色必將更加重要，但也不能是 無根之木，在無數瀏覽的頁面中，如果內容沒有 吸引人們的注意，那麼消失是它必然的結局。在 這一過程中，設計師有效地將內容和形式結合 在一起，發揮動態字體的優勢，尋找與用戶交互 的最佳模式才是動態字體設計師的工作重點。 （編輯：九月） （作者系中央美術學院藝術學博士，副教授，碩士生導師）

文 Article > 陳慰平 Chen Weiping ；

圖 Picture > 前田約翰John Maeda、姜宛妤Jiang Wanyu、 王繼瑾Wang Jijin、王愷Wang Kai及電影截屏