在網站建設、網頁設計、APP中我們會經常用到動動態效果設計，一個功能完備的動效不僅要足夠微妙有趣，而且應當清晰且具有合乎邏輯的目的。動效的存在不僅降低了用戶的認知負荷，溝通不同的環節，建立更為有效的信息和交互流程。但是更為重要的是，真正優秀的動效能讓界面變得栩栩如生。

通過讓元素在形態上進行疊加、分割、延伸、形變，動效讓界面給人以更為真實、更加“物理”的質感。流暢順滑的動效幫用戶聯通起上下文，闡釋界面元素之間的關系，強化UI的層次感，消解環節與環節之間的沖突，緩解加載和過渡中的等待。

接下來，我們分析和總結一下成功的動效的六個基本特征：

1、響應

視覺反饋在界面中的作用無疑是重要的。對于用戶而言，想要確認信息的欲望是一種生物本能，在現實生活中，按鈕、控制面板等對象會對我們的操作給予反饋，那么用戶面對界面中類似的東西的時候，會有相似的期望。

所以，UI應當精準而快速的針對用戶的交互作出響應，只有這樣用戶才能將他們的操作、交互和控件的變化、效果聯系到一起，形成回路。當他們清楚的知道什么樣的操作會帶來什么樣的反饋，他們會覺得非常爽的。

2、關聯

動效要能將新創建的界面和觸發它們的操作或者控件關聯到一起。產生關聯的邏輯關系能幫用戶理解界面中的變化是如何產生的。

下面我們看看兩個菜單動效的設計案例。

第一個案例中，點擊菜單按鈕之后，菜單從遠離按鈕的地方伸展出來，這樣用戶的輸入和觸發的結果在物理距離上被割裂開了。

第二個案例中，菜單是從按鈕旁邊開始伸展開來的，距離上的關系讓用用戶清晰的知道是他們的點擊觸發了菜單出現的結果。

另外一個案例則是音樂播放器的按鈕動效設計。“播放”和“暫停”可能是最常見的按鈕設計，而這個典型的Material Design 風格的按鈕動效設計中，點擊“播放”按鈕，動效過渡，“暫停”按鈕出現，色彩和動效讓兩者之間呈現出因果關聯，流暢而非間斷。

平滑的過渡不僅讓兩者的功能呈現了出來，而且強化了兩者的邏輯關系。

3、自然

好的動效設計應當盡量避免突兀的轉變。動效中的每一個動作都應當從現實世界中獲取靈感。最簡單的一點，現實世界中物體的加速和減速都會受到重量、慣性和摩擦力的影響，類似的，在動效設計中，瞬間的啟動和停止是不合規律的。