從“平面”到“屏面”：媒介轉型與網格設計語言之變

媒介轉型；紙媒；屏幕；平面設計；網格設計

今天，我們已經置身于一個數字媒介的時代，回望之前二三十年中國平面設計的發展，幾乎所有的從業者都會感嘆，時代變化之快完全超乎人的意料。當我們對基于紙媒的、現代主義設計的研究還只是一知半解、懵懵懂懂的時候，又必須迅速地投入到對于新興的基于屏幕和數字媒介的設計方法的新的研究和探索。毫無疑問，我們現在正處在這個劇烈的變化之中。需要思考的問題也非常多，比如屏幕語言和數字媒介傳播的特點是什么？傳統的平面設計主要是基于紙媒展開的，那么以紙媒和印刷為基礎的設計原則，與基于屏幕和數字網絡媒體的設計是一種什么關系？這些都是我們正在面臨的問題，本文將結合理論與實踐對這些問題進行初步的討論。

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頁。