超级链接（为什么超链接是蓝色的？）超链接(为什么超链接是蓝色的？)

作者|伊莉斯·布兰查德(《mozilla.org》的作者)

翻译| LZM

互联网已经渗透到我们生活的方方面面，但我敢打赌，数字世界有一个方面是你认为理所当然的。有没有发现很多链接，尤其是超链接都是蓝色的？

当一个同事漫不经心地问我为什么链接是蓝色的时，我被难住了。

作为一名从2001年开始制作网站的用户体验设计师，我总是将链接设置为蓝色。我曾经提倡应用特定的蓝色调，并且一直在应用。是的，但是我从来没有停下来想，为什么链接是蓝色的？这就是生活的现实。草是绿色的，超链接是蓝色的。在文化上，我们经常将链接与蓝色联系在一起，以至于当谷歌在2016年将链接改为黑色时，造成了相当大的破坏。

但是现在，我发现自己完全被这个问题困扰了。为什么链接是蓝色的？谁决定把它们染成蓝色的？这个决定是什么时候做出的？这个决议是如何产生如此持久的影响的？

我求助于我的同事来赞助我的研究，我们开始寻找答案。Mosaic是马克·安德森和埃里克·比纳在1993年1月23日宣布的早期阅读器，带有蓝色超链接。

然而，为了真正了解超链接的起源和演变，我通过技能历史和界面进行了一次旅行，以了解在颜色显示之前链接是如何处理的，以及一旦颜色成为一种选择，界面和超链接是如何迅速演变的。

通过考察这些预先着色的超链接的解决方案，我们可以看到超链接如何随着时间的推移而发展，以及这些早期的创新如何影响今天网络的可用性。

1964年——世外桃源项目

Xanadu计划有史以来第一次将两页信息连接起来。链接是页面之间的可见线条。

1983年–HyperTIES系统

该系统引入了颜色，因为它在黑色背景上应用了青色超链接。HyperTIES作为电子杂志使用。这可能是我们今天所知道和喜欢的蓝色超链接的祖先，但我不认为这是第一次应用蓝色超链接，因为这种颜色是青色，而不是深蓝色。

1985年–Windows 1.0

Windows 1.0带来了全彩图形界面。链接和按钮还是黑色的，类似当时苹果的界面。然而，我发现有趣的是，这是我们在布局中应用深蓝色的第一个例子。深蓝色广泛用于话题和情态动词的边界。

Windows 1.0另一个有趣的地方是它的超链接。这是我能找到的第一个用下划线表示超链接的例子。为了让Windows 1.0更有趣，我们看到了浮动状态的引入。现代交互设计的特点在1985年仍然很活跃。

1987年——超级卡

这个程序是苹果公司为麦金塔电脑发布的。它使用页面和应用程序之间的超链接。尽管这个版本很优雅，但它没有对超链接应用颜色。

1987年——万维网

WWW是蒂姆·伯纳斯·李在欧洲粒子物理研究所工作时发明的第一个阅读器。一开始是黑白的，超链接下面有下划线，现在的现代网站上还在用，是对付色盲的好办法。

谁把它变成蓝色的？

现在，我们已经能够缩小蓝色超链接源的时间范围。

环球网，第一个阅读器，成立于1987年，是黑白的。我们知道Mosaic在1993年1月23日宣布，它被认为是第一个带有蓝色超链接的阅读器。到目前为止，在1987年之前，我们还没有发明蓝色作为超链接在任何界面中的应用，但是随着彩色显示变得更加可用，界面开始支持颜色，这种情况很快就会改变。

在接下来的几年里，我们将会看到大量的颜色和超链接管理的创新和实验。

1990年–Windows 3.0

Windows 3支持16色，但文字链接仍然是白底黑链接。选中时，它将变成黑色背景上的白色文本。

1991年–地鼠协议

Gopher agreement成立于明尼苏达大学，用于搜索和检索文档。它最初的设计特点是黑色背景上的绿色文字。

1991年–HyperCard(彩色)

苹果为其HyperCards添加了颜色，但值得注意的是，文本链接仍然是黑色而不是蓝色。但有些UI元素在交互时其实是有蓝色阴影的，这一点很重要，因为它显示了蓝色作为交互颜色的缓慢变化。

1991年10月5日——Linux内核

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

1992年——violaww

在ViolaWWW reader中，文本链接是带下划线的，背景色是灰色的，就像我们看到的原版Mosaic一样。但是，文本链接是黑色的。

1992年4月6日-Windows 3.1

自1985年以来，微软一直使用深蓝色作为界面，但从1990年开始，他们也开始使用它进行交互。在这里，当用户点击不同的驱动器、文件夹和图标时，微软使用蓝色超链接来表示运动状态。这对于技术资源网来说非常重要，因为这显示了蓝色从布局色到交互色的缓慢演变，比蓝色加入马赛克的时候几乎早了整整一年。

1992年1月16日至6月21日——Linux内核

1992年，Linux内核在其控制台中增加了颜色支持。

谁先涂了蓝色的？

1993年1月-马赛克

Mosaic的第一个测试版是为伊利诺伊大学的X window系统创建的。原来的界面是黑白的，没有蓝色的超链接，但是有带边框的黑色超链接。根据X系统用户指南，超链接会加下划线或突出显示。

1993年4月12日-马赛克版本0.13

在0.13版本的马赛克更新日志中，有一条信息对我们非常重要:

用《侏罗纪公园》中杰夫·高布伦饰演的伊恩·马尔孔的不朽名言来说，“嗯，就是这样。”

1993年4月21日-马赛克版本1

马赛克登录X窗口系统。我找不到这个版本界面的截图，但是根据公告，访问的颜色改成了非SGI的更好访问的锚色。

1993年6月8日——大提琴测试

Cello是康奈尔法学院创立的。有了Cello，律师可以用Windows电脑访问自己的法律网站。我的队友莫莉帮我下载了0.1测试版，我们被这个发明震惊了:

就这样！这就是我们要找的超链接样式，虽然不是超链接，而是主题。在1993年之前，我们的蓝色链接从来没有出现在用户界面上，但是突然之间，它在短短两个月内出现在两个不同的阅读器上，这两个阅读器同时设置在两个不同的大学里。

1993年9月-马赛克港口

同年9月，Macintosh 7.1操作系统公布了马赛克端口。我能找到这个版本的截图，里面有一个蓝色的超链接。这是来自图像的第一个证据。蓝色用来代表超链接。

当蓝色链接出现时会发生什么？

1993年6月–Unix GUI–通用桌面环境

常见的桌面环境是UNIX操作系统的GUI，类似于用来构建Mosaic的操作系统。这个界面的特点是超链接使用带下划线的黑色文本。

1994年——大提琴第一版

Cello已经过时了，但是黄色的背景保留了蓝色和下划线的主题，但是仍然有黑色的超链接和边框。

1994年10月13日——网景导航员

马克·安德森和詹姆士·克拉克创建的网景公司使用了和马赛克一样的视觉语言:蓝色超链接和灰色背景。

1995年7月-Internet Explorer 1.0

1995年微软推出IE阅读器，无疑也是蓝色超链接，灰色背景的特点。Internet Explorer自带Windows 95，这是阅读器第一次和操作系统一起出现。大约在这个时候，读者战争开始了，但超链接的外观和感觉已经牢固地建立起来。

2004年11月9日-火狐1.0

Mozilla公布了Firefox reader，也提供了蓝色超链接，一直沿用至今。这些图片来自今天的网景1.22和火狐每夜。

为什么是蓝色超链接？

1993年发生了什么让超链接突然变成蓝色？

没有人知道，但我有一些猜测。经常听说选择蓝色作为超链接颜色进行颜色对比。尽管W3C直到1994年才成立，但我们得出的结论是，网页的可访问性等级仍然没有定义。如果我们把对比看做文字颜色，黑色和蓝色的链接颜色，对比度是2.3:1的话，我们就不会把强蓝色的超链接和足够多颜色的黑色文字进行对比。

相反，我更倾向于认为Cello和Mosaic的灵感来自于当时用户界面设计的共同趋势。我的理论是，Windows 3.1是在两个项目开始前几个月才推出的。这个界面第一次突出了蓝色作为选择颜色的应用，为蓝色作为超链接颜色铺平了道路。

另外，我们知道Mosaic的灵感来源于ViolaWWW，坚持了和界面一样的灰色背景和黑色文字。

回顾Mosaic的发布说明，可以看到在0.7版本中，黑色和下划线作为超链接的首选方法出现。我们可以推断，直到4月中旬，就在蓝色超链接出现在0.13版本之前，发生了一些事情。事实上，自从1985年Microsoft 1推出以来，用带下划线的黑色文本传输链接已经成为一种标准做法。有人曾声称微软抄袭了苹果Lisa的外观和感觉。

在我看来，应用蓝色超链接的真正原因只是这个时代彩色显示器越来越普及。

马赛克作为一种产品已经流行起来，蓝色超链接也开始流行起来。马赛克出现在支持彩色显示的主要时代；超链接的尺度是应用带有一些下划线、悬停或边框的黑色文本。Mosaic选择了blue，他们选择将阅读器移植到多个操作系统上。这促使Mosaic成为互联网应用程序的标准阅读器，并巩固了其用户界面作为与网络交互的默认语言的地位。

网景和IE成立的时候，蓝色超链接是网络和交互的代名词。现在，蓝色链接已经与阅读器无关，正逐渐成为应用互联网的标志。

#0000FF狂想曲

距离Mosaic在发布说明中应用无处不在的蓝色已经过去了近30年，但现在已经不是90年代初了。虽然在技术资源网搞清楚阅读器是怎么做出来的很有意思，但是目前我们收到了一个福音真理，链接可以而且应该是蓝色的，因为这些早期的先行者说应该是这样的。

创建超链接时，可用的颜色是有限的。

今天，我们几乎有各种各样的颜色可供选择，那么为什么要改变网络链接的默认颜色和条件呢？当我们有机会脱离传统的时候，我们这样做是为了改进，还是因为蓝色是既定的视觉模式而保留蓝色？

如果你想改变链接的颜色，以下是我在选择链接颜色时对颜色的改进要求:

背景色和周围文字的最佳文本可访问性。你的设计决策不应该成为用户无法访问页面内容的理由。

交互情况应该总是在样式表中进行样式化。如触摸、访问、悬停、移动和聚焦。

链接和按钮应该足够大，可以被点击或点击。你无法确定人们如何通过手写笔、手指、鼠标或触摸板与设备上的内容进行交互。你的工作是确保你的链接易于导航，并且周围有足够的空空间。

最后，是不是所有链接都应该是蓝色的？

也许是这样，也许不是。

用来表现超链接的视觉元素还有很长的路要走，蓝色只是用来表现超链接的众多元素之一。链接是将信息连接在一起。确保超链接从周围的内容中脱颖而出。有时这意味着你需要下划线，或者背景色，或者可能，你只需要蓝色。