網頁設計如何讓你的微動畫更具吸引力

微動畫造就大不同，為什么更多的設計師不使用微動畫呢？是的，微動畫確實很普遍——事實上，它們無處不在。然而，這些動畫中的許多要么太無聊要么太瘋狂而無法完成任何事情。這個問題是可以理解的；在樂趣和功能之間取得平衡是非常困難的。但這并不意味著問題無法解決。讓我們重申為什么微動畫如此重要，然后探索如何使它們變得更好。

什么是微動畫？

微動畫是將界面或設計元素聯系在一起的小動作。它們在網站和應用程序中都有無數用途，對設計師來說是無價的。當您切換開關時，會出現微動畫的最簡單示例之一。

圓圈不是立即從“關閉”切換到“開啟”，而是向右滑動，條形改變顏色。這種視覺反饋是一個微動畫。

雖然這些術語經常互換使用，但微動畫與微交互略有不同。微交互作用與觸發器啟動一個襯托的指令的列表，并提供視覺反饋。可以將其視為嵌入在較大流程的單個步驟中的小型輸入輸出機器。撥動開關是輸入，小動畫是輸出。整個開關切換步驟是一個微交互，而視覺提示是微動畫。區別可能很小，但很重要。你的界面可能有精心設計的微交互，但有設計糟糕的微動畫。了解差異是做出正確改變的關鍵一步。

為什么需要微動畫

創造焦點

設計師的工作是通過設計、界面或圖形來吸引用戶的注意力并引導它。雖然構建視覺層次結構的策略數不勝數，但微動畫簡化了這項任務。它們對于使原本靜態的圖形變得生動起來特別有用。從我們在自定義和半自定義網站上的帖子中獲取這張無動畫的特征圖像。

圖像本身經過精心設計，并遵循設計、色彩理論和構圖的基本原則。但是，這是帶有一些微動畫的相同圖像。

圖像仍然基本相同，但運動使它看起來更有趣。插圖幾乎似乎與觀眾一起呼吸。因此，我們使用后一個動畫版本作為最終帖子的特色圖片。

微型動畫也不需要那么復雜。更簡單的動畫，例如我們的移動應用程序開發頁面上的動畫，可以吸引您的注意力而不會妨礙您。

使用具有不同復雜程度的動畫創建強大的視覺層次結構，引導用戶瀏覽應用程序或網站。

改進導航

由于微動畫可以引導用戶的視線穿過頁面，它們還可以向用戶顯示下一步要采取的步驟。即使頁面設計盡可能簡單，動作也會闡明用戶需要做什么才能正確使用應用程序或網站。例如，當你點擊這個漢堡菜單時，它會變成一個 X。

這樣，您會立即知道再次單擊該圖標會關閉菜單。

提供反饋

運動向用戶傳達重要信息。最明顯的例子是加載圖標或進度條。它表示頁面正在加載，而不是凍結。

然而，微動畫也可以提供更微妙的反饋。例如，當用戶將光標拖到按鈕上時，大小和顏色的變化表明當您單擊它時會發生某些事情。

這種反饋不像加載圖標那么明顯，但它非常重要。看看沒有任何微動畫的同一個按鈕。

這是因為動畫反饋表明因果關系，這對于良好的 UI/UX 設計至關重要。在任何時候，用戶都應該了解他們的行為會發生什么，而微動畫是關鍵。

什么才是好的微動畫？

并非所有的微動畫都是一樣的。但是，通過始終牢記一些關鍵因素，您可以輕松地將好的動畫變成出色的動畫。

簡單

微型動畫應該增加清晰度，但如果您被帶走，它們只會使您的界面混亂。事實上，過于復雜的動畫比有用更讓人分心和煩人。保持你的動畫微妙和雅致。根據經驗，超過半秒的動畫可能太復雜了。然而，總有例外。警惕過于復雜的微動畫。

功能

永遠不要為了添加動畫而添加動畫。單個動畫中的每一個微小動作都應服務于功能目的或傳達某種形式的信息。當光標懸停在按鈕上時，不要讓按鈕旋轉；那毫無意義。這里有一個提示：問問自己“如果沒有這個動作，我的界面是否更清晰？” 在完成任何動畫之前。如果界面在沒有額外動作的情況下更清晰，則它無法提供足夠清晰的功能。

以用戶為中心

UX 總是從用戶開始，以體驗結束。未能專注于用戶的設計師也無法創建引人注目的動畫和設計。最重要的是，在為 UI/UX 設計微動畫時，優先考慮目標受眾的意見和偏好。

創造力

帶有乏味動畫的界面幾乎和完全沒有動畫的界面一樣糟糕。盡量讓你的動畫有趣而不會過火。

微型動畫將成就或破壞您的界面。雖然精心設計的動畫會給您的網站或應用程序帶來特殊的光彩，但設計不佳或缺少微動畫會使您的項目看起來令人困惑和不專業。