如何利用微動畫提高網站使用者參與度

所謂微動（Micro-Animation），就是那些微妙而實用的動畫，讓您的網站感覺精緻、直觀、生動。

因為即使你的文案再精煉，頁面載入再迅速，一個不能對使用者操作做出反應的網站仍然會讓人感覺笨拙和冰冷。微動畫可以填補這些空白。它們引導。讓人放心。它們創造出令人愉悅的瞬間，讓人難以忘懷。

將它們視為使用者體驗（UX）中的 “靜態 MVP”–小細節產生大影響。

讓我們來分析一下這些微小的視覺提示是如何發揮它們的作用的，以及如何在不把網站變成花裡胡哨的主題公園的情況下開始使用它們。

什麼是微動畫？

微動畫（Micro-Animation）是有目的的小動畫，是幫助你的介面與使用者使用相同語言交流的小動畫。它們通常持續不到一秒鐘，如果使用得當，會讓一切感覺更流暢、更智慧、更人性化。

例子包括

• 點選按鈕時的輕微反彈
• 將滑鼠懸停在選單項上時的平滑過渡
• 完成表單時令人滿意的微微擺動
• 模式視窗出現時完美的小俯衝

想一想，如果沒有這些觸覺和視覺反饋，在 Instagram 上“心動”的感覺會是多麼令人失望：

Source: Behance

微動畫在移動裝置上尤為強大，因為移動裝置空間狹小，每一次觸控都很重要。這裡一個微小的跳動，那裡一個平滑的漸變，都能幫助使用者到達他們想去的地方，而無需再猜疑。

微動畫的心理學原理（以及它們如何改善使用者體驗）

我們的大腦天生就會注意動作。這是進化的結果。運動可能意味著 “食物”、“危險 ”或 “潛在配偶”。

微動畫透過以下方式利用了我們大腦的這一原始部分：

• 提供反饋 – 有反應的按鈕點選讓人感覺它在做什麼（因為它確實在做什麼）。
• 讓人感覺更快 – 即使是一個短暫的載入動畫，也能在內容跟上的同時為你贏得好感。
• 減少混亂 – 動畫可以巧妙地將注意力引導到需要的地方。
• 建立信任 – 複選標記或進度條等視覺化確認效果的方式會起到很大作用。
• 增加愉悅感 – 一個小而巧妙的動畫可以讓你的網站更難忘，讓你的品牌更可愛。

微動畫介於毫無生氣的圖示和佔用頻寬的影片之間。靜態視覺效果？靜態視覺效果？影片？華而不實。微動畫？它們是“黃金搭檔”–足夠 的動作讓人感覺生動，但又不會拖慢載入時間。

如果你曾被蘋果公司網站上的產品所吸引，微動畫功不可沒：

Source: Medium

研究發現，人們識別動畫元素的速度比識別靜態元素的速度快 60%，這充分說明了動態元素是如何吸引注意力和傳遞資訊的。

這些令人愉悅的微小元素的商業價值同樣令人信服：

• 據 34.5% 的營銷人員稱，他們在網站上花費的平均時間顯著增加。
• 27.5%的營銷人員表示，動畫提高了點選率。
• 在 19% 的案例中，營銷人員認為動畫大大提高了轉化率。

在哪些地方使用微動畫（不添麻煩）

1. 按鈕反饋

最令人沮喪的莫過於點選一個按鈕，卻不知道網站是否記錄了你絕望的互動請求。嘗試新增微妙的比例或顏色變化。

Source: Creative Navy

2. 頁面過渡

讓頁面之間的移動感覺像絲綢，而不是砂紙。0.3 秒的淡入淡出就能讓你的網站給人一種奢華的感覺，但這是為了你的眼球。

Source: Microsoft Learn

3. 載入指示器

如果你的網站載入某些內容的時間超過兩秒（順便說一下，解決這個問題），至少在我等待的時候給我點娛樂。一個有創意的載入動畫可以減少多達 30% 的等待時間。

Source: xjw on Dribbble

4. 表單驗證

與其用憤怒的紅色文字告訴使用者他們搞砸了，不如輕輕晃動輸入框來告訴他們。這就像在說 “再試一次”，只不過用的是爵士手。或者用亮綠色的複選標記告訴使用者他們做得很好！

Source: LottieFiles

3個妙趣橫生的微動畫真實案例

讓我們具體說說。以下五個微動畫讓我忍不住想對著螢幕拍手叫好。

1. Apple導航選單

將滑鼠懸停在蘋果公司的巨型選單上，觀察元素是如何以輕微的交錯效果淡入的。這種效果非常流暢，快如閃電。這並非偶然；動畫巧妙地引導你的視線穿過產品層級，同時讓你感覺到優質的體驗。

2. Spicy Margarita巨無霸動畫

一進入 Spicy Margarita，醒目的排版就以動畫的形式出現，與品牌的聲音相得益彰。青檸片在跳動，鹽在搖晃，整個畫面個性十足。它流暢、有力，時機把握得恰到好處，在給人留下響亮的第一印象的同時，又保持了簡潔和控制。

Source: Spicy Margarita

3. Fenty Beauty老虎機動畫

Fenty 主頁以一個俏皮的、賭場風格的產品卷軸迎接你的到來，卷軸旋轉和著陸時都會產生令人滿意的反彈。它大膽、有力，讓人無法忽視–完全符合促銷活動的品牌形象。這個動作增添了緊迫感和活力，但又不顯得混亂，使促銷活動令人興奮，而不是喧賓奪主。

Source: Fenty Beauty

如何在網站上新增微動畫

您不需要好萊塢特效預算，也不需要擁有皮克斯履歷的開發團隊。藉助現代工具，尤其是低程式碼和無程式碼工具，你可以新增如奶油般柔滑的動態效果，而無需接觸任何 JavaScript 程式碼（除非你真的想這樣做）。

第 1 步：選擇一個互動

從一些顯而易見的互動開始：按鈕懸停、CTA 點選或載入旋轉器。你不是在重塑主頁，而是在重要的地方進行修飾。

第 2 步：選擇合適的工具

無論你是想拖放還是手工微調程式碼，總有一款工具適合你。

以下是一份快速入門指南，幫助你找到適合自己的工具。

• 嘗試使用 CSS 實現簡單效果：從懸停動畫開始，讓按鈕或連結具有互動性。它速度快、重量輕，而且到處都支援。
• 使用 GreenSock Animation Platform (GSAP) 製作高階特效：GSAP 為製作高效、高效能的自定義動畫提供了多功能工具，使其成為複雜互動的熱門選擇。
• 嘗試使用 Lottie 製作可縮放的向量動畫：Lottie 支援基於向量的動畫，可在不同裝置上保持動畫質量，是圖示和入職元素的完美選擇。

如果你想了解全貌，這裡有一份小抄。

第 3 步：測試

你的動畫在 MacBook 上可能看起來很流暢，但在手機上感覺如何？速度快嗎？是有幫助，還是隻是跳著玩兒？

如果你在實現動畫創意時需要幫助，我們才華橫溢的開發團隊可以在不破壞你的品牌或網站的情況下幫助你實現動畫創意。

第 4 步：沖洗、完善、重複

當您完成一個出色的互動後，再加入另一個互動。也許是滾動觸發的內容顯示。也許是對提交表單的一點反饋。慢慢積累。不是所有的事情都需要動作，但正確的時刻？它們會讓人印象深刻。

你要做的是昇華，而不是過度烹飪。

微動畫的最佳實踐

最好的微動畫是隱形的。與其說你注意到了它們，不如說你感受到了它們。這就是我們的目標。

但是，在平滑的小漸變或小反彈的背後，是一些嚴肅的意圖。

1. 把握時機

快速動畫（約 150-300 毫秒）是使用者介面反饋的最佳效果。想想按鈕點選或表單驗證。

谷歌的 Material UI 指南指出，150-400ms 之間的動畫會讓使用者感覺流暢，而更長或更短的動畫則會讓使用者感覺遲鈍，難以理解。

無論如何，都要保持一致。不穩定的動畫速度會讓網站感覺混亂。

2. 讓每個人都能訪問

建立一種包容性的體驗是很重要的。以下是如何讓所有使用者都能友好地使用微動畫的方法。

• 尊重“減少運動”設定：如果有人對運動敏感，那麼就用漸變來提供更簡單的體驗，而不是動作繁重的過渡。
• 使用高對比度：確保動畫元素清晰突出，尤其是對於有視覺障礙的使用者。
• 不要只依賴顏色：色盲使用者可能會錯過細微的過渡效果。在使用顏色的同時，也要使用形狀、標籤或圖案。
• 檢查對比度：動畫文字和圖示的對比度至少要達到 4.5:1。使用對比度檢查器等工具進行測試。
• 支援螢幕閱讀器：使用 Wave 或 Axe 等工具確認動畫不會絆倒輔助技術。
• 新增描述性工具提示或音訊提示：如果螢幕上有任何移動或變化，請加以解釋–尤其是在影響使用者體驗的情況下。

3. 用心製作

每個動畫都應該回答一個問題 “為什麼這裡會有這個？如果它不能讓事情更清晰、更快速或更令人愉悅，那就刪掉它。一個好的微動畫給人的感覺是必然的，就像它本來就應該在這裡一樣。

4. 在不同裝置上進行測試

Akamai 的一項研究分析了頂級零售網站的 100 多億次訪問 ，發現即使是毫秒 也很重要。研究顯示，即使頁面瀏覽時間超過三秒，顧客也會選擇其他地方，如果超過三秒，超過一半的顧客會離開。

在筆記型電腦上感覺如絲般順滑的動畫，在中檔安卓系統上可能會抖動。在不同的裝置、瀏覽器和連線速度上進行測試，確保體驗在任何地方都能保持。

這就是所謂的響應式設計。

5. 為高風險行為提供即時反饋

在交易量大的頁面上，微動畫才能真正發揮作用。想想電子商務結賬、預訂平臺、訂閱註冊、捐贈流程或任何客戶提交付款或個人資訊的地方。

提交表單後的複選標記或商品進入購物車時令人滿意的跳動都會告訴使用者：“是的，成功了”。

這種微小的確認會建立信任，並防止重複點選、憤怒重新整理或使用者沮喪–所有這些都會扼殺你的轉化率。

6. 保持一致性

使用設計系統或動畫庫來統一整個網站的動作。一個按鈕在一個頁面上滑動，而在另一個頁面上漸變？這不是個性，而是混亂。

小結

微動畫證明了細節的重要性。它們讓你的產品看起來美觀，感覺正確。一個網站能在恰當的時刻作出反應、讓人安心、讓人愉悅？這不是華而不實，而是偉大的產品設計。

從按鈕開始。新增一個表單。加入滾動動畫。然後，不斷改進。因為一旦你開始關注這些小事，你的使用者也會關注，而且他們會因此而流連忘返。