2025-7-26 杰睿
讓我們看看一些 UI 動畫從優(yōu)秀到卓越的示例。只需稍加調(diào)整，您就可以通過動畫提升您的 UI 模式。列出的交互顯示了狀態(tài)之間的連續(xù)性，指示了共享元素之間的關(guān)系，并提醒用戶注意他們應該注意并采取行動的內(nèi)容。
為了創(chuàng)建這些動畫，我遵循了Material Motion、IBM 的動畫原則和運動宣言中的 UX 的指導方針。
所有交互均使用InVision Studio的早期版本完成。您可以在此處下載源文件。
在設計類似標簽頁或彈出菜單的交互時，請嘗試將內(nèi)容的位置與打開它的操作關(guān)聯(lián)起來。這樣，您不僅可以為內(nèi)容的可見性添加動畫，還可以為位置添加動畫。對了，還可以添加一個滑動手勢，方便您在內(nèi)容之間切換。
在不同狀態(tài)之間創(chuàng)建動畫時，請檢查它們之間是否存在共享元素并將它們連接起來。使用 InVision Studio，創(chuàng)建Motion過渡時，兩個鏈接屏幕之間重復出現(xiàn)的組件會自動連接。這使得動畫原型設計變得輕而易舉。
請參閱“運動宣言”，了解您可以應用的動畫類型。上面的示例結(jié)合使用了“蒙版”、“變換”、“父級”和“緩和”原則。
要實現(xiàn)瀑布效果，請嘗試對每個內(nèi)容片段或內(nèi)容組應用延遲。保持相同的緩動和時長，以保持一致的效果。但不要將每個小元素都層疊起來，而是要為每組內(nèi)容添加動畫效果。動畫要保持快速流暢。Google 建議每個元素的起始間隔不超過 20 毫秒。查看Material Motion 中的編排原理，查看更多示例。
讓內(nèi)容中的元素感知周圍環(huán)境。這意味著讓內(nèi)容吸引或排斥周圍的元素。更多示例，請查看Material Design的感知動效原則。
嘗試使用按鈕容器來提供狀態(tài)的視覺反饋。例如，您可以用旋轉(zhuǎn)動畫或加載動畫替換 CTA；或者在背景中添加動畫來顯示進度。解決方案由您決定，其核心在于充分利用用戶正在交互的空間。如果您使用按鈕顏色和文案來確認成功狀態(tài)，則可以獲得加分。
當用戶需要執(zhí)行重要操作時，嘗試使用動畫來吸引他們的注意力。先從細微的動畫開始，然后根據(jù)操作的重要性逐漸增加強度（例如大小、顏色和速度的變化）。只在關(guān)鍵操作中使用這種效果——這種效果用得越多，效果就越差……用戶也會越煩躁。
我希望這些示例能幫助您在為交互添加動畫時做出更好的決策。借助 InVision Studio 等新的動畫和原型設計工具，我預測我們很快就會看到創(chuàng)意交互的復興。我們只需記住要負責任地使用這項新的超能力。
讓我們運用動畫來解釋狀態(tài)的變化，吸引用戶對必要操作的注意力，明確元素之間的關(guān)系，并為產(chǎn)品增添趣味和個性。遵循這些原則，我們將使動畫從優(yōu)秀走向卓越。