HTML中的超链接设计,是用户阅读体验的关键。我们应当花点时间来重新考虑和设计它。超链接就像胶水一样把网页彼此连接起来。如果没有了它,网页就完全不会是现在这个样子,甚至根本就不会存在。使用一个简单的元素a,就能创建一个能跟互联网上其他页面链接的按钮。超链接是如此的神奇。

  超链接是Web之根,而且一直都是如此,HTML中的a标签的设计,是用户阅读体验的关键。我们应当花更多的时间在上面,以下是一些超链见设计的技巧,使其能够带来更好的用户体验,增强网站的可访问性,甚至改善网站的SEO。

  超链接应该长得像超链接

  你页面上的所有链接应该明确的让用户知道这是一个链接,并且你可以点击它。并且应该呈现出交互性。Web设计者往往喜欢创新和实验性的设计,但是有时坚持一定的设计惯例和原则是很重要的。据可读性的研究,常规状态下,文本链接应该是蓝色的带下划线。

    

  

  

  上图都是比较不错的超链接设计,它们都是蓝色的并且能够在文本中“脱颖而出”。但是为什么《纽约时报》要比其他两个的设计更好呢?往下看:

  一个简单的方法来测试你的超链接设 

用一个简单的方法用来检测你的超链接是否能够直观的展现。假如去除页面文本的颜色(只采用默认黑色)并且模糊掉页面文本。此时你看到的就相当于用户快速扫描式浏览网页的内容,或者当用户有视力障碍和色盲时看到的内容。

  修改页面a标签和p标签的相应CSS属性值:移除color
,并使用Photoshop处理使文本实现模糊效果。

  再看三面三个例子的效果:

Guardian 的,很难看到超链接:

  

  BBC使用了字体加粗来突出超链接,这比Guardian
稍微好那么一点:

  

  纽约时报这里,仍然可以区分哪里是超链接:

  

  现在下划线链接的问题

  有项研究表明,当给超链接添加下划线时会降低文本的可读性。说下划线超链接“严重的影响了Web页面的可读性”。此研究人员进一步的说“替代的设计方案应该慎重考虑对未来Web浏览器的设计”。实质上他们就是说应该完全改变目前的超链接的(带下划线)设计。

  其实加下划线超链接影响阅读体验的理由就是有些字符的一部分会被显示到线的下面——比如p、g、j、q——会受到
CSS 样式text-decoration:
underline的影响。

  下面是超链接在Chrome浏览器里的默认样式:

  

  有什么办法能解决这个可读性问题呢?

我们可以自定义下划线的样子,而不用等着浏览器来改变。可以使用CSS的border-bottom属性代替text-decoration实现超链接下划线。这样可以让下划线往下移几个像素来提高可读性。

  

  上图效果使用的 CSS 代码:

  a

  这样做很强大,甚至可以单独定义下划线的样式效果使其颜色不同于超链接文本的颜色,从而使其成为独立的两个部分。比如我们可以弱化超链接以使文本更易读,或者增加其重量来使其明显。

  改变了链接的颜色使其稍微变淡:

  

  让超链接文本更长

  接下来讨论内容的组织排版(这是网页设计重要的一部分)。看一个基本理论:菲茨定律(Fitts's Law)。

  菲茨定律的概念很简单,目标越小、距离越远,要达到目标定位点的时间就越长。这是有道理的,尤其是在触屏设备中,元素的尺寸及设备(手指)远没有鼠标那么精准。用手指点击超链接是很痛苦的。通常你不得不放大超链接的显示区域,这无疑给点击超链接这个操作带来更多的障碍。

  

  但是我们能用超链接样式改变的只有这么多了。加粗,下划线,改变颜色。怎么办呢?如何让目标变大,把字号变大如何?

  假如我们改变a元素的font-size属性,会影响阅读,打断阅读的连续性,并且会影响行高的一致性。

    

  因此我们不能扩大其高度,那么只能扩大其宽度。

  

  对SEO的好处

拥有较长的锚文本更有利于SEO。也即拥有较长文本的超链接更符合菲茨定律,并附带搜索引擎友好的好处。锚文本应当是描述性的,并且应当告诉用户及搜索引擎此链接指向的页面是什么。一个具体更长的描述不仅对用户更好,而且对搜索引擎也更好,因为其比简单的一个“点击这里”有更多的内容在里面。

  超链接就应该是蓝色的吗? 

 根据Google的一项调查,蓝色链接比偏绿的链接获得更多的点击次数。谷歌就是用的蓝色,在之前的关于下划线的部分也体现了蓝色下划线能够更容易的识别。然而,在我看来并不是所有超链接都一定要使用蓝色。关于超链接的设计最重要的就是要让你的超链接看起来明显。假如你能够使用其他颜色来达到明显,那就去做吧。

  有关设计超链接的基本方针就是“用户必须能仅通过视觉上就能识别出超链接,而不必非得用鼠标经过或者点击某元素后才能确定其是否是链接”。根据这个链接设计模式指南,并没有说任何链接都需要是蓝色。有时候在某些情况下,蓝色的链接并不是好的选择。

  举个例子,在此颜色的背景下,蓝色链接就会很难阅读。

  

  总结

  超链接的基本方针就是“用户必须能仅通过视觉上就能识别出超链接,而不必非得用鼠标经过或者点击某元素后才能确定其是否是链接”。

超链接的设计应该是深思熟虑的。

  给你的设计添加模糊和去色是快速检测链接能否脱颖而出的方法。

  文本下划线是一种强烈和熟知的常用方法,虽然下划线会带来可读性降低的问题,但是可以通过CSS来解决这一问题。

  使用较长的描述性锚文本,能够改善可用性(菲茨定律),并且更有利于
SEO。

  设计超链接时最重要的一点就是:超链接必须明显看起来就像一个超链接。

  




HTTPX 基础教程-新乡seo|网站优化,网站建设_微信公众号:zeropython—昊天博客