通過動畫 UX 微交互提升您的電子商務之旅

當應用於整個電子商務體驗時，動畫微交互會傳達系統進度、提高用戶滿意度並提高轉化率。 當用戶與 UI 組件（例如菜單或按鈕）交互時，這些微妙的運動效果可提供快​​速的視覺反饋，旨在提高可查找性並指導用戶在電子商務頁面之間導航。 除了幫助用戶查找和購買產品外，他們還可以培養導致回頭客的習慣循環。

儘管它們在電子商務渠道中很重要，但動畫微交互並不需要特別花哨。 自 2016 年以來一直是 Toptal 網絡成員的 UX 設計師 Alexandre Brito 表示，即使是簡單的動畫效果（如滾動條、下拉刷新和滑動）也可以幫助創建直觀的數字購物體驗。

電子商務銷售漏斗中的動畫 UX 微交互

電子商務銷售漏斗有四個常見步驟——主頁、類別頁面、產品頁面和結帳——引導用戶從公司的初始價值主張到購買。 在每個步驟中，都會顯示更多信息。 動畫微交互有助於這一發現之旅。 例如，電子商務主頁上的搜索框可能會在用戶懸停或點擊時通過展開來表示交互性； 然後它可能會在用戶鍵入搜索查詢時顯示動畫自動建議。

“許多電子商務 UI 元素的功能可以從微交互中受益，以便吸引客戶並提供重要信息，”產品設計師兼 Toptal 網絡成員 Rashni Parichha 說。 “例如，當用戶將商品添加到他們的購物車時，按比例縮小和放入購物車的微交互使這個動作感覺更真實，就好像用戶在實體店購物一樣，”她說。 “體驗越真實，用戶與產品之間的聯繫越深，重複訪問該網站的可能性就越大。”

電子商務主頁

數字購物者的注意力範圍越來越小，對複雜的用戶界面幾乎沒有耐心。 主頁設計選擇，例如導航，需要具有戰略性以吸引用戶的注意力。 動畫可以使下拉菜單更具吸引力並加強產品分類，使用戶更容易找到商品並降低掉線率。

Rashni 解釋說，組織大量信息的動畫有助於更直觀的設計，這反過來又有助於吸引用戶的注意力。

視差滾動是一種強大的動畫技術，用於建立主頁內容的視覺層次，例如產品照片、描述和類別。 當用戶向下滾動主頁時，內容會以不同的間隔和速度出現，模仿現實世界的視差，並作為一種漸進式的披露形式，使用戶更容易掃描和消化屏幕上的信息。

電子商務分類頁面

直接面向消費者的網站使用類別頁面來展示單一產品的多種變體（例如該健身器材製造商網站上的槓鈴），而電子商務市場使用類別頁面來展示銷售類似產品的眾多品牌（例如 ASOS 的“襯衫”頁面，其中包含來自不同零售品牌的服裝）。

成功的類別頁面允許用戶在挖掘更多細節之前快速掃描他們的選項。 為了加快產品發現過程（並節省移動設備空間），許多電子商務網站在其類別頁面上使用圖像輪播。 宜家的“快速查看”功能允許快速瀏覽網站最受歡迎的類別——節省用戶時間和點擊次數。

研究表明，自動輪播讓用戶感到沮喪，因為快速移動可能會分散注意力。 相比之下，手動輪播（如宜家的）允許用戶單擊或滑動圖像，而讓用戶控制其 UI 的動畫微交互已被證明可以增加頁面停留時間和轉化次數。

為了獲得最佳的圖像輪播體驗，Rashni 建議專注於平滑過渡和直觀導航：

1. 平滑、連續的滑動微交互有助於創造與物理對象自然交互的錯覺。 幻燈片動畫開頭的預期和結尾的跟進將有助於確保您的過渡是無縫的。 預期是主要動作序列（圖像輪播中的左/右滑動動畫）之前的動作。 這種與主要動作相反方向的短暫動作有助於建立動力和興奮。 同樣，follow through 是跟隨運動序列的細微運動，這有助於使動畫看起來更逼真。

2. 導航應該易於識別。 點或箭頭控件可幫助用戶識別如何在圖像輪播中移動。 箭頭應顯示方向性。 默認情況下，點應為空心並填充以強調當前圖像。

電子商務產品頁面

產品頁面都是關於幫助用戶執行與轉換相關的操作，例如選擇項目樣式和數量、將產品添加到購物車或為喜歡的項目添加書籤。 這些行動中的每一個都必須通過反饋進行驗證。

例如，電子零售商 Etsy 有一個心形圖標，允許用戶將商品添加到他們的收藏夾中。 單擊或點擊後，生成的動畫會將之前無色的心變成紅色。 儘管這看起來微不足道，但這種互動時刻通過確認輸入和傳達品牌個性來提高用戶滿意度。

此外，當界面使用動畫效果之類的視覺提示來識別用戶動作時，用戶會對轉到下一個任務充滿信心。

電子商務結帳頁面

最好的結賬流程被設計為無摩擦：亞馬遜用戶可以通過一鍵“立即購買”按鈕快速跟踪付款。 但結帳也是用戶在輸入購買所需的個人信息時需要額外指導的時候。

進度步進器將購買信息分解為可消化的塊，例如登錄、交付和計費詳細信息。 向步進器添加動畫微交互可提供視覺反饋，指導和激勵用戶完成結帳過程。 例如，當用戶在支付表單字段中輸入數據時，動畫進度步進器可能會顯示一條從一個步驟（由圓圈表示）到下一個步驟的行。 這種效果會在用戶接近購買目標時為他們提供持續的反饋。

設計動畫電子商務微交互的最佳實踐

動畫微交互由四部分組成：觸發器、規則、反饋、循環和模式。 除了了解它們的基本結構之外，在為電子商務平台設計動畫微交互時，還需要考慮幾個最佳實踐。

創建一個誘人的習慣循環

習慣循環是理解反動行為的框架。 它由提示、例行程序和獎勵組成。 由於人們回到愉快的活動中，許多電子商務網站提供鼓勵重複行動的獎勵，例如結賬後提供的儲蓄代碼以誘使未來購買。

此外，當我們遇到新的和令人興奮的事情時，我們的大腦會釋放多巴胺，從而產生尋求獎勵的循環。 動畫微交互有助於創造這些發現和愉悅的時刻，形成促進互動和持續參與的習慣循環。 例如，當用戶將商品添加到購物車或願望清單（提示）時，Etsy 引入了一個動畫通知圖標。 當用戶點擊圖標（例程）時，他們會發現相關的優惠和折扣（獎勵）。

保持動畫功能

功能性動畫微交互提供了簡單的視覺提示，可加快銷售漏斗中的許多流程。 例如，在結帳期間，鼠標單擊時的淡入淡出效果將清除輸入字段的佔位符文本並向用戶發出他們可以開始寫作的信號。

但是，如果用戶單擊該字段並且佔位符沒有返回，那麼如果他們無法回憶起佔位符讀取的內容，他們可能會感到沮喪。 微交互不需要注意，但必須以不影響用戶體驗的方式實施。 Brito 強調動畫“應該補充用戶體驗，而不是從中竊取焦點”。

產品設計師 Muhammad Junaid 自 2020 年以來一直是 Toptal 網絡的成員，他重申微交互應該有明確的目的，並避免分散用戶的注意力。 “在電子商務網站上，它們應該推動轉化，而不僅僅是提供審美價值。 多餘的動畫會導致認知超載和購物車遺棄。”

每個操作使用一個微交互

UI 組件，例如號召性用語按鈕和購物車圖標，在各個電子商務網站中反復出現。 但是，分配給這些組件的動畫微交互應該是不同且一致的。 假設在類別頁面圖像輪播中向左或向右滑動觸發了動畫產品照片的出現：產品頁面圖像輪播應該使用相同的交互組合（以匹配用戶的心理模型），但不能用於“增加商品數量”鈕扣。

從設計的角度來看，動畫微交互為創造性決策引入了一層複雜性。 Motion 使 UI 組件具有傳達意義的獨特角色特徵，並且很難在整個電子商務網站上設計和實現具有凝聚力的動畫風格。 幸運的是，您不必為每個電子商務組件添加動作：我們創建了一個信息圖，將高影響力的微交互可視化，以便在電子商務銷售漏斗的每個步驟中進行動畫處理。

充分利用電子商務的動畫微交互

動畫微交互是電子商務設計的一個重要方面，它可以提高參與度，使 UI 設計功能更加直觀和信息豐富，並有助於將休閒購物者轉變為回頭客。 通過牢記最佳實踐和專家見解，您可以避免多餘的運動效果並設計可轉換的動畫微交互。

進一步閱讀 Toptal 設計博客

• 電子商務網站設計終極指南
• 通知設計綜合指南
• 引人注目和感動：運動設計原則指南