贊！web設計之路！網絡視覺藝術發展史概覽

“作為設計師，這篇文章一定要看看，非常棒的總結！幫您理清web視覺的發展歷程，強力推薦！”
1822年查爾斯·巴比奇（Charles Babbage）發明了第一臺計算機（差分機），宣告了新一輪信息革命的開始。也許連巴比奇自己都沒想到，計算機的問世會如狂風暴雨一般，幾乎改變了未來 200年間人們的生活方式。到如今，計算機已成為了人們工作、學習、生活等方面不可或缺的工具，如同人類的左膀右臂一般，舍之不去。

推薦關注作者微博@TANX_譚雄 原文：http://tanxdesign.com/?p=84

藝術，作為人類的高級情感需求，幾乎充斥著世界的每個角落，從古至今皆是如此，計算機也不例外。從計算機圖形操作界面發明那天起，網絡視覺藝術便隨 之誕生，并在之后的幾十年間一直伴其左右，不斷變化，不斷發展。如同其他藝術流派一樣，網絡視覺藝術有他自己的軌跡，也有屬于他自己的發展歷史。藝術的發 展跟時代的發展是密不可分的，網絡視覺藝術的每一次創新也幾乎都伴隨著一次計算機技術的變革，每一種藝術風格也都是應時代而生，因此必然有其適用環境和局 限性。網絡視覺設計師在應用每一種風格的時候，必須了解風格的前世今生以及其背后的故事，只有這樣，藝術與功能才能相得益彰，而不至讓視覺淪為表面，變得 平庸。

一、? 網絡視覺藝術發展史概覽

200年，讓美國從荒蠻土著變成了世界霸主，也讓計算機從原始萌芽發展到如日中天。歷史總是讓人興奮而感慨，興奮每一件新事物的崛起，感慨萬物終將 衰亡。想來我們是無緣見到互聯網技術的終點了，慶幸的是我們經歷了他的成長與繁華，同樣，我們也見證了網絡視覺藝術的發展。而作為設計師，我們正書寫著網 絡視覺藝術的歷史，既是要創造未來，那便得先了解過去。

1.1 網絡視覺藝術的起源

如前面所說，網絡視覺藝術的每一次變革都是起源于技術的變革。對于PC業界來說，最重要的一項發明也許是1981年IBM PC的推出，但對于網絡視覺藝術來說，最具革命性的一次創新應該是1984年蘋果Macintosh的發布，因為Macintosh首次實現了圖形界面操 作系統，并且第一次讓個人計算機具備了多媒體處理能力，這為網絡視覺藝術設計提供了最基礎的平臺。

圖1.1.1：Apple Macintosh

另一個具有同樣劃時代意義的發明是Internet，這個萌生于1969年美國軍方（Arpanet）、90年代初普及到全世界的網絡，讓我們今天做的一切成為可能。也正是基于圖形界面和Internet，網絡視覺藝術才真正產生。

然而網絡視覺藝術對于當時的設計師來說仍然只是一塊看得見、吃不著的餅，雖然平臺已經成型，但是缺少設計的工具和技術支持，所以很多當時的界面在如 今看來顯得比較粗糙。1991年8月，Tim Berners-Lee發布了史上第一個網站，這個網站是由純文本構成的，目的是試圖告訴人們什么是互聯網。

圖1.1.2：第一個網頁（1992）

1994年，萬維網聯盟形成（W3C），他們將html確立為網頁的標準標記語言。早期的Html能夠實現一些基本的標簽，如標題 （<h1>，<h2>…）、段落（<p>）以及圖片（<img>）等，這些標簽能夠讓網頁展示基本的信 息，也能實現基本的排版布局。值得一提的是，當時的頁面雖然簡陋粗糙，但卻總是能清晰地提供給用戶有價值的信息。盡管如今的設計華麗而多變，盡管我們每天 高呼用戶體驗，但很多人卻總是連這些最基本的設計宗旨都不遵守。

圖1.1.3：Yahoo!（1996）

圖1.1.4：Altavista（1996）

隨后表格（Table）布局的出現讓設計有了較大的進步，同時期一些所見即所得的設計軟件的出現也讓這項技術變得相對容易。

圖1.1.5：Yahoo!（2002）

圖1.1.6：Altavista（2002）

從某種程度上來說，這個時期是網絡藝術設計與功能結合的較好的一個時期，通過表格布局，設計師能夠實現比較漂亮和規整的 布局，同時限于當時的技術，不會有太多的視覺元素干擾內容，信息的可讀性非常強。著名用戶體驗書籍《don’t make me think》就是Steve Krug于2000年編寫的，這本書里講到的設計理念直到今天仍然非常適用。

從第一張網頁的誕生到表格布局的風靡，這個階段我們可以認為是網絡視覺藝術的萌芽期或者發源期，網絡視覺的基礎和核心在這個階段基本成型。接下來的幾年間，網絡視覺藝術的發展速度則有些超乎想象，風起云涌的江湖時代正在來臨。

1.2 網絡視覺藝術的發展

在這個群雄爭霸的時期，首先崛起的當是Flash技術，Flash出生于1996年，最初被稱為 FutureSplash Animator，然后是 Macromedia Flash，后來被Adobe公司收購，改名 Adobe Flash。Flash讓動態交互網頁成為可能，一時間各種網頁動畫效果五花八門，層出不窮，設計師們憋了好久的創意集體爆發，且這一潮流經久不衰。

到21世紀初，flash的一大競爭對手登上了舞臺，它就是CSS（Cascading Style Sheet），其實CSS 1早在1996年就誕生了，只是一直被忽視，直到21世紀初才真正被人們了解和接受。CSS2.x具備太多flash所不具備的優勢，比如內容與表現分 離、網頁文件體積小等，因此很快被世人青睞。而2004年web2.0的誕生無疑讓CSS更加炙手可熱，一時間，以HTML+CSS為核心表現手段的 web2.0風格風生水起，同時期Javascript腳本語言等彌補了CSS在動態交互方面的不足，讓這場戰局變得更加有趣。讓我們一起來欣賞一下以 Flash、Html4.01/XHtml+CSS2、Javascript等技術為核心的網頁作品：

Flash篇

圖1.2.1 ?2Advanced

知名交互設計公司2Advanced的網站首頁，相信很多人都知道這個設計團隊，他們每一次首頁的改版都設計的非常炫，而且細節十足，絕對是flash設計師參考學習的典范。

圖1.2.2 蘋果樹下

還記得那些年的蘋果樹下嗎？精致的場景，可愛的畫風也可謂風靡一時。

圖1.2.3

圖1.2.4

使用flash做虛擬現實場景也是非常流行的表現手法，設計師精細的場景表現，幾乎可以以假亂真。

CSS篇

圖1.2.5?CSS ZEN GARDEN

你可以不記得所有CSS網站，唯獨不能忘記CSS ZEN GARDEN,這個網站為用戶架構了一個完美符合W3C標準的html結構，設計師可以自己設計CSS文件來修改樣式，100%做到內容與表現分離。相信這個網站一定幫到了不少人，至少在很大程度上幫助到了筆者。

圖1.2.6 博客風潮

你是否擁有或者曾經擁有一個屬于自己的blog？作為web2.0的完美詮釋者，博客風靡了相當長一段時間，而強大的博客程序Wordpress也 為廣大blogger提供了一個非常好的平臺，可以說WP成就了一個獨立的CSS風格。直到twitter的出現，博客的統治地位才被掀翻。

圖1.2.7 水晶圖標

這張圖是否能讓你想起一個時代，一個水晶的時代？21世紀初的幾年間，伴隨著flash的日趨強大，水晶風格的設計相當流行，不過沒過多久，人們就膩味了這種過于華麗的風格，隨即將其打入冷宮。

這就是Flash與CSS2.x時期的主流設計，是否有種華麗麗的感覺？然而人們沒有注意到的是，在這種繁華的背后，一股暗流正在悄然涌動，那就是 移動互聯（Mobile Internet），當時的人們可能做夢也沒想到，移動互聯將在未來短短的幾年間顛覆互聯網的格局。這一變化發生在2007-2008年，當時3G技術開 始流行，各家手機生廠商陸續投入3G手機的研發。2007年6月29日，第一代iPhone上市，Apple發布的這款手機讓手機行業發生了天翻地覆的變 化，甚至讓曾經風風火火的Motorola最后不得不投靠google。

圖1.2.8 iphone 5

伴隨著3G技術和3G設備的成熟，一種被稱為UI風格的設計形式日趨主流，這種風格最初是用于移動界面或者電腦軟件，后來被遷移到了Web端。

圖1.2.9 手機UI界面

圖1.2.10 軟件UI界面

圖1.2.10 UI風格Web界面

UI風格主要是通過很強列的質感來表現內容，這對觸摸界面來說非常有優勢，能帶給用戶很好的指尖操作體驗。

2001-2010這十年網絡視覺的江湖風生水起，群雄爭霸，這個時期可以歸結為網絡視覺藝術的發展期，相信我們多多少少都有親身經歷，而我們正在譜寫的，則是網絡視覺藝術的第三個階段。

1.3 網絡視覺藝術的現狀

一段喧囂過后總是一段平靜，經歷了這么長時間的浮華，人們漸漸累了，于是簡約成了大多數人的追求，人們開始思考哪些是必須的，哪些是完全不必要的？有沒有更簡單的表達問題的方法？

人們再也受不了曾經UI風格、水晶風格、寫實風格以及酷炫flash的華麗，那種甜到膩的感覺讓大家開始反胃。因此設計師們開始做減法，首先創造了微質感風格，微質感是對之前時期的良好過渡，讓人們對即將到來的其他風格有一個緩沖過程。

圖1.3.1 微質感風格web界面

顧名思義，微質感是對質感輕微的表現，一方面保留了質感紋理，另一方面弱化了視覺對內容的干擾。很快，微質感就取代了之前的設計形式，成為主流風格。

2008年1月22日，html5草案發布，配合Css3，讓世人眼前一亮，不少人甚至認為html5+css3直接宣判了flash的死刑。事實 沒那么嚴重，最多也是個死緩，但是其對flash的沖擊是相當巨大的，因為html5+css3可以實現很多復雜的動畫效果，而且符合W3C標準。在眾多 html5動畫效果里面，有一個表現的特別搶眼，它叫Parallax Scrolling（視覺滾差），它通過控制不同內容的滾動速度，營造出假3D的感覺，剛好趕上當年3D電影流行，因此很快被人們奉為神物。

圖1.3.2 Parallax Scrolling頁面設計

讓人意想不到的是，parallax的流行同時帶動了另一個視覺風格的發展，那就是全屏背景設計。Parallax技術通常都會通過全屏效果來表 現，以產生更強的沖擊力，久而久之，人們發現這種風格不僅能產生很強的沖擊力，而且能夠用很簡潔的方式清晰地表達內容，特別是用在對產品的表現上。因此全 屏背景風格成為了近兩年的主流風格之一，不論是全屏圖片還是全屏色彩，都相當流行。

圖1.3.3 全屏圖片背景

人們繼續尋找著簡潔的表達方式，大膽的Microsoft創造了一種極具風險和創新性的風格，叫做Metro，Metro的核心是平面化，將所有頁面元素都以平面色塊的形式表達出來，摒棄除色彩與內容之外的一切裝飾。

圖1.3.4 Window Metro界面

Metro的誕生引領了一個新的設計風潮叫做扁平化設計，在經歷了微質感的過渡后，扁平化設計很快就被人們接受并成為主流，扁平化設計的優勢在于它既能保留較強的表現力，又能有效地降低裝飾元素對主題內容的干擾，讓用戶更好地接收到主體。

圖1.3.5 扁平化的QQ網購首頁

以上介紹的就是從互聯網誕生到現今的主要視覺風格及發展過程，很難想象這么復雜的變遷過程居然就發生在短短的20年時間里，互聯網的發展速度實在是有些快的驚人。

二、? 網絡視覺藝術發展規律

2.1 簡-繁-簡的規律

世間萬物的發展都有其特定的規律，網絡視覺藝術也不例外，細細看來，我們會發現網絡視覺藝術基本上是沿著“簡-繁-簡”的路徑在發展。

在網絡視覺藝術發展的初期，由于技術和硬件的局限，網頁設計基本停留于“滿足功能需求”的階段，因此我們看到當時的網頁都是非常簡陋和粗糙的。但隨 著人們認知的不斷發展，審美的需求也在不斷提高，人們受夠了這些“簡單而丑陋”的頁面，他們開始想：如果網頁能動起來多好？如果我能做一個虛擬的城市多 好？…商家也在想，如果我能滿足他們這些需求，利潤豈可估量？于是乎，開發者們不得不想盡辦法來滿足人們這些“苛刻”需求。終于有一天，他們做到了，他們 帶來了flash、css、javascript等先進技術，讓人們的夢想成為現實。那一刻，人們先前所預謀的各種場景都接二連三地被表現了出來，設計師 們充分發揮著自己的想象力，把網頁設計的盡可能復雜，盡可能炫目，盡可能與眾不同。苛刻的人們充分體會到了設計師們的強大表現力，這甚至帶動了整個設計師 行業的飛速發展，一時間，各種網頁設計培訓班、flash培訓班等如雨后春筍般發展起來，盛況空前。然而漸漸地，就像吃巧克力一樣，人們膩味了，他們開始 反思：我一定要用一個金碧輝煌的3D大廳設計來體現我們酒店的高檔嗎？我一定要用一個交互復雜，酷炫奪目的動畫來體現我的專業嗎？…是否有更簡單的辦法？ 設計師們開始簡化，開始沉淀，那些華而不實的元素漸漸被拋棄，而那些關鍵核心的元素則得以保留并強化，有些人強化了質感，有些人強化了內容，有些人強化了 交互，這些設計方法共同筑成了一個風格簡約、表現力強的時期，也就是我們現在正在經歷的時期。

到此，網絡視覺藝術“簡-繁-簡”的發展路徑基本形成，有人可能會問，那網絡視覺今后會沿著怎樣一個路徑發展呢？我們先來分析兩個相似的例子。

2.2 不僅僅是網絡視覺藝術的規律

“簡-繁-簡“的發展規律不僅僅適用于網絡視覺藝術，縱觀整個世界藝術發展史，我們會發現古今藝術的發展同樣符合這一規律。在藝術發展的初期（從人 類史前時期到古埃及時期），繪畫或雕塑都非常粗糙簡陋，因為當時人們做這些“藝術創作”的初衷只是為了實現某些功能，比如教育、祭祀等，沒有考慮太多美學 層面的東西。

圖2.2.1 法國拉斯科洞窟巖畫

圖2.2.2 阿門哈特的石碑

到古典時期，雕塑和繪畫開始被賦予更多美學的含義，這一時期的藝術品都是精雕細琢，非常精致。限于當時人們的認知，藝術作品基本上都是以現實為參考。

圖2.2.3 拉奧孔

這一創作理念在接下來的文藝復興時期得到了進一步升華，為了讓作品更加擬真，大師們開始研究材質、比例、色彩等等，以達芬奇、米開朗琪羅和拉斐爾為代表的文藝復興藝術家開創了古典藝術最輝煌的時期。

圖2.2.4 蒙娜麗莎的微笑

到16世紀后期，文藝復興的古典風格仍然備受世人尊崇，樣式主義（學院派、卡拉瓦喬主義、巴洛克）主要也是對文藝復興的傳承。

圖2.2.5 宮女

真正將古典風格變得“甜到膩”的當屬洛可可風格，洛可可主要表現當時上流社會的享樂、奢華及愛欲交織，而在表現元素上則過多使用曲線，因此作品展現出來的效果是浮華、繁瑣和矯揉造作。

圖2.2.6 洛可可建筑

洛可可的糜爛終究是引起了反感，新古典主義的產生就是對洛可可的終結，在表現形式上，新古典主義很接近古典主義，從另一個角度也可以說是對洛可可的簡化表現。

圖2.2.7 赫拉斯的宣誓

以洛可可為分界，往下的藝術流派開始變化和沉淀，一方面是古典藝術已經無法超越，藝術家必須朝另外的方向發展，另一方面由于當時工商業的發展，社會 節奏變快，人們對復雜事物的接受度在降低，但最重要的一點原因，是攝影技術的發明，這幾乎宣判了古典藝術的死刑。在這時期眾多藝術流派中，以塞尚、梵高、 高更為代表的后印象主義是最具歷史意義的，因為他們不光是在表現手法上創新，更重要的是在創作思想上顛覆了以往所有的流派。他們不再重點表現繪畫內容的思 想，而是表現創作者的思想。

圖2.2.8 星夜

再往后的藝術流派變得異常繁多，藝術家們從各個角度去嘗試變化，如抽象主義、立體主義、極簡主義和波普藝術等，藝術的元素被分離，有的保留色彩，有的保留形體，但藝術終歸變得純粹而簡約，經過幾千年的發展沉淀，最終留下的，是藝術中最精華的部分。

圖2.2.9 畢加索作品

圖2.2.10 蒙德里安作品

圖2.2.11 極簡風格海報

縱觀世界藝術發展史，簡-繁-簡的思路非常明晰，而如果我們放眼世間萬物，會發現這個規律無處不在，比如說人一生的發展，嬰幼兒時期對世界處于未知 狀態，因此行為思想很簡單，到童年、青年時期，我們對世界的了解程度加深，好奇心變強，因此行為表現會很豐富，喜歡挑戰，喜歡冒險、嘗試新事物，等到中年 時期，我們漸漸厭倦、疲憊和經驗豐富，不再像年輕時候那么沖動，我們遇事三思而后行，行為冷靜，我們在這個時期會漸漸沉淀，一直到老年，看盡世間繁華，內 心歸于平淡，回歸簡單的生活。

但是這個過程中有一點要搞清楚，那就是前期的簡跟后期的簡雖然很像，但是卻有本質的區別，比如我們嬰兒時期每天的生活是吃飯睡覺，老年時期也是吃飯 睡覺，但前者是因為我們只會吃飯睡覺，而后者是因為我們只想吃飯睡覺，后者是經過多年的沉淀之后，找到一種最適合自己的生活方式。網頁視覺也是如此，早期 的簡可以說是簡陋，而后期的簡是簡約，每個人都能設計出簡陋的東西，但很少人能真正做出簡約的東西。只有對設計藝術很熟悉，嘗試過很多不同的設計方式的大 家，才知道如何從眾多網頁設計元素中提煉出最核心、最本質的部分，設計出真正簡約的作品。

三、? 從規律中得到的啟示

啟示一 簡約、沉淀—未來幾年的趨勢

當前的網絡視覺藝術已經從簡陋經過繁華發展到了沉淀、簡約的階段，結合國內用戶的平均認知水平，這個階段應該還會持續很久，直到某天用戶能夠接受極 簡風格。我理解的極簡風格就是頁面里除了內容本身外沒有多余的元素，通過很好的版式布局，達到內容突出、情感豐富、品牌風格明顯的效果。因此要實現極簡風 格，除了用戶認知以外，內容本身的表現力和感染力也很重要，目前國內網絡視覺普遍還達不到這個要求，現階段還需借助一些輔助元素，比如色彩、質感等來加強 表現力。

啟示二 簡約非是一蹴而就

剛剛講到了網絡視覺藝術的發展規律，講到簡陋和簡約的區別，那我們在學習的時候也需要注意，用岳不群的話說，所謂凡事欲速則不達,練武之人講究循序 漸進…如果設計師不去接觸、學習各種表現手法，不去了解歷史，不去經歷“繁”的環節，是不可能做出簡約的作品的，往往最終表現出來的只是簡陋而已。

啟示三 因地制宜，不要對流行趨之若鶩

經常接觸到一些人，他們只管目前流行什么風格，就搬到自己的平臺上，根本不顧這種風格跟自己的產品、用戶是否相符。一方面，流行的東西我們確實應該 敏感，不然我們的作品就容易落伍，變得老土，但另一方面，我們在使用流行元素時一定要分析自己的定位、自己當前的發展階段，綜合考慮，才能做出真正優秀的 作品。

簡簡單單幾千字，寫的不盡周到詳實，只是希望通過對網絡視覺藝術的終結和簡單分析，能夠給予大家以啟發，時間倉促，若有不實之處，歡迎批評指正。

本文系作者：tanxdesign辛苦原創，轉載請注明出處