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

什么是微動(dòng)畫？

微動(dòng)畫是將界面或設(shè)計(jì)元素聯(lián)系在一起的小動(dòng)作。它們在網(wǎng)站和應(yīng)用程序中都有無數(shù)用途，對設(shè)計(jì)師來說是無價(jià)的。當(dāng)您切換開關(guān)時(shí)，會(huì)出現(xiàn)微動(dòng)畫的最簡單示例之一。

圓圈不是立即從“關(guān)閉”切換到“開啟”，而是向右滑動(dòng)，條形改變顏色。這種視覺反饋是一個(gè)微動(dòng)畫。

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

為什么需要微動(dòng)畫

創(chuàng)造焦點(diǎn)

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

圖像本身經(jīng)過精心設(shè)計(jì)，并遵循設(shè)計(jì)、色彩理論和構(gòu)圖的基本原則。但是，這是帶有一些微動(dòng)畫的相同圖像。

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

微型動(dòng)畫也不需要那么復(fù)雜。更簡單的動(dòng)畫，例如我們的移動(dòng)應(yīng)用程序開發(fā)頁面上的動(dòng)畫，可以吸引您的注意力而不會(huì)妨礙您。

使用具有不同復(fù)雜程度的動(dòng)畫創(chuàng)建強(qiáng)大的視覺層次結(jié)構(gòu)，引導(dǎo)用戶瀏覽應(yīng)用程序或網(wǎng)站。

改進(jìn)導(dǎo)航

由于微動(dòng)畫可以引導(dǎo)用戶的視線穿過頁面，它們還可以向用戶顯示下一步要采取的步驟。即使頁面設(shè)計(jì)盡可能簡單，動(dòng)作也會(huì)闡明用戶需要做什么才能正確使用應(yīng)用程序或網(wǎng)站。例如，當(dāng)你點(diǎn)擊這個(gè)漢堡菜單時(shí)，它會(huì)變成一個(gè) X。

這樣，您會(huì)立即知道再次單擊該圖標(biāo)會(huì)關(guān)閉菜單。

提供反饋

運(yùn)動(dòng)向用戶傳達(dá)重要信息。最明顯的例子是加載圖標(biāo)或進(jìn)度條。它表示頁面正在加載，而不是凍結(jié)。

然而，微動(dòng)畫也可以提供更微妙的反饋。例如，當(dāng)用戶將光標(biāo)拖到按鈕上時(shí)，大小和顏色的變化表明當(dāng)您單擊它時(shí)會(huì)發(fā)生某些事情。

這種反饋不像加載圖標(biāo)那么明顯，但它非常重要。看看沒有任何微動(dòng)畫的同一個(gè)按鈕。

這是因?yàn)閯?dòng)畫反饋表明因果關(guān)系，這對于良好的 UI/UX 設(shè)計(jì)至關(guān)重要。在任何時(shí)候，用戶都應(yīng)該了解他們的行為會(huì)發(fā)生什么，而微動(dòng)畫是關(guān)鍵。

什么才是好的微動(dòng)畫？

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

簡單

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

功能

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

以用戶為中心

UX 總是從用戶開始，以體驗(yàn)結(jié)束。未能專注于用戶的設(shè)計(jì)師也無法創(chuàng)建引人注目的動(dòng)畫和設(shè)計(jì)。最重要的是，在為 UI/UX 設(shè)計(jì)微動(dòng)畫時(shí)，優(yōu)先考慮目標(biāo)受眾的意見和偏好。

創(chuàng)造力

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

微型動(dòng)畫將成就或破壞您的界面。雖然精心設(shè)計(jì)的動(dòng)畫會(huì)給您的網(wǎng)站或應(yīng)用程序帶來特殊的光彩，但設(shè)計(jì)不佳或缺少微動(dòng)畫會(huì)使您的項(xiàng)目看起來令人困惑和不專業(yè)。