【Samshing專欄】利用下畫線提升用戶體驗

(本文由Adobe友情贊助) 下畫線即是那些位于文本下方的水平線。在日常生活中，我們通過下畫線來表示對關鍵內容的強調，比如在書本上劃重點。但在數字化設計領域中，下畫線有著特定的作用。事實上，文字帶有下畫線已成為我們在線體驗中最常見、最易辨認的功能之一。我們自然而然地就將網頁中帶有下畫線的單詞或句子與超鏈接聯系起來。

在這篇文章中，我將對下畫線的概念做出解釋并提供一些應用下畫線來提升網站體驗的方法。

在互聯網出現之前我們就開始對文字進行下畫線標記了。平面設計師們就曾經使用下畫線來強調某一部分內容的重要性，如圖1所示。

圖1 在互聯網出現之前我們就開始對文字進行下畫線標記了（圖片來源: Marcin Wichary）

在我們周邊的環境中也能看到下畫線，如圖2所示。

圖2 在警示信息的路牌中使用下畫線標注 (圖片來源: Tyler B)

不過，因為下畫線可能會分散用戶的注意力，所以當代的設計師們很少再使用下畫線來表示強調了。

1991年Tim Berners-Lee最初提出萬維網（World Wide Web***①***）概念的時候，他指出“萬維網由文檔和超鏈接構成”。從那時起，超鏈接就成為我們在線體驗的基本元素，整個網絡都使用超鏈接相互關聯。 最早的網頁設計師們能夠使用的工具確實有限——只有簡單的字體和有限的顏色(彩色顯示器只能顯示16種顏色，其中大多還是黑白兩色)。為了讓早期的互聯網用戶判斷網頁中哪些內容是重要的，利用設計的差異來強調“超鏈接”就很必要了。最簡單的解決辦法就是加下畫線。此后，下畫線就成為了HTML超鏈接的標配。盡管在之后的30年中，設計師們也嘗試過種種其它的樣式來表示超鏈接，但下畫線仍然受到許多網頁設計師的青睞。如圖3所示。

圖3 帶有下畫線的藍色超鏈接文本是最廣為人知的網頁設計慣例之一(圖片來源：Cern)

（1）熟悉度(Familiarity) 下畫線是最廣為人知的網頁設計慣例之一。下畫線給用戶提供了強烈的“可點擊”的既視感——絕大多數用戶都明白帶有下畫線的文本是一個超鏈接。

（2）可觀察性(Scanability) 文本帶有下畫線是很顯眼的視覺提示，確保了超鏈接在用戶掃讀文字時的可見性。在我們垂直瀏覽網頁時，任何水平線段都能夠強勢擠進我們的視線中。所以在用戶快速掃讀網頁的時候，下畫線能夠引導用戶關注重要的信息。

（3）可觸達性(Accessibility) 如果只是采用顏色來標識可點擊元素的話，部分用戶(如色盲群體)可能沒辦法辨識超鏈接的存在。根據《Web內容無障礙指南 (WCAG) 2.0》中所述，對含有潛在操作的視覺標識不能僅采用顏色進行區分。如果你希望網站具有高觸達性，就應該增加其它的視覺線索來標識超鏈接，而下畫線無疑是個不錯的選擇。

盡管存在種種優勢，但下畫線也在某些方面降低了用戶體驗。

（1）易讀性(Readability) 下畫線對注意力的抓取在用戶泛讀的時候會很有幫助，但卻會影響網頁內容的易讀性。來自漢堡大學的研究表明，下畫線對文本的易讀性有著不利的影響。這個研究結果告誡我們：如果我們希望用戶去深度理解網頁的內容，就請避免使用下畫線。

（2）美觀(Aesthetics) 下畫線通常意味著在文本內容和整體設計中加入了視覺干擾。充斥著下畫線的文本段落很容易帶給用戶凌亂的體驗。

在我們真正開始講述如何設計完美的下畫線之前，先來明確一下什么是完美的下畫線：我們希望設計出可見性高但又不突兀的下畫線。用戶能夠理解帶下畫線的內容是可交互的——即當他們看到它的時候就能夠明白這是個超鏈接，但是這部分內容又不會太突出以至于妨礙了用戶的閱讀。

（1）不要在非超鏈接文本中使用下畫線 不要對非超鏈接文本標識下畫線(即使網站中所有的超鏈接都沒有用下畫線也一樣)。下畫線給用戶強烈的可點擊感，因此如果網站中帶有下畫線的內容不能被點擊，就很容易造成用戶的困惑和沮喪。如果你需要強調某些特定內容的話，那么使用斜體或加粗會是更加保險的做法。

（2）保持簡短 盡量保持超鏈接文本的簡短，3~5個英文單詞的長度為宜。更長的話就會使文本顯得凌亂。

（3）確保錨文本具有意義 錨文本指那些帶有下畫線的可點擊文字。它們應該是描述性的——即用戶應該能夠預測他們點擊超鏈接時將會得到怎樣的內容。因此，避免使用 “點擊這里”之類的錨文本，因為它們不僅沒有提到超鏈接背后的內容，還會迫使用戶搜尋更多的信息用以判斷超鏈接打開之后是什么。另外，對于使用屏幕閱讀器***②***瀏覽網站的用戶而言，“點擊這里”之類的超鏈接也大大降低了網站的可觸達性：大多數屏幕閱讀器在閱讀超鏈接之前會加上“超鏈接”3個字。例如，JAWS閱讀器就會把“汽車”的超鏈接讀作“超鏈接：汽車”。因此我們大概也能想象到JAWS閱讀器會將“點擊這里”的超鏈接讀作“超鏈接：點擊這里”，這是完全沒有意義的。

谷歌公司在《Google 搜索引擎優化入門指南》中指出：在超鏈接文本開頭部分利用單詞來預示超鏈接所導向的目標網頁是至關重要的。如圖4所示。

圖4 “點擊這里”本身是完全無意義的，圖中第二個超鏈接就告知了用戶當他們點擊的時候會看到帶有什么內容的網頁

（4）保持超鏈接設計的一致性 一致性對于教育用戶理解網站中哪些內容是超鏈接十分關鍵。網站中的超鏈接文本不應該出現有的使用了下畫線標識、有的沒有使用下畫線標識這種情況。在不同的頁面中使用不同的視覺標識很容易造成用戶的困惑。我們應該選擇一種超鏈接的設計模式，然后忠誠于它。

設計一致性的重要性不僅針對小型網站而言。例如，CNN網站的不同模塊中對超鏈接的設計就沒有保持一致。CNN時尚采用了下畫線作為超鏈接的標識，如圖5所示。

圖5 文章中所有的超鏈接都用下畫線標識(例如文中的“David de Rueda”)

然而，CNN體育則使用了顏色來標識超鏈接，如圖6所示。

圖6 文章中所有的超鏈接使用不同的顏色進行區分(例如藍色字體的“READ: Inside the Kodokan -- judo's spiritual home”)

（5）避免下行字符沖突 除了文本凌亂外，下行字符沖突可能是下畫線最嚴重的問題。這種沖突指的是下畫線和超鏈接文本的下行字符出現了重疊 (如小寫字母p、g、j、y 和q)。重疊使得文本看起來擁擠而丑陋，同時也降低了文本的可讀性，如圖7所示。

圖7 下畫線遮擋了字母y、g和p，降低了易讀性

設計得當的下畫線應該是低于文本基線并且跳過下行字符的。如圖8所示，隱去某些字符下的下畫線不僅提升了文本的易讀性，還能讓文本看上去更加精致。

圖8 Adobe XD中對下畫線應用的示例：下畫線并不會遮擋或接觸下行字符

我們怎么能夠防止下行字符沖突呢？網頁中的超鏈接風格是由CSS語言text-decoration: underline默認設置的。但遺憾的是，這一默認設置通常沒有考慮到下行字符沖突。

最簡單的解決辦法就是在編寫網頁時使用CSS屬性text-decoration-skip進行設置。 它能指定文本修飾(text-decoraction)應跳過哪些元素內容。它能夠控制任何由元素以及它的父類繪制的裝飾線。

需要注意的是，并不是所有的瀏覽器都支持text-decoration-skip屬性。如果你的文本在有下畫線的情況下比較難辨認，那么就不得不尋找替代的方式了(比如CSS指令box-shadow)。

注意：在2017年11月8日，text-decoration-skip被更名/替換為text-decoration-skip-ink，Chrome64 中將它的初始值設為auto。如圖9所示。

圖9 如果你使用的瀏覽器支持text-decoration-skip屬性，那么你就能看到帶有下畫線的下行字符（比如y和p）周圍都留有一些空白

顏色是設計師手中的強有力的工具。它們也能夠用于區分超鏈接文本和普通文本。但在應用時仍需要考慮一些問題：

（1）避免對非交互式文本著色 盡量只對超鏈接文本進行著色，否則用戶很容易將帶有顏色的文本誤認為是可交互的超鏈接。

（2）超鏈接應該用藍色嗎？ 不一定。可用性專家Jakob Nielsen說過“藍色的文本確實傳遞著強烈的超鏈接信號，但其它的顏色效果其實也差不多”。盡管如此，在我們能夠自由決定超鏈接文本顏色的時候，藍色通常仍然是最佳選擇。因為它能夠提供最為強烈的可點擊感——用戶從慣常的超鏈接使用“藍色和下畫線”中所習得的經驗。而且相對于其它顏色，藍色還有一個明顯的優勢：對于有色覺障礙的用戶最具辨識度(紅/綠色盲的用戶都能看到它)。

小貼士：因為藍色文本最容易讓用戶認為是可以點擊的文本，所以即使你不打算用藍色作為超鏈接顏色，也不要在非超鏈接文本上使用它。不可點擊的藍色文本很容易讓用戶產生沮喪感。

（3）使用不同的顏色標識已訪問和未訪問的超鏈接 利用視覺線索區分已訪問和未訪問的超鏈能夠幫助用戶記憶其瀏覽過的內容，使用戶旅程更加輕松。用于區分的兩種顏色應該是同一顏色的不同色階，這樣能夠增強它們之間的關聯度。未訪問超鏈接的顏色應該更飽和，而已訪問的超鏈接的顏色則應該偏黯淡，如圖10所示。

圖10 使用不同的顏色標識已訪問和未訪問的超鏈接

（4）不要對整個列表的超鏈接使用下畫線 對于一個全是超鏈接文本的列表，應避免使用下畫線。在這種情況下，網站的布局已經清晰地表明了這部分文本內容的功能。如圖11所示。

圖11 沒必要對全是超鏈接文本的列表進行下畫線標識 (圖片來源: wiseGEEK)

現在，幾乎50%的網站用戶訪問都來自于移動設備。對網站設計師而言，有針對性地優化移動端體驗是第一要務。

（1）避免在App中使用下畫線 不要在手機App中使用下畫線。帶有下畫線的超鏈接是網頁的標配，但并不適用于App產品。App中應該使用的是按鈕而不是超鏈接。如圖12所示。

圖12 TD Bank的iOS版本，使用了下畫線

（2）確保超鏈接夠大 使用手指去點擊超鏈接是能讓人抓狂的，尤其是在用戶不能精準點擊而不得不放大網頁進行操作的時候。在觸摸屏上，部件的尺寸非常關鍵。我們需要盡量保證可交互元素的尺寸是易于查看和使用的。

互聯網由無盡的超鏈接構成。在可用性的經典書籍《Don't Make Me Think（中譯名：點石成金:訪客至上的Web和移動可用性設計秘笈）》中Steve Krug寫到：“大多數用戶在網頁上做的事情就是尋找下一個可點擊的內容，所以將可點擊與不可點擊的內容進行明顯的區分是很重要的”。優秀的視覺設計對用戶旅程至關重要。而盡管下畫線有著其自身的缺陷，但它仍然是超鏈接最直觀的標識之一。用戶能夠輕易地找到帶有下畫線的超鏈接文本，并理解其可交互性。

———————————————————— ① 亦作“WWW”，萬維網并不等同互聯網，萬維網只是互聯網所能提供的服務之一，是靠著互聯網運行的一項服務。——譯者注

② 一般用于盲人用戶。——譯者注

相關文章 “Crafting Link Underlines on Medium,” Marcin Wichary, Medium “Styling Underlines on the Web,” John Jameson, CSS-Tricks 本文是Adobe所贊助的UX設計系列中的一篇。Adobe XD是專為敏捷和靈活的用戶體驗設計流程而開發的工具，它能夠幫助從概念到原型的快速轉化。Adobe XD同時支持設計、原型制作和分享功能。你可以在Behance上找到更多使用Adobe XD創作的優秀作品，并訂閱Adobe experience design newsletter以便隨時了解最前沿的UX/UI設計趨勢和思想。

本文由Smashing Magazine獨家授權異步社區發布簡體中文版。版權所有 禁止轉載或建立鏡像。

By Nick Babich

翻譯：Ivan

審校：貓貓DE爪

終審：YING

本文轉載自異步社區

Web應用防火墻 WAF

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。