網頁設計的時光之旅：從 1990 到 2026 的 8 個進化階段

更新時間：2026-07-22 17:00 HKT

如果我們將時光倒流，網際網路的樣貌與今日簡直是兩個不同的宇宙。
從 1990 年世界上第一個網頁誕生，到 2026 年充滿 AI 與 3D 互動的現代化網站，這 30 多年來，網頁設計經歷了無數次的破壞與創新。

1990 - 1994｜純文字時代
圖片來源：CERN (僅作歷史示意用途)
1990 年，Tim Berners-Lee 發明了全球資訊網（WWW），上線了人類歷史上第一個網站。
- 設計特徵： 無視覺設計可言。純粹由文字與藍色超連結組成，背景為預設灰色或白色。
- 技術核心： 早期 HTML，僅用於學術資料的結構化共享。
1995 - 1998｜Table 排版與視覺初探
隨著瀏覽器普及，開發者開始利用 HTML 的 <table>（表格）標籤進行網頁排版，試圖讓網頁「好看一點」。
- 設計特徵： 出現欄位劃分。MIDI 背景音樂、閃爍文字與低解析度 GIF 動畫成為時代標誌。
- 技術核心： 巢狀表格（Table in Table）、網頁安全色（Web-safe colors）。
代表網站：早期 Amazon、Space Jam 電影官網
1999 - 2003｜Photoshop 切圖與視覺至上
網路頻寬提升讓平面設計師接管了網頁外觀。經典作法是在 Photoshop 設計好精美版面，再用「切片工具」分割。
- 設計特徵： 高度依賴圖片，網頁猶如精美的平面海報。
- 技術核心： 將切圖放入複雜的表格中無縫拼接，並大量使用透明 spacer.gif 撐開空間，導致程式碼極度臃腫。
代表網站：早期 Apple 官網、MSN 入口網站
2004 - 2005｜Flash 的狂野黃金年代
Adobe Flash 打破了 HTML 的靜態限制，開啟了充滿聲光效果的網頁狂野時代。
- 設計特徵： 炫酷的過場動畫、特殊字體與互動音效。幾乎每個網站都有「Skip Intro（跳過動畫）」按鈕。
- 致命傷： 載入極慢、耗資源，且搜尋引擎（SEO）完全無法讀取其內容。
代表網站：2Advanced Studios、各式電影與遊戲宣傳站
2006 - 2010｜Web 2.0、PHP 與 CMS 崛起
Web 2.0 強調「使用者參與」。PHP 成為開發骨幹，讓網頁能與資料庫連動，促成了內容管理系統（CMS）的爆發。
- 業界影響： 改變了商業模式。過去需工程師逐頁手寫 HTML，現在透過後台即可管理。
- 技術核心： DIV+CSS 排版逐漸取代 Table，AJAX 技術讓網頁可局部更新資料。
代表網站：Facebook、Wikipedia、WordPress 部落格
2011 - 2015｜行動裝置面世與響應式設計 (RWD)
智慧型手機普及，專為桌機設計的網頁在小螢幕上難以閱讀（且 iOS 不支援 Flash）。響應式網頁設計（RWD）應運而生。
- 設計特徵： 「Mobile-First（行動優先）」成為最高準則，漢堡選單（Hamburger Menu）成為標配。
- 技術核心： 透過 CSS3 Media Queries，網頁能自動偵測螢幕尺寸並流暢改變排版。
代表網站：The Boston Globe (RWD先驅)、Twitter
2016 - 2020｜HTML5 成熟與前端框架時代
HTML5 與 CSS3 完全成熟，Flash 正式退場。網頁視覺從「擬物化」轉向乾淨俐落的「扁平化設計」與「Material Design」。
- 設計特徵： 網站體驗越來越像「應用程式 (App)」，具備流暢的微動畫與 Hover 效果。
- 技術核心： 現代 JavaScript 框架（如 React, Vue）成為主流，單頁應用程式（SPA）大幅提升操作流暢度。
代表網站：Google 服務、Airbnb、Netflix
2021 - 2026｜IE 終結、AI 驅動與沉浸式體驗
2022 年 Internet Explorer (IE) 正式退役，為前端開發帶來大解放！ 開發者不再需要撰寫繁瑣的相容性代碼，Flexbox 與 CSS Grid 全面普及，大幅加快了網頁 Coding 的速度與品質。
- AI 深度整合： AI 參與設計與開發，從生成 UI 草圖、自動化寫 Code 到內建 AI Chatbot 提供精準搜尋，大幅縮短開發週期。
- 沉浸式體驗： WebGL 與 WebGPU 技術普及，網頁能順暢運行 3D 渲染與滾動視差，提供媲美原生軟體的視覺震撼。
代表網站：Midjourney Web、Apple 產品頁、現代 Webflow 網站