从“平面”到“屏面”：媒介转型与网格设计语言之变

媒介转型；纸媒；屏幕；平面设计；网格设计

今天，我们已经置身于一个数字媒介的时代，回望之前二三十年中国平面设计的发展，几乎所有的从业者都会感叹，时代变化之快完全超乎人的意料。当我们对基于纸媒的、现代主义设计的研究还只是一知半解、懵懵懂懂的时候，又必须迅速地投入到对于新兴的基于屏幕和数字媒介的设计方法的新的研究和探索。毫无疑问，我们现在正处在这个剧烈的变化之中。需要思考的问题也非常多，比如屏幕语言和数字媒介传播的特点是什么？传统的平面设计主要是基于纸媒展开的，那么以纸媒和印刷为基础的设计原则，与基于屏幕和数字网络媒体的设计是一种什么关系？这些都是我们正在面临的问题，本文将结合理论与实践对这些问题进行初步的讨论。

1.屏幕媒介的产生与发展

今天，我们设计工具和接受信息的方式都离不开数字媒介，而数字信息的一个最主要的媒体就是屏幕。对于20世纪的艺术和视觉传达来说，有四块屏幕对于人类视觉感官的丰富是非常重要的。按照时间顺序它们依次是：电影的屏幕、电视的屏幕、电脑的屏幕和手机的屏幕。首先诞生的是电影屏幕。1895年，法国的卢米埃尔兄弟在巴黎的一家咖啡馆地下室里放映了他们自己拍摄的电影《火车进站》《工厂大门》等，这标志着电影的诞生。早期的电影可以说就是动态的绘画，电影的幕布相当于绘画的画布，电影银幕的视觉前身就是通过视错觉再现真实世界的绘画平面，而宽屏幕的电影的前身就是大画幅的历史画或全景画。电影不但对欧美的先锋现代主义的艺术和平面设计产生了重要影响，也丰富了中国的现代平面设计语言。我们以前对中国近现代平面设计的研究主要集中在印刷媒介，事实上1930年代前后的中国电影产业已经初具规模，对平面设计语言和电影屏幕语言方面的研究还有待展开。民国时期的上海，大量具有艺术背景的艺术家和设计师都投身于电影领域，如万籁鸣兄弟、许幸之、沈西苓等等。这些人大都有学习美术的背景，或多或少地接受过图案教育，对现代主义和文字设计也颇有研究。所以，我们可以在《铁扇公主》《十字街头》《马路天使》等电影的片头中发现现代主义的文字设计和构成主义版式及相关视觉语言的影响。可以说，文字设计在电影语言中的参与，就像绘画和影像一样自然，文字是直接被胶卷变成了电影屏幕的影响语言的一部分。（图1）

图1 1937年沈西苓执导的电影《十字街头》，其预告片中的文字设计明显受到了构成主义版式及相关视觉语言的影响。

图2 白南准的作品：《电视大提琴》，1976年。电视和录像艺术是白南准标志性的创作手段。

其次，是电视的屏幕。早期的电视成像所依靠的是荧光屏，或称“显像管”，它由电子枪、荫罩和玻壳这三个主要部件组成。其中，装在玻壳和电子枪之间的荫罩（Shadow Mask）起到了分色作用。没有荫罩就没有现在普遍使用的CRT彩色电视机。荫罩是安装在显像管内的一块超薄钢片，它上面刻蚀有40多万个微孔，可分为孔状荫罩和条栅状（Aperture Grille）荫罩两种类型。孔状荫罩成本相对较低，适用于一般场合，条栅状荫罩显示器的色彩更加明亮，屏显也更为艳丽，更适合于多媒体图形、图像等专业应用。这种显示器用的时间很长，直到1980年代液晶显示器有了广泛的商业应用之后，笨重的CRT显示器才被逐渐取代。尽管电视机在第二次世界大战之前就开始研发，但是真正在西方发达国家普及是1950年代之后的事。到1960年代，电视对于西方的当代艺术和视觉文化已经构成了重要的影响。激浪派的代表人物博伊斯、白南准的一些经典作品都与电视媒介有关。(图2)加拿大学者麦克卢汉的划时代巨著《理解媒介——论人的延伸》，从某种意义上讲就是针对电视媒介对于大众文化的冲击而写的。电视的影响力远甚于电影，因为看电影需要到专门放映电影的公共空间——电影院去观看，而电视则是坐在家里观看。前者时间和地点都受限制，而后者几乎是不受限制的。电视的诞生如同把剧场或电影院搬到了自家的客厅，但是电视所传达的信息又完全超过了电影和剧场，它几乎无所不包，电视剧、新闻、广播、广告等等都被电视媒介所涵盖。

相较而言，电影就其时间和空间的限制，以及其视觉上的特征而言，更接近于传统的剧场和画廊。而电视则是一种全新的、功能强大的综合性的媒体。电视所提供的图像信息流也成为20世纪下半叶视觉文化的重要特征。马歇尔·麦克卢汉认为，电影是一种“娱乐性的幻觉”，而“电视是一种冷性的、观众参与的媒介”。[1]与电影相比，电视所传达的是低强度的、低清晰度的图像，它邀请观众介入，但并不需要像印刷品、电影那样需要观众“深度卷入”。[2]麦克卢汉在其名著《理解媒介》中所持的这种观点，反映了1960年代电视时代刚到来时的特点。事实上，这两种媒介在今天都有了相当大的变化，比如高清晰度的宽屏电视已经在往电影屏幕的方向发展。麦克卢汉所谓的“观众参与”与我们今天所讲的交互设计中的“参与”概念也不一样，前者指的是受众对于媒介的理解方式，后者所强调的则是功能和体验。总的来看，尽管电影和电视有许多不同之处，但是从视觉传达的角度来看，他们传递信息的方式却都是单向的、宣传式的，这是两者之间最重要的共性。事实上，与电影和电视同时存在的各种印刷媒介，如书籍、报纸、杂志、海报、传单等等，其传递的信息也是单向的、宣传式的，而电脑的出现则改变了这一切。

最早的电脑屏幕与电视的屏幕差别并不大，但是出发点却完全不一样。电脑从它诞生开始就是处理信息的一种工具，而电视则是为了宣传和娱乐大众。因为要处理信息，所以电脑就必须把人的操作行为和各种指令考虑在内，因而就具备了越来越多的交互性。而且，从1980年代开始，电脑开始融合了信息处理和娱乐两种功能，并随着全球互联网时代的到来，一跃成为信息时代的技术终端。尤其是苹果操作系统和Adobe公司系列操作软件的研发，电脑成为平面设计和视觉传达的重要工具。这块显示屏既是文字和图像信息处理的操作界面，同时又是我们接受日常生活资讯和娱乐的主要端口。在电脑的屏幕中，进一步综合容纳了传统的印刷媒体和电影、电视的功能，成为一个融汇信息和娱乐的综合的“视窗”。在这个屏幕上面不仅可以显示文字信息，还可以显示图片、影像，并播放音频。更重要的是，使用者可以参与其中，这就要求电脑屏幕上的各种界面设计必须具备交互性的特征。

移动智能手机的出现，事实上是让手机具备了电脑的功能。智能手机本质上并不是手机，而是一台电脑，电脑上涉及信息处理和娱乐的绝大多数功能都可以在智能手机上完成。所不同的是，智能手机的屏幕远远小于电脑。在电脑的屏幕上可以铺陈大量的信息，并可以在网页上延续更多的来自印刷时代的视觉感受。而相同的信息量，如果呈现在小小的手机屏上，人们就无法观看和阅读了。另外，人们在电脑和手机上读取和接受信息的方式也是不同的。电脑虽然有台式也有便携式，但是人们使用电脑的方式地点是相对静止的、固定的，我们可以坐在书桌或咖啡馆打开电脑开启一天的工作。但智能手机的一个重要特点，却是其移动性、碎片性和即时性。通过智能手机获取信息、发送信息，人们不必拘泥于固定的场所和时间，可以在运动、等待和休息的片刻完成对信息的获取。因为收发信息时间段，所以有即时性的特点。智能手机处理信息的移动性、碎片性和即时性，对信息交互设计的方法提出了新的要求，设计师对移动端网格设计系统的理解和应用也在改变。

智能手机之后还出现了一种非常重要的屏幕，就是小平板。大的平板电脑，其意义主要在于节省硬盘的空间，从信息设计和视觉上并无专门讨论的价值。但是以苹果iPad、亚马逊的Kindle为代表的小平板的出现，一定程度上取代了传统意义上的书籍和杂志的概念，并通过电子杂志、App等方式对我们接受信息的方式作出了很大的改观。

2.屏幕的尺寸、分类和比例问题

当我们在讨论数字媒介条件下的网格设计问题时，首先要对网格设计赖以展开的基础，也就是屏幕的多样性和可能性有所了解。我们知道，现代书籍和文字设计展开的基础，也就是纸张的尺寸大小和开本都有固定的比例和数值关系。屏幕的大小和比例关系虽然与纸媒的开本大小有一定的联系，但是，纸张的开本对于屏幕并没有必然的影响，两者之间的差异性也似乎更大。屏幕的尺寸和种类非常多，根据不同的功能需求，可谓千变万化。但是对于中文的信息传播和交互设计来说，主要是在下列三类屏幕上展开的：

1.显示器（monitor）设备的屏幕。其主流的规格一般为：台式机15英寸-29英寸，笔记本11英寸-17英寸。常见的显示器比例为5：4、4：3、16：10和16：9，屏幕依次看起来越来越扁。显示器分辨率的概念是相对的（物理分辨率是绝对的），由于制造工艺和显卡性能的差异，最佳分辨率也有所不同。例如：目前市面主流的22寸显示器，以屏幕比例16：10，分辨率为1920*1200的，显示效果佳。

2.平板（table）设备的屏幕。其主流的规格大约是7-10英寸，其中苹果的平板设备（iPad & iPad mini）屏幕比例为4：3，而谷歌和微软的平板设备（android& surface）屏幕比例分别为16：9和3：2。在交互和使用习惯的设计上，谷歌和微软的平板设备更侧重于水平方向的使用，而苹果产品在水平和垂直方向上的交互和使用都相对多见。例如：目前市面主流的iPad Pro屏幕尺寸为 12.9英寸，分辨率为2732*2048；iPad Air2屏幕尺寸为9.7英寸，分辨率为2048*1536； iPad Mini 屏幕尺寸为7.9英寸，分辨率为1024*768。

3.手持（handheld）设备的屏幕，即以手机为主的终端。这类设备一般为4-6英寸的长方形屏幕，比例一般为16：9，在交互和使用习惯上以垂直方向为主。例如：目前市面主流的苹果手机屏幕尺寸为4.7英寸(iPhone6/6S/7/8)、5.5英寸(iPhone6+/6S+/7+/8+)、5.8 英寸 (iPhone X/XS)、6.5英寸(iPhone XS Max)、6.1英寸(iPhone XR)，分 辨 率 分 别 为 1334*750、2208*1242、2436*1125、2688*1242、1792*828，比例为 16：9、19.5：9。

值得一提的是，屏幕比例问题最早是电影领域提出的。从19世纪末期到20世纪50年代，电影画面的标准的比例一般统称为1.33：1（或1.37：1），即其画面的宽度是高度1.33倍，这种比例也可以换算为4：3（1.33×3：1×3＝3.99：3），就是宽度为4个单位，高度为3个单位。这种比例后来被美国电影艺术和科学学院所接受，并称之为学院标准。为方便将电影搬到电视屏幕，美国国家电视标准委员会后来又决定将电影屏幕的学院标准作为电视的标准比例，于是就产生了4：3的电视比例。上述显示器和平板的屏幕中都有4：3的比例存在，事实上都有其电影和电视屏幕的历史渊源。

图3 响应式网页设计，页面内容可以智能地根据用户行为和设备环境进行相应的布局。

图4 埃米尔·鲁德运用网格设计的西文字体，网格依然是现代字体设计中最常用的工具和方法。

3.屏幕媒介对设计的影响

对于视觉传达设计来说，屏幕媒介的影响体现在方方面面。在此，我们以网格设计系统为例进行初步的讨论。我们知道，印刷媒介所依赖的平面媒介主要是纸张。从纸质媒介到屏幕媒介的转化，有延续性的一面，但更多的是变化。延续性的方面，美国设计师Khoi Vinh曾有一个很有趣的比方，他说屏幕上面的“像素竖直和水平排列，就像一张极为平整的坐标纸——事实上这就是网格。而且，这还是以一个由数学创造的网格。”[3]“屏幕”如同一张“坐标纸”是就一个未经成像的、静态的屏幕而言的，但是屏幕对于视觉设计的重要意义远不止于这张“坐标纸”。充上电、动态的显像屏幕，事实上是一些大大小小的视窗。这张“坐标纸”与在纸上印刷出来的坐标值不同，它是动态成像的，真正与引述媒介的纸张更接近的是在屏幕表面上呈现出来的一张张可以前后上下、拖拉点拽的“页面”。也就是说，观众其实是通过一个个视窗看到了一些大小不等、长短不一的页面。纸媒上的文字和图像是没有点击、拉伸、拖拽等交互功能的，但是屏幕却可以（图3）。所以，我们可以得到两种屏幕和网格的关系：（1）作为像素网格的屏幕，文字和图像屏显信息的可视化，其基础就是屏幕上的像素网格精度。这个问题对于屏显字体的设计开发，以及交互和信息设计视觉化的展开尤为重要。也就是说，几乎所有基于屏显的设计都是在计算屏显网格像素的基础上展开的。（2）作为视窗的屏幕。首先，整个屏幕就是一个相对比较大的视窗，而每一个大的视窗中，又往往包含着许多具有独特内容和功能的小的视窗。这种情形，就像一幅强调幻觉写实的油画中，又描绘了窗户或镜子中的景色，或者在写实的画面上又包含了其他写实的油画一样。所不同的是，屏幕上的每一个视窗都不是静止的平面，而是动态的、混合着声音的且往往具有交互性的屏面。

按照麦克卢汉的理论，纸媒其实构成了屏幕媒介的内容。人们在印刷媒介中也将图像作为视觉传达的要素使用，如手绘插图、木版画、铜版画、石版画和摄影等，它们在历史上的出现是按照技术要求的难度顺序发生的。基于屏幕的视觉传达设计语言，它传达信息的内容和方式有两个主要的来源：一个是基于书籍、报刊等印刷媒介来的，也就是承载文字设计、信息和图像的纸媒，以及在印刷纸媒上所形成的一系列知识资源，其中当然也包括网格系统的设计。另一个，就是人类由于追求逼真的错觉，而形成的艺术再现的历史。也就是从写实性的油画，尤其是大型的历史画、全景画，到电影、电视，最终汇入电脑和手机终端的图像视频语言。在今天的网页端和客户端媒介中，当文字和静态的图片配搭，它主要遗传的是从印刷媒介得来的平面设计语言；而当视频和文字配搭，尤其是当屏幕语言以视频为主的时候，它主要遗传的其实是错觉再现的语言，不过是图像视频代替了油画，而网络平台则代替了美术馆空间而已。从基于屏幕的设计语言的角度来看，其视觉组成主要是来自这两个方面。

因此，当屏幕媒介代替了纸媒的时候，对于设计师来说，其实发生了很大的变化。纸媒上固定的图像，在屏幕媒介中变成了可以移动的、动态的图像；纸媒上的错觉艺术也被屏幕上的虚拟现实或增强现实所取代；纸媒上无法实现的全息三维网格图像，在屏幕媒介中易如反掌；纸媒是安静的、没有声音的，而在新的数字媒体和屏幕媒介中很容易实现音频和视频的对接；除了立体书等极少数纸媒可以实现极为原始的动态和交互体验，绝大多数纸媒的平面设计都无法实现交互，而对于屏幕媒介来说，交互性则是其最重要的特征之一。

传统的平面设计主要是基于纸媒展开的，信息时代到来之后，从上述讨论可以看出，媒介条件显然产生了巨大的变化。那么以纸媒和印刷为基础的网格设计原则，与基于屏幕和数字网络媒体的网格设计是一种什么关系呢？有人认为，包括网格设计在内，印刷时代基于纸媒所形成的设计原则，尤其是瑞士版式设计中所沉淀下来的一些经典的、理性的现代主义设计法则在信息时代仍旧有重要的影响力和参考价值。希拉里·肯纳（Hilary Kenna）在其关于埃米尔·卢德和屏显文字设计（screen typography）的研究中就认为，卢德所确立的包括网格设计在内的现代主义美学范式和方法论对屏显文字设计仍旧具有重要的指导意义和参考价值。因为埃米尔·鲁德的研究是从文字设计的基本原理和法则出发的，他讨论的基本问题和方法论并没有过时。[4](图4)但也有人认为，以纸媒印刷为基础的网格设计原则与互联网上所需要的网格设计相差甚远。Khoi Vinh就认为，纸媒上所形成的平面设计原则在互联网时代日益显露出了它的局限。他指出了许多纸媒和网络媒介对设计要求的不同，尤为重要的比如：纸媒的书籍、杂志、报纸等，开本、字体的选择、分栏和行在网格设计系统中确定之后，所有的平面设计的要素都是“死”的，不能移动的；在屏幕媒介上则不一样，在以前的纸媒网格系统中在确定好之后不能变动的东西几乎都是可以变动的，后者与网格系统之间的关系是一种“移动的对应”，而不是“静止的对应”关系。再如，印刷纸媒上的设计语言，其设计方法依赖于其“宣传性”，是以视觉的方式向观众进行演讲和说服；而在互联网和数字媒体设计中，设计方法所依据的是“交互性”，与前者的“宣传”不同，后者是一种“对话”模式，是朋友或熟人之间的对话和交流。“宣传式的设计”和“交互式的设计”这两种交流方式，尽管彼此间有相似之处，但差异也相当明显。这种差异和变化使设计师对网格系统的认识必须进行改变。[5]

4.结语

显然，从“平面”到“屏面”的媒介转型，已经重新塑造了我们对于视觉传达设计语言的认知。在数字技术蓬勃发展的前提下，“屏面”媒介自身的呈现方式近些年也有许多新的变化。本文所讨论的对象仍旧限定在“屏幕”范畴内，因为我相信未来相关领域的发展在很大程度上仍将以此为基础。而在过去的几十年中，从纸媒到屏幕的媒介转型对视觉传达设计语言所构成的各种影响，则是设计师和设计研究者首先应该关注的一个重要问题。本文最终只是讨论了媒介转型对于网格设计的影响，也就是视觉传达中的秩序问题在媒介转型前后的变化，许多问题还有待更深入的讨论，在此权作抛砖引玉。

注释：

[1]马歇尔·麦克卢汉：《理解媒介——论人的延伸》，北京：商务印书馆，第350、384页。

[2]同[1]，第380页。

[3]Khoi Vinh：《秩序之美：网页中的网格设计》，侯景艳译，北京：人民邮电出版社，2011年，第9页。

[4] Hiary Kenna, “Emil Ruder: A Future for Design Princi ples in Screen Typography” , Design Issues， Winter 2011,Vol. 27, No. 1, Pages 35-54.

[5]同[3],第32页。