【0写在前面】

最近在web导航设计中，为提高用户便捷性，需要经常在站内设计一些超链接。对于一个之前甚至不知道这个名词的我，总结一下。Enjoy~

超链接

1、什么是超链接

超链接，简单来说是内容链接。它就像胶水一样，将网页彼此关联起来。

超链接，可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。---百度百科

2、超链接分类

根据链接路径不同，可以将超链接分为3类：内部链接、锚点链接和外部链接。

2.1内部链接

内部链接是指在同一网站内之间的相互链接。

一个设计优秀的内部链接，可以很大程度上提高用户体验。比如，知乎网站的常见问题，将所有或部分重点问题展示在帮助中心，点击页面就会在网站内跳转到对应页面，方便快速解决用户问题。

常见问题-内部链接

2.2外部链接

与内部链接相反，外部链接是指网站内与网站外链接之间的关联。一般外部链接称为“反向链接”或“导入链接”。

常见的外部链接有两种，一个是友情链接，另一种是针对搜索引擎的外部链接。

友情链接

一般网站底部都会有一个友情链接，可以快速打开相关外部网站。比如下图，为国务院网站，底部友情链接可以指向全国人大、全国政协等外部网页。

高质量的友情链接，有助于快速提升网站搜索排名，带来大批的高质流量。

                                       

搜索引擎外部链接

在百度搜索引擎中输入“手机”，得到下面的搜索结果。这些搜索结果就是常见的外部链接。当用户点击下面的链接时，就为网站/商家带来流量，引流成功。

外部链接

2.3锚点链接

锚点链接是一种更为精准的链接方式。常见类型：书签。

例如，我们上网时发现一个很不错的网站，希望保存下来，下次用到时可以再次打开，这个就是书签。

锚点链接不仅可以指向当前页面，还可以聚焦到我们最近一次保存的页码/段落。

3.超链接设计

3.1超链接样式

超链接最常见的样式为：蓝色字体+下划线。

如果不是特殊场景，建议统一这种样式。没有具体原因，只是多年来用户已经习惯这种方式，第一直觉就知道这是一个超链接，可以点击。

需要补充的是，下划线会对视觉效果带来影响，具体在设计的时候，需要考虑这一点。

3.2超链接优化设计

超链接的设计，应该让用户方便使用。主要指超链接的位置和视觉效果。

一般超链接设置在次要位置，不过分吸引用户注意力，但当用户需要时可以很快找到。

至于视觉效果，以下图为例。

菲茨定律的概念很简单，目标越小、距离越远，要达到目标定位点的时间就越长。

下图的超链接，最大的问题在于超链接长度，仅包含一个字符。尤其是在触屏设备（手机/paid）上，手指远没有鼠标的精准度。用手指去点击这样的超链接，是很痛苦的一件事情。这无疑给点击超链接这个操作带来更多的障碍。

因此，让超链接长一些，显然是一个很好的优化设计。

差评

4.总结

1.超链接包括内部链接、外部链接和锚点链接；

2.超链接应该有超链接的样子。默认样式为蓝色字体+下划线，并且让超链接长一些。