來源：Design360
原標題：這座網(wǎng)頁設(shè)計博物館，讓我回到撥號才能上網(wǎng)沖浪的千禧年

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

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

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

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

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

MSN網(wǎng)站，2000

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

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

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

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

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

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

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

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

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

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

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

銳步官網(wǎng)， 1996

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

當人們?yōu)g覽網(wǎng)頁設(shè)計博物館，會看到畫廊、時間線、知識測試、Flash動畫、網(wǎng)頁設(shè)計歷史、舊軟件等標題分類，讀者可以依據(jù)年份、行業(yè)（包括餐館、公司、雜志、時尚和體育等）或者風格標簽（包括如未來感、極簡主義、裝飾性、復古、拼貼等）來瀏覽網(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)頁設(shè)計展覽（Exhibition)欄目中，其中添加了一系列以不同主題分類展示的網(wǎng)頁設(shè)計，如像素藝術(shù)、瀏覽器、體育、音樂人、好萊塢電影、成人網(wǎng)站等。Kovar曾在采訪中表示自己希望建立一個混合的網(wǎng)絡展覽，通過分類更清晰地揭示網(wǎng)頁設(shè)計被遺忘的趨勢，以及它們是如何隨著時間的推移而出現(xiàn)的。

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

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

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

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

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

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

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

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

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

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

這些網(wǎng)站的設(shè)計變化是循序漸進的，與技術(shù)的發(fā)展互相輝映，人們在10年甚至20年前看到的特性至今仍然存在。令人好奇的是，許多公司對自家官網(wǎng)設(shè)計的改進，在多大程度上是因為那些大型的主流公司從一開始就有明確而扎實的戰(zhàn)略，又或者是影響力過于巨大，以至其他公司不得不參照它們的網(wǎng)頁設(shè)計戰(zhàn)略。

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

Facebook官網(wǎng)，2004

谷歌首頁，1998

雅虎官網(wǎng)，2004

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

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

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

Hasselblad官網(wǎng)，2002

GAP官網(wǎng)，2000年

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

資料來源：
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)載請聯(lián)系原作者
作者公眾號：Design360（ID:design360magazine）