超级链接 为什么超链接是蓝色的?
超级链接 为什么超链接是蓝色的?超链接(为什么超链接是蓝色的?)
作者| Elise Blanchard(作者:mozilla.org)。
翻译| LZM
互联网已经渗透到我们生活的方方面面,但我敢打赌,在数字世界中,有一个方面你认为是理所当然的。有没有注意到很多链接,尤其是超链接,都是蓝色的?
当一个同事漫不经心地问我为什么链接是蓝色时,我被难倒了。
作为一个从2001年开始做网站的用户体验设计师,我总是把链接设置成蓝色。我提倡使用特定的蓝色调,并坚持使用它们。是的,但是我从来没有停下来想为什么链接是蓝色的。这就是生活的现实。草是绿色的,超链接是蓝色的。在文化上,我们经常将链接与蓝色联系在一起,以至于当谷歌在2016年将链接改为黑色时,造成了相当大的损害。
但是现在,我发现自己完全被这个问题困扰了。为什么链接是蓝色的?谁决定把它们染成蓝色的?这个决定是什么时候做出的?这个决定是如何产生如此持久的影响的?
我向同事寻求研究方面的帮助,我们开始寻找答案。Mosaic是马克·安德森和Eric Bina于1993年1月23日发布的早期浏览器,带有蓝色超链接。
然而,为了真正了解超链接的起源和演变,我踏遍了技术和界面的历史,探索在颜色显示之前链接是如何处理的,以及一旦颜色成为一种选择,界面和超链接是如何迅速演变的。
在世外桃源项目的历史上,第一次连接了两页信息。链接是页面之间的可见线条。
Windows 1.0另一个有趣的地方是它的超链接。这是我能找到的第一个用下划线表示超链接的例子。为了让Windows 1.0更有趣,我的深圳生活网看到了暂停的介绍。现代交互设计的特征在1985年仍然活跃。
这个程序是苹果为麦金塔发布的。它在页面和应用程序之间使用超链接。虽然漂亮,但这个版本在超链接中没有使用颜色。
万维网是蒂姆·伯纳斯·李在欧洲粒子物理研究所工作时创建的第一个浏览器。本来是黑白的,超链接下面有下划线,今天现代网站上还在用,很好的解决了色盲的问题。
现在,我们已经能够缩小蓝色超链接起源的时间范围。
第一个浏览器万维网成立于1987年。它是黑白的。我们知道Mosaic是1993年1月23日发布的,被认为是第一个带有蓝色超链接的浏览器。到目前为止,在1987年之前,我们还没有发现在任何界面中使用蓝色作为超链接,但是随着颜色显示变得更加可用,并且界面开始支持颜色,情况将会发生非常迅速的变化。
在接下来的几年里,我们会看到很多关于颜色和超链接管理的创新和实验。
Windows 3支持16种颜色,但文本链接仍然是白色背景上的黑色链接。选中后,它将变成黑色背景上的白色文本。
明尼苏达大学创建了Gopher协议来搜索和检索文档。它最初的设计以黑色背景上的绿色字符为特色。
苹果已经为其HyperCards添加了颜色,但值得注意的是,文本链接仍然是黑色而不是蓝色。但是有些UI元素在交互时确实有蓝色的阴影,这一点非常重要,因为它显示了蓝色作为交互颜色的缓慢变化。
Linux在黑色背景上使用白色文本。
在ViolaWWW浏览器中,文本链接带有下划线,背景颜色为灰色,就像我们看到的马赛克的原始版本一样。但是,文本链接是黑色的。
自1985年以来,微软一直使用深蓝色作为其界面,但自1990年以来,他们也开始使用它进行交互。在这里,当用户单击不同的驱动器、文件夹和图标时,微软使用蓝色超链接来指示活动状态。这是非常重要的,因为它显示了蓝色从布局颜色到交互颜色的缓慢演变,几乎比蓝色被添加到马赛克的时间早了一整年。
1992年,Linux内核在其控制台上增加了颜色支持。
马赛克的第一个测试版是为伊利诺伊大学的X窗口系统创建的。初始界面是黑白的,没有蓝色的超链接,但是有带边框的黑色超链接。根据X系统用户指南,超链接带有下划线或高亮显示。
在0.13版本的马赛克更新日志中,有一条信息对我们非常重要:
在《侏罗纪公园》中杰夫·高布伦饰演的伊恩·马尔孔的不朽名言中,“好了,就是这样。”
马赛克登录到x窗口系统。我找不到这个版本界面的截图,但是根据发布说明,为了更好的访问非SGI,访问颜色改为了锚色。
大提琴是由康奈尔法学院创立的。有了大提琴,律师可以使用Windows电脑访问他们的法律网站。我的队友Molly帮我下载了0.1的测试版,我们被这个发现震惊了:
就这样!这就是我们要找的超链接样式,虽然不是超链接,而是标题。在1993年之前,我们的蓝色链接从未出现在用户界面上,但突然之间,它在短短两个月内就出现在了两个不同的浏览器上,这两个浏览器是同时在两所不同的大学建立的。
同年9月,麦金塔7.1操作系统发布了马赛克端口。我可以找到这个版本的截图,包括一个蓝色的超链接,这是图像的第一个证据。蓝色用于表示超链接。
1993年6月UNIX图形用户界面—通用桌面环境。
公共桌面环境是UNIX操作系统的GUI,与构建Mosaic所用的操作系统相同。这个界面的特点是超链接使用带下划线的黑色文本。
大提琴过时了,但黄色背景保留了蓝色加下划线的标题,但仍有黑色超链接和边框。
由马克·安德森和詹姆斯·克拉克创建的网景公司使用了与马赛克相同的视觉语言:蓝色超链接和灰色背景。
1995年,微软推出IE浏览器,其毫无疑问的特色是蓝色超链接和灰色背景。Internet Explorer附属于Windows 95,这是浏览器第一次与操作系统一起出现。大约在这个时候,浏览器战争开始了,但是超链接的外观和感觉已经牢固地建立起来了。
Mozilla发布了Firefox浏览器,也提供了蓝色超链接,一直使用到现在。这些图片来自今天的网景1.22和火狐Nightly。
1993年发生了什么事,让超链接突然变蓝?
没人知道,但我有一些理论。我经常听说蓝色被选为颜色对比的超链接颜色。虽然W3C直到1994年才成立,但是判断网页可访问性的标准还没有定义。如果我们看深圳生活网2.3:1,把黑色和蓝色的链接颜色作为文字颜色来比较,我们就不会把蓝色的超链接和颜色足够的黑色文字进行比较。
相反,我更倾向于认为大提琴和马赛克都是受到了当时用户界面设置深圳生活网的共同趋势的启发。我的理论是,Windows 3.1在两个项目开始前几个月才推出,这个界面是第一个突出使用蓝色作为颜色选择界面,为蓝色作为超链接颜色铺平了道路。
此外,我们知道马赛克的灵感来自ViolaWWW,并保持了与界面相同的灰色背景和黑色文本。
回顾马赛克的发行说明,我们可以看到黑色字符和下划线出现在0.7版本中作为超链接的首选方式。我们可以推断,直到4月中旬,就在蓝色超链接出现在0.13版本之前,发生了一些事情。事实上,自从微软1在1985年推出以来,用带下划线的黑色文本传输链接已经成为一种标准做法。有人声称微软抄袭了苹果Lisa的观感。
在我看来,使用蓝色超链接的真正原因是彩色显示器在这个时期变得越来越流行。
马赛克已经成为一种流行的产品,蓝色超链接也是如此。马赛克出现在支持彩色显示的重要时期。超链接的标准是使用带有某种下划线、悬停或边框的黑色文本。马赛克选择了蓝色,他们选择将浏览器移植到多个操作系统。这有助于马赛克成为互联网使用的标准浏览器,并将其用户界面整合为与网络交互的默认语言。
网景和IE创建时,蓝色超链接是网络和交互的代名词。现在,蓝色链接与浏览器无关,逐渐成为使用互联网的象征。
马赛克在发行说明中使用现在随处可见的蓝色已经将近30年了,但现在已经不是20世纪90年代初了。虽然探究浏览器是如何制作的很有意思,但目前我们已经接受了一个福音真理,那就是链接可以而且应该是蓝色的,因为这些早期的开拓者说应该是这样的。
创建超链接时,可用颜色有限。
今天,我们几乎有各种颜色可供选择,那么为什么网络链接的默认颜色和状态要改变呢?当我们有机会脱离传统时,我们是为了进步而做,还是因为蓝色是一种既定的视觉模式而保持它?
如果你想改变链接的颜色,以下是我在选择链接颜色时对完美颜色的要求:
背景色和周围文本的最佳文本可访问性。您的设计决策不应成为用户无法访问页面内容的原因。
交互状态应该总是在样式表中设置样式。例如触摸、接近、悬停、移动和聚焦。
链接和按钮应该足够大,可以被点击。您无法确定人们如何通过手写笔、手指、鼠标或触摸板与设备上的内容进行交互。你的工作是确保你的链接易于浏览,并且周围有足够的空。
最后,所有链接都应该是蓝色的吗?
也许是,也许不是。
用来表示超链接的视觉元素还有很长的路要走,蓝色只是用来表示超链接的众多元素之一。链接是关于将信息连接在一起的。确保超链接从周围内容中脱颖而出。有时候这意味着你需要一条下划线,或者一种背景色,或者可能只是你需要蓝色。
免责声明:本文由用户上传,与本网站立场无关。财经信息仅供读者参考,并不构成投资建议。投资者据此操作,风险自担。 如有侵权请联系删除!
-
江淮iEV7试驾预约流程如下:首先,访问江淮汽车官网或关注官方公众号,进入“试驾预约”页面。填写个人信息,...浏览全文>>
-
试驾MG4 EV全攻略:MG4 EV是一款主打年轻科技感的纯电紧凑型车,外观时尚,内饰简洁。试驾时重点关注其动力...浏览全文>>
-
预约试驾奥迪SQ5 Sportback,线上+线下操作指南如下:线上预约:访问奥迪官网或官方App,选择“试驾预约”,...浏览全文>>
-
试驾别克君越,一键启动,开启豪华驾驶之旅。作为一款中大型轿车,君越以优雅外观、舒适空间和强劲动力赢得广...浏览全文>>
-
试驾沃尔沃XC40时,需注意以下几点:首先,提前预约试驾时间,确保车辆状态良好。其次,熟悉车辆智能安全系统...浏览全文>>
-
预约宝马X1试驾前,建议提前通过官网或电话联系4S店,确认车型库存与试驾时间。到店后,先与销售顾问沟通需求...浏览全文>>
-
比亚迪海豹05 DM-i试驾预约流程如下:首先,访问比亚迪官网或关注官方公众号,进入“试驾预约”页面。填写个...浏览全文>>
-
试驾奇骏时,建议关注以下几点:首先,提前预约专业试驾路线,熟悉车辆性能;其次,注意检查车辆外观及内饰是...浏览全文>>
-
凯迪拉克CT5预约试驾,从线上到线下,体验顺畅而专业。只需几步简单操作,即可在官网或App上选择心仪门店与时...浏览全文>>
-
预约东风富康试驾可通过以下步骤进行:1 官网或官方App:访问东风富康官网或下载其官方App,进入“试驾预约...浏览全文>>
- 比亚迪海豹05DM-i试驾预约流程
- 云度新能源预约试驾有哪些途径
- 阿维塔07试驾预约,体验极致驾驶乐趣
- 宾利试驾,快速操作,轻松体验驾驶乐趣
- 全顺试驾预约,一键搞定,开启豪华驾驶之旅
- QQ多米试驾预约,轻松搞定试驾
- 零跑C10试驾的流程是什么
- 宝马X1预约试驾,4S店体验全攻略
- 试驾QQ多米,畅享豪华驾乘,体验卓越性能
- 江铃集团新能源试驾预约,一键搞定,开启豪华驾驶之旅
- 试驾雷克萨斯ES如何快速锁定试驾名额?
- 兰博基尼试驾预约有哪些途径
- 试驾五菱凯捷有哪些途径
- 力帆预约试驾,一键搞定,开启豪华驾驶之旅
- 极石汽车试驾预约,4S店体验全攻略
- 本田雅阁试驾,新手试驾注意事项
- 捷途旅行者试驾预约预约流程
- 昊铂试驾预约,快速通道开启豪华体验
- 五菱预约试驾,开启完美驾驭之旅
- 试驾捷豹E-PACE,4S店体验全攻略