Website design : Microinteraction

網站設計的「微互動」應用


越來越多的網站設計運用「微互動」(microinteraction)來增添網頁的生動和趣味性。

雖然「微互動」可能看起來像是網站上微不足道的細節,但事實上,它們是用戶體驗中極其重要的一部分。這些微小的動畫改善了瀏覽體驗,説明了某些事物的功能,並向用戶提供反饋。如果沒有它們,網站將是一個靜態且無聊的文本和圖像的集合,用戶會感覺自己只是觀察者而不是積極的參與者。

以下是Wyzowl網站提供的5個案例:


1. 速測(Speedtest)網站

速測(Speedtest)寬頻測速網站設計了一個「測速計」,讓用戶了解網路速度測試進行到什麼程度。




2. 記憶熊(RememBear)網站

記憶熊(RememBear)密碼儲存網站設計了一隻熊的吉祥物,牠會看著用戶輸入密碼,讓登入網站變得超級有趣。如果登入錯誤,牠會變成紅色;如果登入正確,牠就會變成綠色。




3. 保時捷(Porsche)網站

保時捷(Porsche)911 Carrera汽車設計了一個「汽車配置器」,可讓用戶打造完美的保時捷 - 包括式樣、顏色、車輪類型等。當用戶對車輛進行調整和更改時,汽車實際上會發生變化以反映用戶的選擇,並且價格會即時更新。



4. 卡梅倫·薩吉(Cameron Sagey)網站

卡梅倫·薩吉(Cameron Sagey)用戶體驗網站設計一個有趣的線條繪製的「火箭圖標」,當用戶點擊該圖標時,火箭就會發射出去,然後該圖標會變成黑色背景上的勾號,表示資訊已實際發送出去。




5. 加爾·希爾(Gal Shir)網站

加爾·希爾(Gal Shir)數位藝術工具網站設計了一個「下載按鈕」,讓用戶知道下載需要多長時間。當用戶點擊「下載按鈕」時,箭頭會反轉上升變成降落傘,然後緩緩下降,當下載達到 100% 時,就會到達底部,變成勾號。



(圖片來源:Wyzowl)

留言

這個網誌中的熱門文章

《傑出廣告影片305》Chopard : " CAROLINE'S COUTURE - Fashion Show 2026 "

《傑出廣告影片306》Puma : " Deviate Pure "

《傑出廣告影片304》Christian Dior : " Miss Dior, A Story of Love and Perfume "

《傑出廣告影片307》Zanussi : " ZANUSSI "

《傑出廣告影片301》Uber : " oder aber Uber (2) Just a bit further "