打造網頁觸覺互動：用 Lottie 兼顧設計美感與手機效能

當您在規劃企業官網或品牌行銷活動時，是否也想加入一些有趣的互動動畫，讓顧客忍不住多滑幾下？許多品牌會希望網頁有「觸感」，像是點擊時有彈性的回饋。但要在兼顧設計美感與手機載入速度的前提下，該選擇什麼技術？本文將透過一個「數位捏捏樂」的實際案例，帶您了解如何用最適合的工具，打造兼顧手感與效能的網頁互動體驗。

放棄物理引擎，找回設計師的「刻意設計」

當工程師接到需要「彈性、破壞感」的網頁互動需求時，直覺通常是使用物理引擎（一種能模擬真實世界物理碰撞的程式工具，如 Matter.js 或 WebGL）。物理引擎能產生合理的運動，但缺點是動畫軌跡難以預測。

如果設計師已經精心繪製了每一幀的動畫，希望使用者點擊時能呈現「刻意設計」的反應，物理引擎反而會破壞這些細節。因此，在製作「Stress Release」這個數位捏捏樂網頁時，團隊放棄了物理引擎，改採用 Lottie（一種基於 JSON 的輕量級向量動畫格式）來實現完全由設計師主導的互動控制。

用數學與 Lottie 打造精準的「觸覺回饋」

要讓網頁點擊有真實的「手感」，關鍵在於精準的回饋。團隊利用簡單的數學計算與 Lottie 的原生 API（應用程式介面，即軟體內建的操控指令）來達成：

• 距離計算：系統會計算使用者點擊的位置與角色中心的距離。點擊越靠近中心，得分越高，爆炸動畫的特效也越強烈，營造出類似飛鏢靶的同心圓得分機制。
• 動畫分段控制：Lottie 可以將動畫切割成不同區段（如：待機、輕捏、中捏、重捏）。當系統偵測到點擊，就會精準跳到對應的動畫區段播放，確保每一次互動都完美還原設計師的初衷。

兼顧手機效能與畫面流暢的 4 大優化策略

豐富的動畫往往伴隨著檔案過大的問題，特別是手機使用者的網路環境與裝置效能有限。為了讓體驗順暢，團隊採取了以下策略：

• 連線監控：偵測使用者的初始網路速度，若載入時間過長則進行相應處理。
• 順序載入：不要一次載入所有動畫，而是分批、成對地載入，避免癱瘓低階手機的瀏覽器。
• 動態記憶體管理：將不需要的爆炸特效動畫即時銷毀與重建，減少手機的記憶體負擔。
• 動態調整畫質：在需要同時顯示多個角色的「展示架」畫面，將 Lottie 畫質降至 50% 並降低播放速度；而在單一角色的「遊玩」畫面，則恢復 100% 高畫質。

崴米的建議

• 讓設計需求決定技術選擇：在規劃網站互動時，不要盲目追求最新的物理引擎或 3D 技術。如果重點是呈現設計師精心繪製的動畫，Lottie 會是更輕量且精準的選擇。
• 重視行動裝置的效能優化：再精美的動畫，如果讓手機使用者卡頓也是枉然。建議在開發初期就將「動態載入」與「畫質分級」納入規劃，確保跨裝置的流暢體驗。
• 善用微互動提升品牌印象：不需要開發複雜的遊戲，只要在按鈕點擊、表單送出等細節加入 Lottie 動畫，就能大幅提升網站的質感與使用者的停留時間。

參考來源：Building Tactile UX: Honoring Intentional Design With Lottie