大多数网页界面设计及交互制作中的超链接是蓝色的背后故事

时间：2023-10-03 03:54:01 | 来源：网站运营

时间：2023-10-03 03:54:01 来源：网站运营

大多数网页界面设计及交互制作中的超链接是蓝色的背后故事：互联网已经深入到我们生活的方方面面，但我敢打赌，数字世界的某一方面是理所当然的。你有没有注意到很多链接，特别是超链接，都是蓝色的？当一位同事随口问我为什么链接是蓝色的时，我被难住了。作为自 2001 年以来创建网站的用户体验设计师，我总是将链接设为蓝色。我一直提倡蓝色的特定阴影，并支持蓝色的一致应用，是的，但我从未停下来想过，为什么链接是蓝色的？这只是生活中的一个事实。草为绿色，超链接为蓝色。在文化上，我们将链接与蓝色联系在一起，以至于在 2016 年，当谷歌将其链接改为黑色时，它造成了相当大的破坏。

但是现在，我发现自己被这个问题所困扰，为什么链接是蓝色的？谁决定让它们变蓝？这个决定是什么时候做出的，这个决定是如何产生如此持久的影响的？

我求助于我的同事帮助我研究，我们开始寻找答案。Mosaic 是Marc Andreessen 和 Eric Bina于 1993 年 1 月 23 日发布的早期浏览器，带有蓝色超链接。不过，为了真正了解超链接的起源和演变，我浏览了技术历史和界面，以探索在彩色显示器之前链接是如何处理的，以及一旦颜色成为一种选择，界面和超链接是如何快速演变的。


蓝色超链接的始祖


通过查看这些预着色超链接解决方案，我们可以了解超链接是如何随着时间演变的，以及这些早期创新如何影响当今网络的可用性。

1964 –世外桃源计划
世外桃源项目有史以来第一次将两页信息连接起来。链接是页面之间的视觉线。


1983 – HyperTIES 系统


该系统引入了颜色，因为它在黑色背景上使用青色超链接。HyperTies 被用作“电子杂志”。这可能是我们今天所知道和喜爱的蓝色超链接的祖先，但我不相信这是蓝色超链接的第一个实例，因为这种颜色是青色，而不是深蓝色。


1985 年– Windows 1.0


Windows 1.0 带来了全彩色图形界面。链接和按钮仍然是黑色的，类似于当时苹果的界面。然而，我确实觉得有趣的是，这是我们在布局中使用的深蓝色的第一个实例。深蓝色在标题和模态周围的边框中大量使用。


仍然出现在现代网站中的有关 Windows 1.0 的另一个有趣的事情是带下划线的超链接。这是第一个下划线用于指示我能够找到的超链接的示例。
为了使 Windows 1.0 更加有趣，我们看到了悬停状态的引入。现代交互设计的标志在 1985 年依然活跃。


1987 年 –超级卡


该程序由 Apple 为 Macintosh 发布，使用页面和应用程序之间的超链接。虽然美观，但这个版本没有在其超链接中使用颜色。


1987 年– 万维网( WWW)


WWW 是Tim Berners-Lee在 CERN 工作时创建的第一个浏览器。它一开始是黑白的，超链接下有下划线，今天仍然在现代网站上使用，是色盲的一个很好的解决方案。

寻找谁让它变蓝

我们现在已经能够缩小蓝色超链接来源的时间范围。WWW 是第一个浏览器，创建于 1987 年，是黑白的。我们知道 Mosaic 于 1993 年 1 月 23 日发布，被认为是第一个带有蓝色超链接的浏览器。到目前为止，我们还没有在 1987 年之前的任何界面中找到用于超链接的蓝色，但是随着彩色显示器变得越来越可用并且界面开始支持颜色，情况很快发生了变化。未来几年将见证色彩和超链接管理方面的大规模创新和实验。

1990 年 – Windows 3.0


Windows 3 包括对 16 种颜色的支持，但是文本链接仍然是白底黑字，选中时会变成黑底白字。


1991 年 - Gopher 协议


Gopher 协议是在明尼苏达大学创建的，用于搜索和检索文档。其原始设计以黑色背景上的绿色文字为特色。


1991 年 – HyperCard（彩色）


Apple 为其 HyperCard 增添了色彩，但值得注意的是，文本链接仍然是黑色而非蓝色。然而，一些 UI 元素在交互时确实有蓝色调，这是非常重要的，因为它表明蓝色被用作交互颜色的缓慢转变。


1991 年 10 月 5 日 – Linux 内核


Linux 使用黑底白字。


1992 年 – 中提琴WWW


在 ViolaWWW 浏览器中，文本链接带有下划线，背景颜色为灰色，就像我们看到的 Mosaic 最初版本一样。但是，文本链接是黑色的。


1992 年 4 月 6 日 – Windows 3.1


微软自 1985 年以来一直使用深蓝色作为界面，但从 1990 年开始，他们也开始使用深蓝色进行交互。在这里，当用户单击不同的驱动器、文件夹和图标时，Microsoft 使用“蓝色超链接”表示活动状态。这非常重要，因为它显示了这种蓝色从布局颜色到交互式颜色的缓慢演变，比蓝色添加到 Mosaic 的时间早了几乎整整一年。


1992 年 1 月 16 日 – 1992 年 6 月 21 日 – Linux 内核
1992 年，Linux 内核在其控制台中获得了对颜色的支持。

谁先做的？


1993 年 1 月 – 马赛克


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

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


在 Mosaic 0.13 版本的更新日志中，有一项对我们非常重要：
更改了默认锚点表示：未访问的蓝色和单实线下划线，已访问的深紫色和单虚线下划线。

发行说明
用杰夫·高布伦在《侏罗纪公园》中饰演的伊恩·马尔科姆角色不朽的话来说，“好吧，就是这样。”

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


为 X Window 系统推出 Mosaic。我无法找到此版本的界面截图，但根据发行说明，访问颜色已更改为“非 SGI 的更好访问锚颜色”。

1993 年 6 月 8 日 – 大提琴测试版

Cello 是在康奈尔法学院创建的，以便律师可以从 Windows 计算机访问他们的法律网站。我的队友 Molly 能够为我下载 0.1 测试版，我们对所发现的内容感到震惊：

就在那里！我们的超链接样式，除了它不是超链接之外，它是标题。我们的“蓝色链接”在 1993 年之前从未出现在用户界面中，但突然在两个不同的浏览器中同时出现在两个不同的浏览器中，两个实例中同时出现。

1993 年 9 月 – 马赛克港口


到 9 月，Mosaic 的一个端口发布到 Macintosh 7.1 操作系统。我找到了该版本的屏幕截图，其中包含一个蓝色超链接，这是蓝色用于表示超链接的第一个视觉证据。

蓝色链接之后是什么？


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


通用桌面环境是 UNIX 操作系统的 GUI，与用于构建 Mosaic 的操作系统相同。此界面以黑色文本为特色，带有用于超链接的下划线。


1994 年 – 大提琴版本 1


大提琴已经过测试版，但现在具有黄色背景，并保留了链接蓝色下划线的标题，并且仍然具有带边框的黑色超链接。


1994 年 10 月 13 日 – Netscape Navigator


Netscape 由 Marc Andreessen 和 James H. Clark 创建，使用与 Mosaic 相同的视觉语言：蓝色超链接和灰色背景。


1995 年 7 月 – Internet Explorer 1.0


1995 年，Microsoft 生产了 Internet Explorer，毫不奇怪，它也具有蓝色超链接和灰色背景。Internet Explorer 与 Windows 95 打包在一起，这是浏览器首次与操作系统一起提供。大约在这个时候，浏览器大战开始了，但超链接的外观和感觉已经牢固地建立起来。

2004 年 11 月 9 日 – Firefox 1.0


Mozilla Firefox 已发布，并且还具有蓝色超链接，至今仍在使用。这些图像来自今天的Netscape 1.22 和Firefox Nightly。

那么为什么是蓝色超链接呢？


1993 年发生了什么突然使超链接变蓝？没有人知道，但我有一些理论。


我经常听说蓝色被选为颜色对比的超链接颜色。好吧，即使 W3C 直到 1994 年才创建，因此我们判断 Web 可访问性的标准还没有定义，如果我们将黑色作为文本颜色与蓝色作为链接颜色之间的对比看一下，就会发现是 2.3:1 的对比度，这不会作为蓝色超链接和黑色文本之间足够的颜色对比度通过。


相反，我喜欢想象 Cello 和 Mosaic 都受到当时用户界面设计中发生的相同趋势的启发。我的理论是，Windows 3.1 是在两个项目开始前几个月才推出的，这个界面是第一个突出使用蓝色作为选择颜色的界面，为蓝色用作超链接颜色铺平了道路。


此外，我们知道 Mosaic 的灵感来自 ViolaWWW，并保留了他们用于界面的相同灰色背景和黑色文本。查看 Mosaic 的发行说明，我们在0.7 版中看到带有下划线的黑色文本是传达超链接的首选方式，我们可以推断出这种情况仍然存在，直到 4 月中旬左右发生了一些事情，就在蓝色超链接在0.13 版中出现之前。事实上，自 1985 年以来，以带下划线的黑色文本形式传送链接一直是 Microsoft 1 的标准，有人曾声称微软窃取了苹果 Lisa 的外观和感觉。


我认为我们使用蓝色超链接的真正原因仅仅是因为此时彩色显示器变得越来越流行。马赛克作为一种产品也开始流行，蓝色超链接也随之而来。Mosaic 出现在对彩色显示器的支持正在发生变化的重要时期。标准是超链接使用带有某种下划线、悬停状态或边框的黑色文本。Mosaic 选择使用蓝色，并且他们选择将浏览器移植到多个操作系统。这帮助 Mosaic 成为互联网使用的标准浏览器，并帮助巩固其用户界面作为与网络交互的默认语言。


在创建 Netscape 和 Internet Explorer 时，蓝色超链接已经是 Web 和交互的同义词。蓝色链接现在与浏览器无关，并且正在成为使用互联网意味着什么的象征。


#0000FF 中的狂想曲

自从 Mosaic 在其发行说明中加入现在无处不在的蓝色已经将近 30 年了，但现在已经不是 1990 年代初期了。虽然发现浏览器是如何制造的秘密很有趣，但就目前而言，我们已经接受了链接可以并且应该只为蓝色的福音真理，因为这些早期的先驱们说应该是这样。

创建超链接时，可用的颜色有限。今天我们几乎拥有所有颜色选项，那么互联网上链接的默认颜色和状态应该是什么？当每一次有机会背离传统时，我们这样做是为了进步，还是应该保留蓝色，因为它是一种既定的视觉模式？


如果您要更改链接颜色，以下是我在选择链接颜色时对完美颜色的要求列表：
• 具有背景颜色和周围文本的最佳文本可访问性。您的设计决策不应成为用户无法访问页面内容的原因。
• 交互状态应始终在样式表中设置样式。示例包括：触摸、访问、悬停、活动和焦点。
• 链接和按钮应该足够大以便点击或点击。您无法确定人们如何使用触控笔、手指、鼠标或触控板与设备上的内容进行交互。您的工作是确保您的链接易于浏览并且周围有足够的空间。


最后，所有链接都应该是蓝色的吗？也许是，也许不是。有很长一段用于表示超链接的视觉元素，蓝色只是代表超链接的众多元素之一。链接是关于将信息连接在一起。始终确保超链接从周围的其余内容中脱颖而出。有时这意味着您需要下划线或背景色，或者也许只是您需要蓝色。

以上原著摘自互联网