為什麼超鏈接是藍色的?

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

作為從 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、鏈接和按鈕應該足夠大,可以點擊或點擊。你無法確定人們是如何通過觸控筆、手指、鼠標或觸控板在設備上與你的內容進行交互的。這是你的工作,以確保你的鏈接是容易導航和有足夠的空間周圍。

最後,所有鏈接都應該是藍色的嗎?

也許是這樣,也許不是。

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

(0)
上一篇 2021-09-20 16:55
下一篇 2021-09-20 16:56

相关推荐