从2019年起，网络流量变得低廉，短视 频成为我们获得信息的一个重要来源。 短视频的发展催生了动态图形和动态字体设计的兴起。动态图形和动态字体又反过来影响了传统意义上的静态推广设计。
广告、海报都出现了静态与动态结合的新形态， 极大地丰富了视屏语言图形文化的表达方式。 透过电子屏幕，动态图形、动态字体随处可见， 其中动态字体尤为引人注目。文字一直是传达 信息的基本元素，动态字体将文字信息传达的 方式上升到动态的层面，版式多样，增强了文字 信息传达的视觉体验，突出了核心语言的抓取 程度，使文字更加具有吸引力。对于视觉传达 方式来说，这是具有革新性的发展，也是在未 来设计中不可或缺的形式之一。
>《眩晕》片头1958年
在中国，早在秦汉时期就有“走马灯”的游戏， 这种游戏利用的是人眼在观看时的一个特殊现 象，即“视觉暂留”（Visual staying phenomenon， duration of vision）现象，也称“余晖效应”，指 人眼在观察动态的景物时，光信号传入大脑神 经，需要经过一段短暂的时间（0.1-0.4秒），光信号的作用结束后，视觉形象也并不会立即消失， 而是会保留一段短暂的时间。1824年，英国学 者皮特·马克·罗各特在他的研究报告《移动物体 的视觉暂留现象》中首次提出了“视觉暂留”现 象。这是电影等动态影像技术得以产生的一个 重要理论基础。最先利用这一原理解决现实问 题的是美国著名的发明家、企业家爱迪生，正是 他发明了“活动视镜”。这是他一生众多发明创 造中的重要一项，从根本上说，已经是一种电影 （Movie, moving picture的简写）观看装置，虽然 还不能称得上是真正的电影放映机，但它已经 具备了活动影像放映的基本元素——高速运转 的胶片以及光源，可以让人通过一个视镜箱体 顶部的放大镜窗口，来观看箱体内的活动画面。 后来，为了使更多的人能同时看到活动影像，法 国的卢米埃尔兄弟在爱迪生“活动视镜”的基 础上发明了电影放映机，这种电影放映机依靠的是更为稳定的投影技术，这种技术完美地将 爱迪生盒子中的活动影像释放了出来，从而推 动世界走向动态影像的发展阶段，让人类前所 未有地以活动影像的方式反馈、分析、创造、影 响现实生活。活动影像被投射在一块白色的幕布上，为增强光的反射能力，幕布通常被涂上银粉或铝粉，因此，电影幕布又被称为“银幕”。这 应该算作现代意义上“屏幕”的最早形态。
> 《卡里加里博士的小屋》片头，1920
动态字体从电影片头开始
动态字体的源起和电影的出现有着非常密切的 联系。从默片时代开始，它们之间就已经默契地 关联在一起。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及电影截屏