?

超鏈接就像膠水一樣把網(wǎng)頁彼此連接起來。如果沒有了它，網(wǎng)頁就完全不會是現(xiàn)在這個樣子，甚至根本就不會存在。使用一個簡單的元素：<a>，你就能創(chuàng)建一個能跟互聯(lián)網(wǎng)上其他頁面鏈接的鍵（bond）。超鏈接是如此的神奇。

超鏈接是 Web 之根，而且一直都是如此，也許這就是為什么網(wǎng)站主和 Web 設(shè)計(jì)開發(fā)者們沒有給其應(yīng)有的重視。

HTML 中的?<a>標(biāo)簽的設(shè)計(jì)，是用戶閱讀體驗(yàn)的關(guān)鍵。我們應(yīng)當(dāng)花點(diǎn)時間來重新考慮和設(shè)計(jì)它。

我將與你分享一些超鏈見設(shè)計(jì)的技巧，使其能夠帶來更好的用戶體驗(yàn)，增強(qiáng)網(wǎng)站的可訪問性，甚至改善網(wǎng)站的 SEO。

超鏈接應(yīng)該長得像超鏈接(Hyperlinks Need to Look Like Hyperlinks)

你頁面上的所有鏈接應(yīng)該明確的讓用戶知道這是一個鏈接，并且你可以點(diǎn)擊它。并且應(yīng)該呈現(xiàn)出交互性。

作為 Web 設(shè)計(jì)者往往喜歡創(chuàng)新和實(shí)驗(yàn)性的設(shè)計(jì)，但是有時堅(jiān)持一定的設(shè)計(jì)慣例和原則是很重要的。其中超鏈接就是應(yīng)當(dāng)尊重傳統(tǒng)和常規(guī)的東西。據(jù)可讀性的研究，常規(guī)狀態(tài)下，文本鏈接應(yīng)該是藍(lán)色的并且?guī)聞澗€。

藍(lán)色帶下劃線是一個值得保留的很好的標(biāo)準(zhǔn)，沒有為什么，就是因?yàn)榛ヂ?lián)網(wǎng)用戶這么多年來已經(jīng)習(xí)慣了這種樣式。

超鏈接設(shè)計(jì)的例子(Examples of Hyperlink Designs)

上圖都是比較不錯的超鏈接設(shè)計(jì)，它們都是藍(lán)色的并且能夠在文本中“脫穎而出”。但是為什么《紐約時報(bào)》(York Times)要比其他兩個的設(shè)計(jì)更好呢？

請容我解釋一下。

一個簡單的方法來測試你的超鏈接設(shè)計(jì)(A Simple Way to Test Your Hyperlink Design)

讓我向你展示一個簡單的方法用來檢測你的超鏈接是否能夠直觀的展現(xiàn)。假如去除頁面文本的顏色（只采用默認(rèn)黑色）并且模糊掉頁面文本。此時你看到的就相當(dāng)于用戶快速掃描式瀏覽網(wǎng)頁的內(nèi)容，或者當(dāng)用戶有視力障礙和色盲時看到的內(nèi)容。

你可以這樣來實(shí)現(xiàn)：

• 修改頁面<a>標(biāo)簽和<p>標(biāo)簽的相應(yīng) CSS 屬性值：移除color?，并使文本實(shí)現(xiàn)模糊效果。
• 截圖并使用 Photoshop 處理
  1. Image > Adjustments > Desaturate
  2. Filter > Blur > Gaussian Blur

現(xiàn)在我們回過頭來看之前的例子，但是是加上祛色和模糊效果之后的。

這張是 Guardian 的，很難看到超鏈接。

BBC 使用了字體加粗來突出超鏈接，這比 Guardian 稍微好那么一點(diǎn)，因?yàn)槠鸫a至少能看到超鏈接。

紐約時報(bào)這里，仍然可以區(qū)分哪里是超鏈接。

下劃線鏈接的問題(The Problem with Underlining Links)

到這里就有問題了。

這就是超鏈接設(shè)計(jì)并不簡單。

這就是我們習(xí)慣的下劃線超鏈接為何失敗。

有項(xiàng)研究表明，當(dāng)給超鏈接添加下劃線時會降低文本的可讀性。說下劃線超鏈接“嚴(yán)重的影響了 Web 頁面的可讀性”(原：seriously underestimated effects on the usability of Web pages)。此研究人員進(jìn)一步的說“替代的設(shè)計(jì)方案應(yīng)該慎重考慮對未來 Web 瀏覽器的設(shè)計(jì)”。

實(shí)質(zhì)上他們就是說應(yīng)該完全改變目前的超鏈接的（帶下劃線）設(shè)計(jì)。

加下劃線超鏈接影響閱讀體驗(yàn)的理由就是有些字符的一部分會被顯示到線的下面——比如p、g、j、q——會受到 CSS 樣式text-decoration: underline的影響。

下面是超鏈接在 Chrome 瀏覽器(version 28)里的默認(rèn)樣式：

有什么辦法能解決這個可讀性問題呢？(What’s the Solution to This Readability Issue?)

我們可以自定義下劃線的樣子，而不用等著瀏覽器來改變。嗯，我們可以使用 CSS 的border-bottom屬性代替text-decoration實(shí)現(xiàn)超鏈接下劃線。這樣可以讓下劃線往下移幾個像素來提高可讀性。

這是上圖效果使用的 CSS 代碼：

a {
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid blue;
}

這樣做很強(qiáng)大，甚至可以單獨(dú)定義下劃線的樣式效果使其顏色不同于超鏈接文本的顏色，從而使其成為獨(dú)立的兩個部分。比如我們可以削減超鏈接的權(quán)重以使文本更易讀，或者增加其重量來使其明顯。

為此，我變了一下鏈接的顏色使其稍微變淡：

CSS：

a {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #8d8df3;
}

讓超鏈接文本更長(Make Hyperlink Text Longer)

接下來我打算討論內(nèi)容的組織排版（這是網(wǎng)頁設(shè)計(jì)重要的一部分）。

有些人可能不喜歡這個建議，因?yàn)樗婕皟?nèi)容的創(chuàng)建過程，以及你在 Web 開發(fā)過程中無法涉及的那部分。下面我將講到的基本理論是菲茨定律（Fitts’s Law）。

菲茨定律的概念很簡單，目標(biāo)越小、距離越遠(yuǎn)，要達(dá)到目標(biāo)定位點(diǎn)的時間就越長（the larger something is, the easier it is to see and interact with）。

這是有道理的，尤其是在觸屏設(shè)備中，元素的尺寸及電機(jī)設(shè)備（手指）遠(yuǎn)沒有鼠標(biāo)那么精準(zhǔn)。

用手指點(diǎn)擊超鏈接是很痛苦的。通常你不得不放大超鏈接的顯示區(qū)域，這無疑給點(diǎn)擊超鏈接這個操作帶來更多的障礙。

但是我們能用超鏈接樣式改變的只有這么多了。加粗，下劃線，改變顏色。

把字號變大如何？

假如我們改變<a>元素的font-size屬性，會影響閱讀流（暢），并且會影響行高的一致性。

看看大字號的超鏈接是如何打斷閱讀的連續(xù)性的。

因此我們不能擴(kuò)大其高度，只能擴(kuò)大其寬度。

用戶友好的 SEO 的好處(User-friendly SEO Benefits)

擁有較長的錨文本更有利于 SEO。就是說，擁有較長文本的超鏈接更符合菲茨定律，并附帶搜索引擎友好的好處。

錨文本應(yīng)當(dāng)是描述性的，并且應(yīng)當(dāng)告訴用戶及搜索引擎此鏈接到的頁面是什么。

假如你正在寫一個關(guān)于墻（Wall）的東西。比較下面兩段：

還有：

第二段不僅對用戶更好，而且對搜索引擎也更好，因?yàn)槠浔鹊谝欢魏唵蔚囊粋€“點(diǎn)擊這里”有更多的內(nèi)容在里面。

超鏈接就應(yīng)該是藍(lán)色的嗎？(Should Hyperlinks be Blue?)

根據(jù)?Google 的一項(xiàng)調(diào)查，藍(lán)色鏈接比偏綠(greenish-blue)的鏈接獲得更多的點(diǎn)擊次數(shù)。

我在之前的關(guān)于下劃線的部分也體現(xiàn)了此調(diào)查中藍(lán)色下劃線能夠更容易的識別。

然而，在我看來并不是所有超鏈接都一定要使用藍(lán)色。

關(guān)于超鏈接的設(shè)計(jì)最重要的就是要讓你的超鏈接看起來明顯(obviously)。

假如你能夠使用其他顏色來達(dá)到明顯，那就去做吧。

微軟網(wǎng)絡(luò)開發(fā)者（MSDN）同樣支持這個概念。

有關(guān)設(shè)計(jì)超鏈接的基本方針就是“用戶必須能僅通過視覺上就能識別出超鏈接，而不必非得用鼠標(biāo)經(jīng)過或者點(diǎn)擊某元素后才能確定其是否是鏈接”。

在這個鏈接設(shè)計(jì)模式指南，上面并沒有說任何關(guān)于鏈接需要是藍(lán)色。

在一些情況下，藍(lán)色的鏈接并不是好的選擇。

舉個例子，在此顏色的背景下，藍(lán)色鏈接就會很難閱讀。

總是做對用戶有用的事，即使會打破陳規(guī)。

總結(jié)(Summary)

1. 超鏈接的設(shè)計(jì)應(yīng)該是深思熟慮的。
2. 給你的設(shè)計(jì)添加模糊和去色是快速檢測鏈接能否脫穎而出的方法。
3. 文本下劃線是一種強(qiáng)烈和熟知的常用方法，雖然下劃線會帶來可讀性降低的問題，但是可以通過 CSS 來解決這一問題。
4. 使用較長的描述性錨文本，能夠改善可用性（菲茨定律），并且更有利于 SEO。
5. 設(shè)計(jì)超鏈接時最重要的一點(diǎn)就是：超鏈接必須明顯看起來就像一個超鏈接。

文章來源：譯言網(wǎng)