超链接(又名链接)是网站上最基本的界面。事实上，我们可以把超链接追溯到网络的起源，蒂姆·伯纳斯·李的询问在那里，每个新页面都必须链接到另一个页面。链接连接我们所有的内容聚在一起，以多种形式出现;从段落中包含的链接到我们已经知道的链接列表导航菜单．
本文讨论了超链接的设计，提供了一些设计超链接的技巧和最佳实践。
我们将以一个在现场网站上的特殊超链接设计的小展示结束。
为什么超链接设计如此重要?
链接是用户和网页之间最基本的交互组件:用户点击一个链接，反过来，他们会看到另一个网页。它们是如此重要，但很容易在更新和更闪亮的UI元素中丢失，如web表单，动画工具提示,文字-动作按钮(本质上是链接样式看起来像其他东西)。
链接是如此的无处不在，以至于我们经常在设计中忽略它们。
设计超链接的基本原则
在我们进一步讨论之前，最好先介绍一下您应该了解的关于超链接的基本知识。
超链接状态
概念化链接设计时，重要的是要考虑和了解必须使用的链接状态。有5个州<一>元素可以有:
答:链接—超链接的正常状态答:访问-这是之前访问过的链接答:徘徊-当用户将鼠标悬停在链接上时答:活跃这是当用户点击链接时(或者在一个聚焦的链接上按回车键)答:焦点-当用户使用Tab键导航到超链接时
这些状态的专业术语是伪类．需要注意的是，web浏览器默认情况下对这些状态的处理是不同的。例如，在Firefox中，:主动而且:专注显示时，它们周围有一个灰色虚线边框，由大纲财产。
然而，在谷歌Chrome(和其他WebKit浏览器)中，:主动链接将没有样式和:专注默认情况下，链接周围会有一个黄色边框。
下面是每个链接状态的例子(在谷歌Chrome 6.0中显示):
最好为每个状态设置一个样式，这样用户就可以知道网页上每个超链接的状态。例如，将鼠标悬停在一个链接上，让它看起来不同(例如改变它的颜色)，可以提高它可以被点击的感觉。
用于超链接样式化的常用CSS属性
您可以利用许多链接样式属性来设计超链接。一些与链接的视觉外观相关的流行CSS属性包括:
颜色—超链接的颜色文字修饰-设置为没有一个删除默认下划线。背景颜色-如果用在:徘徊状态，可以使链接的背景颜色改变大纲-设置为没有一个使用答:集中选择器删除默认的灰色边框周围的活动和重点链接在Mozilla和WebKit (Chrome和Safari)的黄色或蓝色边框;这是不建议的，因为边界有助于网页的可访问性粗细-另一个区分超链接的方法是将它们设置为粗体边境-如果你需要更多的控制外部文字修饰:强调，尝试给你的超链接设置一个底部边框(可以尝试厚度，颜色和样式)
还有很多CSS属性可以调整，但上面的似乎是最常见的。
下面，你可以看到不同风格的超链接Flickr．文本“Your Photostream”发生了变化背景颜色当你悬停在上面的时候。主菜单链接样式为粗体，没有下划线。
“最近的活动”链接看起来最像标准的蓝色下划线超链接。
超链接设计最佳实践
在处理超链接的样式和设计时，这里有一些建议和常用的最佳实践。
保持链接样式简单并不是件坏事
我想我们仍然可以看到标准的蓝色下划线超链接。这是超链接的默认样式，它们工作得很好。
好的超链接应该与网页上其他类型的文本不同。根据一些调查结果可用性研究员Dr。
尼尔森认为，当超链接的颜色与网页上其他类型的文本不同，并且用下划线表示文本是可点击的时，超链接是最有效的。Nielsen还建议未访问链接的颜色应该是“生动、明亮和饱和的”。不用说，这些观点的反面也是正确的。最好避免在链接以外的地方下划线，也不要使用与链接相同颜色的普通文本。
样式链接状态不同
之前，我们讨论了5种不同的链接状态。为了避免让用户感到困惑，并加快网页上超链接的视觉识别速度，最好为每个链接状态提供不同的样式。
不要删除活动和聚焦链接的大纲
默认情况下，大多数浏览器会在点击或关注超链接时设置样式。例如，在Firefox 3.6中，的默认样式答:活跃正在将链接着色为红色，并用红色虚线将其包围。的默认样式答:焦点，你可以用Tab键自己看到，它是一个蓝色虚线轮廓。
这两种视觉元素都是用来帮助访问的。
不会使用鼠标的人需要按tab键来激活超链接(使用回车键)。想象一下，你必须在一个网页上点击100个链接(这并不像你想象的那么罕见)我们的网页设计博客的首页有近200个链接)。如果没有视觉提示，看到你在哪个链接不是很困难吗?
对于活动链接也是如此;不同的样式会给用户一种视觉上的反馈，即他们能够成功地点击链接。
保持超链接一致
许多可用性原则和心理学都支持这样一个概念:功能相似的东西应该看起来一样。例如,格式塔心理学——这适用于人类对设计的感知——提出了相似；也就是说，“如果事物看起来彼此相似，我们就会感知地对它们进行分组。”
避免出现用户不必去想无论特定的文本是否是链接，保持超链接和常规文本样式一致是一个好主意。
为超链接保留通用超链接样式
对于超链接，公认的和最容易识别的惯例是它是蓝色的，并带下划线。因此，为了避免混淆，你应该避免将你的正常文本涂成蓝色并加下划线。
展示超链接设计
这里有一些很棒的超链接设计，可以看看。我希望这些可以启发您重新思考您自己的超链接设计的意义和可能性。
网页设计师墙
网页设计师墙是一个流行的设计博客创建尼克拉．该网站的侧边栏链接的悬停效果是在文本周围画一个铅笔样式的圆圈。它是独特的，为整个网站设计增加了额外的复杂程度。
洛杉矶甚至提供一个教程如何重现类似的效果。你也可以在导航和博客文章的链接上看到一些有创意的悬停效果。
Carsonified
Carsonified通过每年在世界各地举行的会议把网页设计师和开发人员联系在一起。他们的网站很好地展示了应用于链接的一致性和相似性原则。您可以移动您的鼠标在整个页面，并看到他们独特的超链接效果，以类似于他们的网站logo的方式显示。
最突出的区域是顶部导航菜单，每个链接都有一个图标集。
远海岸
Far Coast的整个网站都是用Flash设计的。在初始页面加载后，您将注意到当鼠标悬停在上面时，它们的所有链接都执行淡入效果。这种对鼠标悬停的视觉反应让用户认为链接元素是交互式的，这与设计不同链接状态以提供可点击性的最佳实践是一致的。
WordPress.org
您可以看到超链接的一致性应用于整个官方WordPress网站。他们的主菜单链接看起来很棒，使用CSS3文本阴影给他们额外的细节。主菜单的链接也有描述性的标题属性，以帮助用户在将鼠标悬停在特定链接上时了解有关该链接的更多信息。
Retinart
视网膜艺术是一个包含平面设计和数字艺术创意的自由博客。这个设计有一个很有趣的超链接悬停效果，可以互相反映背景和文本的颜色——这是一个经典的技术，在这个特别的博客设计中非常有效，尤其是因为有限的配色方案。这也有助于实现更强大的链接视觉分组。
Unmatchedstyle
这个网页设计画廊只是其中之一许多网上到处都能找到。该网站的简单设计和令人印象深刻的布局允许轻松浏览他们的收藏。一个有趣的元素是指向页面顶部的导航链接，它在鼠标悬停时显示有创意的下划线效果。
使我的一天
这是网页设计师Marc Hinse的个人博客。他的页面拥有许多有趣的超链接效果，所有这些效果看起来都很完美。查看它们并注意超链接状态是如何与博客的整体设计主题相匹配的。
建立会议
构建会议是为设计人员和开发人员举办的，在爱尔兰举办。他们的网站有一个独特的效果添加到他们的主导航链接，使用CSS3鼠标悬停淡入过渡属性。
LogoPond
所有标志和品牌灵感的闪闪发光的喷泉，LogoPond有一些伟大的链接风格。最值得注意的是在页脚区域，在那里您可以发现整个网站流行页面的链接。悬停时，你会得到一个翻转的背景和文本效果，类似于视网膜艺术博客。
Suikerdraakje
Suikerdraakje是一家销售婴儿用品和玩具的电子商务商店。他们的设计非常出色，有许多插图来填补布局中的空白。它们的主导航链接在鼠标经过时显示圆角背景移动——这是少数几个显示这种效果的网站之一。
任天堂
任天堂一直走在创新的前沿，你可以在他们的公司网站上看到这一点。在超链接的背景下，当你把鼠标移到它们上面时，它们的主导航链接会在下方暗淡成浅蓝色的光芒，让人想起Wii上的蓝色led。
斯蒂芬的博客
Stephen Caver的博客主题令人印象深刻，很好地利用了超链接设计和最佳实践。当你把光标移到他的博客帖子上时，你会注意到每个区域的链接都会亮起来。这种技术很简单，只需要少量JavaScript就可以实现，并且增加了用户可能喜欢的交互性。
MapBox
MapBox是一个较新的web应用程序“Web 2.0”设计。你可以在整个网站中看到一些非常整洁的效果，最显著的是他们的标题链接拥有一个漂亮的悬停效果。
Dribbble
Dribbble是一个针对设计师的网站，只有他们的网站设计应该是卓越的才有意义。他们的超链接在整个设计布局中显示了如此多独特和定制的效果，以至于很难找到一个可以集中注意力的区域。
G4TV
G4TV是最前沿的电子游戏和科技新闻。该网站设计多样，包含许多独特的超链接设计状态。特别检查他们的主导航和侧边栏内容。
