为网站和邮件设计更舒适的链接效果

为什么"click here"和"by this link"是糟糕的选择？"read more"为什么不容易理解？所有这些短语太过常见，以至于我们没有意识到问题出在哪里。

在这篇文章里，会介绍更易读的、能获得更多信息的链接设置方式。

什么是超链接？

它是一个网址和一个可点击的元素（单词/短语/图片）的结合。这里只讨论文字元素形式的链接。

当一个链接的文本是"here"或"this"，很难用鼠标或手指定位它。而且，它缺乏透明度。读者不知道链接的背后是什么。一个网页、一个文件还是一个表格？读者必须重读整个句子或段落，来把握链接的内容。

与此相反，将链接赋予简洁的说明文本，让读者知晓链接内容，也易于点击。并且，如果能让链接突出于其上下文，这则是一个很好的选择。

如果网址很短，而且网址能够表达所要链接的内容，直接放上链接也是一个不错的选择。

如果一个链接是用来下载文件的，最好说明，文件的格式和大小。

当你想要分享同类文件的不同版本时，很好地设计版面，让这些链接看起来简洁清晰是有必要的。

在网页或邮件中，并非所有链接同等重要。有些链接是要突出显示的，这是可以使用按钮。比如以下内容：

如果因为技术或时间约束，不能使用按钮。可以用一个方便快捷的方式：把链接放在单独一行，加粗，增大上下间距等一系列措施，让这个链接看起来很明显。

按钮的文本需要遵循一个规则，这样可以让读者更舒适。

链接是互联网的主要功能之一。但在每一句话中都加入一个链接并不是最合适的做法（除非你在向维基百科类网站贡献内容）。

第一步是确保你真的需要全部链接。如果你能把这些链接变得易于理解，就不会出现问题；否则，你需要把所有链接都归在一组，用无序列表展示。

为链接分组是不错，但如果有想要突出的行为，一定要突出显示那些链接。

在一个段落中，一句话的结束有一个链接，下一句话的开头也是一个链接。这就很令人讨厌。看到太多链接，不知道点击哪一个。更好的做法是，让这两个链接距离更远一些，视觉上就更舒适一些。

如果一个段落的宽度是固定的，以链接在行内的方式编排文本。比如，链接在段落的开头。但是，不同种类的浏览器在不同种类的设备上，用不同的方式渲染内容。对某些用户来说，链接会发生变化。所有，将一组链接放在无序列表中更保险。

可访问的链接并不仅仅看起来整洁清晰，而且还能正常起作用。

区分链接和正常文本，不能只依靠颜色差异。最典型的做法是为链接添加下划线。加粗也可行。

链接是重要的交互元素。尽可能遵守来自 WCAG 的对比度建议。

盲人无法看到网页，他们通过屏幕阅读器听网页。

所以，在为看网页的人移除不必要的文字时，能不能让盲人听到关于链接的必要描述？

HTML 中的 aria-label 属性可以让盲人听到链接描述，只要为链接标签 a 添加该属性，并为其附加上说明文字即可。

在一个文章卡片上，有海报、标题、作者、关于文章的描述。有必要在所有位置都添加上文章链接吗？看网页的人可能感觉不到问题，但盲人们卻不得不应付这么多遍地聆听这些内容。

另一个需要注意的地方：如果卡片本身是文章链接，作者位置链接着作者主页，标签链接着标签的详情。这样也是一个不错的组合。

在邮件中，如果有太多链接的话，也会跟读者带来困扰。