设计一个完美的超链接——没那么简单.pdf

设计一个完美的超链接——没那么简单 HT ML 中的超链接设计 ，是用户阅读体验的关键。我们应当花点时间来重新考虑 设计它。 超链接就像胶水一样把网页彼此连接起来。如果没 了它 ，网页就完全不会是现在这个样子 ，甚至 根本就不会存在。使用一个简单的元素 ：a ，你就能创建一个能跟互联网上其他页面链接的 键 （bo nd ）。超链接是如此的神奇。 超链接是 Web 之根 ，而且一直都是如此 ，也许这就是为什么网站主和 Web 设计开发者们没 给其 应 的重视。 HT ML 中的 a标签的设计 ，是用户阅读体验的关键。我们应当花点时间来重新考虑和设计它。 我将与你分享一些超链见设计的技巧 ，使其能够带来更好的用户体验 ，增强网站的可访问性 ，甚至 改善网站的 SEO 。 超链接应该长得像超链接( Hyperlinks Need to Loo k Like Hyperlinks ) 你页面上的所 链接应该明确的让用户知道这是一个链接 ，并且你可以点击它。并且应该呈现出交 互性。 作为 Web 设计者往往喜欢创新和实验性的设计 ，但是 时坚持一定的设计惯例和原则是很重要的 。其中超链接就是应当尊重传统和常规的东西。据可读性的研究 ，常规状态下 ，文本链接应该是蓝 色的并且带下划线。 蓝色带下划线是一个值得保留的很好的标准 ，没 为什么 ，就是因为互联网用户这么多年来已经习 惯了这种样式。 超链接设计的例子(Examples of Hyperlink Des i ns ) 上图都是比较不错的超链接设计 ，它们都是蓝色的并且能够在文本中“脱颖而出”。但是为什么 《纽 约时报》(Yo rk T imes)要比其他两个的设计更好呢 ？ 请容我解释一下。 一个简单的方法来测试你的超链接设计( A Simple Way to Test Your Hyperlink Des i n ) 让我向你展示一个简单的方法用来检测你的超链接是否能够直观的展现。假如去除页面文本的颜 色 （只采用默认黑色 ）并且模糊掉页面文本。此时你看到的就相当于用户快速扫描式浏览网页的 内容 ，或者当用户 视力障碍和色盲时看到的内容。 你可以这样来实现 ： 修改页面a标签和 p标签的相应 CSS 属性值 ：移除color ，并使文本实现模糊效果。 截图并使用 Phot osho p 处理 1. Ima e A djust ment s Desat urat e 2. Filt er Blur Gaussian Blur 现在我们回过头来看之前的例子 ，但是是加上祛色和模糊效果之后的。 这张是 Guardian 的 ，很难看到超链接。 BBC 使用了字体加粗来突出超链接 ，这比 Guardian 稍微好那么一点 ，因为起码至少能看到超链接 。 纽约时报这里 ，仍然可以区分哪里是超链接。 下划线链接的问题(T he Problem wit h Underlinin Links) 到这里就 问题了。 这就是超链接设计并不简单。 这就是我们习惯的下划线超链接为何失败。 项研究表明 ，当给超链接添加下划线时会降低文本的可读性。说下划线超链接“严重的影响了 Web 页面的可读性”(原 ：serio usly underest imat ed ef f ect s o n t he usabilit y of Web pa es)。此研究人员 进一步的说“替代的设计方案应该慎重考虑对未来 Web 浏览器的设计”。 实质上他们就是说应该完全改变目前的超链接的 （带下划线 ）设计。 加下划线超链接影响阅读体验的理由就是 些字符的一部分会被显示到线的下面——比 如p、 、j、q——会受到 CSS 样式text-decoration: underline的影响。 下面是超链接在 Chro me 浏览器(versio n 28)里的默认样式 ： 什么办法能解决这个可读性问题呢 ？(W hat ’s t he So lut io n t o T his Readabilit y Issue?) 我们可以自定义下划线的样子 ，而不用等着浏览器来改变。嗯 ，我们可以使用 CSS 的 border- bottom属性代替 text-decoration实现超链接下划线。这样可以让下划线往下移几个像素来提高可 读性。 这是上图效果使用的 CSS 代码 ： a { text-decoration: none; padding-b