超链接是将网络连接在一起的粘合剂。如果没有链接，网络将是一个非常不同的地方，如果它还存在的话。使用一个简单的HTML元素——the<一>元素-你可以与互联网上的任何其他网页建立联系。
超链接很神奇。超链接是网络的基础。他们总是只是有．
也许这就是为什么许多网站所有者和网页设计师没有给予他们应有的关注。HTML的设计<一>元素在用户的阅读体验中至关重要;我们应该花足够的时间来设计好它们。我将与你分享一些超链接设计技巧，它们将带来更好的用户体验，增强网页可访问性，甚至可能提高你的搜索引擎排名。
请记住，你是否需要帮助与超链接或更大的数字营销策略， WebFX可以提供帮助。
超链接需要看起来像超链接
你所有的超链接都需要突出，并清楚地告诉你的读者，“嘿，我是一个链接。你可以点我。”超链接应该是可交互的。作为网页设计师，我们喜欢创新和实验不同的导航技术，但坚持某些设计惯例是很重要的。
需要保持常规的一件事是我们的超链接。根据一项关于链接可读性的研究，普通的网络用户将蓝色下划线的文本视为链接。蓝色和下划线是一个很好的标准，没有别的原因，因为它是我们互联网用户已经适应了自己。
超链接设计示例
下面你将看到3种不同的超链接设计。它们来自顶级报纸网站。
 |
 |
 |
从表面上看，这些都是很好的超链接设计。
它们是蓝色的。它们在周围的正文中脱颖而出。但为什么《纽约时报》的超链接设计比其他两个例子更好呢?
请允许我解释一下。
一个简单的方法来测试你的超链接设计
让我告诉你一个简单的方法来测试你的超链接是否从周围的环境中脱颖而出。如果你模糊并删除颜色从设计中，你会看到如果有人快速浏览或阅读页面，或者如果有人有视力方面的特殊问题，如低视力或色盲，那么什么是突出的。(详情请参阅颜色测试工具)。你可以这样做:修改CSS属性值为<一>而且< p >元素模糊他们去掉它们的颜色截图并在Photoshop中编辑
- 图像>调整>去饱和度
- 然后>模糊>高斯模糊
让我们回顾一下之前的例子，但这次我们将在它们被模糊化和黑白化时查看它们。以下是《卫报》的评论;你可以看到，超链接很难发现:
BBC使用粗体重量来强调他们的超链接，这比《卫报》的超链接设计略好，因为它至少更突出一点。
对于《纽约时报》，仍有可能找出两者之间的联系。
链接下划线的问题
这就是棘手的地方。这就是超链接设计的关键所在联合国简单。这就是我们给链接加下划线的惯例失败的地方。
有一项研究这表明在文本下划线时，可读性会降低在我们的超链接中。研究表明，强调的联系具有“严重低估了对网页可用性的影响。“研究报告显示，我们目前在超链接下划线的习惯”会显著降低文本的可读性。
“研究人员甚至说，”在设计未来的Web浏览器时，应该仔细考虑备选方案。从本质上讲，研究人员是在说，我们目前对超链接的习惯——加下划线的文本——应该系统地改变。带下划线的超链接降低易读性的原因是某些位于基线以下的字符-带有下移的字符延伸到下划线以下，例如p,克,j,而且问-都受到文字修饰:强调CSS属性值。
下面是谷歌Chrome浏览器(版本28)的默认超链接样式:
可读性问题的解决方案是什么?
我们可以自己解决这个可读性问题。我们不必等待浏览器默认显示下划线文本的方式发生改变。
怎么做?我们可以使用CSS边界底部属性而不是CSS文字修饰属性为超链接元素下划线。使用边界底部属性可以将下划线放在受影响字符下方几个像素处，从而使超链接更易于阅读。
下面是用于上图的CSS:
text-decoration: none;padding-bottom: 3 px;Border-bottom: 1px纯蓝色;｝
比修复可读性问题更强大的是，我们还可以独立于超链接文本颜色控制下划线的样式，从而将超链接的这两个组件解耦。例如，我们可以减少超链接下划线特殊性为了让文本更清晰，或者我们可以让它更有特色，让整个超链接设计真正脱颖而出。为了演示，我稍微改变了一下下划线的颜色，让它变成浅蓝色:
CSS:
text-decoration: none;padding-bottom: 1 px;Border-bottom: 1px solid #8d8df3;｝
使超链接文本变长
我要讨论的下一个概念涉及内容策略领域这是网页设计过程的重要组成部分)．有些人可能不喜欢这个建议，因为它涉及内容创建过程，有些人可能无法控制web开发过程的这一部分。我要分享的下一个技巧的基础是费茨定律．
菲茨定律的概念很简单。法律规定物体越大，就越容易被看到和与之互动。这是有道理的，特别是在触屏设备的环境中，元素的大小很重要，输入设备(我们的手指)不如鼠标指针精确。
用手指点击超链接可能会很痛苦;通常情况下，你必须放大小链接，这为用户获得他们想要的操作(即与超链接交互)增加了额外的障碍。
但是对于链接的样式，我们能做的只有这么多。我们可以加粗，加下划线，改变颜色。
通过改变字体大小让它们变大怎么样?如果我们改变<一>元素的字体大小属性时，它会影响读取流，并可能影响行高的一致性。看看阅读体验的连续性是如何被增加超链接的字体大小所破坏的:
所以我们不能垂直展开它们。
我们需要水平展开它们。
友好的SEO好处
拥有较长的锚文本是一种用户友好的搜索引擎优化策略。也就是说，根据菲茨定律，具有较长链接标题的超链接对用户更好，但它也有一个不错的附带好处，即对搜索引擎排名更好。锚文本应该是描述性的根据谷歌的搜索引擎入门指南，应该告诉用户和搜索引擎你链接到的页面是关于什么的。
假设你在写关于墙的东西。比较以下句子中超链接的两种用法:
“我想谈谈先进的造墙技术。点击在这里学习如何建造一堵基本的墙，因为我要谈论的是超越基本的东西。”
对比:
“我想谈谈先进的造墙技术。
你需要学习如何建造一堵基本的墙因为我要讲的是基础知识之外的东西。”
第二个版本不仅对我们的用户更好，而且对搜索引擎也更好，因为它比只说“这里”的锚文本有更多的上下文。
超链接应该是蓝色的吗?
根据通过谷歌学习蓝色链接比绿蓝色链接获得更多点击。我前面提到的关于加下划线的文本可读性的研究同样证实，当链接是蓝色并加下划线时，Web用户可以立即识别出来。
然而，在我看来，并不是所有的超链接绝对必须是蓝色的。超链接设计的重要之处在于你的链接是很明显链接。如果你可以用一种不同的颜色，而不是传统的蓝色，那就试试吧。
微软开发网络(MSDN)支持这个概念。设计超链接的基本原则是用户必须能够通过目视检查来识别链接他们的孤独不应该把鼠标悬停在一个对象上或点击它根据他们的链接设计模式指南，来确定它是否是一个链接。他们没有说任何关于链接需要蓝色。
在某些情况下，蓝色链接并不是最好的选择。例如，如果背景颜色使蓝色链接难以阅读，那么可用性和可读性胜过标准的蓝色链接约定。
永远做对用户最有利的事情，即使这意味着打破常规。
总结
以下是一些重要的想法:
- 设计超链接应该深思熟虑。
- 从设计中模糊和去除颜色是展示你的链接如何突出的快速方法。
- 下划线文本是一种强烈而熟悉的惯例。不过，给文本加下划线的问题是可读性降低了。解决方案是使用CSS来解决这个问题。
- 使用较长的描述性锚文本可以提高可用性(菲茨定律)，并且对搜索引擎有更好的好处。
- 超链接设计中很重要的一点是:超链接显然应该看起来像超链接。
相关内容
- 你不应该犯的5个可用性错误
- 可以应用于网页设计的人类行为理论
- 让用户界面元素难以按意图使用
