來(lái)源：Design360
原標(biāo)題：這座網(wǎng)頁(yè)設(shè)計(jì)博物館，讓我回到撥號(hào)才能上網(wǎng)沖浪的千禧年

你還記得二十年前的互聯(lián)網(wǎng)嗎？

在百度貼吧疊樓
為QQ空間裝飾非主流空間貼紙
無(wú)限沉浸在4399和7k7k等小游戲網(wǎng)站
或是在163博客和BBS論壇之類的網(wǎng)站灌水
還要不斷關(guān)閉那些突然跳出令人討厭的垃圾廣告網(wǎng)頁(yè)...

比QQ還早的純文本聊天室ICQ

與網(wǎng)易BBS同時(shí)代的教育網(wǎng)上的水木清華BBS

這些便是早期互聯(lián)網(wǎng)給我們這一代人留下的印象?；乜椿ヂ?lián)網(wǎng)在中國(guó)的發(fā)展歷史，于1994年在中國(guó)開通的互聯(lián)網(wǎng)直到1997年開始旺盛發(fā)展。在那個(gè)網(wǎng)速慢，上網(wǎng)還需要付昂貴費(fèi)用的年代，人們都在互聯(lián)網(wǎng)上做什么呢？門戶網(wǎng)站、聊天室、論壇、博客等新形態(tài)不斷出現(xiàn)，滿足著新世紀(jì)的人們搜索、交流和傳播信息的欲望。

MSN網(wǎng)站，2000

早期使用微軟IE瀏覽器界面打開的雅虎網(wǎng)站

在移動(dòng)互聯(lián)網(wǎng)時(shí)代到來(lái)之前，智能手機(jī)還未大范圍普及，信息交流和傳播的速度和廣度也不像如今這般，人們?cè)?jīng)流連在各式各樣的花式網(wǎng)頁(yè)中，比如許多人最早登陸的國(guó)內(nèi)網(wǎng)站——97年創(chuàng)辦的網(wǎng)易打造的“網(wǎng)易個(gè)人主頁(yè)”（nease.net），以及后來(lái)于99年出現(xiàn)的QQ前身——OPEN-ICQ聊天室。

最早的網(wǎng)易郵箱

1999年的網(wǎng)易主頁(yè)

對(duì)于年輕一代的互動(dòng)體驗(yàn)設(shè)計(jì)師、網(wǎng)頁(yè)設(shè)計(jì)師和互聯(lián)網(wǎng)用戶而言，這些在歷史中一步步發(fā)展進(jìn)化的網(wǎng)頁(yè)是互聯(lián)網(wǎng)的活化石，它們?yōu)榻裉炀邆鋸?qiáng)大響應(yīng)性、易讀性和互動(dòng)性的網(wǎng)頁(yè)和軟件打下了扎實(shí)的基礎(chǔ)，是當(dāng)今的程序員和設(shè)計(jì)師的靈感寶藏 。

2012年，來(lái)自捷克的歷史學(xué)家和網(wǎng)頁(yè)設(shè)計(jì)師Petr Kovar開啟了一個(gè)富有意義的項(xiàng)目，旨在打造世界上第一個(gè)以明確標(biāo)簽分類，并按時(shí)間順序整理的線上網(wǎng)頁(yè)設(shè)計(jì)博物館（Web Design Museum），將那些由上世紀(jì)電腦程序員和設(shè)計(jì)師打造的網(wǎng)頁(yè)和視覺(jué)設(shè)計(jì)保存在這里。

網(wǎng)頁(yè)設(shè)計(jì)博物館官網(wǎng)：www.webdesignmuseum.org

Kovar在大學(xué)時(shí)曾學(xué)習(xí)計(jì)算機(jī)和歷史，曾寫過(guò)一篇關(guān)于前捷克斯洛伐克計(jì)算機(jī)技術(shù)歷史的論文。他在畢業(yè)后才開始正式嘗試網(wǎng)頁(yè)設(shè)計(jì)，并最終轉(zhuǎn)行。2012年的時(shí)候，他突然想起自己在兒時(shí)留下的一個(gè)舊硬盤，里面儲(chǔ)存了許多他在90年代瀏覽互聯(lián)網(wǎng)時(shí)保存的大量截圖。

他曾記得自己無(wú)數(shù)次訪問(wèn)電影《太空大冒險(xiǎn)（Space Jam）》的官方網(wǎng)站，以及登陸流行品牌銳步、阿迪達(dá)斯和百事可樂(lè)的官方頁(yè)面。著迷網(wǎng)上沖浪的他保存了許多設(shè)計(jì)獨(dú)特、運(yùn)行有趣的網(wǎng)頁(yè)截圖，以便在離線時(shí)還能查看它們。作為一個(gè)歷史愛(ài)好者和網(wǎng)頁(yè)設(shè)計(jì)師，Kovar決定要為此做些什么。

百事可樂(lè)官網(wǎng)，1996

《太空大冒險(xiǎn)》官網(wǎng)，1996

銳步官網(wǎng)， 1996

他從自己的截圖歷史記錄中開始分類整理，并從自1996年以來(lái)存檔了2870多億條目的“互聯(lián)網(wǎng)檔案館（Internet Archive）”門戶網(wǎng)站中尋找了更多相關(guān)的頁(yè)面截圖，最終精心挑選了900個(gè)在互聯(lián)網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)歷程中具備獨(dú)特意義的網(wǎng)站，并在2017年5月推出了網(wǎng)站的第一個(gè)版本。

當(dāng)人們?yōu)g覽網(wǎng)頁(yè)設(shè)計(jì)博物館，會(huì)看到畫廊、時(shí)間線、知識(shí)測(cè)試、Flash動(dòng)畫、網(wǎng)頁(yè)設(shè)計(jì)歷史、舊軟件等標(biāo)題分類，讀者可以依據(jù)年份、行業(yè)（包括餐館、公司、雜志、時(shí)尚和體育等）或者風(fēng)格標(biāo)簽（包括如未來(lái)感、極簡(jiǎn)主義、裝飾性、復(fù)古、拼貼等）來(lái)瀏覽網(wǎng)站內(nèi)容。

索尼官網(wǎng)，1996

《Men’s Health》雜志官網(wǎng)，1998

《The Tube》雜志官網(wǎng)，1998

《南方公園（South Park）》電影網(wǎng)站，1999

佳能官網(wǎng)，2000

尼康COOLPIX官網(wǎng)，2003

XBOX官網(wǎng)，2004

在18年更新的網(wǎng)頁(yè)設(shè)計(jì)展覽（Exhibition)欄目中，其中添加了一系列以不同主題分類展示的網(wǎng)頁(yè)設(shè)計(jì)，如像素藝術(shù)、瀏覽器、體育、音樂(lè)人、好萊塢電影、成人網(wǎng)站等。Kovar曾在采訪中表示自己希望建立一個(gè)混合的網(wǎng)絡(luò)展覽，通過(guò)分類更清晰地揭示網(wǎng)頁(yè)設(shè)計(jì)被遺忘的趨勢(shì)，以及它們是如何隨著時(shí)間的推移而出現(xiàn)的。

網(wǎng)頁(yè)設(shè)計(jì)展覽區(qū)

「90年代的網(wǎng)頁(yè)頭條」微軟、松下、雅虎

「早期設(shè)計(jì)軟件」Photoshop

「90年代的網(wǎng)站」NASA、麥當(dāng)勞、世嘉游戲公司、阿迪達(dá)斯、后街男孩

在網(wǎng)頁(yè)博物館中，網(wǎng)站的時(shí)間線（Timeline）欄目專門用于記錄過(guò)去20年來(lái)主要網(wǎng)站的發(fā)展和變化情況，這個(gè)欄目在訪問(wèn)者中很受歡迎。有些網(wǎng)頁(yè)自創(chuàng)建以來(lái)已經(jīng)發(fā)生了巨大的變化，現(xiàn)在的外觀已經(jīng)完全不能反映最初的設(shè)計(jì)，人們總是對(duì)自己最喜歡的網(wǎng)站在過(guò)去20年中發(fā)生的變化感到驚訝。

像是亞馬遜、樂(lè)高和任天堂等大公司在每一次的網(wǎng)站更新中，都給網(wǎng)站視覺(jué)和頁(yè)面控制帶來(lái)徹底的改變和更大的發(fā)展。Kovar認(rèn)為，網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展史有兩個(gè)主要趨勢(shì)，第一個(gè)趨勢(shì)便在于像Netflix、可口可樂(lè)、微軟、Skype及以上公司那樣， 在每次升級(jí)中，帶來(lái)革命性的設(shè)計(jì)趨勢(shì)。

樂(lè)高官網(wǎng)部分更新（1997-2020）

可口可樂(lè)官網(wǎng)部分更新（1996-2020）

任天堂官網(wǎng)部分更新（1996-2018）

第二個(gè)是逐步進(jìn)化的趨勢(shì)，這部分網(wǎng)站的設(shè)計(jì)與以前的版本基本保持一致，雖然在逐漸發(fā)展，但主要控件的分布幾乎保持不變，比如大眾熟悉的谷歌（Google）、維基百科（Wikipedia）或蘋果（Apple）、雅虎（Yahoo）、臉書（Facebook）等。

這些網(wǎng)站的設(shè)計(jì)變化是循序漸進(jìn)的，與技術(shù)的發(fā)展互相輝映，人們?cè)?0年甚至20年前看到的特性至今仍然存在。令人好奇的是，許多公司對(duì)自家官網(wǎng)設(shè)計(jì)的改進(jìn)，在多大程度上是因?yàn)槟切┐笮偷闹髁鞴?strong>從一開始就有明確而扎實(shí)的戰(zhàn)略，又或者是影響力過(guò)于巨大，以至其他公司不得不參照它們的網(wǎng)頁(yè)設(shè)計(jì)戰(zhàn)略。

蘋果官網(wǎng)部分更新（1998-2018）

Facebook官網(wǎng)，2004

谷歌首頁(yè)，1998

雅虎官網(wǎng)，2004

在Kovar看來(lái)，SpaceX公司的網(wǎng)站設(shè)計(jì)發(fā)展歷程也很有趣，這個(gè)意圖打造地球到火星客運(yùn)系統(tǒng)的公司，在2002年的網(wǎng)站設(shè)計(jì)比現(xiàn)在的網(wǎng)站設(shè)計(jì)要獨(dú)特得多?！癝paceX現(xiàn)在的網(wǎng)站更像是一個(gè)通用模板的例子?！盞ovar忍不住說(shuō)道。這和獨(dú)立設(shè)計(jì)師Yehwan Song所支持的觀點(diǎn)一樣——網(wǎng)頁(yè)模板正在殺死想象力。（了解更多有趣的網(wǎng)頁(yè)設(shè)計(jì)請(qǐng)點(diǎn)擊此處閱讀往期文章）

Space X官網(wǎng)發(fā)展歷程（2002-2017）

還有一些網(wǎng)站也走在了時(shí)代的前沿，比如2002年出現(xiàn)的Hasselblad（哈蘇相機(jī)）和2000年的Gap網(wǎng)站，它們的設(shè)計(jì)仍然可以被認(rèn)為是非常現(xiàn)代的，甚至在今天的移動(dòng)設(shè)備上依然可以良好運(yùn)作。

Hasselblad官網(wǎng)，2002

GAP官網(wǎng)，2000年

然而，網(wǎng)頁(yè)藏品并不是越多越好，只有具備獨(dú)創(chuàng)性的視覺(jué)風(fēng)格、一定的影響力，以及有自身專注內(nèi)容領(lǐng)域的網(wǎng)站才會(huì)被收藏在博物館內(nèi)。所有博物館內(nèi)的展品有兩個(gè)主要的選擇標(biāo)準(zhǔn)，一方面需要有獨(dú)創(chuàng)的內(nèi)容和深厚的設(shè)計(jì)功力，另一方面則需在互聯(lián)網(wǎng)歷史上具有重要意義。

除了上述大公司的官方網(wǎng)站，歷史上還有一些由創(chuàng)意機(jī)構(gòu)和設(shè)計(jì)工作室打造的網(wǎng)站擔(dān)當(dāng)著獨(dú)特的角色。比如90年代最重要的數(shù)字創(chuàng)意公司之一2Advanced公司創(chuàng)建的網(wǎng)站，便被Kovar定義為歷史上最富有歷史性意義的網(wǎng)站之一，也是他最喜歡的網(wǎng)頁(yè)博物館藏品。

2Advanced 2000、2002、2003年的Flash網(wǎng)站

作為一所傳奇的網(wǎng)站設(shè)計(jì)公司，2Advanced使用Flash技術(shù)創(chuàng)建和設(shè)計(jì)了一系列高端的創(chuàng)新網(wǎng)站，這令他們?cè)跇I(yè)界聞名，并且使Flash網(wǎng)頁(yè)在千禧年之初被視為一種新世紀(jì)的啟示。

還有許多設(shè)計(jì)雜志的網(wǎng)站也定義了它們所處時(shí)代的設(shè)計(jì)趨勢(shì)，比如早期設(shè)計(jì)社區(qū)網(wǎng)站之一Design is Kinky就發(fā)揮著這樣的作用，該網(wǎng)站定期展示各類藝術(shù)家的平面作品、照片、專欄文章或是個(gè)人資料。另外，定期提供新聞、采訪以及設(shè)計(jì)圈有趣消息的網(wǎng)絡(luò)雜志《PixelSurgeon》的網(wǎng)站也同樣收獲了大批的粉絲，它最早由攝影師Jason Aber和插畫家Richard May創(chuàng)建。

Design is Kinky官網(wǎng)，2002

網(wǎng)絡(luò)雜志《PixelSurgeon》官網(wǎng)，2001

網(wǎng)站設(shè)計(jì)博物館如今已經(jīng)過(guò)多年的更新和運(yùn)行，項(xiàng)目發(fā)起者Kovar認(rèn)為，網(wǎng)站設(shè)計(jì)的趨勢(shì)一直遵循著一個(gè)“螺旋模型”，美學(xué)總會(huì)定期回歸返潮，而新的技術(shù)會(huì)不斷加入改進(jìn)。例如，在2000年左右，F(xiàn)lash動(dòng)畫網(wǎng)站就曾一度非常流行。在web 1.0時(shí)代，F(xiàn)lash作為一款功能領(lǐng)先于其時(shí)代的程序，提供了表現(xiàn)驚人的跨瀏覽器功能、動(dòng)畫、圖形和聲音。

Shape Squad Flash網(wǎng)站， 1999

Digit Digit Flash網(wǎng)站， 2002

不過(guò)，這些包含F(xiàn)lash的網(wǎng)站數(shù)據(jù)容量非常大，需要很長(zhǎng)時(shí)間才能加載成功，因此人們清楚地記得在漫長(zhǎng)的等待中一圈一圈旋轉(zhuǎn)的沙灘球圖標(biāo)。

然而，新技術(shù)的出現(xiàn)雖然能帶來(lái)創(chuàng)新，但也會(huì)讓習(xí)慣舊事物的創(chuàng)作者感到憂慮。當(dāng)?shù)谝粋€(gè)百分百使用HTML5技術(shù)創(chuàng)造的網(wǎng)站The Wilderness Downtown在2010年誕生時(shí)，它撼動(dòng)了Flash的地位，并令許多Flash鐵桿設(shè)計(jì)師和開發(fā)人員對(duì)這種新技術(shù)的能力感到不安又好奇。

The Wilderness Downtown網(wǎng)站：www.thewildernessdowntown.com

作為樂(lè)隊(duì)Arcade Fire的單曲《We Used to Wait》所衍生的互動(dòng)短片，The Wilderness Downtown基于谷歌的Chrome瀏覽器、谷歌地圖和HTML5進(jìn)行創(chuàng)建。用戶只要輸入他們的郵政編碼和地址，就可以觀看一段充滿個(gè)性的音樂(lè)視頻。這個(gè)創(chuàng)新的網(wǎng)站贏得了The Favourite Website Awards的年度網(wǎng)站，以及世界范圍內(nèi)的贊譽(yù)。 

在這之后，HTML5、WebGL和JavaScrpit等新技術(shù)更加廣為傳播，人們不再局限于矢量圖形，也不需要通過(guò)互聯(lián)網(wǎng)插件才能開發(fā)網(wǎng)站，新技術(shù)帶來(lái)的體驗(yàn)超出了人們的想象，運(yùn)用它們制作的網(wǎng)站如雨后春筍一般頻繁出現(xiàn)在大眾視野中。可以看出，網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)會(huì)因?yàn)樾录夹g(shù)的出現(xiàn)而受到強(qiáng)烈影響。終于，Adobe在2017年，正式宣布終結(jié)對(duì)Flash軟件進(jìn)行更新，F(xiàn)lash時(shí)代真正結(jié)束了。

如今，數(shù)字和互動(dòng)并不只意味著一個(gè)“在線”世界，也不再像過(guò)去那樣局限于網(wǎng)頁(yè)瀏覽器。諸如VR、AR和機(jī)器學(xué)習(xí)等網(wǎng)絡(luò)新技術(shù)的出現(xiàn)，讓人們可以體驗(yàn)到更多感官層面上的互動(dòng)，但Kovar認(rèn)為這并不代表網(wǎng)頁(yè)就會(huì)消失。

我們看到像谷歌這樣的大公司就在近年打造了有趣的“Quick, Draw!”游戲網(wǎng)站，通過(guò)使用機(jī)器學(xué)習(xí)模型來(lái)讓系統(tǒng)猜測(cè)用戶的圖畫內(nèi)容。類似這樣的游戲化網(wǎng)站在過(guò)去20年中并不少見(jiàn)，或許它們將重新以新的面貌回歸，交互式教育網(wǎng)站正在成為未來(lái)的趨勢(shì)。

谷歌的算法繪畫網(wǎng)站：https://quickdraw.withgoogle.com/

可以說(shuō)，比起過(guò)去，如今的網(wǎng)頁(yè)本身更多的變成了一個(gè)線上互聯(lián)工具，甚至是開源的設(shè)計(jì)生成器。它可以帶給用戶極具互動(dòng)性的體驗(yàn)，創(chuàng)造更多的合作機(jī)會(huì)，而不只是單方面展現(xiàn)信息，這意味著技術(shù)和網(wǎng)頁(yè)設(shè)計(jì)都一直在進(jìn)化。尤其在2020年這個(gè)特殊的時(shí)期，現(xiàn)實(shí)生活中的社交距離更加考驗(yàn)人類的合作能力，而互聯(lián)網(wǎng)依然承載著巨大的潛能。 

Wetransfer和設(shè)計(jì)師藝術(shù)家Zach Lieberman用算法編程設(shè)計(jì)而成的繪畫藝術(shù)生成網(wǎng)站：
www.colorpush.wetransfer.com

任何人都可以分享隔離期建議并被別人看到的網(wǎng)站：
www.excellent-quarantine-ideas.com/

在Kovar看來(lái)，來(lái)自過(guò)去的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格和趨勢(shì)也許會(huì)被重新挖掘，未來(lái)的創(chuàng)造者們將好奇三十年前的網(wǎng)站設(shè)計(jì)是怎樣的，并從歷史中獲取靈感。到那時(shí)，人們將感謝這個(gè)項(xiàng)目所留下的寶貴遺產(chǎn)。這也是Kovar堅(jiān)持進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)博物館項(xiàng)目的核心動(dòng)力：為未來(lái)的幾代人保留世紀(jì)之交出現(xiàn)的網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意遺產(chǎn)，并為繁榮發(fā)展的互聯(lián)網(wǎng)書寫另一種故事。

我們或許會(huì)見(jiàn)證90年代和00年代復(fù)古網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的回歸，以及更多與當(dāng)下新技術(shù)結(jié)合的交互網(wǎng)頁(yè)不斷出現(xiàn)。無(wú)論它們存在于小程序中、在朋友圈中，還是在軟件界面或?yàn)g覽器里，在互聯(lián)網(wǎng)發(fā)展得越發(fā)旺盛、一切逐漸游戲化的今天，設(shè)計(jì)師和程序員將為互聯(lián)網(wǎng)的下一個(gè)20年帶來(lái)怎樣的變化，令人期待。

資料來(lái)源：
www.webdesignmuseum.org
www.itsnicethat.com
www.eyeondesign.aiga.org
www.0511ia.com
www.speckyboy.com
www.lusongsong.com
www.info.williamlong.info

經(jīng)授權(quán)轉(zhuǎn)載至紅星，轉(zhuǎn)載請(qǐng)聯(lián)系原作者
作者公眾號(hào)：Design360（ID:design360magazine）