英文原文;Art and the Web 編譯:surestar@yeeyan
作為三維物件,形體在Web設計中運用並不常見,但有不少方法可以在二維的Web頁面上創造立體縱深感,這樣可以引發人們更加強烈的情緒反應。
形體簡介
形體正如形狀一樣,不過它不是二維,而是三維。與形狀有別的是,形體無需藉助其他元素或原理,便足以獨立界定自身。空間是此項規則中的例外。
例如,一個形體可佔據一定體積的空間,形體剖分那片空間多少,空間就剖分該形體多少。換而言之,既可將形體看作是一定正量空間的佔據,也可將形體看作是稀薄的空氣裡鑿出來的,以包圍其的負空間來界定。下面就是正式的定義。
“形體是存在於三維空間裡的幾何圖形。”形體能夠引發強烈的情緒反應,這是因為它與我們日常的觸覺體驗緊密對應。例如,“按鈕”就總比連結更加誘人,因為按鈕在現實世界裡實際存在。然而,迄今為止,在web的歷史上,形體並未能夠發揮出形狀那般的影響,這主要可能歸因於web媒介的二維特性。
維倫多夫的維納斯(約公元前24000年 — 公元前22000年)
運用web技術,我們嘗試在2D畫布上繪製漂亮而實用的圖畫,儘管某些場合下形體確有其作用,但隨計算曆史發展而來的視覺隱喻,還是更偏愛“視窗”和平面;實質上就是形狀。因此,如果web是嚴格受限於2D空間的,我們又何從利用形體的情緒反應呢?幸運地是,過往的數個世紀裡,為解決這一困境,藝術家與科學家已經完成了許多卓有成效的工作。
縱深感
在扁平的畫面上,我們確實無法為網站訪客創造可以有形進入和探索的3D物件或環境。也許,終有一天,諸如擴增實境和全息攝影之類的技術發展能為我們的日常生活帶來曉暢易懂、富於感情的3D體驗,但目前我們還是著眼於現在吧。有些技術可用來創造縱深感的錯覺,一般而言,它們可以毫無限制地互相結合著使用。
透視法
關於透視法的詳細解釋,這已經超出了本書的範圍,不過,可將其視作重疊面、透視收縮及縮小遠端物體比例之類創意的集大成者。從古至今,不少人都對透視法的發展作出過貢獻,但通常認為,現代幾何透視法的發明者為布魯內萊斯基,這是一位生活在15世紀的義大利文藝復興藝術家。
透視法背後的基本思想是,在水平面上,物體的每條直線都會聚為一個或多個消失點。同樣,由於媒介的2D特性,透視法發揮到極致的情形十分罕見。只有一些非常新穎的web設計才會嘗試將頁面元素推送到畫面遠端。
烏切諾《花瓶的透視法習作》(1450年代)
光照
光照是另一種有助於創造縱深感的手段。與透視法相比,這是一種創造縱深感的甚為普遍的技術,許多現代設計都或多或少以光照作為特色。通過將細微的漸變和陰影效果應用於頁面元素,可以給網站訪客留下這樣的感覺:某些頁面元素微微浮現於畫布之上。
值得注意的要點在於光照的方向。在設計中運用光照時,關鍵是所有頁面元素都要有協調一致的加亮和陰影效果。再沒有比從各個方向投射陰影更能破壞縱深感錯覺的了。通常使用單光源也是個好辦法,因為無論從技術上還是美學上,要取得多光源效果都非常複雜。
大氣透視法
你是否在看遠處的山峰或摩天樓時,留意到有一層淺灰的薄霧環繞?這就是所謂的大氣透視法或空氣透視法。隨著觀者與物體間的距離增加,明暗對比會降低。這種現象之所以發生,是因為太陽直射光線在經過大氣分子時會發生散射,這會增加遠處物體的環境光,消除暗影。
與透視法一樣,這種技術在實踐中罕見。雖然大氣透視法與透視法沒有直接聯絡,但兩者都不常用,這是因為它們都依賴於深空間的存在。並不是說web設計完全不能成功運用這些技術;只是用起來面臨著巨大挑戰罷了。
反射
反射是許多設計師的致命傷,因為即使反射不能為設計增輝,設計師卻還是常常使用它們。不過,頁面元素下方的精細鏡面反射,能讓該元素看去似乎穩處於空間之中。某些參差不齊的頁面元素用到反射時,可抵消純色或軟漸變,使得縱深感更加明顯,因為看去似乎每個元素與視點的距離都各不相同。
視差
這是創造縱深感的一種非常有趣的手法,在靜態媒介如繪畫中是找不到的。運用一些精巧的CSS,可使頁面前景裡的元素比背景裡的元素更快掠過。這需要動畫,或一些與使用者的互動,比如滾動顯示或變換瀏覽器視窗大小。這是一項新穎卻無甚實用功效的技術,不過偶爾整些新奇玩意也挺不錯的。
弗里德里希《雲海上的漫步者》(1818)
浮雕
大多數人一想起雕塑,就會想到獨立式大衛雕像以及其他經典圓雕作品。這些型別的雕塑不附著於任何牆體,它們可從任何角度觀看。然而,web頁與另一種雕塑型別——所謂的“浮雕”非常相似。淺浮雕的雕刻物件極為扁平,並緊緊依附於背景之上。
剪斷生命之線的阿特羅波斯,淺浮雕作品
要將淺縱深感賦予web頁,最好的一個方法是將頁面看作一座略微三維的淺浮雕雕塑。如此一來,怎樣應用CSS漸變和盒式立體陰影的問題便可迎刃而解,因為當以這種方法來想象一個站點時,就很容易建立起光線應怎樣照射頁面元素的心理模式。
波丘尼《空間連續性的唯一形體》(1913)