?

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

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

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

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

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

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

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

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

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

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

請(qǐng)容我解釋一下。

一個(gè)簡(jiǎn)單的方法來(lái)測(cè)試你的超鏈接設(shè)計(jì)(A Simple Way to Test Your Hyperlink Design)

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

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

• 修改頁(yè)面<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)在我們回過(guò)頭來(lái)看之前的例子，但是是加上祛色和模糊效果之后的。

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

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

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

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

到這里就有問(wèn)題了。

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

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

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

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

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

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

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

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

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

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

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

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

CSS：

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

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

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

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

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

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

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

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

把字號(hào)變大如何？

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

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

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

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

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

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

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

還有：

第二段不僅對(duì)用戶更好，而且對(duì)搜索引擎也更好，因?yàn)槠浔鹊谝欢魏?jiǎn)單的一個(gè)“點(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)色下劃線能夠更容易的識(shí)別。

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

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

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

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

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

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

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

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

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

總結(jié)(Summary)

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

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