點燃互動體驗!探索UI/UX Hover按鈕回應的設計趨勢與最佳實踐

文、Solis

續上一篇提到的「介面設計原則」,第二個重要的原則即是「回應」,或稱為「反應」、「反饋」

來,拿起身旁的冷氣遙控器,對著冷氣按一下開關,冷氣是開是關不重要,重要的是,你應該會聽到一聲「嗶」!

這一聲「嗶」,代表的就是冷氣回應給使用者說:我接收到你的指令了!

如果沒有這一個回應,那我們就只能觀察冷氣的其他部分像是電源指示燈、出風口葉片等,而這些其實也是一種回應,只是必須透過我們主動的觀察,跟聲音比起來,就沒那麼方便了。

日常生活中有很多使用者要跟被使用物件之間的溝通,都必須要透過回應作為訊息的交流,電梯按鈕、電源指示燈、聲音警告等等,都是一種回應的表現。

當使用者按下電梯按鈕,通常都會以按鈕背光指示燈的形式回應給使用者,萬一燈壞了,使用者也就無法知道是不是有確實按到按鈕

而在網頁上,使用者也會做動作與網頁來回溝通,最常見到就是滑鼠觸碰、點擊連結,跟送出資料三種。

滑鼠觸碰的動作我們稱為「hover」,網頁上的任何元素都可以做 hover 時的樣式變化,尤其是超連結的部分,這可以提示使用者兩件事情,一個是使用者確實碰到了這個連結元素,另一個則是提示使用者這是可以點擊的連結(大多數情況)

滑鼠未 hover狀態
滑鼠 hover狀態

而點擊連結進行頁面跳轉的時候,通常是由瀏覽器本身的功能給予回應,像是畫面變白色等待載入,或是分頁上有小圈圈轉動,這就是在告訴使用者:「頁面載入中,請稍後」

頁面跳轉回應

而送出資料的部分,就是要讓使用者知道我們確實收到資料,後續網站管理人員這邊會有專人進行下一步的動作,這部分能讓使用者清楚知道已經發生,甚至未來可能發生的事情,使其能安心並進一步進行等待。

資料送出後的回應範例

總之,正確並清楚的回應,能讓使用者在使用物件的過程中,沒有疑義,進一步就能流暢的使用該物件。

加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧!

不同頻道,不同知識!

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料