【链接段落和字符什么样式】技术贴：句子理解链接(超链接)设计

每个人都是产品经理【起点学院】，BAT实战派产品总监孙孙系统带你学习产品，学习运营。模板。

产品设计时间细节是产品经理最头疼的问题。button，一个链接需要考虑太多细节。作者整理了一般的功能设计问题，一篇文章理解了这些功能设计。来学习吧。

定义

链接也称为超链接。超链接是从一个网页到一个目标的连接。此目标可以是其他网页，也可以是同一网页的其他位置。可以是图片、电子邮件地址、文件或应用程序，网页上超链接使用的对象可以是文本或图片。当浏览器单击链接的文本或图片时，链接目标将显示在浏览器中，并根据大象类型打开或执行。

样式

链接可以是一个字或一个字一样的文本，也可以在按钮、照片、点击后跳转到另一个目标，当鼠标指针移动到链接上时变成小手。当然，手机没有这个特点。

1. 文本样式的链接

文本样式链接一般在搜索引擎网站上以蓝色字体出现，大多数在下面划线识别，但考虑到现在不影响文本的可读性和用户体验，逐渐去掉下划线。一些其他站点考虑界面设计风格的所有方面，而不是蓝色。

谷歌的文本链接是蓝色的，没有下划线

百度的文本链接也是蓝色的，关键词是红色，下划线是红色的。

京东文本链接有灰色、白色和黑色

2. 按钮样式的链接

按钮样式的链接比文本样式更容易识别，每个按钮都是相同的链接。

链接按钮样式

3. 图片样式的链接

绘画风格的链接可以是单一的绘画，字母和按钮可以一起创作绘画，但是当鼠标指针扫过绘画的某个部分时，它就会变成小手。

桌面弹出等小游戏窗口的图形链接

由文字/图片/按钮样式组成的图片按钮，鼠标可以单击图片的任何部分。

打开

打开方式

链接的方法有三种。第一个是在当前页面上刷新跳转，国外的网站大部分都是这样开放的。第二种是在新标签页上打开链接，国内大多数都使用这种东西。第三个是用应用程序打开提示。当然，出现了一种新的开放方式：qual(QR)代码扫描。

提示用美容应用程序打开

根据

类型

连接路径，网页上的超链接通常分为三种类型：内部链接、锚点链接和外部链接。

链接也可以分为动态链接和静态链接。动态超链接是指通过更改HTML代码可以动态更改的链接。例如，可以将鼠标移动到文本链接上。文字表示像动画一样移动或更改颜色的效果。另外，在照片上移动鼠标会对照片产生逆色或模糊的效果。静态链接顾名思义是没有动态效果的链接。

与

1. 内部链接

外部链接(即反向链接)相反，内部链接表示同一网站域名下的内容页面之间的相互链接。频道、栏目、最终内容页面之间的链接，以及站内关键字之间的标签链接都可以归类为内部链接，因此也可以称为内部链接。

站内链接，对内部链接的优化其实就是对网站的站内链接的优化。

2. 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

3. 外部链接

外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。

外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

链接状态

链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：

点击前

悬停时，下面浮现半透明线条

点击时，有波纹晕开的动态效果

点击后，下面线条粗

有时候是3种状态，比如百度网和知乎应用：

默认状态

点击时链接变红

点击后链接变成紫色

IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。

默认状态

点击状态

用力点击会弹出预览小窗口

有些时候只有2种状态，如下图谷歌网：

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。

总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。

作者：潘瑶琼（简书作者）

本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。