合理地擴大頁面鏈接響應區域可以提高網頁的易用性。同時還要兼顧到鏈接的交互一致性以及視覺上的平衡,就需要做一些特殊的處理。
實例一:一張圖配一個鏈接。
常規的做法有以下幾種:
第一種是最常規的,只有鏈接可點,但整張圖不可點,點起來還蠻累的。
第二種是把整張圖作為一個鏈接,鏈接響應區域是夠大,但其實那個鏈接就比較尴尬,不夠優雅。
第三種是弄兩鏈接,文本鏈接之外,圖本身再配個鏈接。這個比以上兩種都好一些,但仍然不夠理想,因為兩個鏈接的交互一致性不夠,用戶對點圖和點鏈接是不是去同一個地方會存在疑慮。
這樣或許會優雅一些:
圖片可點,鼠標移入圖片上,鼠標變手型的同時文本鏈接變為hover狀態。這樣即有足夠的鏈接響應區域,又有很好的交互一致性,暗示用戶點圖和點鏈接去的是同一個地方,如圖所示:
前端代碼角度上,就是把鏈接a標簽包住整個圖,那段文字用其他標簽表示,比如span,再定義a的hover狀態下,把span變成鏈接色,並加上下劃線,來模擬hover效果。
實例二,可鏈接的標題配一段對標題的詳細描述。
在這個例子中,視覺角度來看,一片文字需要主次清晰,所以鏈接色只加在了標題上。那麼詳細描述部分該不該響應點擊呢?非鏈接色出hover效果會不會有點怪呢?即使決定這兒可以鏈接,那hover效果導致出現大片的hover色和多行下劃線,視覺設計師會跟你急吧。
這樣或許會優雅一些:
讓詳細描述響應點擊,同時讓hover效果出現在標題上。如圖:
還有更復雜的模塊,可以套用這個方式來做,比如下面這個例子:
另外一些說明:
1、前端代碼問題
雖然在html4中,作為inline屬性的a只能在裡面嵌套inline的標簽,可以看下XHTML1.1標簽列表、屬性和嵌套規則(抱歉未找到HTML4的,它們類似)。但在html5中,語法定義者擴大了它的嵌套能力,我們可以用a把各種block標簽統統包進來。詳見html5中對a的特別說明:http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element (感謝鎢龍提供資料)。畢竟HTML5還處於草案階段,這種嵌套方式,還是偶爾會出現一些對鏈接的浏覽器渲染問題,但目前還未發現出錯規律。
2、a標簽包含的整個區域內,只響應鏈接了,文本拷貝比較麻煩點,需要在更大范圍外進行拷貝。所以如果對拷貝文字有要求的模塊,不適合采用這個方式。
3、這個方案有個附帶的好處,因為整個模塊只要一個鏈接,如果是個手工維護的模塊,更新的時候很省事。