本篇文章為《不小心就學會!用 UI 設計方法製作網站》使用教材,有興趣的讀者可以到線上課程頁面參考。

嗨囉,我是設計師 Riven 🙂

今天我們來聊聊網頁的誕生,也順便科普一下網站的發展歷史。

其實我們 UI 或 UX 設計師多是在所謂的 IT 資訊科技領域內工作,那這個產業有趣的是,我們不只要了解最新軟體技術的操作,同時也要認識理解人文跟藝術的呈現脈絡,我覺得能運用科技與藝術(兼具感性與理性)的設計師,在設計領域中肯定都是頂尖人才。

所以為了成為更有內涵的設計師,邀請大家一起拿起眼鏡,來讀一下歷史鑑古知今,將能夠更清楚我們正在做的網頁是怎麼來的。


地球上的第一個網頁

時間回到 1989 年的時候, 大大 提姆·柏內茲-李 (Sir Timothy John Berners-Lee)透過網際網路,發明了全球資訊網 WWW (World Wide Web)這成為了現在 IT 資訊科技發展的核心,也是至今地球上數十億人在網路上互動的主要工具。

發明全球資訊網讓提姆·柏內茲-李被《時代》雜誌列為 20 世紀最重要的人物,同時英國女皇伊麗莎白二世也頒發了大英帝國爵級司令勳章給他。

隔年,全世界第一個網頁誕生了,連同開啟使用的瀏覽器也是 Timothy John Berners-Lee 所設計並建構的,我們現在仍然可以看到這個網頁,其中也解釋了全球資訊網是什麼,使用者如何使用瀏覽器,還有如何建立網頁伺服器等等。

http://info.cern.ch/hypertext/WWW/TheProject.html

同時,他發明了 HTML,中文叫超文本標記語言,也成為日後建構網頁的基礎。

而同樣在 1990 這年,Adobe 的 Photoshop 1.0 版本也出現了,這樣的巧合也加速了網頁設計的發展,開始了瀏覽器還有網頁的戰國時代。

Adobe Photoshop 1.0.7 版本軟體截圖

第一次瀏覽器大戰

接著,世界上第一家利用全球資訊網 WWW 的公司是網景(Netscap),而網景這間公司的第一個產品就是同名的瀏覽器,所謂的「瀏覽器」就是把文字、圖片、超連結等內容,放入「網頁」當中呈現給瀏覽者看的載具。

Netscap 瀏覽器推出之後迅速在 1990 年代初期得到了 90% 以上的市佔率,在當時幾乎是壟斷了網頁瀏覽器市場。

而緊接著,在 1995 年的時候,第一個推出商業形象的官方網站出現了,就是電影蝙蝠俠 3 的宣傳網站。從當年的一些網頁截圖,可以看到有濃濃的時代感。

Image for post
Flashback 1995: batmanforever.com Screens
Image for post
Flashback 1995: batmanforever.com Screens

而後,1995 年微軟也推出了 Internet Explorer,也就是常聽到的 IE 瀏覽器,為了搶奪世界上最流行的瀏覽器寶座,微軟與網景在瀏覽器上新增了很多有的沒有的功能,而且互相不支援對方的標準,引發了第一次瀏覽器大戰。

而接下來的 1995 到 2000 年的期間呢,就是因為這場瀏覽器大戰的關係,網頁的從原本的陽春 HTML 文本,快速演變成能夠塞各種內容以及有酷炫效果的網頁,網頁的技術因此被推向新的紀元,包括 JavaScript 與 CSS 等等的程式語言都是在這段期間出來的。

噢,還有 Flash。在 1996 年的時候,這個超越所有語言存在的開發工具出現了!只要使用簡單的繪圖工具,並安裝外掛,就能讓網頁設計師做出網頁動畫效果,甚至強大到能靠 Flash 做好整個網站,在當時簡直屌爆了。

The Birth and Death of Flash

最終,幾家歡樂幾家愁,在 2000 年代初期呢,微軟的 IE 瀏覽器成功以買作業系統送免費瀏覽器的戰略,得到世界上 95% 瀏覽器市佔率,奪得第一次瀏覽器大戰的勝利。


第二次瀏覽器大戰

但緊接著,Safari 瀏覽器在 2003 年登場,Mozilla Firefox 火狐瀏覽器也在 2004 年推出,加上 2008 年的 Google Chrome 瀏覽器等等,這期間出現的各種新瀏覽器瓜分了 IE 的瀏覽器市佔率,並造成了第二次瀏覽器大戰,網頁的技術又再一次進化(也是因為各家瀏覽器都推出獨家的功能與規格)。

而這第二輪的輸贏結果,現在來看應該已經很明顯了,IE 淪落為拿來下載瀏覽器的瀏覽器,而曾經紅遍大街小巷的 Flash 現在已經下去領便當了,只能說在科技的巨輪下,我們設計師只能留下時代的眼淚,一邊負重前行。


而我們目前,幾乎是處於第三次瀏覽器大戰之中,因應著手機、平板等裝置的普及使用,而且還有 App 應用程式加入戰場。

經過以上的瀏覽器變革過程,網頁也隨之不斷進化,從現在的著眼點來看,歷史上的網站不論是在技術框架還是創意展現,都跟瀏覽器有很大的關聯性(其實現在做網站也是啦,但比起來已經和諧許多)。

而除了瀏覽器之外,「網頁」本身的發展脈絡在這這段期間轉換過程值得了解一下。

重新定義網頁:Web 2.0

在進入 21 世紀之後,網路已經徹底融入了人類的生活,進入了 Web 2.0 時代。,但是與之前不同的是,以前的網頁只能被動給使用者瀏覽觀看⋯

Web 2.0 為歐萊禮創始人 Tim O’Reilly 所提出。

指以終端使用者為目標,強調用戶生成內容、易用性、參與文化和互操作性(如:與其它產品、系統和裝置相容)的網站。

在 2000 年代初期,可以讓使用者自己「使用」並「創造」內容的網站平台成為主流,比如說最一開始的部落格,就是在這個階段開始出現並逐步演進的;另外還有像是各種論壇、維基百科,跟影片平台 YouTube 或社群網站 Facebook 等等,因此 Web 2.0 也被稱為社群網路。

那麼,也是由於要讓使用者自行在網站中建立內容,所以大家開始更注意到了關於易用性、使用體驗等等 UI/UX 相關的議題,這改變了設計師在網站開發流程中的角色。

而到目前為止,我們回顧這三十年來的瀏覽器與網頁發展,還可以從其中技術的演進,看出設計趨勢的脈動。

在這樣的亂世當中,我們設計師只要曉得,網頁的技術是每天都在演進的,所以學習新資訊一直都是 UI 設計師的重要任務。

在下一篇文章當中呢,我們將繼續聊聊,近代網頁設計的發展趨勢。

延伸閱讀

這邊順便推薦一個好玩的網頁,是由 Webflow 所製作的 The History of Web,裡面有用動態網頁的方式展現近代網頁的發展。

好啦,今天的文章就差不多到這邊,我是 Riven 🙂 我們下次見囉~ Bye


留個言
訂閱 RAR 設計攻略

訂閱 RAR 設計攻略

每週將收到最新設計相關情報~

🤩 成功完成訂閱啦!讚讚~