細思極恐，不為人知的超連結文字 你敢說你真的了解超連結嗎？
身為 UIUX 設計師，多少都要設計超連結文字的樣式，但在設計前你需要理解它的使用場景與概念
想快速知道重點的人，可以直接看 ➡️ 結論 喔！
🔗 超連結文字（Hyperlink），一個在網頁上非常常見的元素，甚至你可能忽略過他就因為他是看起來如此的平凡又不起眼，他所含有的意義，其實遠比你想像的還要深
首先先跟大家分享一個概念：
如果文字並非連結，請不要使用底線
可能有些人會想「為什麼？我就想用 底線 來表示重點的部分不行嗎？」
於是我決定先跟大家分享個鬼故事:
👆 光靠肉眼，你能夠區分哪些是 underline text，哪些是 hyperlink 嗎？
一般來說人會把帶有底線的文字視為超連結，但是如果今天網頁上有除了超連結以外的文字加上底線，使用者往往會不自覺地認為該文字為超連結而點擊若點擊完卻沒有反應，這時我們就會懷疑到底是不是連結壞掉了？還是這根本就不是一個連結？此時用戶的感受就是困惑＋不信任，導致用戶體驗變差
好的，在正式開始設計超連結前，讓我們先了解超連結的起源：
▍超連結的歷史
最早提供超連結文字概念的人就是著名的英國科學家：提姆·柏納·李（Tim Berners-Lee），同時也是發明全球資訊網（World Wide Web，俗稱WWW）的互聯網之父。如果你問 柏納·李 先生 為何使用 藍色 + 底線 作為超連結樣式時，其實主要是受限於當時的電腦顯示器：16 位元顯示器 以及 單色顯示器
考慮到這 2 種顯示器，使用藍色是因為他是最接近黑色，卻也能夠在單色顯示器的情況，可被用戶辨認的顏色；加上底線則是因為若無色彩補助時，需要讓超連結文字能夠被使用者一眼認出，提示可操作性，所以一併加上底線。
而這個概念也沿用至今，影響了現在很多的網頁或是設計軟體的預設的超連結都是使用 藍色 + 底線 的樣式。所以累積到現在，幾乎所有使用過網站服務的用戶都能理解這樣的文字設計為超連結
那麼，怎樣算是體驗良好的超連結呢？
▍超連結的文字
（一）超連結文字不宜過長
一般來說，超連結的文字並沒有限定字數。連結文字只要能夠清楚代表使用者的搜尋意圖，讓用戶了解點擊後的去處，符合這樣的格式後無論長短都是可行的。只是常規來說，盡量以精簡的描述為主。至於為什麼，稍後在 ➡️ 超連結的 UX 概念 裡會提到
以行銷/UX為面向時，我們可以考慮到：
使用什麼樣的文字才可以增加使用者點擊？
該怎麼描述連結到達的網頁（網站）？
（二）避免使用點擊我、了解更多等等曖昧不明的文字設定為超連結
取而代之，具體說出連結的目的：像是了解什麼是正確的坐姿、詳細的設計工具懶人包 才是真正比較能讓用戶第一眼不透過連結也能吸引眼球注意的連結標題
如果連結文字使用過多的泛用語，Google 無法辨認文字的含義，將對 SEO 有負面的影響
（三）連結的文字應與內文有高關聯性
連結文字可以是 錨點文字（Anchor Text）的其中一個類型
如果不知道什麼是錨點文字，請參考：➡️ 錨點文字基礎概念整理
想像如果今天連結的文字是寫「台灣美食專區」，但點擊後通往的頁面卻是不相干的網站，那用戶會有多無言？且在 Google 強大的搜尋引擎之下，Google 是可以透過解析網站內容而確認該連結是不是與錨點文字相符的。當錨點文字與連結的關聯性低時，會影響到網站的 SEO
※ 這邊的內文不是點擊連結後到達的網頁，而是放置錨點文字的內容頁本身
了解文字對超連結的重要性之後，我們可以開始想像，超連結該設計成什麼樣子…等等，你說超連結不就是 藍色 + 底線的組合？聰明的你其實可以這樣做！👇
▍超連結的樣式
（一）底線的存在是為了增加誘因來點擊
有些時候設計師會有目的性的移除底線。像是減少用戶點擊機率（不重要的資訊）、美觀性、特定的元件（導覽列的菜單）…等
但如果該連結設計目的是 吸引用戶點擊，考慮到用戶可能不會移動鼠標來檢視是否有連結存在，還是需要一個可被誘導點擊的微提示。所以該情況還是建議將底線保留，以便使用者立即察覺連結的存在
（二）底線有可能會降低易讀性與易用性
才剛說完要使用底線，怎麼又馬上打臉自己了呢 XD?
根據 2003 年的 ➡️ 這篇論文，當帶有底線的超連結重複出現時，會因為顯示密度的關係而顯得看起來難以閱讀；且如果超連結相鄰非常近的話，更是雪上加霜
Hypertext with a high density of links becomes poorly readable, and overlapping links are hardly realizable, as the beginning and end of link markers cannot be visualized properly
此外，「g」「p」「j」「q」等等的英文，因為本身長度的關係而造成與底線重疊。所以在使用底線時，可能要考慮到視覺的呈現方式，利用 css code 在 bottom 到文字之間加上 2–3px 的距離
目前市面的瀏覽器，預設英文都會保留一點 padding 在底線與文字之間。除了中文目前預設都還是會碰觸到底線了解 CSS 底線設定：➡️ CSS的text-decoration屬性
（三）超連結顏色可自訂
超連結文字預設為藍色。不過設計師可自訂顏色樣式，可視網站的需求來使用主色或是補助色
但如果沒有其他更好的選項，使用藍色是最保險的，原因上文有解釋過：有極多用戶已經具有辨認藍色文字為超連結的認知
（四）設計未點擊過跟已點擊過的超連結樣式
設計 Visited（已點擊）的超連結狀態時，連結顏色應和未點擊過的有所區別。已點擊的顏色可以加深飽和度跟暗度，讓使用者感覺到「此連結已點擊過」
但是不要使用差異過大的顏色來表示已點擊/未點擊。像如果使用 紫色 + 橘色 ，可能會導致用戶無法透過色彩辨識關聯性，分不出什麼才是真正點擊過的超連結
（五）多數情況下沒有必要增加 Hover 變色效果在超連結上
咦？老實說筆者自己也是因為深入了解後才知道，原來很常時候我們設計滑鼠在 Hover 超連結時變色，其實是會導致用戶視覺疲勞的。另外也不要使用粗體字來當作 Hover 效果（可能會讓文字不對齊）
可以替代的做法是：
- 如果預設是沒有加底線的連結，Hover 時候加上底線
- 定義連結標題，提示用戶連結的資料敘述或是將導向的網頁
（六）若設計的導向為 mobile-first，可考慮連結使用Button而非超連結文字
超連結的目的是為了讓使用者點擊後可以進入到其關聯的頁面；而按鈕的目的是促使用戶點擊來進行動作或是改變狀態。按鈕比較像是「行動」和「狀態改變」，有別於超連結是「引導用戶前往其他頁面」。
建議使用 Button 取代連結還有一個主要原因，就是按鈕通常要比連結更為明顯，可以增加點擊率，且可點擊範圍可以更廣、更有彈性。在手機裝置上相對容易使用
🎉 恭喜你應該對超連結有更深的了解了！最後，分享一下 UX 在超連結的概念：
▍超連結的 UX 概念
（一）使用者會快速掃視辨認連結用途
當閱讀文章時，使用者並不會真的一個字一個字的閱讀內容，而是快速的掃視關鍵詞，眼球會進入高速的運動狀態。此時「F式佈局」的視覺結構就相對重要，因為「由左至右」和「由右至左」的閱讀方向不同，用戶會無意識的遺漏反向的內容。
所以在設計連結文字時，為讓使用者快速理解，最好在最少字數內向用戶清楚表達連結意圖
（二）在網頁上超連結設計的一致性
根據十大易用性原則(10 Heuristics for User Interface Design)，網站上的元素最好都帶有一定的相似性及易學性。當然也包括超連結的樣式
盡可能地減少用戶的認知負擔，讓人們快速理解並嘗試使用，即是設計師們的職責所在
（三）色盲者友善設計
上文有說到，底線是可以依照情況加上或是移除。但如果今天網站上的連結顏色為 紅色或是 綠色，對色盲者而言是無法分辨出顏色的。此時加上底線可以提示色盲者連結的存在
▍總結
設計超連結需要考慮以下特徵：
【非連結文字，不宜使用底線來強調內容】【文字】
1. 連結文字需精簡到位，不宜過長
2. 文字需要明確的描述連結
3. 符合用戶期待，到達頁面要與連結敘述的文字要有關聯性【樣式】
1. 底線可增加用戶點擊機會
2. 底線可能導致易讀性降低，使用 bottom_padding 讓文字不與底線牴觸
3. 超連結顏色可自訂，藍色是最保險的
4. 設計未點擊過跟已點擊過的超連結樣式，提升感知
5. Hover 變色效果在超連結時可能導致視覺疲勞
6. 若以 mobile-first 為主要設計導向，連結多用 Button【UX】
1. 使用者會快速掃視辨認連結用途
2. 避免設計太多不同的連結樣式
3. 考慮到色盲群眾，加上底線較為合適。且不宜使用紅色或綠色為連結文字顏色
參考網站
謝謝閱讀到這裡的你們！如果喜歡我的文章的話，可以幫我拍拍手👏👏👏📌 拍手 1-10 下：謝謝分享～
📌 拍手 11-25 下：很不錯！
📌 拍手 26-35 下：優質好文，期待下一篇
📌 拍手 36-50 下：超級實用！快點再出其他文章呀～～另外，也可以留言或寫信跟我分享意見或是推薦我其他主題唷！
也可以直接訂閱我，不定期會更新文章來回饋朋友們📬
