|
合理地?cái)U(kuò)大頁面鏈接響應(yīng)區(qū)域可以提高網(wǎng)頁的易用性。同時(shí)還要兼顧到鏈接的交互一致性以及視覺上的平衡，就需要做一些特殊的處理。
實(shí)例一：一張圖配一個(gè)鏈接。
常規(guī)的做法有以下幾種：
第一種是最常規(guī)的，只有鏈接可點(diǎn)，但整張圖不可點(diǎn)，點(diǎn)起來還蠻累的。
第二種是把整張圖作為一個(gè)鏈接，鏈接響應(yīng)區(qū)域是夠大，但其實(shí)那個(gè)鏈接就比較尷尬，不夠優(yōu)雅。
第三種是弄兩鏈接，文本鏈接之外，圖本身再配個(gè)鏈接。這個(gè)比以上兩種都好一些，但仍然不夠理想，因?yàn)閮蓚�(gè)鏈接的交互一致性不夠，用戶對(duì)點(diǎn)圖和點(diǎn)鏈接是不是去同一個(gè)地方會(huì)存在疑慮。
這樣或許會(huì)優(yōu)雅一些：
圖片可點(diǎn)，鼠標(biāo)移入圖片上，鼠標(biāo)變手型的同時(shí)文本鏈接變?yōu)閔over狀態(tài)。這樣即有足夠的鏈接響應(yīng)區(qū)域，又有很好的交互一致性，暗示用戶點(diǎn)圖和點(diǎn)鏈接去的是同一個(gè)地方，如圖所示：
前端代碼角度上，就是把鏈接a標(biāo)簽包住整個(gè)圖，那段文字用其他標(biāo)簽表示，比如span，再定義a的hover狀態(tài)下，把span變成鏈接色，并加上下劃線，來模擬hover效果。
實(shí)例二，可鏈接的標(biāo)題配一段對(duì)標(biāo)題的詳細(xì)描述。
出處：口碑網(wǎng)UED Team
責(zé)任編輯：bluehearts
上一頁 下一頁 優(yōu)雅地?cái)U(kuò)大鏈接響應(yīng)區(qū)域 [2]
|
第 1 頁 優(yōu)雅地?cái)U(kuò)大鏈接響應(yīng)區(qū)域 [1]
第 2 頁 
