互聯網已經深入到我們生活的方方面面，但我敢打賭，數位世界之中有一個方面是你認為理所當然的。 你有沒有注意到很多連結，特別是超連結，都是藍色的？ 當一位同事不經意地問我為什麼鏈接是藍色的時候，我被難住了。

作為從 2001 年就開始製作網站的用戶體驗設計師，我一直將鏈接設置為藍色。 我曾提倡使用特定的藍色色調，並堅持使用。 是的，但我從未停止過並想知道，為什麼鏈接是藍色的？ 這就是生活的現實。 草是綠色的，超鏈接是藍色的。 在文化上，我們經常將連結與藍色聯繫在一起，以至於 2016 年 Google 將連結更改為黑色時，造成了相當大的破壞。

但現在，我發現自己完全被這個問題所困擾，為什麼鏈接是藍色的？ 是誰決定把它們染成藍色的？ 這個決定是什麼時候做出的？ 這個決定是如何產生如此持久的影響的？

我求助於我的同事説明我研究，我們開始尋找答案。 Mosaic 是 Marc Andreessen 和 Eric Bina 於 1993 年 1 月 23 日發佈的早期瀏覽器，帶有藍色超連結。

不過，為了真正瞭解超連結的起源和演變，我通過技術歷史和介面進行了一次旅程，以探索在彩色顯示器之前連結是如何處理的，以及一旦顏色成為一種選擇，介面和超連結是如何快速演變的。

通過觀察這些預著色超連結的解決方案，我們可以看到超連結是如何隨著時間的推移而發展的，以及這些早期的創新是如何影響今天網路的可用性的。

1964 – Project Xanadu

Xanadu 計劃有史以來第一次連接了兩頁資訊。 連結是頁面之間的可見的線。

1983 – HyperTIES system

這個系統引入了顏色，因為它使用了黑色背景上的青色超連結。 HyperTIES 被用作電子雜誌。 這可能是我們今天所知道和喜愛的藍色超連結的祖先，但我不認為這是第一次使用藍色超連結，因為這種顏色是青色，而不是深藍色。

1985 – Windows 1.0

Windows 1.0 帶來了全彩色圖形介面。 鏈接和按鈕仍然是黑色的，與當時蘋果的介面類似。 然而，我發現有趣的是，這是我們在佈局中使用的深藍色的第一個實例。 深藍色被大量使用在標題和情態動詞的邊框上。

Windows 1.0 的另一個有趣之處是它的超連結。 這是第一個使用下劃線來表示我能找到的超連結的例子。 為了讓 Windows 1.0 更加有趣，我們看到了懸浮狀態的引入。 現代交互設計的特點在 1985 年依然活躍。

1987 – HyperCard

這個程式是蘋果為麥金塔電腦發佈的，它使用了頁面和應用程式之間的超連結。 雖然美觀，但這個版本在超鏈接中沒有使用顏色。

1987 – WorldWideWeb (WWW)

WWW 是 Tim Berners-Lee 在 CERN 工作時創建的第一個瀏覽器。 它最初是黑白的，超鏈接下面有下劃線，這在今天的現代網站上仍然使用，是應對色盲的一個很好的解決方案。

是誰把它變成藍色的？

現在，我們已經能夠縮小藍色超連結起源的時間範圍。

萬維網，第一個瀏覽器，創建於1987年，是黑白的。 我們知道Mosaic於1993年1月23日發佈，被認為是第一個帶有藍色超鏈接的瀏覽器。 到目前為止，在 1987 年之前，我們還沒有發現在任何介面中使用藍色作為超連結，但是隨著彩色顯示器變得更加可用，介面開始支援顏色，情況很快就會發生變化。

在接下來的幾年裡，我們將看到在色彩和超連結管理方面的大量創新和實驗。

1990 – Windows 3.0

Windows 3 支援 16 種顏色，但是文本連結仍然是白色背景上的黑色連結，當被選中時，會變成黑色背景上的白色文本。

1991 – Gopher Protocol

Gopher 協定是在明尼蘇達大學創建的，用於搜索和檢索文檔。 它最初的設計特色是黑色背景上的綠色文字。

1991 – HyperCard (Color)

蘋果為其 HyperCards 增添了色彩，但值得注意的是，文本連結仍然是黑色而不是藍色。 然而，有些UI元素在交互時確實有藍色的影子，這是非常重要的，因為它顯示了藍色作為交互顏色的緩慢變化。

1991 年 10 月 5 日 – Linux Kernel

Linux 在黑色背景上使用白色文本。

1992 – ViolaWWW

在 ViolaWWW 瀏覽器中，文本連結有下劃線，背景顏色是灰色，就像我們看到的 Mosaic 的最初版本一樣。 然而，文本連結是黑色的。

1992 年 4 月 6 日 – Windows 3.1

自 1985 年以來，微軟一直使用深藍色作為介面，但從 1990 年開始，他們也開始使用它來進行交互。 在這裡，當使用者點擊不同的驅動器、資料夾和圖示時，微軟使用藍色超連結表示活動狀態。 這是非常重要的，因為它顯示了藍色從佈局顏色到交互顏色的緩慢演變，比藍色被添加到馬賽克的時間早了幾乎整整一年。

1992 年 1 月 16 日到 6 月 21 日 – Linux Kernel

1992年，Linux 內核在其控制台中添加了對顏色的支援。

誰最先使用藍色的？

1993 年 1 月 – Mosaic

Mosaic 的第一個測試版是為伊利諾伊大學的 X 視窗系統創建的。 最初的介面是黑白的，沒有藍色的超連結，但是有帶邊框的黑色超連結。 根據 X System 使用者指南，超連結被加下劃線或高亮顯示。

1993 年 4 月 12 日 – Mosaic Version 0.13

在 0.13 版本的 Mosaic 更新日誌中，有一條資訊對我們來說非常重要：

用《侏羅紀公園》（Jurassic Park）中傑夫•戈德布盧姆（Jeff Goldblum）飾演的伊恩•瑪律科姆（Ian Malcom）的不朽名言來說：”好吧，就是這樣。”

1993 年 4 月 21 日 – Mosaic Version 1

Mosaic 登錄 X 視窗系統。 我無法找到這個版本的介面截圖，但根據發佈說明，訪問的顏色被更改為非 SGI 的更好訪問的錨色。

1993 年 6 月 8 日 – Cello Beta

Cello 是康奈爾大學法學院（Cornell Law School）牽頭創建的。 有了 Cello，律師們就可以用 Windows 電腦訪問他們的法律網站。 我的隊友 Molly 幫我下載了 0.1 測試版，我們被這一發現震驚了：

就是這個！ 這就是我們尋找的超連結風格，儘管它不是一個超連結，而是一個標題。 在 1993 年之前，我們的藍色鏈接從未在使用者介面上出現過，但突然間，它在短短兩個月內出現在兩個不同的瀏覽器上，它們是在兩所不同的大學同時建立的。

1993 年 9 月 – Mosaic Ports

同年 9 月，Macintosh 7.1 操作系統發佈了一個 Mosaic 埠。 我能夠找到這個版本的截圖，其中包括一個藍色的超連結，這是第一個來自圖像的證據，藍色被用來表示一個超連結。

藍色鏈接出現后發生了什麼？

1993 年 6 月 – Unix GUI – Common Desktop Environment

Common Desktop Environment 是 UNIX 操作系統的 GUI，與構建 Mosaic 所用的操作系統相同。 這個介面的特點是超連結使用帶有下劃線的黑色文本。

1994 – Cello Version 1

Cello 已經過時了，但黃色的背景保住了藍色、帶下劃線的標題，不過仍然有黑色的超連結與邊框。

1994 年 10 月 13 日 – Netscape Navigator

由馬克·安德森（Marc Andreessen）和詹姆斯· H·克拉克（James H. Clark）創建的網景，使用了與Mosaic相同的視覺語言：藍色超連結和灰色背景。

1995 年 7 月 – Internet Explorer 1.0

1995年，微軟推出了 IE 瀏覽器，毫無疑問，它也以藍色超連結和灰色背景為特色。 Internet Explorer 是在 Windows 95 中附帶的，這是瀏覽器首次與操作系統一起出現。 大約在這個時候，瀏覽器大戰開始了，但超連結的外觀和感覺已經被牢固地確立。

2004 年 11 月 9 日 – Firefox 1.0

Mozilla 發佈了Firefox瀏覽器，它也提供了藍色超連結，這種超連結一直沿用至今。 這些圖片來自今天的 Netscape 1.22 和 Firefox Nightly。

為什麼是藍色超連結？

1993 年發生了什麼，讓超連結突然變成藍色？

沒人知道，但我有一些推測。 我經常聽說藍色被選為顏色對比的超鏈接顏色。 儘管 W3C 直到 1994 年才創建，因此我們判斷網頁可及性的標準還不定義，如果我們看一下對比作為文本顏色，黑色和藍色的連結顏色，對比度的 2.3：1，也不會通過足夠的顏色對比強烈的藍色超連結和黑色文本。

相反，我更傾向於認為 Cello 和 Mosaic 都是受到當時使用者介面設計共同趨勢的啟發。 我的理論是，Windows 3.1 在兩個項目開始前的幾個月才推出，這個介面是第一個突出使用藍色作為選擇顏色的介面，為藍色作為超鏈接顏色鋪平了道路。

此外，我們知道Mosaic的靈感來自 ViolaWWW，並保持了與介面相同的灰色背景和黑色文字。

回顧Mosaic的發行說明，我們看到在0.7版本中黑字和下劃線作為超連結的首選方式出現，我們可以推斷，直到4月中旬發生了一些事情，就在藍色超連結出現在0.13版本之前。 事實上，自 1985 年 Microsoft 1 推出以來，用帶有下劃線的黑色文本來傳遞連結就一直是標準做法，有人曾聲稱微軟剽竊了蘋果 Lisa 的外觀和感覺。

我認為，使用藍色超連結的真正原因，只是因為彩色顯示器在這個時期變得越來越流行。

馬賽克作為一種產品也變得流行起來，藍色超連結也隨之流行起來。 Mosaic 是在支援彩色顯示器的重要時期出現的; 超鏈接的標準是使用帶有某種下劃線、懸停狀態或邊框的黑色文本。 Mosaic 選擇了藍色，他們選擇將瀏覽器移植到多個作業系統上。 這説明 Mosaic 成為互聯網使用的標準瀏覽器，並鞏固了其使用者介面作為與網路交互的默認語言的地位。

當 Netscape 和 IE 被創建時，藍色超連結已經是網路和交互的代名詞。 現在，藍色鏈接與瀏覽器無關，正逐漸成為使用互聯網的象徵。

#0000FF 狂想曲

自從Mosaic在發行說明中使用現在隨處可見的藍色以來，已經過去了近30年，但現在已經不是上世紀90年代初了。 雖然探索瀏覽器是如何製作的是一件很有趣的事情，但在目前，我們已經接受了一個福音真理，即連結可以而且應該是藍色的，因為這些早期的先驅們說它應該是這樣的。

創建超連結時，可用的顏色是有限的。

今天，我們幾乎有各種各樣的顏色可供選擇，那麼網路鏈接的默認顏色和狀態應該變為什麼呢？ 當我們有機會脫離傳統的時候，我們是為了進步而這樣做，還是因為藍色是既定的視覺模式而保留它？

如果你想改變連結的顏色，以下是我在選擇連結顏色時對完美顏色的要求：

1、最佳文本可訪問性與背景顏色和周圍的文本。 您的設計決策不應該成為使用者無法訪問頁面內容的原因。

2、互動式狀態應該始終在樣式表中設置樣式。 例如：觸摸、訪問、懸停、活動和聚焦。

3、鏈接和按鈕應該足夠大，可以點擊或點擊。 你無法確定人們是如何通過觸控筆、手指、滑鼠或觸控板在設備上與你的內容進行交互的。 這是你的工作，以確保你的連結是容易導航和有足夠的空間周圍。

最後，所有鏈接都應該是藍色的嗎？

也許是這樣，也許不是。

用來表示超連結的視覺元素有很長一段路要走，而藍色只是用來表示超連結的眾多元素之一。 連結是關於將資訊連接在一起。 一定要確保一個超連結從周圍的其他內容中脫穎而出。 有時這意味著你需要下劃線，或者背景顏色，或者可能只是，你需要藍色而已。