出自UXGuide.net

链接

Links

目录 1 它用在这里合适吗？ 2 设计理念 2.1 使链接易于识别 2.2 使链接明确、相关且能够被预知 3 使用模式 4 设计规范 4.1 交互 4.2 颜色 4.3 下划线 4.4 带图标的文字链接 4.5 纯图形链接 4.6 导航链接 4.7 任务链接 4.8 菜单链接 4.9 链接信息提示 5 文本 5.1 导航链接 5.2 任务链接 5.3 帮助链接 5.4 链接信息提示 6 文档编写

链接（Link）用于导航至其他页面、窗口或帮助主题，也可用于显示定义、启动命令或设置选项。链接可能是文本或图像，通常用已访问或未访问的系统链接颜色来显示，以表明它是可以被单击的。传统上，链接是带有下划线的，但这往往并不必要，而且也可以减少视觉上的杂乱。

已访问过的和未访问过的链接。

典型的文字链接。

当用户将鼠标指向某个链接时，该链接的文本应当显示下划线（如果原先没有的话），且鼠标指针变为手形。

文本链接是最轻量级的可单击控件，往往用于降低设计的视觉复杂度。

注：与命令链接（Command Links）和布局相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

考虑下列问题以进行判断：

• 该链接是否用于导航至其他页面、窗口或帮助主题，或是显示定义、启动命令或设置选项？如果不是，则应改用其他控件。
• 命令按钮是不是更合适？如果符合下列情况，则应当使用命令按钮：
  • 该控件启动一个立即操作，包括显示一个窗口，且该命令与窗口的主要功能相关。
  • 显示用于收集输入或进行选择的窗口，即使是用于次要命令。
  • 标签较短，由不超过四个单词组成，不存在长按钮所存在的外观问题。
  • 命令不是嵌在文本中的。
  • 该控件与其他相关的命令按钮是一组的。
  • 该操作是具有破坏性的或是不可逆的。因为用户会把链接和导航（并且还能够回来）联系起来，因此链接不适合用于具有严重后果的命令。
  • 类似地，在向导或任务流程（task flow）中，命令意味着提交。在这类窗口中，命令按钮暗示提交，而链接暗示导航至下一步。

关于详细的比较，请参见命令按钮 vs 链接。

设计理念

使链接易于识别

链接缺乏功能可见性（Affordance），这意味着其视觉属性无法提示其使用方法，只能通过体验来理解。不使用下划线及系统链接颜色的链接看起来和普通文本一样。唯一能够确定其行为的方法就是通过其外观、上下文、或是将鼠标移至链接的上方。

令人感到意外的是，这种功能可见性的缺乏却往往是使用链接的动机，因为它看上去不那么显眼，所以能够减少设计的视觉复杂度。链接没有命令按钮及其他控件那样厚重的边框。例如，如果你使用命令按钮来让主要命令显而易见，你也可以选择为次要命令选用链接以将其弱化。

困难即在于仍要保持足够的视觉线索，使用户能够辨别出链接。基本的规则是用户必须能够仅仅依靠视觉观察来辨别链接——他们无须通过鼠标悬停或单击某个对象来确定其是否是链接。

如果链接使用了系统链接颜色以及下列至少一条视觉线索的话，用户就能够仅仅依靠视觉观察来辨别链接：

• 带下划线的文本。
• 图片或项目符号，例如<a href="#textWithIconLinksPattern">带图标的文字链接</a>模式中所示。
• 位于标准的导航、选项或命令位置，如窗口的内容区域（Content Area）、或是导航栏、菜单栏、工具栏及页脚处。

用户可以通过下列视觉线索辨别链接，但这些视觉线索本身仍不够充分：

• 暗示单击的文字，如“显示”、“打印”、“复制”或“删除”等以祈使语气动词开头的命令。
• 位于一段普通文本中。

当然，用户总是能够通过操作——悬停或是单击来确定是否是链接。如果对这些链接的探索不会引发什么严重后果的话，你可以弱化它们。

在这个示例中，Contact Us、Terms of Use、Trademarks 及 Privacy Statement 都是链接。它们被故意弱化了，因为不会触发什么重要的任务。仅有的线索就是在鼠标指向时改变指针形状，以及位于窗口底部的标准导航区域内。

使链接明确、相关且能够被预知

链接文本应当指出单击链接会产生的结果。

对于用户来说，明确的链接比普通链接更具有强迫性，因此应当在链接标签中给出关于单击该链接会产生的结果的明确描述信息。不过，要确保你的链接文本不会过于特别，以至于产生误导及妨碍正常的使用。

相比那些冗长的链接，人们更愿意阅读简要的链接。去掉不必要的文字和细节。链接标签不必那么全面。

评估你的链接文本：

• 确保链接文本反映了链接支持的情形。
• 确保链接的作用是能够被预知的。用户不会对结果感到惊讶。

最重要的两件事：

1. 使仅凭视觉观察即能发现链接。用户无须通过与你的程序交互来查找链接。
2. 在链接中给出关于单击该链接会产生的结果的明确描述信息，哪怕使用很多文字。通过链接文本和可选的信息提示，用户应当能够准确地预知链接会产生的结果。

使用模式

链接具有多种功能模式：

导航链接 用于链接至其他页面或窗口的链接。	单击链接会原地导航至其他页面——比如在浏览器窗口或向导中，也可能打开新的窗口。与任务链接不同，导航链接并不启动任务，只是简单地导航至其他地方或是处理正在进行的任务。导航暗示着安全，因为用户总是可以返回。 头条新闻 在这个示例中，单击该链接将导航至头条新闻页。
任务链接 用于启动新命令的链接。	单击链接要么直接执行命令，要么显示对话框或页面以收集更多的信息。与导航链接不同，任务链接启动一个新任务，而不是继续进行已有的任务。任务并不暗视安全性——用户无法通过后退命令恢复到先前的状态。任务链接之所以称为任务链接，是为了避免和命令链接的混淆。 登录 在这个示例中，单击该链接将启动登录命令。
帮助链接 用于显示帮助主题的文字链接。	单击链接将在另外的窗口显示帮助文章。 什么是强密码？ 在这个示例中，单击该链接将显示指定主题的帮助窗口。
定义链接 用于当用户单击或悬停在链接上时显示信息提示的文字链接。	该模式在为用户定义不太为人所知的术语而又不想增加屏幕混乱的时候非常有用。 在这个示例中，信息提示给出了定义。
菜单链接 用于创建菜单的一组任务链接。	因为菜单所处的情况通常使用一组链接，其文本通常不加下划线（除非悬停）而且可能没有使用系统链接颜色。 在这个示例中，一组链接组成了菜单。
选项链接 一个已选定的选项或占位符，单击该链接将引发命令以更改该选项。	与常规文字链接不同，该链接会更改其文字内容以反映当前选定的选项，且总是用未访问链接颜色显示。 左侧的示例显示了 Microsoft® Outlook® 规则向导中的带有选项占位符的一条规则。当用户单击链接选了一些选项之后，链接文本则更新为显示结果（如右侧示例所示）。 选项链接有时也可用于选项格式存在变化的情况。 如右图所示，Outlook 具有可变格式的规则。 左图为选项链接。当被选中时，则变为下拉列表（如右图所示）。

链接也具有多种呈现模式：

纯文本链接 仅由文本组成。	这种形态最为灵活，可以被用在任何地方，包括嵌于文本中。 在这个示例中，文本颜色清晰地标识了嵌入文本的链接。
带图标的文字链接 前面带有图标的文本，该图标能够表明其功能。	图形为链接提供了额外的视觉象征，这使得链接比不带下划线的纯文本链接更易于识别。该模式通常使用 16x16 像素的图标。 在这个示例中，图标为链接提供了额外的视觉象征。 在这个示例中，标准的三角形播放符号表明该文本是一个命令。
纯图形链接 仅包括图形。	由于缺少文本链接，无法通过链接颜色或下划线来辨别链接。这类链接要么依赖图像设计来暗示单击，或者是通过图像中的文本暗示用户单击。有的纯图形链接通过鼠标悬停效果来表明链接。这种做法有一定帮助，但无法仅通过视觉观察来辨别。 在这个示例中，链接无法仅通过视觉观察来辨别。 由于可能存在的识别和本地化问题，不推荐将纯图形链接作为执行操作的唯一途径。

设计规范

交互

• 如果单击链接不会立即产生结果的话，应当显示忙碌鼠标指针。如果没有反馈，用户可能会认为没有单击并会再次单击。

颜色

• 为已访问与未访问的链接使用主题或系统链接颜色。这些颜色的含义在所有程序中都是一致的。如果用户由于某种原因不喜欢这些颜色（可能是无障碍方面的原因），他们可以自己更改。
• 对于导航链接来说，为已访问的和未访问的链接使用不同的颜色。应当仅在当前程序实例中保存访问链接历史记录。已访问过的颜色对于表明用户去过哪里非常重要，可以防止他们无意中重复访问那些已经访问过的页面。
• 对于其他类型的链接，不要使用已访问过的链接颜色。例如，没有什么必要来标明那些“已访问过的”命令。
• 不要为不是链接的文本添加颜色，因为用户可能把它当成链接。在你想使用彩色文本的地方使用粗体或某种灰色。

例外：如果所有链接都带有下划线或位于标准导航或命令区域的话，则你可以使用彩色文本。

• 使用与链接颜色形成明显对比的背景色。系统窗口颜色始终是好的选择。

错误：

在这个示例中，背景色与链接颜色之间产生的对比度很低。

下划线

• 对于完成主要任务必不可少的那些链接来说，应当提供视觉线索使用户能够仅通过视觉观察即可识别链接。这些线索包括下划线、图形或项目符号、以及标准的链接位置。用户无须悬停于对象上或尝试单击来确定其是否是链接。如果链接在上下文中不那么明显的话，应当使用带下划线的文本。
• 不要为不是链接的文本添加下划线，因为用户可能把它当成链接。在你想使用带下划线的文本地方使用斜体。将下划线仅用于链接。
• 打印时，不要打印下划线或链接颜色。打印出来的链接没有任何价值，还可能会引起混淆。

带图标的文字链接

• 箭头图标应当仅用于命令链接。常规链接不应当使用箭头图标，除非它是用作命令链接在 Windows XP 中的替代品。
• 将图标放在文本的左侧。图标应当在视觉上引出文本。

正确：

错误：

在错误的示例中，图标没有引出文本。

• 单击图标与单击文本的效果应当相同。否则会导致非预期的或令人费解的结果。

纯图形链接

• 不要使用纯图形链接。用户在链接识别上会感到困难，且图形中的任何文字（用于在单击后表明其操作）会造成本地化问题。

导航链接

• 确保导航链接不需要进行提交。用户应当始终能够回到初始状态，要么是使用“后退”进行就地导航，要么是通过“取消”关闭新窗口。
• 链接到特定的内容，而不是一般性的内容。例如，链接到文档的相关段落比直接链接到开始位置要好。
• 仅当链接的资料相关、有用、不是冗余重复的时候才使用链接。应当有节制地使用导航链接——不要仅仅因为能够使用而使用。
• 如果链接导航至外部站点，应当将其 URL 显示在工具提示中，使用户能够确定链接的目标。
• 只在相关文本第一次出现时提供链接。重复的链接没有必要，而且会使文本难于阅读。

正确：

图片文件夹让您得以轻松共享您的图片。通过图片文件夹中的任务，您可以在电子邮件中发送图片或将其发布在 Web 上的一个安全、私人的位置。您也可以直接从图片文件夹中打印您的照片。

错误：

图片文件夹让您得以轻松共享您的图片。通过图片文件夹中的任务，您可以在电子邮件中发送图片或将其发布在 Web 上的一个安全、私人的位置。您也可以直接从图片文件夹中打印您的图片。

在正确的示例中，相关文本只有在首次出现时才使用链接。

例外：

• • 如果操作说明文字中包含链接内容，则将链接放置在操作说明文字内。

使用强密码非常重要。更多信息，请参见强密码。

在这个示例中，链接被放在了操作说明文字中，而非首次出现时。

• • 如果相关文本在离首次出现很远的位置出现的话，也应当使用链接。例如，你可以在不同段落中重复链接至同一个帮助主题。

任务链接

• 应将任务链接用于那些没有破坏性或能够轻易恢复的命令。因为用户会将链接与导航（能够回退）联系在一起，链接不适合用于具有严重后果的命令。那些显示对话框或确认消息的命令则是好的选择。

正确：

开始

停止

错误：

删除文件

在错误的示例中，该命令具有破坏性。

菜单链接

• 应当将相关的导航和任务链接组合为菜单。位于标准导航或命令区域的包含一组相关链接的菜单比单独分开放置的链接更容易查找和理解。
• 对于与选中项相关的菜单，应当移除不适用的菜单链接。不要禁用它们。这么做会减少混乱，且用户不会错过那些需要先选中目标的链接。
• 对于与选中项无关的菜单，应当禁用那些不适用的菜单链接。不要移除它们。这么做会使菜单更加稳定，且这类链接更易于查找。

在这个来自 Windows Update 的示例中，一个更新正在进行中，因此“Check for updates（检查更新）”命令被禁用了，但没有被移除。

链接信息提示

• 如果链接需要进一步解释，应当将补充说明放在单独的文本控件中，或是使用信息提示，但不要两者都用。应当使用完整的包含句末标点的句子。如果两者的文本相同，那么同时使用没有必要；如果不同，那么会使人感到困惑。

在这个示例中，补充说明为链接提供了进一步的解释。

在这个示例中，信息提示给出了进一步的解释。

• 不要提供只是对链接文本进行重新表述的信息提示。

错误：

在这个示例中，内容重复的信息提示可能会对用户产生侵扰。

文本

• 不要为链接分配访问键。链接是通过 Tab 键来访问的。
• 链接应当给出关于单击链接后的结果的明确描述信息，尽可能详细地进行文字说明。链接文字应当表明单击链接的后果。用户应当能够通过链接文字及可选的信息提示来准确地预测单击链接的后果。

错误：

在这个示例中，尽管链接看起来很重要，但它的标签太过寻常。用户通常愿意单击一个更加明确的链接。

• 对于内联链接：
  • 保留文本的大小写与标点。
  • 不要在链接中包含句末标点，除非文本是一个问句。
  • 将文本中最相关的部分作为链接，并选择长度足够易于点击的文本作为链接。

正确：

Go to a newsgroup.（前往新闻组）

错误：

Go to a newsgroup.

在这个示例中，“Go”既不是文本中最相关的部分，也不够大，不能成为好的单击目标，而“newsgroup”则是。

• • 避免将两个不同的内联链接连续放置。用户可能会认为它们是一个链接。

错误：

更多信息，参见 UX 设计规范。

在这个示例中，“UX”和“设计规范”是两个不同的链接。

• 对于独立链接（非内联）：
  • 使用句子大写样式。
  • 不要使用句末标点，除非该链接是问句。
  • 将全部文本作为链接。
• 链接应当与屏幕上其他的链接有清晰的区别。用户应当能够准确地预知和区别不同的链接目标。

错误：

查找反病毒软件

获取反病毒软件

正确：

如何知道反病毒软件是否已经安装

安装反病毒软件

在错误的示例中，两个链接之间的区别不够清楚。

• 不要为链接文本添加“单击”或“单击此处”的字样。这是不需要的，因为链接暗示了单击动作。而且，当通过屏幕阅读器阅读时，单独的“单击此处”和“此处”无法传递任何信息。

错误：

单击此处查看说明。

单击此处查看说明。

单击此处查看说明。

正确：

说明

在错误的示例中，“单击此处”没有表达传递任何关于该链接的信息。

导航链接

• 链接文本应以名词起始，并清晰地描述单击链接之后的去向。不要使用句末标点。偶尔会需要使用以动词开头的导航链接，但不要使用那些通过链接本身已经进行暗示的动词，如“View（查看）”、“Open（打开）”或“Go to（转向）”。
• 如果链接用于导航至某个网页，且你希望目标用户会在浏览器中输入 URL 来重复访问的话，则应当将 URL 本身用于导航链接。可能的话，应当将此 URL 设计得尽可能短且易于记忆。
• 如果链接包含指向以“www”开头的网站 URL，则应省略 http:// 协议名称并使用小写文本。

错误：

http://www.microsoft.com

www.microsoft.com

正确

microsoft.com

在错误的示例中，“http://”和“www”都是不言自明的。

任务链接

• 链接应当以祈使动词起头，清晰描述链接完成的操作。不要使用句末标点。
• 如果链接需要额外信息（包括确认信息）才能成功完成，其标签应当以省略号结尾。如果该操作所谓成功完成只是简单地显示另一个窗口时则不要使用省略号——仅在完成该任务需要额外信息时才使用。

打印...

在这个示例中，“打印...”命令链接会弹出打印对话框以收集更多的信息。

打印

相反，在这个示例中，“打印”命令链接则直接在默认打印机打印一份文档，无须用户任何进一步的操作。

正确使用省略号非常重要，它可以向用户指出他们是否能在执行操作之前做出更多选择，甚至是完全取消整个操作。省略号提供了视觉上的线索，它使得用户能够在探索你的软件时无须感到担心。

• 必要的话，在任务链接的尾部添加“now（立即）”以区别与导航链接。

下载文件

立即下载文件

在这个示例中，“下载文件”链接用于导航至下载文件的页面，而“立即下载文件”则会实际执行下载操作。

帮助链接

关于设计规范和示例，参见帮助。

链接信息提示

• 使用完整的包含句末标点的句子。

更多设计规范和示例，参见工具提示和信息提示。

文档编写

当提及链接时：

• 原样引用链接文本，包括其大小写，但无须包含省略号。
• 用“click（单击）”一词描述用户的交互行为。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：To start the scan, click Scan a computer.（单击“扫描计算机”开始扫描。）