大多數(shù)網(wǎng)頁界面設(shè)計(jì)及交互制作中的超鏈接是藍(lán)色的背后故事

時(shí)間：2023-10-03 03:54:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-03 03:54:01 來源：網(wǎng)站運(yùn)營

大多數(shù)網(wǎng)頁界面設(shè)計(jì)及交互制作中的超鏈接是藍(lán)色的背后故事：互聯(lián)網(wǎng)已經(jīng)深入到我們生活的方方面面，但我敢打賭，數(shù)字世界的某一方面是理所當(dāng)然的。你有沒有注意到很多鏈接，特別是超鏈接，都是藍(lán)色的？當(dāng)一位同事隨口問我為什么鏈接是藍(lán)色的時(shí)，我被難住了。作為自 2001 年以來創(chuàng)建網(wǎng)站的用戶體驗(yàn)設(shè)計(jì)師，我總是將鏈接設(shè)為藍(lán)色。我一直提倡藍(lán)色的特定陰影，并支持藍(lán)色的一致應(yīng)用，是的，但我從未停下來想過，為什么鏈接是藍(lán)色的？這只是生活中的一個(gè)事實(shí)。草為綠色，超鏈接為藍(lán)色。在文化上，我們將鏈接與藍(lán)色聯(lián)系在一起，以至于在 2016 年，當(dāng)谷歌將其鏈接改為黑色時(shí)，它造成了相當(dāng)大的破壞。

但是現(xiàn)在，我發(fā)現(xiàn)自己被這個(gè)問題所困擾，為什么鏈接是藍(lán)色的？誰決定讓它們變藍(lán)？這個(gè)決定是什么時(shí)候做出的，這個(gè)決定是如何產(chǎn)生如此持久的影響的？

我求助于我的同事幫助我研究，我們開始尋找答案。Mosaic 是Marc Andreessen 和 Eric Bina于 1993 年 1 月 23 日發(fā)布的早期瀏覽器，帶有藍(lán)色超鏈接。不過，為了真正了解超鏈接的起源和演變，我瀏覽了技術(shù)歷史和界面，以探索在彩色顯示器之前鏈接是如何處理的，以及一旦顏色成為一種選擇，界面和超鏈接是如何快速演變的。


藍(lán)色超鏈接的始祖


通過查看這些預(yù)著色超鏈接解決方案，我們可以了解超鏈接是如何隨著時(shí)間演變的，以及這些早期創(chuàng)新如何影響當(dāng)今網(wǎng)絡(luò)的可用性。

1964 –世外桃源計(jì)劃
世外桃源項(xiàng)目有史以來第一次將兩頁信息連接起來。鏈接是頁面之間的視覺線。


1983 – HyperTIES 系統(tǒng)


該系統(tǒng)引入了顏色，因?yàn)樗诤谏尘吧鲜褂们嗌溄?。HyperTies 被用作“電子雜志”。這可能是我們今天所知道和喜愛的藍(lán)色超鏈接的祖先，但我不相信這是藍(lán)色超鏈接的第一個(gè)實(shí)例，因?yàn)檫@種顏色是青色，而不是深藍(lán)色。


1985 年– Windows 1.0


Windows 1.0 帶來了全彩色圖形界面。鏈接和按鈕仍然是黑色的，類似于當(dāng)時(shí)蘋果的界面。然而，我確實(shí)覺得有趣的是，這是我們在布局中使用的深藍(lán)色的第一個(gè)實(shí)例。深藍(lán)色在標(biāo)題和模態(tài)周圍的邊框中大量使用。


仍然出現(xiàn)在現(xiàn)代網(wǎng)站中的有關(guān) Windows 1.0 的另一個(gè)有趣的事情是帶下劃線的超鏈接。這是第一個(gè)下劃線用于指示我能夠找到的超鏈接的示例。
為了使 Windows 1.0 更加有趣，我們看到了懸停狀態(tài)的引入?，F(xiàn)代交互設(shè)計(jì)的標(biāo)志在 1985 年依然活躍。


1987 年 –超級卡


該程序由 Apple 為 Macintosh 發(fā)布，使用頁面和應(yīng)用程序之間的超鏈接。雖然美觀，但這個(gè)版本沒有在其超鏈接中使用顏色。


1987 年– 萬維網(wǎng)( WWW)


WWW 是Tim Berners-Lee在 CERN 工作時(shí)創(chuàng)建的第一個(gè)瀏覽器。它一開始是黑白的，超鏈接下有下劃線，今天仍然在現(xiàn)代網(wǎng)站上使用，是色盲的一個(gè)很好的解決方案。

尋找誰讓它變藍(lán)

我們現(xiàn)在已經(jīng)能夠縮小藍(lán)色超鏈接來源的時(shí)間范圍。WWW 是第一個(gè)瀏覽器，創(chuàng)建于 1987 年，是黑白的。我們知道 Mosaic 于 1993 年 1 月 23 日發(fā)布，被認(rèn)為是第一個(gè)帶有藍(lán)色超鏈接的瀏覽器。到目前為止，我們還沒有在 1987 年之前的任何界面中找到用于超鏈接的藍(lán)色，但是隨著彩色顯示器變得越來越可用并且界面開始支持顏色，情況很快發(fā)生了變化。未來幾年將見證色彩和超鏈接管理方面的大規(guī)模創(chuàng)新和實(shí)驗(yàn)。

1990 年 – Windows 3.0


Windows 3 包括對 16 種顏色的支持，但是文本鏈接仍然是白底黑字，選中時(shí)會(huì)變成黑底白字。


1991 年 - Gopher 協(xié)議


Gopher 協(xié)議是在明尼蘇達(dá)大學(xué)創(chuàng)建的，用于搜索和檢索文檔。其原始設(shè)計(jì)以黑色背景上的綠色文字為特色。


1991 年 – HyperCard（彩色）


Apple 為其 HyperCard 增添了色彩，但值得注意的是，文本鏈接仍然是黑色而非藍(lán)色。然而，一些 UI 元素在交互時(shí)確實(shí)有藍(lán)色調(diào)，這是非常重要的，因?yàn)樗砻魉{(lán)色被用作交互顏色的緩慢轉(zhuǎn)變。


1991 年 10 月 5 日 – Linux 內(nèi)核


Linux 使用黑底白字。


1992 年 – 中提琴WWW


在 ViolaWWW 瀏覽器中，文本鏈接帶有下劃線，背景顏色為灰色，就像我們看到的 Mosaic 最初版本一樣。但是，文本鏈接是黑色的。


1992 年 4 月 6 日 – Windows 3.1


微軟自 1985 年以來一直使用深藍(lán)色作為界面，但從 1990 年開始，他們也開始使用深藍(lán)色進(jìn)行交互。在這里，當(dāng)用戶單擊不同的驅(qū)動(dòng)器、文件夾和圖標(biāo)時(shí)，Microsoft 使用“藍(lán)色超鏈接”表示活動(dòng)狀態(tài)。這非常重要，因?yàn)樗@示了這種藍(lán)色從布局顏色到交互式顏色的緩慢演變，比藍(lán)色添加到 Mosaic 的時(shí)間早了幾乎整整一年。


1992 年 1 月 16 日 – 1992 年 6 月 21 日 – Linux 內(nèi)核
1992 年，Linux 內(nèi)核在其控制臺(tái)中獲得了對顏色的支持。

誰先做的？


1993 年 1 月 – 馬賽克


Mosaic 的第一個(gè)測試版是為伊利諾伊大學(xué)的 X 窗口系統(tǒng)創(chuàng)建的。原來的界面是黑白的，沒有藍(lán)色的超鏈接，而是有帶邊框的黑色超鏈接。根據(jù) X System 用戶指南，超鏈接帶有下劃線或突出顯示。

1993 年 4 月 12 日 – 馬賽克版本 0.13


在 Mosaic 0.13 版本的更新日志中，有一項(xiàng)對我們非常重要：
更改了默認(rèn)錨點(diǎn)表示：未訪問的藍(lán)色和單實(shí)線下劃線，已訪問的深紫色和單虛線下劃線。

發(fā)行說明
用杰夫·高布倫在《侏羅紀(jì)公園》中飾演的伊恩·馬爾科姆角色不朽的話來說，“好吧，就是這樣?！?

1993 年 4 月 21 日 – 馬賽克版本 1


為 X Window 系統(tǒng)推出 Mosaic。我無法找到此版本的界面截圖，但根據(jù)發(fā)行說明，訪問顏色已更改為“非 SGI 的更好訪問錨顏色”。

1993 年 6 月 8 日 – 大提琴測試版

Cello 是在康奈爾法學(xué)院創(chuàng)建的，以便律師可以從 Windows 計(jì)算機(jī)訪問他們的法律網(wǎng)站。我的隊(duì)友 Molly 能夠?yàn)槲蚁螺d 0.1 測試版，我們對所發(fā)現(xiàn)的內(nèi)容感到震驚：

就在那里！我們的超鏈接樣式，除了它不是超鏈接之外，它是標(biāo)題。我們的“藍(lán)色鏈接”在 1993 年之前從未出現(xiàn)在用戶界面中，但突然在兩個(gè)不同的瀏覽器中同時(shí)出現(xiàn)在兩個(gè)不同的瀏覽器中，兩個(gè)實(shí)例中同時(shí)出現(xiàn)。

1993 年 9 月 – 馬賽克港口


到 9 月，Mosaic 的一個(gè)端口發(fā)布到 Macintosh 7.1 操作系統(tǒng)。我找到了該版本的屏幕截圖，其中包含一個(gè)藍(lán)色超鏈接，這是藍(lán)色用于表示超鏈接的第一個(gè)視覺證據(jù)。

藍(lán)色鏈接之后是什么？


1993 年 6 月 – Unix GUI – 通用桌面環(huán)境


通用桌面環(huán)境是 UNIX 操作系統(tǒng)的 GUI，與用于構(gòu)建 Mosaic 的操作系統(tǒng)相同。此界面以黑色文本為特色，帶有用于超鏈接的下劃線。


1994 年 – 大提琴版本 1


大提琴已經(jīng)過測試版，但現(xiàn)在具有黃色背景，并保留了鏈接藍(lán)色下劃線的標(biāo)題，并且仍然具有帶邊框的黑色超鏈接。


1994 年 10 月 13 日 – Netscape Navigator


Netscape 由 Marc Andreessen 和 James H. Clark 創(chuàng)建，使用與 Mosaic 相同的視覺語言：藍(lán)色超鏈接和灰色背景。


1995 年 7 月 – Internet Explorer 1.0


1995 年，Microsoft 生產(chǎn)了 Internet Explorer，毫不奇怪，它也具有藍(lán)色超鏈接和灰色背景。Internet Explorer 與 Windows 95 打包在一起，這是瀏覽器首次與操作系統(tǒng)一起提供。大約在這個(gè)時(shí)候，瀏覽器大戰(zhàn)開始了，但超鏈接的外觀和感覺已經(jīng)牢固地建立起來。

2004 年 11 月 9 日 – Firefox 1.0


Mozilla Firefox 已發(fā)布，并且還具有藍(lán)色超鏈接，至今仍在使用。這些圖像來自今天的Netscape 1.22 和Firefox Nightly。

那么為什么是藍(lán)色超鏈接呢？


1993 年發(fā)生了什么突然使超鏈接變藍(lán)？沒有人知道，但我有一些理論。


我經(jīng)常聽說藍(lán)色被選為顏色對比的超鏈接顏色。好吧，即使 W3C 直到 1994 年才創(chuàng)建，因此我們判斷 Web 可訪問性的標(biāo)準(zhǔn)還沒有定義，如果我們將黑色作為文本顏色與藍(lán)色作為鏈接顏色之間的對比看一下，就會(huì)發(fā)現(xiàn)是 2.3:1 的對比度，這不會(huì)作為藍(lán)色超鏈接和黑色文本之間足夠的顏色對比度通過。


相反，我喜歡想象 Cello 和 Mosaic 都受到當(dāng)時(shí)用戶界面設(shè)計(jì)中發(fā)生的相同趨勢的啟發(fā)。我的理論是，Windows 3.1 是在兩個(gè)項(xiàng)目開始前幾個(gè)月才推出的，這個(gè)界面是第一個(gè)突出使用藍(lán)色作為選擇顏色的界面，為藍(lán)色用作超鏈接顏色鋪平了道路。


此外，我們知道 Mosaic 的靈感來自 ViolaWWW，并保留了他們用于界面的相同灰色背景和黑色文本。查看 Mosaic 的發(fā)行說明，我們在0.7 版中看到帶有下劃線的黑色文本是傳達(dá)超鏈接的首選方式，我們可以推斷出這種情況仍然存在，直到 4 月中旬左右發(fā)生了一些事情，就在藍(lán)色超鏈接在0.13 版中出現(xiàn)之前。事實(shí)上，自 1985 年以來，以帶下劃線的黑色文本形式傳送鏈接一直是 Microsoft 1 的標(biāo)準(zhǔn)，有人曾聲稱微軟竊取了蘋果 Lisa 的外觀和感覺。


我認(rèn)為我們使用藍(lán)色超鏈接的真正原因僅僅是因?yàn)榇藭r(shí)彩色顯示器變得越來越流行。馬賽克作為一種產(chǎn)品也開始流行，藍(lán)色超鏈接也隨之而來。Mosaic 出現(xiàn)在對彩色顯示器的支持正在發(fā)生變化的重要時(shí)期。標(biāo)準(zhǔn)是超鏈接使用帶有某種下劃線、懸停狀態(tài)或邊框的黑色文本。Mosaic 選擇使用藍(lán)色，并且他們選擇將瀏覽器移植到多個(gè)操作系統(tǒng)。這幫助 Mosaic 成為互聯(lián)網(wǎng)使用的標(biāo)準(zhǔn)瀏覽器，并幫助鞏固其用戶界面作為與網(wǎng)絡(luò)交互的默認(rèn)語言。


在創(chuàng)建 Netscape 和 Internet Explorer 時(shí)，藍(lán)色超鏈接已經(jīng)是 Web 和交互的同義詞。藍(lán)色鏈接現(xiàn)在與瀏覽器無關(guān)，并且正在成為使用互聯(lián)網(wǎng)意味著什么的象征。


#0000FF 中的狂想曲

自從 Mosaic 在其發(fā)行說明中加入現(xiàn)在無處不在的藍(lán)色已經(jīng)將近 30 年了，但現(xiàn)在已經(jīng)不是 1990 年代初期了。雖然發(fā)現(xiàn)瀏覽器是如何制造的秘密很有趣，但就目前而言，我們已經(jīng)接受了鏈接可以并且應(yīng)該只為藍(lán)色的福音真理，因?yàn)檫@些早期的先驅(qū)們說應(yīng)該是這樣。

創(chuàng)建超鏈接時(shí)，可用的顏色有限。今天我們幾乎擁有所有顏色選項(xiàng)，那么互聯(lián)網(wǎng)上鏈接的默認(rèn)顏色和狀態(tài)應(yīng)該是什么？當(dāng)每一次有機(jī)會(huì)背離傳統(tǒng)時(shí)，我們這樣做是為了進(jìn)步，還是應(yīng)該保留藍(lán)色，因?yàn)樗且环N既定的視覺模式？


如果您要更改鏈接顏色，以下是我在選擇鏈接顏色時(shí)對完美顏色的要求列表：
? 具有背景顏色和周圍文本的最佳文本可訪問性。您的設(shè)計(jì)決策不應(yīng)成為用戶無法訪問頁面內(nèi)容的原因。
? 交互狀態(tài)應(yīng)始終在樣式表中設(shè)置樣式。示例包括：觸摸、訪問、懸停、活動(dòng)和焦點(diǎn)。
? 鏈接和按鈕應(yīng)該足夠大以便點(diǎn)擊或點(diǎn)擊。您無法確定人們?nèi)绾问褂糜|控筆、手指、鼠標(biāo)或觸控板與設(shè)備上的內(nèi)容進(jìn)行交互。您的工作是確保您的鏈接易于瀏覽并且周圍有足夠的空間。


最后，所有鏈接都應(yīng)該是藍(lán)色的嗎？也許是，也許不是。有很長一段用于表示超鏈接的視覺元素，藍(lán)色只是代表超鏈接的眾多元素之一。鏈接是關(guān)于將信息連接在一起。始終確保超鏈接從周圍的其余內(nèi)容中脫穎而出。有時(shí)這意味著您需要下劃線或背景色，或者也許只是您需要藍(lán)色。

以上原著摘自互聯(lián)網(wǎng)