人類的美術(shù)創(chuàng)作經(jīng)歷了從紙面的二維走向三維、從“模仿自然”到遵從主觀意識(shí)自由表達(dá)的歷程，人機(jī)界面設(shè)計(jì)也經(jīng)歷了擬物、扁平以及更多的設(shè)計(jì)風(fēng)格的迭代演化。是什么推動(dòng)著藝術(shù)家和設(shè)計(jì)師們不斷探索規(guī)則、學(xué)習(xí)規(guī)則，進(jìn)而挑戰(zhàn)規(guī)則？在拆解手腳架的過(guò)程中，我們將愈加貼近創(chuàng)作的本質(zhì)。

一、從平面到三維：幾何透視的建立

人類最早開始美術(shù)創(chuàng)作之時(shí)，沒有“透視”的概念。

在古埃及的繪畫作品中，我們看到的通常是和肉眼看到不一樣的人體，側(cè)面的頭、正面的身體和側(cè)面的腳，這種繪畫方式被后世定義為“正面律”。之所以會(huì)出現(xiàn)這樣統(tǒng)一而怪異的繪畫方式，是因?yàn)楣虐＜八囆g(shù)大多服務(wù)于權(quán)力和宗教，繪畫常用于墓葬之中。那時(shí)的人們相信靈魂永生，亡靈在通過(guò)冥界的考驗(yàn)之后會(huì)重新與身體結(jié)合從而轉(zhuǎn)世，這就要求繪畫精準(zhǔn)記錄人體各個(gè)部分的樣貌。畫家為每個(gè)部位挑選最能呈現(xiàn)它完整特征的角度，用這個(gè)角度將這部分人體完整地呈現(xiàn)在平面上，這有利于轉(zhuǎn)世時(shí)的復(fù)刻。

圖 1 : 古埃及《亡靈書》

這時(shí)，畫家作畫不依賴于真實(shí)世界的觀察，而是畫他們腦中“知道”而不是眼睛“看到”的形象。

到了古希臘和古羅馬時(shí)期，繪畫作品開始轉(zhuǎn)向遵從視覺規(guī)律。

有一種說(shuō)法是：透視法的初步探索起源于古希臘的戲劇布景，藝術(shù)家們發(fā)現(xiàn)在布景中用近大遠(yuǎn)小的方式可以使平面布景有真實(shí)場(chǎng)景的縱深感。

同時(shí)，當(dāng)時(shí)的社會(huì)思想環(huán)境也是滋養(yǎng)透視法探索的肥沃土壤。亞里士多德提出藝術(shù)是一種「制作的知識(shí)和技能」，于是人們將藝術(shù)與制造技術(shù)等同，開始了符合實(shí)際的數(shù)理研究。蘇格拉底和柏拉圖認(rèn)為繪畫和雕塑之類的藝術(shù)是「對(duì)自然的模仿」，繪畫作品的表現(xiàn)力求于自然一致。

希臘紅繪陶瓶《辭行出征的勇者》中出現(xiàn)了人物一正一側(cè)的腳，正面腳的刻畫相對(duì)側(cè)面腳要縮短了許多。這種在畫面中將縱向物體以適當(dāng)?shù)谋壤s短，以符合實(shí)際視覺效果的方式，叫做“短縮法”。至此，意味著繪畫中空間透視的雛形已經(jīng)產(chǎn)生。

圖 2 : 希臘紅繪陶瓶《辭行出征的勇者》

然而歷史進(jìn)行到中世紀(jì)，繪畫的透視技法似乎出現(xiàn)了倒車現(xiàn)象。在中世紀(jì)的一些壁畫中，存在變形的物品、拉長(zhǎng)的身體和不平的地面。

這是因?yàn)橹惺兰o(jì)的藝術(shù)服務(wù)于宗教神權(quán)，本質(zhì)上是宗教體驗(yàn)而不是人的真實(shí)體驗(yàn)，所以中世紀(jì)早期的繪畫常常是重要的神最大，其他人物逐漸縮小。與此同時(shí)，由于宗教需要廣泛而快速的傳播，扁平、模版化、忽略細(xì)節(jié)的繪畫就更加快速易得。透視法和現(xiàn)實(shí)主義在中世紀(jì)是與畫家的創(chuàng)作目的相違背的，畫家也就沒有了繼續(xù)探索如何還原真實(shí)世界的動(dòng)力，這與古埃及藝術(shù)相似。

中世紀(jì)后開始文藝復(fù)興，社會(huì)開始恢復(fù)古希臘人本主義、崇尚自然科學(xué)，而藝術(shù)則重新開始遵從科學(xué)的、真實(shí)的世界。

喬托師承中世紀(jì)畫家契馬布埃，卻不愿臨摹老師的作品，他更喜歡觀察身邊的世界、描繪真實(shí)的自然。宗教畫從喬托開始出現(xiàn)對(duì)透視的探索，比較 3 幅圣母圖可以看出，喬托《寶座上的圣母》明顯更具有立體空間效果。畫中的人物用重疊關(guān)系來(lái)表示遠(yuǎn)近，寶座的線條走向也具有透視的效果。

圖 3 : 左：契馬布埃《圣母》，中：杜喬《圣母》，右：?jiǎn)掏小妒ツ浮?/span>

而如今廣泛使用的幾何透視法，它的正式發(fā)明要?dú)w功于意大利建筑師布魯內(nèi)萊斯基。布魯內(nèi)萊斯基一手持洗禮堂的素描稿，一手持鏡子，透過(guò)小孔比對(duì)鏡子中自己的素描圖與真實(shí)建筑，從而確定自己稿中的透視關(guān)系是否正確。

布魯內(nèi)萊斯基指導(dǎo)他的朋友馬薩喬完成的《圣三位一體》教堂壁畫。這幅畫巧妙運(yùn)用了一點(diǎn)透視原理，將畫面的消失點(diǎn)與站在壁畫前觀看者的視平線重合，視覺得以向畫面更深處拓展。觀看者駐足觀賞，會(huì)感到面前不是一面墻，而是一個(gè)逼真深邃的空間。

圖 4 : 馬薩喬《圣三位一體》

從此之后，文藝復(fù)興的畫家們開始不斷地運(yùn)用并優(yōu)化繪畫的透視法。達(dá)芬奇在幾何線性透視的基礎(chǔ)上，進(jìn)而提出了隱沒透視和空氣透視。隱沒透視與物體的清晰度有關(guān)，越遠(yuǎn)的物體，明度和清晰度越低，看上去會(huì)越模糊。空氣透視與色彩有關(guān)，因?yàn)橛猩矬w的光線通過(guò)空氣介質(zhì)傳到人類的眼睛，那么越近的物體色彩的飽和度就越高，對(duì)比度也更強(qiáng)烈。相反較遠(yuǎn)的物體色相就會(huì)越來(lái)越模糊，飽和度和對(duì)比度都會(huì)減弱，并且因?yàn)樘炜窄h(huán)境色的影響，色調(diào)上會(huì)偏向青藍(lán)紫等冷灰色調(diào)。達(dá)芬奇的畫作《巖間圣母》和《蒙娜麗莎》都可以看到，遠(yuǎn)景輪廓模糊且偏向于藍(lán)灰色調(diào)，讓觀賞者仿佛能感受到畫中的空氣和環(huán)境的縱深。

圖 5 : 左：達(dá)芬奇《巖間圣母》，右：達(dá)芬奇《蒙娜麗莎》

文藝復(fù)興時(shí)期學(xué)院派畫家們格外強(qiáng)調(diào)透視，精準(zhǔn)的透視關(guān)系讓寫實(shí)主義達(dá)到了巔峰。自此，藝術(shù)家們擁有了將三維世界搬運(yùn)到二維紙面的方法，藝術(shù)模仿自然的理想得以實(shí)現(xiàn)。

二、從理性到感性：反常規(guī)透視的興起

時(shí)間進(jìn)行到十七世紀(jì)，社會(huì)的思想開始發(fā)生轉(zhuǎn)變。笛卡爾「我思故我在」、黑格爾「美是理念的感性顯現(xiàn)」觀點(diǎn)的提出開啟了人們對(duì)客觀世界以外的自我意識(shí)的關(guān)注，藝術(shù)家們開始轉(zhuǎn)向表達(dá)真實(shí)世界的客觀存在加上精神世界的感受。

十九世紀(jì)工業(yè)革命帶來(lái)了生產(chǎn)方式的巨大變革，文學(xué)藝術(shù)的革新也應(yīng)運(yùn)而生。一批年輕的藝術(shù)家開始質(zhì)疑古典主義單純復(fù)刻自然的千篇一律，嘗試以自己的感受出發(fā)去描繪世界，例如印象派代表作大多突出對(duì)色光和空氣氛圍的描繪而弱化形象的描繪。

后印象派藝術(shù)家塞尚，質(zhì)疑謹(jǐn)遵透視法的畫作并不是人類雙眼真實(shí)所看見的，被認(rèn)為是“第一位用雙眼作畫的藝術(shù)家”。

塞尚主張人們觀察世界萬(wàn)物時(shí)，使用兩只眼睛看到的畫面是不同的，只是最終人腦將二者合二為一成為了一幅畫。另一方面，人們看一個(gè)物品通常不會(huì)靜止不動(dòng)地觀察它，而是左右轉(zhuǎn)轉(zhuǎn)或是伸出頭去細(xì)細(xì)觀察，不斷變換動(dòng)作去尋找合適的觀察角度。那么，單一靜止的視角作畫就違背了生活中人們觀察世界的真實(shí)感受。

塞尚的多幅靜物作品都有類似的特征，例如水罐的身體部分是平視的角度，而罐口則是俯視時(shí)的樣子。塞尚認(rèn)為，這兩個(gè)角度分別是觀察這兩部分最合適的角度。又例如塞尚作品的桌面通常不符合水平面的透視，看起來(lái)已經(jīng)傾斜到桌上的物品快要掉下來(lái)。塞尚認(rèn)為這樣更適合于展示桌面上所有物品的全貌，他期望將畫中物體的信息最大化傳遞給觀眾。這一表達(dá)方式也意味著繪畫創(chuàng)作由模仿自然轉(zhuǎn)向藝術(shù)家主觀意識(shí)下世界的的樣貌。

圖 6 : 塞尚《有蘋果和桃子的靜物》

塞尚作為傳統(tǒng)透視法的學(xué)習(xí)者與挑戰(zhàn)者，在前人建立的理性透視世界中打破秩序、更加遵從主觀視覺感受，倡導(dǎo)多視角和整體視覺信息傳達(dá)最大化，成為從現(xiàn)實(shí)主義、印象派邁向立體主義和抽象派的橋梁。

其后立體主義、抽象主義和超現(xiàn)實(shí)主義的藝術(shù)家們都受到塞尚主張的深遠(yuǎn)影響。像是畢加索《三個(gè)舞者》中那不成比例的巨大手掌，正是反映了舞者舞動(dòng)的雙手吸引人們目光的真實(shí)感受。而達(dá)利《十字架上的圣約翰基督》中同時(shí)存在“兩點(diǎn)透視的人間海灘“和“三點(diǎn)透視的基督”，畫家想要傳達(dá)觀者身處人間的平視感受，和超越神明高度去俯視基督獨(dú)特角度。

圖 7 : 左：畢加索《三個(gè)舞者》，右：達(dá)利《十字架上的圣約翰基督》

而后到了抽象主義，最后一點(diǎn)「模仿自然」從歷史舞臺(tái)中退出，繪畫變?yōu)樗囆g(shù)家用色彩和符號(hào)表達(dá)意識(shí)的自由創(chuàng)作。

有人評(píng)價(jià)塞尚是“帶著枷鎖艱難探索著自然、世界和藝術(shù)本身”。自他之后，藝術(shù)創(chuàng)作從“真實(shí)地再現(xiàn)自然”進(jìn)階到“無(wú)需再現(xiàn)自然，而是代表自然”，藝術(shù)家們開始追求更加符合心理觀察的視覺效果。

三、從紙面到界面：UI 設(shè)計(jì)風(fēng)格的變革

不止在紙面，透視在人機(jī)界面中也經(jīng)歷過(guò)一系列發(fā)展與變革。早期計(jì)算機(jī)的界面設(shè)計(jì)受制于當(dāng)時(shí)的屏幕分辨率，只能使用一些扁平化的界面和和圖標(biāo)。

屏幕顯示技術(shù)快速發(fā)展后，留給設(shè)計(jì)的發(fā)揮空間也變大。蘋果在 iOS 6 推出擬物風(fēng)格的界面設(shè)計(jì)，模擬現(xiàn)實(shí)世界物品的紋理、陰影、高光等，致力于復(fù)刻現(xiàn)實(shí)世界的透視體驗(yàn)。這一設(shè)計(jì)風(fēng)格大大降低了使用者的學(xué)習(xí)成本，精美的視覺表現(xiàn)也風(fēng)靡一時(shí)。

隨著電子產(chǎn)品承載信息的需求越來(lái)越大、更新速度越來(lái)越快，人們對(duì)于界面中仿物理世界的裝飾元素開始有所質(zhì)疑。首先是精美繁復(fù)的擬物化設(shè)計(jì)過(guò)于吸引眼球，使得用戶的視覺焦點(diǎn)變得分散，不能專注于信息的傳達(dá)。其次是細(xì)節(jié)滿滿的擬物化設(shè)計(jì)風(fēng)格成本過(guò)高，應(yīng)對(duì)高速發(fā)展的互聯(lián)網(wǎng)需要一個(gè)更加高效簡(jiǎn)潔的設(shè)計(jì)風(fēng)格。2013 年蘋果發(fā)布的 iOS 7 系統(tǒng)使用了全新的扁平化設(shè)計(jì)，去掉了紋理、陰影等 3D 元素，達(dá)到信息優(yōu)先、效率優(yōu)先的目的。

圖 8 : 左：iOS 7 界面，右：iOS 6 界面

在不久之后的 2014 年，Google 發(fā)布的 Material Design 借鑒了紙張和墨水，在完全抽象扁平的基礎(chǔ)上增加了燈光、投影、加速度等隱喻元素，讓界面一定程度上模擬物理世界的紙張。Material Design 中最特色的 z 軸設(shè)計(jì)規(guī)范，在扁平化的界面里創(chuàng)造了立體空間，從而將界面分出不同層級(jí)。在 z 軸的空間中，主要通過(guò)投影來(lái)表達(dá)不同元素之間的相對(duì)位置，通過(guò)相對(duì)位置拉開平面與卡片、彈窗和不同級(jí)別按鈕之間的層次，增強(qiáng)了界面的可讀性，讓用戶對(duì)內(nèi)容的劃分一目了然。

圖 9 : Google Material Design

每一種設(shè)計(jì)風(fēng)格的誕生和發(fā)展常與社會(huì)、思潮、技術(shù)的發(fā)展密不可分。而現(xiàn)下的界面設(shè)計(jì)更多展現(xiàn)出擬物、扁平以及不同程度融合的方式。

例如現(xiàn)有相機(jī) app 的界面設(shè)計(jì)，就有極致擬物和極致扁平兩種方向。當(dāng)下流行的一些仿膠片、拍立得等實(shí)體相機(jī)拍照效果的 app，采用了模擬真實(shí)相機(jī)的擬物化界面設(shè)計(jì)。極致仿真紋理、光影，甚至操作的震動(dòng)反饋和模擬拍立得和膠片機(jī)延遲出片的效果，都致力于給用戶使用真實(shí)相機(jī)的體驗(yàn)。這類 app 通常功能比較簡(jiǎn)單，界面不需要容納大量的信息和操作，所以采用擬物化的設(shè)計(jì)并無(wú)不妥。而擬物元素的運(yùn)用也恰好滿足了此類用戶想要模擬使用機(jī)械相機(jī)的情感需求。

正與之相反的是我們?nèi)粘８l繁使用的手機(jī)原生相機(jī)，這些 app 使用幾乎全扁平的界面設(shè)計(jì)，無(wú)任何非必要元素的干擾。這類相機(jī) app 的應(yīng)用場(chǎng)景通常是日常快速拍照記錄，或是相對(duì)更依賴參數(shù)調(diào)整的拍攝黑暗環(huán)境、燈光復(fù)雜環(huán)境等等場(chǎng)景。這時(shí)就需要一個(gè)能承載更多信息和操作、簡(jiǎn)潔易懂的界面，那么扁平的設(shè)計(jì)是這類場(chǎng)景最適合的方式。

圖 10 : 上：Nomo CAM ，下：iOS 相機(jī)

擬物、扁平以及更多的設(shè)計(jì)風(fēng)格，應(yīng)社會(huì)、思想、技術(shù)的發(fā)展而生，各有優(yōu)劣、各司其職。在追求效率、信息之上的場(chǎng)景，扁平無(wú)疑給繁雜的信息騰出了空間和人力成本；而擬物的設(shè)計(jì)則帶給用戶更豐富的情感體驗(yàn)。交互界面的邊界和可能性，是更加包容和多樣化的。如同繪畫風(fēng)格的發(fā)展歷程，技法和風(fēng)格在發(fā)展成熟后，靈活的組合選用和主觀感性的調(diào)整讓創(chuàng)作和設(shè)計(jì)更靈動(dòng)出彩。

寫在最后

從紙面到界面、再到三維透視的物理世界，古往今來(lái)的藝術(shù)家和設(shè)計(jì)師們不斷探索規(guī)則、學(xué)習(xí)規(guī)則，然后開始挑戰(zhàn)規(guī)則、變革規(guī)則。透視法僅僅是眾多繪畫技法中的一種，它們是給予幫助的工具而非束住手腳的重重障礙。

如果說(shuō)繪畫技法和設(shè)計(jì)風(fēng)格是建筑高樓的手腳架，那么我們?cè)谝蕾囁鼘⒒A(chǔ)結(jié)構(gòu)完工后，就應(yīng)當(dāng)拋棄手腳架，開始因地制宜的設(shè)計(jì)或是遵從感官的創(chuàng)作。創(chuàng)作應(yīng)當(dāng)是賞心悅目的、信手捏來(lái)的，手中的工具越多，施展起來(lái)應(yīng)會(huì)更加自信和自由。

參考文獻(xiàn)：

1. 《The History of Perspective》
2. 《Op Art History Part I: A History of Perspective in Art》：http://op-art.co.uk/history/perspective/
3. 《模仿、抽象與仿真》：https://www.cuhk.edu.hk/ics/21c/media/articles/c058-200003020.pdf
4. 《幾何的觀看與心理的觀看：“反透視”中隱藏的藝術(shù)秘密》
5. 《蘋果：人類精神的醒目標(biāo)志》：https://www.zgnfys.com/m/a/nfms-36025.shtml
6. 《Why Flat Design is not Anti-skeuomorphism》
7. Material Design：https://m2.material.io/design/environment/elevation.html

歡迎關(guān)注作者微信公眾號(hào)：「We-Design」