技術貼:一篇文章看懂連結(超連結)設計

發表於2016-04-05

定義

連結也稱為超連結,所謂的超連結是指從一個網頁指向一個目標的連線關係,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個檔案,甚至是一個應用程式。而在一個網頁中用來超連結的物件,可以是一段文字或者是一個圖片。當瀏覽者單擊已經連結的文字或圖片後,連結目標將顯示在瀏覽器上,並且根據目標的型別來開啟或執行。

樣式

連結可以是一個字或是一段字這樣的文字,也可以是一個按鈕,一張圖片,當你點選後跳轉到另一個目標,當你把滑鼠指標移到某個連結時會變成一個小手,當然在手機上沒有這一特點。

1.文字樣式的連結

文字樣式的連結一般在搜尋引擎的網站呈現藍色字樣,大多會在下面加上下劃線以便識別,不過現如今考慮到不影響文字的可讀性與使用者體驗,逐漸取消了下劃線。而在一些別的網站考慮到介面設計風格各方面的因素而不用藍色。

谷歌的文字連結是藍色,沒有下劃線
百度的文字連結也是藍色,關鍵詞是紅色,有下劃線
而京東的文字連結有灰色,有白色,有黑色

2.按鈕樣式的連結

按鈕樣式的連結比文字樣式的更容易識別,每一個按鈕都是一樣連結。

按鈕樣式連結

3.圖片樣式的連結

圖片樣式的連結可以是單獨的一張圖片,也可以是文字與按鈕一起組成一張圖片,只是滑鼠指標掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種遊戲小視窗的圖片式連結
由文字/圖/按鈕樣式一起構成的一張圖片式按鈕,滑鼠可以點選圖中任何一部位

開啟方式

連結開啟的方式有三種:第一種是在當前頁面重新整理跳轉,國外的網站大多是這樣的開啟式;第二種是在新標籤頁面開啟連結,國內大多采用這種;第三種是提示用APP開啟。當然現在出現了一種新的開啟方式,那就是二維碼掃描。

提示用美拍APP開啟

型別

按照連線路徑的不同,網頁中超連結一般分為以下3種型別:內部連結,錨點連結和外部連結。

連結還可以分為動態連結和靜態連結。動態超連結指的是可以通過改變HTML程式碼來實現動態變化的連結,例如我們可以實現將滑鼠移動到某個文字連結上,文字就會象動畫一樣動起來或改變顏色的效果,也可以實現滑鼠移到圖片上圖片就產生反色或朦朧等等的效果。而靜態連結,顧名思義,就是沒有動態效果的連結。

1.內部連結

與外部連結(即反向連結)相反,內部連結是指同一網站域名下的內容頁面之間互相連結。如頻道、欄目、終極內容頁之間的連結,乃至站內關鍵詞之間的Tag連結都可以歸類為內部連結,因此內部連結我們也可以稱之為站內連結,對內部連結的優化其實就是對網站的站內連結的優化。

2.錨點連結

HTML中的連結,正確的說法應該稱作”錨點”,它命名錨點連結(也叫書籤連結)常常用於那些內容龐大繁瑣的網頁,通過點選命名錨點,不僅讓我們能指向文件,還能指向頁面裡的特定段落,更能當作”精準連結”的便利工具,讓連結物件接近焦點。便於瀏覽者檢視網頁內容。類似於我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時,標記錨點是最佳的方法。

3.外部連結

外部連結,又常被稱為:“反向連結”或“匯入連結”,是指通過其他網站連結到你的網站的連結。

外部連結指的是針對搜尋引擎,與其它站點所做的友情連結。高質量的外部連結指:和你的網站建立連結的網站知名度高,訪問量大,同時相對的外部連結較少,有助於快速提升你的網站知名度和排名的其他網站的友情連結。

如果按照使用物件的不同,網頁中的連結又可以分為:文字超連結,影象超連結,E-mail連結,錨點連結,多媒體檔案連結,空連結等。

連結是一種物件,它以特殊編碼的文字或圖形的形式來實現連結,如果單擊該連結,則相當於指示瀏覽器移至同一網頁內的某個位置,或開啟一個新的網頁,或開啟某一個新的WWW網站中的網頁。

連結狀態

連結在互動上一般會呈現4種狀態,即預設狀態/懸停時狀態/點選時狀態/點選後狀態。比如谷哥網站的互動體驗。如下圖:

點選前
懸停時,下面浮現半透明線條
點選時,有波紋暈開的動態效果

 

點選後,下面線條粗

有時候是3種狀態,比如百度網和知乎應用:

預設狀態
點選時連結變紅
點選後連結變成紫色

IOS系統知乎應用的3種狀態,而在Android系統沒有用力點選這一狀態。

墨認狀態

 

點選狀態
用力點選會彈出預覽小視窗

有些時候只有2種狀態,如下圖谷歌網:

預設和點選後狀態一樣
滑鼠懸停時出現下劃線
預設狀態
點選時

而有時候比如在APP裡有時候就一直只有一種狀態,也可以稱靜態連結,之前的可以稱之為動態連結。在不同的使用場景會因為當時的情況選擇最合適的互動體驗設計。有的情況下還會加上點選的音效,使使用者體驗更暢快,這在移動端用的使用情況多一些。

總之連結是網頁不可缺少的構成部分,每一個連結的呈現都是經過深思熟慮的。

相關文章