专栏名称: 前端早读课
我们关注前端,产品体验设计,更关注前端同行的成长。 每天清晨五点早读,四万+同行相伴成长。
目录
相关文章推荐
51好读  ›  专栏  ›  前端早读课

【第1056期】下划线是否破坏可读性?

前端早读课  · 公众号  · 前端  · 2017-09-14 04:57

正文

前言

当看到这个的时候就想问问手百的链接为什么是黑色的?有什么特殊作用?今日早读文章由众成翻译@eJayYoung 翻译分享。

正文从这开始~

在非常早期的互联网,链接就已经是一个基础的交互元素了。直到现在仍然非常流行:研究表明链接是人们在上网时最流行的操作之一。在过去的30年里,设计师们尝试过设计各式各样的链接,但有一点不会变:下划线。那个蓝色的带下划线的超链接是互联网中最明确并且最好理解的习惯之一。

万维网 包含了文档和链接。” - Tim Berners-Lee, 1991

译者注:蒂姆·伯纳斯-李(Tim Berners-Lee)是万维网(World Wide Web)的发明者,1990年12月25日,他成功利用互联网实现了HTTP客户端与服务器的第一次通讯。 摘自蒂姆·伯纳斯-李 维基百科

链接在互联网中扮演着中心角色,所以链接标记的视觉表现应该非常明显的影响用户体验和使用。但是随着设备和用户习惯的改变,下划线链接是否妨碍了而不是帮助了用户体验和易用性?目前看起来是简易有效的,但是一份来自汉堡(德国)大学的研究表明下划线对于可读性和设计也有不良影响。

按理说链接保持了用户浏览习惯的基础-我们总需要引入参考文献或者连接其他互联网资源 (译者注: cat videos 在国外属于一种流行词,类似代表互联网(What the Internet is made of/ Universe))。然后随着互联网的变化和发展-依据设计的审美,代码弹性,用户体验习惯,和各种各样的设备-扪心自问一下:相比1991年我们现在是否应该丢弃下划线链接?

下划线是什么?

到底什么是下划线,并且下划线这个惯例是怎么形成的?网上最新的解释,维基百科定义的下划线,是“文字下面一条或多或少的水平线,使用(...)用来强调关键文字”。这个属性作为强调的方法仍然存在于下划线的数字表现形式中,但具有更广泛而不一定是积极的含义。博客排版指南中建议“不要使用下划线。永远都不要”。在打印机时代留下的引用链接的陋习不再需要了,因为我们现在有其他可用的强调方法。



下划线是打印机时代一个枯燥的习惯,打印机没有粗体和斜体样式。所以强调文字唯一的方法就是回车,然后在文字下面标记下划线。这只是打印机时代技术缺陷的一个变通方案。

那么链接如何成为蓝色带下划线的文字的代名词? 由于网络远离打字文档,文本不再需要下划线来强调。 因此,下划线的意义被重新定义:如果点击,下划线的单词将用户重定向到相关资源。 为什么蓝色? 这是一个历史事故:在Tim Berners-Lee的WWW浏览器原型时代,大多数电脑都限于16色显示屏(如果它们有颜色的话),蓝色是最接近黑色的颜色。 虽然技术迅速发展,超链接依然保持着蓝色和下划线风格。



译者注: 这张图片只是用来展示下划线的效果,google搜出来类似英语课文。由于上下文环境不对,所以目前解析不出来了 233 逃:)

下划线的好处

有很多好理由证实为什么下划线依然保持在链接的视觉方面占主导地位。对于新手,它有很好的辨识度:在过去的30年里有多少交互元素依然保持着原来的风格?它吸引了人们在浏览文本时对链接的注意力,在视觉上也提示了你已经访问过的链接。这些视觉线索有助于增加点击量(所有踩过维基百科的坑的人都知道)

一些用户发现了下划线链接中断浏览的特性很有用;这样他们可以在页面上更轻松的找到重要或者有用的信息。Lee Munroe 在 Smashing 杂志中坦白的说:“记住,用户从来不会认真阅读,他们只会浏览。你以前可能听过,这是真的。所以,让你的链接更明显一些。”

常见的下划线链接可以给用户浏览或者总结提供一些有用的帮助,遵循 Steve Krug 的名句--“不要让我思考”。下划线链接在无障碍阅读也有所成效。色盲或者色弱的互联网用户可以无障碍识别带下划线的超链接,但不能单独面对有颜色区分的链接。

负面的用户体验影响

但是这些加分项并不能让下划线链接免受替代或者吐槽,尤其是UX时代的到来。在2014年,互联网巨头谷歌做出了历史性的决定,不再使用下划线链接。根据首席设计师 Jon Wiley 的说法,谷歌为了支持链接色彩区分化而在它的搜索引擎(SERP)中摒弃下划线,对于“改善可读性并创建一个整体简洁的外观”至关重要。即使用户在使用谷歌的SERP中有需要链接的必要场景,一些大型的阅读网站也慢慢放弃链接了。例如,NNGroup 已经放弃了下划线,并且发表了一篇关于超链接样式的文章。









请到「今天看啥」查看全文