起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計一個完美的超鏈接——沒那么簡單
HTML 中的超鏈接設計，是用戶閱讀體驗的關鍵。我們應當花點時間來重新考慮和設計它。
?
超鏈接就像膠水一樣把網頁彼此連接起來。如果沒有了它，網頁就完全不會是現在這個樣子，甚至根本就不會存在。使用一個簡單的元素：<a>，你就能創建一個能跟互聯網上其他頁面鏈接的鍵（bond）。超鏈接是如此的神奇。
超鏈接是 Web 之根，而且一直都是如此，也許這就是為什么網站主和 Web 設計開發者們沒有給其應有的重視。
HTML 中的?<a>標簽的設計，是用戶閱讀體驗的關鍵。我們應當花點時間來重新考慮和設計它。
我將與你分享一些超鏈見設計的技巧，使其能夠帶來更好的用戶體驗，增強網站的可訪問性，甚至改善網站的 SEO。
超鏈接應該長得像超鏈接(Hyperlinks Need to Look Like Hyperlinks)
你頁面上的所有鏈接應該明確的讓用戶知道這是一個鏈接，并且你可以點擊它。并且應該呈現出交互性。
作為 Web 設計者往往喜歡創新和實驗性的設計，但是有時堅持一定的設計慣例和原則是很重要的。其中超鏈接就是應當尊重傳統和常規的東西。據可讀性的研究，常規狀態下，文本鏈接應該是藍色的并且帶下劃線。
藍色帶下劃線是一個值得保留的很好的標準，沒有為什么，就是因為互聯網用戶這么多年來已經習慣了這種樣式。
超鏈接設計的例子(Examples of Hyperlink Designs)
上圖都是比較不錯的超鏈接設計，它們都是藍色的并且能夠在文本中“脫穎而出”。但是為什么《紐約時報》(York Times)要比其他兩個的設計更好呢？
請容我解釋一下。
一個簡單的方法來測試你的超鏈接設計(A Simple Way to Test Your Hyperlink Design)
讓我向你展示一個簡單的方法用來檢測你的超鏈接是否能夠直觀的展現。假如去除頁面文本的顏色（只采用默認黑色）并且模糊掉頁面文本。此時你看到的就相當于用戶快速掃描式瀏覽網頁的內容，或者當用戶有視力障礙和色盲時看到的內容。
你可以這樣來實現：
- 修改頁面
<a>標簽和<p>標簽的相應 CSS 屬性值：移除color?，并使文本實現模糊效果。 - 截圖并使用 Photoshop 處理
- Image > Adjustments > Desaturate
- Filter > Blur > Gaussian Blur
現在我們回過頭來看之前的例子，但是是加上祛色和模糊效果之后的。
這張是 Guardian 的，很難看到超鏈接。
BBC 使用了字體加粗來突出超鏈接，這比 Guardian 稍微好那么一點，因為起碼至少能看到超鏈接。
紐約時報這里，仍然可以區分哪里是超鏈接。
下劃線鏈接的問題(The Problem with Underlining Links)
到這里就有問題了。
這就是超鏈接設計并不簡單。
這就是我們習慣的下劃線超鏈接為何失敗。
有項研究表明，當給超鏈接添加下劃線時會降低文本的可讀性。說下劃線超鏈接“嚴重的影響了 Web 頁面的可讀性”(原：seriously underestimated effects on the usability of Web pages)。此研究人員進一步的說“替代的設計方案應該慎重考慮對未來 Web 瀏覽器的設計”。
實質上他們就是說應該完全改變目前的超鏈接的（帶下劃線）設計。
加下劃線超鏈接影響閱讀體驗的理由就是有些字符的一部分會被顯示到線的下面——比如p、g、j、q——會受到 CSS 樣式text-decoration: underline的影響。
下面是超鏈接在 Chrome 瀏覽器(version 28)里的默認樣式：
有什么辦法能解決這個可讀性問題呢？(What’s the Solution to This Readability Issue?)
我們可以自定義下劃線的樣子，而不用等著瀏覽器來改變。嗯，我們可以使用 CSS 的border-bottom屬性代替text-decoration實現超鏈接下劃線。這樣可以讓下劃線往下移幾個像素來提高可讀性。
這是上圖效果使用的 CSS 代碼：
a {
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid blue;
}這樣做很強大，甚至可以單獨定義下劃線的樣式效果使其顏色不同于超鏈接文本的顏色，從而使其成為獨立的兩個部分。比如我們可以削減超鏈接的權重以使文本更易讀，或者增加其重量來使其明顯。
為此，我變了一下鏈接的顏色使其稍微變淡：
CSS：
a {
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #8d8df3;
}讓超鏈接文本更長(Make Hyperlink Text Longer)
接下來我打算討論內容的組織排版（這是網頁設計重要的一部分）。
有些人可能不喜歡這個建議，因為它涉及內容的創建過程，以及你在 Web 開發過程中無法涉及的那部分。下面我將講到的基本理論是菲茨定律（Fitts’s Law）。
菲茨定律的概念很簡單，目標越小、距離越遠，要達到目標定位點的時間就越長（the larger something is, the easier it is to see and interact with）。
這是有道理的，尤其是在觸屏設備中，元素的尺寸及電機設備（手指）遠沒有鼠標那么精準。
用手指點擊超鏈接是很痛苦的。通常你不得不放大超鏈接的顯示區域，這無疑給點擊超鏈接這個操作帶來更多的障礙。
但是我們能用超鏈接樣式改變的只有這么多了。加粗，下劃線，改變顏色。
把字號變大如何？
假如我們改變<a>元素的font-size屬性，會影響閱讀流（暢），并且會影響行高的一致性。
看看大字號的超鏈接是如何打斷閱讀的連續性的。
因此我們不能擴大其高度，只能擴大其寬度。
用戶友好的 SEO 的好處(User-friendly SEO Benefits)
擁有較長的錨文本更有利于 SEO。就是說，擁有較長文本的超鏈接更符合菲茨定律，并附帶搜索引擎友好的好處。
錨文本應當是描述性的，并且應當告訴用戶及搜索引擎此鏈接到的頁面是什么。
假如你正在寫一個關于墻（Wall）的東西。比較下面兩段：
還有：
第二段不僅對用戶更好，而且對搜索引擎也更好，因為其比第一段簡單的一個“點擊這里”有更多的內容在里面。
超鏈接就應該是藍色的嗎？(Should Hyperlinks be Blue?)
根據?Google 的一項調查，藍色鏈接比偏綠(greenish-blue)的鏈接獲得更多的點擊次數。
我在之前的關于下劃線的部分也體現了此調查中藍色下劃線能夠更容易的識別。
然而，在我看來并不是所有超鏈接都一定要使用藍色。
關于超鏈接的設計最重要的就是要讓你的超鏈接看起來明顯(obviously)。
假如你能夠使用其他顏色來達到明顯，那就去做吧。
微軟網絡開發者（MSDN）同樣支持這個概念。
有關設計超鏈接的基本方針就是“用戶必須能僅通過視覺上就能識別出超鏈接，而不必非得用鼠標經過或者點擊某元素后才能確定其是否是鏈接”。
在這個鏈接設計模式指南，上面并沒有說任何關于鏈接需要是藍色。
在一些情況下，藍色的鏈接并不是好的選擇。
舉個例子，在此顏色的背景下，藍色鏈接就會很難閱讀。
總是做對用戶有用的事，即使會打破陳規。
總結(Summary)
- 超鏈接的設計應該是深思熟慮的。
- 給你的設計添加模糊和去色是快速檢測鏈接能否脫穎而出的方法。
- 文本下劃線是一種強烈和熟知的常用方法，雖然下劃線會帶來可讀性降低的問題，但是可以通過 CSS 來解決這一問題。
- 使用較長的描述性錨文本，能夠改善可用性（菲茨定律），并且更有利于 SEO。
- 設計超鏈接時最重要的一點就是：超鏈接必須明顯看起來就像一個超鏈接。
文章來源：譯言網
- 目前還沒評論，等你發揮！
