通过链接,用户可以导航到另一个页面、窗口或帮助主题,以查看详情、启动命令或选择选项。链接是有点击示能的文本或图形,通常使用已访问/未访问的链接系统颜色来展示和区分可点击性。传统的链接配有下划线,但这种方法一般没必要,不利于减少视觉干扰。
当用户将鼠标悬停在链接上时,链接文本将显示出下划线(如果之前尚未显示的话) ,指针形状将变为手形。
文本链接是最轻量级的可点击控件,通常用于降低设计的视觉复杂性。
何时使用该控件?
思考以下问题:
- 该链接是否用于导航到另一个页面、窗口或帮助主题,用以查看详情、启动命令或选择选项? 如果都不是,使用其他控件。
-
命令按钮是否是更好的选择?以下几种情况,考虑使用命令按钮:
(1)控件用于启动一个即时操作,包括显示一个窗口,且该命令与当前窗口的主要用途有关。
(2)即使当前命令是辅助命令,也需要显示一个窗口来收集信息或进行选择。
(3)标签很短,由四个或更少的字组成,使用按钮展现不会显得长而尴尬。
(4)该命令不是内联的(行内的)。
(5)该控件内容也出现在一组其他相关的命令按钮中。
(6)这种操作具有破坏性或不可撤销性。由于用户会将链接与导航(以及它的可回退特性)联系起来,链接不适用于会产生重大后果的命令。
(7)类似地,在向导或任务流中,命令表示执行具体操作。 在这样的窗口中,命令按钮表示执行具体操作,而链接则表示导航到下一步。
设计思路
增强链接的可识别性
链接缺乏示能,这意味着它们的视觉属性并不能清晰表明它们应该如何被使用,用户只能通过自身经验来理解。 没有下划线和链接默认颜色的链接,显示起来就和正常文本一样; 确定其行为的方法只有通过观察它们的展现形式、理解上下文意思,或将指针置于其上看看是否会变化为手型。
有些出人意料的是,这种示能的缺乏常常是设计者使用链接的动机,正因为链接看起来很轻,从而降低了设计的视觉复杂性。链接去掉了命令按钮的按键外形以及其他控件所使用的沉重视觉边框。在实例中,可以使用命令按钮使主命令显而易见,也可以选择链接的形式来淡化显示次要命令。
真正的挑战在于保持足够的视觉线索,以便用户能够识别这些链接。 基本原则是,用户必须能够仅通过视觉就可识别链接;如果用户不得不将鼠标悬停在它上方或点击它,来确定它是否是一个链接,那这种设计就是不可取的。
如果链接使用了链接默认颜色和以下至少一个视觉线索,用户就可以单独通过视觉检查来识别链接:
- 带下划线的文字。
- 图形或项目符号,如带有图标的文本链接图案。
- 在标准导航、选项或命令位置(如窗口的内容区域)中放置,或在导航栏、菜单栏、工具栏或页脚中放置。
用户也可以通过视觉检查以下视觉线索来识别链接,但仅靠这些线索本身并不足够:
-
有点击暗示的文本,例如以命令式动词开头的命令文字,如“展开”、“打印”、 “复制” 或 “删除”。
-
正常文本块中的特殊行间距。
当然,用户总是可以通过鼠标悬停或点击交互来确定链接。 如果链接内容不甚重要不需要显眼,那么您可以弱化这些链接。

在本例中,“联系我们”、“使用条款”、“商标”和“隐私声明”都是链接。 它们被有意淡化显示,因为它们不重要。 它们是链接的唯二线索是:它们有一个鼠标指针悬停变化效果,并且它们位于窗口底部的标准导航区域。
设计链接的特殊性、关联性和可预见性
链接文本应该能表达出点击链接的后果。
特殊链接比一般的链接对用户更有吸引力,所以使用链接标签提供关于点击链接产生结果的特定描述性信息。 但是,确保你的链接文本不要太具体,以免误导和妨碍用户顺利使用。
简洁的链接比冗长的链接更容易被阅读。 删除不必要的文字和细节。 链接标签文字不一定要很全面。
审视你的链接文本:
-
确保链接文本反映了链接所支持的场景。
-
确保链接的结果是可预测的。 用户不应该对结果感到意外。
如果你只做两件事..。
-
使链接可以单独通过视觉被发现。 用户不必通过与你的程序互动来寻找链接。
-
使用链接,提供关于点击链接结果的具体描述性信息,必要时使用尽可能多的文本。 用户应该能够从链接文本和可选的信息提示中准确预测链接的结果。
应用范例
链接有以下几种应用范例:
导航链接:用于导航到其他页面或窗口的链接
单击该链接将在浏览器窗口或向导窗口中导航到另一个页面或显示一个新窗口。与任务链接不同的是,导航链接不会启动任务,而只是简单地导航到另一个地方或继续处理已经在进行的任务。 导航具有安全性,因为用户可以随时返回。
任务链接:用于发起新命令的链接。
单击链接可以立即执行命令,也可以显示一个对话框或页面来输入更多信息。 与导航链接不同的是,任务链接启动新任务,而不是继续使用现有任务。任务并不意味着安全用户不能使用 Back 命令恢复到以前的状态。之所以叫任务链接是为了防止与命令链接混淆。
帮助链接:用于显示帮助主题的文本链接。
单击该链接将在单独的窗口中显示帮助文字内容解释。
定义链接:当用户点击或悬停在其上时,用于在信息提示框中显示定义的文本链接。
这种用法对于解释用户可能不知道的术语非常有用,因为它能保持界面显示的简洁一致。

菜单链接:一组组成菜单的命令链接。
因为菜单形式的设计已经暗示了链接的点击功能,所以这类链接除了在hover情况下,一般不显示下划线,也不会使用默认链接颜色展示文字。

选项链接:选定的选项或其占位符,单击该链接将调用命令更改该选项。
与常规文本链接不同,选项链接会根据当前选择的选项更改显示文本,并且始终使用使用未访问的链接颜色绘制链接。

左边的示例是微软outlook设置窗口中的选项链接及占位符。当用户点击链接并选择某些选项后,将转变为右边的示例:更新链接文本以显示选择结果。
如果不同选项的格式也不一样,那么使用选项链接特别合适。

右边的示例展示了outlook的不同规则设置选项具有不同的格式。

上面的例子左边是一个选项链接。当被点击选择后,会变为右边的下拉列表样式。
链接也有以下几种展示形式:
纯文字链接:仅由文字组成。
由于展示方式最为灵活(可以在行内展示),纯文字链接可以在所有位置使用。

上例中,文字颜色表明它是一个行内链接。
带图标的链接:文字链接包含一个能够表明该链接功能的前置图标。
因为图形为链接提供了额外的视觉提示,所以比起没有下划线的纯文本链接,它更容易被识别为链接。这个图标通常尺寸为16x16像素。


纯图标链接:仅由图标表示的链接。
这种链接由于缺少文本,故无法使用链接颜色或下划线来表明链接属性。 这些链接要么依赖于图形设计来提示用户进行点击,要么依赖于图形中的文本来建议用户点击某个动作。只有图形的链接有时会使用hover手型效果来指示链接, 这种方法有效,但不能单靠目视被发现。

由于其潜在的识别和本地化可能遇到的问题,纯图标链接不推荐作为展示链接任务的唯一方式。
设计指南
交互
- 如果点击链接没有即时展示结果,需要显示一个忙指针。 如果没有反馈,用户可能会认为点击没有生效,然后再次点击。
颜色
- 对访问过和未访问过的链接,使用项目主题色或者系统默认链接颜色。 这些颜色的含义在所有程序中都是一致的。 如果出于任何原因用户不喜欢这些颜色(可能是出于可访问性的原因) ,他们可以自己进行更改。
- 对导航链接,点击前和点击后要使用不同的颜色进行区分。只在程序运行过程中保留访问链接的历史记录。对用户已经访问过的页面链接显示不同的颜色很有用,这样可以防止用户无意中重复访问相同的页面。
- 对于其他类型的链接,已访问过也不要显示不同颜色。显示一项命令或任务已被执行过,并没有太大意义。
- 对于不是链接的文字,不要赋予特殊颜色,这样会让用户产生误解。在想使用色彩文本的地方,使用粗体文本或者阴影文字样式。
-
例外情况: 如果所有链接都带下划线或位于标准导航或命令位置,则可以使用彩色文本。
错误示例
在上例中,非链接的文字不能使用蓝色 -
背景颜色与链接颜色要保证可辨识的对比度。可参阅Windows系统颜色一章的详细说明。
错误示例
在上例中,背景颜色与链接颜色对比度很低,无法识别。
下划线
-
对于执行主要任务所必需的链接,提供足够的视觉线索,以便用户仅通过视觉检查就可以识别链接。这些线索包括下划线、图形或项目符号以及将链接放置于标准链接位置。用户不应该只能通过把鼠标悬停在对象上或者点击行为来确定它是否是一个链接。如果链接在上下文中不明显,请使用带下划线的文本。
-
不要在不是链接的文本下加下划线,因为用户可能会误认为它是一个链接。如果要使用带下划线的文本,请使用斜体字替代。只为链接保留下划线样式。
-
打印时,不要打印下划线或链接颜色。 打印的链接没有意义,可能会造成视觉混乱。
带图标的文字链接
-
只在命令链接中使用箭头图标。常规链接不应该使用箭头图标,除非它们在 windowsxp 中被用来替代命令链接。
-
将图标放在文本的左边。图标需要在视觉上引导用户看向文本。
正确示例
错误示例
-
确保点击图标和点击文字都能产生一样的点击链接效果。不然用户会感觉意外和混乱。
仅有图标的链接
- 不要使用仅有图标的链接。用户很难将它们识别为链接,而且就算在图标中内嵌有说明它们含义和用法的文字,在本地化过程中也会遇到问题和困难。
导航链接
- 确保导航链接不需要确认操作。用户应该永远能回到最初状态,不管是通过点击“后退”撤销导航操作,还是关掉新打开的窗口界面。
- 尽量导航链接到更加精确的位置。 例如,文档导航时跳转导航到相关内容的位置,而不是在文档开头打开展示。
- 只在材料有关联性、有帮助并且不冗余的情况下,使用链接关联它和正文内容。有节制地使用导航链接。
- 如果导航链接导向外部网站,需要在信息提示弹框中附上URL地址。这样用户能更加明确地知道将去向哪里。
- 只链接第一次出现的链接文本。 多余的链接是不必要的,而且会使文本难以阅读。
特例情况:
-
如果一条指令有链接,把链接放在指令中。??(这一句后面貌似缺图了,不知道是在说什么,没懂,就不翻译了)
-
如果几处提到的内容相隔很远,那么还是需要都加上链接。例如,帮助文档中的不同主题部分可以分别用链接锚定。
任务链接
- 对不具有破坏性以及可以轻易撤销的命令,使用任务链接。由于用户容易将链接与导航(以及其返回的能力)联系起来,链接不适用于带有重大后果的命令。对显示对话框或确认信息的命令来说,用链接展示是不错的选择。
菜单链接
-
将相关联的导航和任务链接分组放置到菜单中。 在标准导航或命令的位置上放置相关菜单链接,比分散放置链接更便于用户查找和理解。
-
对于依赖于选项的菜单(随选项的更改,菜单项也会改变),删除不再适用的菜单链接。 不要仅仅只是禁用无效链接。这样做可以消除视觉混乱,用户也不会错过需要选择的链接。
-
对于独立于选择的菜单,禁用不适用的菜单链接(但还是显示它们)。 不要删除它们。 这样做可以使菜单看起来更加稳定一致,这样用户需要的链接也更容易被找到。
这个例子是Windows更新窗口。现在正在更新状态,所以“检查更新”的链接选项被禁用了。
链接信息提示
-
如果链接需要进一步解释,可以使用单独的文本控件,或者在信息提示中提供补充解释,但不能同时使用这两种方式。使用完整的句子文法结构和结束标点符号。同时使用两者,如果文本相同,则无必要;如果文本不同,则会造成混淆。
在此示例中,补充说明提供了有关链接的进一步信息。

-
信息提示不要只是短暂的说明,或者单纯重复链接文字。
错误示例
标签文字
-
不要为链接设置存取键。链接使用tab键可以访问到。
-
链接要能提供关于点击链接结果的具体描述性信息,必要时使用尽可能多的文本。 链接文本应该显示点击链接的结果。 用户应该能够从链接文本和可选的信息提示中准确预测点击链接的结果。
错误示例
上例中的链接尽管看起来很重要,但是描述文字太过通用。用户更倾向于点击描述更为具体的链接。 -
对行内链接来说:
1.与所在文本段落的大小写及标点符号规则保持一致;
2.除非该句是问句,不要在末尾加标点符号;
3.链接文字的区域要够大、便于点击,链接设置的文本要尽量相关和精确;
4.避免将两个不同的行内链接相邻放置。用户会误解为它们是同一个链接。 -
对非行内的独立链接:
1.用句子的大小写书写规则;
2.除非问句,结尾不要加标点符号;
3.将所有文字都附上链接。 -
屏幕上不同位置的链接尽量使用不同的文字句式描述。要使用户能清楚意识到不同链接导向不同的目标。
错误示例
正确示例
正确示例中,两个链接的区别很明显。
-
不要在链接文本中添加 Click 或 Click here。 这是不必要的,因为链接本身意味着需要点击。 此外,使用屏幕阅读器时,“点击这里”这种文字传达不出关于该链接的有效信息。
导航链接
-
用一个名词开始链接描述,并清楚地说明点击链接会去向什么地方。 不要使用结束标点符号。 有时候你可能需要用一个动词来开始描述导航链接,但是不要使用那些已经被链接本身所暗示的动词,比如 View,Open,或者 Go to。
-
如果导航链接指向网页,并且您希望目标用户能记住该 URL 并将其输入到浏览器中,则将该导航链接显示为 URL地址。 如果可能的话,把这样的网址设计得简短易记。
-
如果链接包含以“www”开头的网站 URL,则省略 https: / / 协议名称 并使用小写文本。
错误示例
正确示例
任务链接
-
用命令式动词开始链接,并清楚地描述链接执行的任务。在结尾不要使用标点符号。
-
如果命令需要其他信息(包括确认信息)以完成执行,则使用省略号结束链接。 任务的成功完成后如果仅仅需要显示一下另一个窗口,不要使用省略号。仅在需要补充额外信息以帮助执行任务时才使用省略号。
-
正确使用省略号很重要,它表明用户可以在执行任务之前做出进一步的选择,或者彻底取消任务。 省略号提供的视觉提示允许用户自如地在软件中浏览。
-
如有必要,在文字描述中加上“立即”以区分任务链接和导航链接。
在本例中,“ Download files”导航到一个用于下载文件的页面,而“ Download files now”则是执行这个命令。
帮助链接
更多指南和示例,请参阅“帮助”一节
链接信息提示
- 使用完整句子结构和标点规范。
更多指南和示例,请参阅“工具提示和信息提示”一节。
说明
描述链接时:
-
使用确切的链接文字,包括其大小写规范,但不包括省略号。
-
要描述用户交互,请使用“点击”。
-
如果需要,可以使用粗体格式的链接文本。 否则,只有在需要时才将链接文本放在引号中,以避免混淆。
示例
网友评论