下劃線是否破壞可讀性？

最新 09-12

在非常早期的互聯網，鏈接就已經是一個基礎的交互元素了。直到現在仍然非常流行：研究表明鏈接是人們在上網時最流行的操作之一。在過去的30年里，設計師們嘗試過設計各式各樣的鏈接，但有一點不會變：下劃線。那個藍色的帶下劃線的超鏈接是互聯網中最明確並且最好理解的習慣之一。

萬維網包含了文檔和鏈接。」 - Tim Berners-Lee, 1991

譯者註：蒂姆·伯納斯-李（Tim Berners-Lee）是萬維網（World Wide Web）的發明者，1990年12月25日，他成功利用互聯網實現了HTTP客戶端與伺服器的第一次通訊。摘自蒂姆·伯納斯-李維基百科

鏈接在互聯網中扮演著中心角色，所以鏈接標記的視覺表現應該非常明顯的影響用戶體驗和使用。但是隨著設備和用戶習慣的改變，下劃線鏈接是否妨礙了而不是幫助了用戶體驗和易用性？目前看起來是簡易有效的，但是一份來自漢堡(德國)大學的研究表明下劃線對於可讀性和設計也有不良影響。

按理說鏈接保持了用戶瀏覽習慣的基礎-我們總需要引入參考文獻或者連接其他互聯網資源 (譯者註： cat videos 在國外屬於一種流行詞，類似代表互聯網(What the Internet is made of/ Universe))。然後隨著互聯網的變化和發展-依據設計的審美，代碼彈性，用戶體驗習慣，和各種各樣的設備-捫心自問一下：相比1991年我們現在是否應該丟棄下劃線鏈接？

下劃線是什麼？

到底什麼是下劃線，並且下劃線這個慣例是怎麼形成的？網上最新的解釋，維基百科定義的下劃線，是「文字下面一條或多或少的水平線，使用(...)用來強調關鍵文字」。這個屬性作為強調的方法仍然存在於下劃線的數字表現形式中，但具有更廣泛而不一定是積極的含義。博客排版指南中建議「不要使用下劃線。永遠都不要」。在印表機時代留下的引用鏈接的陋習不再需要了，因為我們現在有其他可用的強調方法。

下劃線是印表機時代一個枯燥的習慣，印表機沒有粗體和斜體樣式。所以強調文字唯一的方法就是回車，然後在文字下面標記下劃線。這只是印表機時代技術缺陷的一個變通方案。

那麼鏈接如何成為藍色帶下劃線的文字的代名詞？由於網路遠離打字文檔，文本不再需要下劃線來強調。因此，下劃線的意義被重新定義：如果點擊，下劃線的單詞將用戶重定向到相關資源。為什麼藍色？這是一個歷史事故：在Tim Berners-Lee的WWW瀏覽器原型時代，大多數電腦都限於16色顯示屏（如果它們有顏色的話），藍色是最接近黑色的顏色。雖然技術迅速發展，超鏈接依然保持著藍色和下劃線風格。

譯者註：這張圖片只是用來展示下劃線的效果，google搜出來類似英語課文。由於上下文環境不對，所以目前解析不出來了 233 逃：）

下劃線的好處

有很多好理由證實為什麼下劃線依然保持在鏈接的視覺方面佔主導地位。對於新手，它有很好的辨識度：在過去的30年里有多少交互元素依然保持著原來的風格？它吸引了人們在瀏覽文本時對鏈接的注意力，在視覺上也提示了你已經訪問過的鏈接。這些視覺線索有助於增加點擊量（所有踩過維基百科的坑的人都知道）

一些用戶發現了下劃線鏈接中斷瀏覽的特性很有用；這樣他們可以在頁面上更輕鬆的找到重要或者有用的信息。Lee Munroe 在 Smashing 雜誌中坦白的說：「記住，用戶從來不會認真閱讀，他們只會瀏覽。你以前可能聽過，這是真的。所以，讓你的鏈接更明顯一些。」

常見的下劃線鏈接可以給用戶瀏覽或者總結提供一些有用的幫助，遵循 Steve Krug 的名句--「不要讓我思考」。下劃線鏈接在無障礙閱讀也有所成效。色盲或者色弱的互聯網用戶可以無障礙識別帶下劃線的超鏈接，但不能單獨面對有顏色區分的鏈接。

負面的用戶體驗影響

但是這些加分項並不能讓下劃線鏈接免受替代或者吐槽，尤其是UX時代的到來。在2014年，互聯網巨頭谷歌做出了歷史性的決定，不再使用下劃線鏈接。根據首席設計師 Jon Wiley 的說法，谷歌為了支持鏈接色彩區分化而在它的搜索引擎（SERP）中摒棄下劃線，對於「改善可讀性並創建一個整體簡潔的外觀」至關重要。即使用戶在使用谷歌的SERP中有需要鏈接的必要場景，一些大型的閱讀網站也慢慢放棄鏈接了。例如，NNGroup 已經放棄了下劃線，並且發表了一篇關於超鏈接樣式的文章。

谷歌提及改善可讀性意味著易用性和整體體驗都受到下劃線鏈接的負面影響。依據2003年漢堡大學的研究發現，在不同的鏈接視覺效果測試中，下劃線確實在可讀性和全局內容理解上得分最低。鏈接文本可讀性更差並且更難識別出鏈接的文字。那篇論文指出，雖然「鏈接標記就是折中的設計」，但是下劃線貌似是可讀性折中設計里最致命的一點。

當然，在界面審美和視覺設計方面，下劃線是一個折中的設計。根據Awwwards或者 Creative Bloq里所說的，在眾多的「優秀極簡網站」中，幾乎很少使用下劃線。我們該如何避免這種折中的設計呢？

鏈接的替代和改進方案

在給網站設計超鏈接時，設計師有機會改進現有的慣例，或者嘗試其他替代方案。其中一個不會脫離現有標準太遠的方案是改善藍色的明暗度。但是，如果設計師想要更極端的方案，則可以考慮的替代方案是根據需求顯示鏈接或者替換色彩，這兩種方案都在漢堡大學的研究中都表現不錯。

鏈接顏色

在決定鏈接顏色時，設計師必須考慮顏色對比度，並注意色盲用戶。為了適應所有用戶，鏈接應該與黑色文本保持3：1的對比度，與白色背景保持4:5:1對比度。幸運的是，有許多工具（包括Adobe Illustrator的內置視圖）可以複製一些色盲形式。（譯者註：這塊有點太專業，實在理解不了 replicate some forms of color blindness：））當設計師確定設計符合標準時，這是非常重要的。 Webaim是一個致力於幫助設計師為所有人設計網站的組織，建議如果鏈接沒有被下劃線標記，他們應該至少有一些「非顏色指示符」，以便用戶可以識別鏈接，即使他們有視覺障礙。

如 Jakob Nielsen 所說，「假設鏈接文本是有顏色的，那就不一定需要用下劃線標記」，但是強調鏈接是需要的As Jakob Nielsen says, 「assuming the link text is colored, it』s not always absolutely necessary to underline it」, butit is always necessary to emphasize links in some way.

根據需求展示鏈接 (也稱為: 懸停（Hover）)

顯示或者隱藏鏈接需要用戶將滑鼠懸停在文本上才可以看到相關的樣式。雖然這使網站看起來更簡潔，但也帶來了一些顯著的缺陷。沒有藍色文字顏色或者下劃線，用戶被迫需要尋找鏈接，導致減少了鏈接的交互。觸摸屏設備還有個問題：移動端用戶無法懸停，也不會感謝你隱藏了它們，正如Hoa Loranger在她的NNGroup文章中的建議，「永遠不要讓用戶依靠『滑鼠懸停』來確定文本是否可點擊。人們不會花太多時間和精力來尋找鏈接的」。

色彩覆蓋 (也稱為：鏈接裝飾)

基於Hoa的建議，顯示鏈接的存在是必要的。但是，它必須是標準的藍色，下劃線的鏈接嗎？安迪·羅特里奇（Andy Rutledge）討論了下劃線的一些小眾的替代方案，例如「各種邊框類型/位置/配置，背景顏色/圖片，甚至不太可取的裝飾，如橫穿線（line-through）。」雖然這些可能會產生有趣的結果，並且可以適應某些品牌標識，但設計師必須考慮這種選擇的可讀性影響。